jQuery学习笔记（三）

jQuery中的事件

页面加载

原生DOM中的事件具有页面加载的内容onload事件，在jQuery中同样提供了对应的内容ready()函数。

ready与onload之间的区别：

onload	ready
没有简写方式	具有简写方式
当HTML页面所有内容加载完毕后才执行onload	当DOM节点加载完毕后就执行ready
一个HTML页面只能编写一个onload	一个HTML页面允许同时编写多个ready

ready()的编写方式：

$(document).ready(function(){});
$().ready(function(){});
$(function(){});

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>onload事件机制</title>

       <script src="js库/jquery-1.11.3.js"></script>

       <script>

           /*

         window.onload = function(){

             var user = document.getElementById("user");

         }*/

         /*$(document).ready(function(){

             console.log($("#user").val());

         });*/

         /*$().ready(function(){

             console.log($("#user").val());

         });*/

         $(function(){

             console.log($("#user").val());

         });

       </script>

 </head>

 <body>

       <input type="text" id="user" value="张无忌">

 </body>

 </html>

事件绑定

jQuery中提供了事件绑定与解绑机制，类似于原生DOM中的addEventListener()方法。

jQuery的事件绑定：

单事件绑定

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>012_实现伸缩二级菜单</title>

     <script src="js库/jquery-1.11.3.js"></script>

     <style>

         li {

             list-style: none;

         }

         li span {

             padding-left: 20px;

             cursor: pointer;

         }

         .open {

             background: url("img/minus.png") no-repeat center left;

         }

         .closed {

             background: url("img/add.png") no-repeat center left;

         }

         .show {

             display: block;

         }

         .hide {

             display: none;

         }

     </style>

 </head>

 <body>

     <ul class="tree">

         <li>

             <span class="open">考勤管理</span>

             <ul class="show">

                 <li>日常考勤</li>

                 <li>请假申请</li>

                 <li>加班/出差</li>

             </ul>

         </li>

         <li>

             <span class="closed">信息中心</span>

             <ul class="hide">

                 <li>通知公告</li>

                 <li>公司新闻</li>

                 <li>规章制度</li>

             </ul>

         </li>

         <li>

             <span class="closed">协同办公</span>

             <ul class="hide">

                 <li>公文流转</li>

                 <li>文件中心</li>

                 <li>内部邮件</li>

                 <li>即时通信</li>

                 <li>短信提醒</li>

             </ul>

         </li>

     </ul>

     <script>

         $("span").click(function(){

             if($(this).hasClass("open")){

                 $(this).attr("class", "closed");

                 $(this).next().attr("class", "hide");

             }else{

                 $(this).attr("class", "open");

                 $(this).next().attr("class", "show");

             }

         });

     </script>

 </body>

 </html>

多事件绑定

 <!DOCTYPE html>

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title>015_图片提示</title>

     <!--   引入jQuery -->

     <script src="js库/jquery-1.11.3.js" type="text/javascript"></script>

     <style type="text/css">

         body {

             margin: 0;

             padding: 40px;

             background: #fff;

             font: 80% Arial, Helvetica, sans-serif;

             color: #555;

             line-height: 180%;

         }

         img {

             border: none;

         }

         ul, li {

             margin: 0;

             padding: 0;

         }

         li {

             list-style: none;

             float: left;

             display: inline;

             margin-right: 10px;

             border: 1px solid #AAAAAA;

         }

         /* tooltip */

         #tooltip {

             position: absolute;

             border: 1px solid #ccc;

             background: #333;

             padding: 2px;

             display: none;

             color: #fff;

         }

     </style>

 </head>

 <body>

     <h3>有效果：</h3>

     <ul>

         <li><a href="img/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod"><img src="img/apple_1.jpg" alt="苹果 iPod"/></a></li>

         <li><a href="img/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano"><img src="img/apple_2.jpg" alt="苹果 iPod nano"/></a></li>

         <li><a href="img/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone"><img src="img/apple_3.jpg" alt="苹果 iPhone"/></a></li>

         <li><a href="img/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="img/apple_4.jpg" alt="苹果 Mac"/></a>

         </li>

     </ul>

     <script type="text/javascript">

         var x = 10, y = 20, title;

         $("ul>li>a[class=tooltip]").mouseover(function(event){

             title = this.title;

             this.title = '';

             // 获取大图片的文件路径

             var src = this.href;

             // 创建用于显示大图片的元素

             var $div = $("<div id='tooltip'><img src='" + src + "'><br>" + title + "</div>");

             // 添加到页面中

             $("body").append($div);

             // 调整位置 -- 鼠标坐标值

             $("#tooltip").css({

                 "top": event.pageY + y,

                 "left": event.pageX + x

             }).show();

         }).mousemove(function(event){

              $("#tooltip").css({

                 "top": event.pageY + y,

                 "left": event.pageX + x

             });

         }).mouseout(function(){

             this.title = title;

             $("#tooltip").remove();

         });

     </script>

 </body>

 </html>

事件对象

什么是事件对象

事件是一种JavaScript结构，它会在元素获得处理事件的机会时被传递给被调用的事件处理程序。这个对象中包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。

事件对象的常用属性

srcElement/target : 事件源对象
eventPhase : 事件所处的传播阶段
clientX/offsetX/pageX/screenX/x：事件发生的X坐标
clientY/offsetY/pageY/screenY/y：事件发生的Y坐标
which/keyCode/charCode : 键盘事件中按下的按键
button：鼠标哪个按键被按下了
cancelBubble ：是否取消事件冒泡
returnValue : 是否阻止事件默认行为

阻止默认行为

所谓默认行为，就是指页面中默认具有的一些行为，例如表单提交、连接跳转等效果。

event.preventDefault();
return false;

与其他JS库共存

第一种方式

 /*

   * 先引入其他JS库,后引入jQuery

   * * "$"符号属于其他JS库

   * 解决冲突

   * * jQuery中 - "$"符号指代jQuery

   * * jQuery中不再使用"$"符号

   */

 jQuery(document).ready(function(){

     console.log("this is ready.");

 });

第二种方式

 jQuery(document).ready(function($){

     // 在当前函数中使用"$"符号 - jQuery

 });

 // "$"符号 - 其他JS库

第三种方式

 (function($){

     // "$"符号 - jQuery

 })(jQuery);

 // "$"符号 - 其他JS库

第四种方式

jQuery.noConflict();

jQuery(function($){

    console.log($("p").text());

});

第五种方式

 jQuery.noConflict();

 (function($){

     console.log($("p").text());

 })(jQuery);

jQuery学习笔记（三）的更多相关文章

jquery学习笔记(三)：事件和应用
内容来自[汇智网]jquery学习课程 3.1 页面加载事件在jQuery中页面加载事件是ready().ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DO ...
jQuery学习笔记三
使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...
初步学习jquery学习笔记（三）
jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...
jQuery学习笔记（一）：入门
jQuery学习笔记(一):入门一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...
JQuery学习笔记——层级选择器
JQuery学习笔记--层级选择器上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器和并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...
jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定源码地址: https ...

随机推荐

C++知识点总结（三）
1.字符串查找字符函数strchr strchr函数原型:extern char*strchr(const char *s,char c); 功能:查找字符数组s中首次出现字符c的位置说明:返回首次 ...
关于android 数据库查询出现 _id column do not exist 的处理
查询的字段必须带上_id字段,否则就会出现此类异常,导致程序崩溃
Unity堆内存优化
unity中减少堆内存分配以减少垃圾回收处理:只有局部变量且为值类值的变量是从stack栈中分配内存,其它所有情况都是从heap堆中分配内在.* 缓存获取到的数据.* 频繁被调用的函数中尽量少的分配空 ...
使用showOptionDialog显示多项选择框
-----------------siwuxie095 工程名:TestJOptionPane 包名:com.siwuxie095.showdi ...
R: 导入 csv 文件，导出到csv文件，；绘图后导出为图片、pdf等
################################################### 问题:导入 csv 文件如何从csv文件中导入数据,?参数怎么设置?常用参数模板是啥? 解决方 ...
redis学习总结2
redis配置文件说明:以下这篇文章已经说明的很明白了.感谢~ http://blog.sina.com.cn/s/blog_636415010101970j.html
JDK1.8的安装与卸载
Java的下载地址: https://www.java.com/zh_CN/download/ 下载完成后打开进入界面: 点击下一步, 上面也无需更改,也可自定义设置安装路径, 再次确认安装路径,点击 ...
MongoDB--副本集基本信息【面试必备】
副本集的概念副本集是一组服务器,其中有一个是主服务器(primary),用于处理客户端请求:还有多个备份服务器(secondary),用于保存主服务器的数据副本.如果主服务器崩溃了,备份服务器会自动 ...
用SQL数据库做多表关联应怎样设计库结构20170527
http://77857.blog.51cto.com/67857/143872/ 多表关联的话表之间必须得存在关系才行呢,这样建立外键约束就行了, 关系表中插入主表的主键做外键. 假设表1学生表st ...
Python-OpenCV中的图像模糊
目录 1. 高斯模糊:cv2.GaussianBlur() 主要记录Python-OpenCV中的图像模糊操作: 1. 高斯模糊:cv2.GaussianBlur() def GaussianBl ...