前言
学习jquery的笔记整理。主要参考了书籍《锋利的jQuery(第二版)》以及官方文档和一些视频教程。适合于了解js的DOM对象的读者阅读。该文章主要以理论知识为主，案例较少。
一、jQuery概念
jQuery是什么
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
jQuery优点
- 轻量级。jQuery 非常轻巧，采用UglifyJS
- 强大的选择器。jQuery允许开发者使用从CSS 1到CSS 3几乎所有的选择器，以及jQuery独创的高级而复杂的选择器。
- 出色的DOM操作的封装
- 可靠的事件处理机制。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery也做得非常不错
- 完善的Ajax。jQuery将所有的Ajax操作封装到一个函数
$.ajax()里，使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 - 不污染顶级变量。jQuery只建立一个名为jQuery的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权，绝对不会污染其他的对象。
- 出色的浏览器兼容性。
- 链式操作方式。jQuery 中最有特色的莫过于它的链式操作方式—即对发生在同一个jQuery 对象上的一组动作，可以直接连写而无需重复获取对象。
- 隐性迭代特性。当用jQuery找到带有“.myClass”类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，jQuery里的方法都被设计成自动操作对象集合，而不是单独的对象
- 行为层与结构层的分离。开发者可以使用jQuery选择器选中元素，然后直接给元素添加事件。
- 丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件。
- 完善的文档、开源
jQuery版本问题
1.x版本：兼容IE678
2.x版本：不兼容IE678
3.x版本：不兼容IE678
jQuery 库类型说明
- jquery.min.js ——压缩版本，适用于生产环境，去除了注释、换行、空格等，没有可读性
- jquery.js ——未压缩版，适用于学习与开发环境。易阅读
相关网站
使用步骤
//1. 引入jquery文件。你可以直接引入也可以下载后引入本地文件
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
//2. 写入口函数
<script>
//写法1
$(document).ready(function(){})
//写法2
$(function(){})
//写法3 把全局变量转化为局部变量
$(function($){})
</script>
这个时候你会发现上面的入口函数你可能没见过，下面对比下js与jq的入口函数你就会明白了：
- jq的入口函数：
$(function(){}) - js的入口函数：
window.onload=function()1. js必须等待网页中所有内容加载完毕后才执行（包括图片）；jq只需在DOM结构绘制完毕后就可以执行，可能DOM元素关联的东西并没有加载完 2. js不能同时编写多个；jq能同时编写多个
jq对象与DOM对象
-
DOM对象：使用js的方式获取到的对象
-
jq对象：通过jq包装DOM对象后产生的对象
var obj=document.getElementById("div") var obj=$("div") -
jq对象不能调用DOM对象的方法;DOM对象也不能使用jq里的方法
$("#id").innerHTML//错 document.getElementById("id").html()//错 -
DOM对象与jq对象可以相互转换
jq对象转换为DOM对象 //方法1：通过[index] var $obj=$("#div")//---jq对象 var obj=$obj[0]//---DOM对象 //方法2：通过get（index） var $obj=$("#div")//---jq对象 var obj=$obj.get(0)//---DOM对象DOM对象转换为jq对象 //只需要用$()把DOM对象包装起来，就可以获得一个jq对象了 var obj=document.getElementById("div")//--DOM对象 var $obj=$(obj)//--jq对象 -
jq对象其实是js对象的一个集合，是一个伪数组
var li=$("li") li.setAttribute("name","hehe")//不可以这样调用，因为jq对象是一个伪数组 li[0].setAttribute("name","hehe")//成功
$的实质
- 参数是一个function———入口函数
- 把dom对象转化为jq对象
- 参数是一个字符串，用来找对象
解决jQuery和其他库的冲突
在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里。通常，全局对象都被很好地存储在jQuery命名空间里，因此当把jQuery和其他JavaScript库（例如Prototype、MooTools或YUI）一起使用时，不会引起冲突。
- jQuery库在其他库之后导入
在其他库和jQuery 库都被加载完毕后，可以在任何时候调用 jQuery.noConflict()函数来将变量$的控制权移交给其他JavaScript库。示例如下：<！一先引入其他库 一> <script src="lib/prototype.js"type="text/javascript"></script> <！一后引入jQuery 一> <script src="../../scripts/jquery.js"type="text/javascript"></script><script> jQuery.noConflict()//将变量$的控制权移交给prototype.js //此后使用jq就不用$()而是jQuery();此时$()代表的则是prototype.js </script><script> //你也可以自定义 $j=jQuery.noConflict()//此后这个$j()就相当于$() </script> - jQuery库在其他库之前导入
如果jQuery库在其他库之前就导入了，那么可以直接使用“jQuery”来做一些jQuery的工作。无需调用jQuery.noConflict()函数。<！一先引入jQuery 一> <script src="../../scripts/jquery.js"type="text/javascript"></script> <！一后引入其他库 一> <script src="lib/prototype.js"type="text/javascript"></script><script> jQuery(function(){可以直接使用JQuery了无需无需调用jQuery.noConflict()}) //此时jq用jQuery();其他库就用$() </script>
二、选择器
什么是选择器
jq选择器是jq为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。
jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。
基本选择器
$("#id")——根据id匹配$(".className")——根据类名匹配$("element")——根据标签匹配$("#id,.className,tag.className")——并集与交集$("*")——匹配所有元素
层级选择器
$("ancestor descendant")——获取ancestor里所有的descendant元素，后代选择器$("parent>child")——获取parent的子元素，自带选择器$("prev+next")——获取紧挨在prev元素后的next元素$("prev~siblings")——获取prev元素之后的所有siblings兄弟元素$("div span")//<div>里所以的<span> $("div>span")//<div>里的子<span> $("div+span")//<div>的下一个同级<span> $("div~span")//<div>的所有同级<span>
过滤选择器
基本过滤选择器
:first——选取第1个元素:last——选取最后1个元素:even——匹配索引值为偶数的元素:odd——匹配索引值为奇数的元素:eq(index)——获取指定索引值元素:gt(index)——获取大于索引值的元素:lt(index)——获取小于索引值的元素:header——获取所有标题元素:animated——获取当前正在执行动画的所有元素:focus——获取当前获取焦点的元素$("li:first")//<li>中的第一个元素 $("li:even")//选取索引值是偶数的<li> $("li:eq(2)")//选取索引值是2的<li> $(":focus")//选取当前获取焦点的元素
内容过滤选择器
:contains(text)——选取文本含有"text"的元素:empty——选取不包含子元素或者空文本的空元素:has(selector)——选取含有某选择器的元素:parent——选取包含子元素或者文本的元素$("li:contains('我')")//选取文本含有“我”的<li> $("div:empty")//选取<div>空元素 $("div:has(p)")//选取含有<p>的<div>元素 $("div:parent")//选取有子元素的<div>元素
可见过滤选择器
:hidden——选取所有不可见的元素:visible——选取所有可见的元素$(":hidden")//选取所有不可见的元素 $("div:visible")//选取<div>中所有可见元素
属性过滤选择器
[attribute]——选取含有attribute属性的元素[attribute=value]——选取属性值为value的元素[attribute!=value]——选取属性值不等于value的元素[attribute^=value]——选取属性值以value开始的元素[attribute$=value]——选取属性值以value结束的元素[attribute*=value]——选取属性值含有value的元素[attribute|=value]——选取属性值等于value或者以value为前缀的元素[attribute1][attribute2][attribute3]——获取满足多个条件的$("div[id]")//选取拥有id的<div>
子元素过滤选择器
:nth-child——可以是:nth-child(index|even|odd|3n):first-child——选父元素的第一个子元素:last-child——选父元素的最后一个子元素:only-child——如果父元素有唯一一个某个子元素，被匹配$("ul li:first-child")//<ul>中第一个子元素<li> $("ul li:only-child")//<ul>中有唯一的子元素<li>
表单对象属性选择器
$(":disabled")——匹配所有不可用元素$(":enabled")——匹配所有可用元素$(":checked")——匹配所有选中的被选中元素$(":selected")——匹配所有选中的option元素
表单选择器
$(":input")——匹配所有 input, textarea, select 和 button 元素$(":text")——匹配所有的单行文本框$(":password")——匹配所有密码框$(":radio")——匹配所有单选按钮$(":checkbox")——匹配所有复选框$(":button")——匹配所有按钮
三、调试技巧
找对象：给获取元素的$()断点看是否能获得元素
四、jQuery中的DOM操作
DOM操作的分类
-
DOM core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，例如XML。
JavaScript 中的getElmentById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
document.getElementById("id") -
HTML-DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性。
HTML-DOM的代码通常比较简短，不过它只能用来处理Web文档。
document.src -
CSS-DOM
CSS-DOM是针对 CSS的操作。在JavaScript中，CSS-DOM技术的主要作用是获取和设置style对象的各种属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
element.style.color="red"
jQuery中的DOM操作
节点相关内容可以在这里看或者在一些教程网站
1.查找节点
//以该html代码为例：
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="西瓜">西瓜</li>
<li title="橘子">橘子</li>
</ul>
查找元素节点
var li=$("ul li:eq(1)") //获取<ul>中第二个<li>节点
var li_text=li.text() //获取当前<li>节点的文本内容
console.log(li_text) //西瓜
查找属性节点
var p=$("p") //获取<p>节点
var p_text=p.attr("title") //获取当前<p>节点的title属性值
console.log(p_text) //选择你最喜欢的水果
2.创建节点
jQuery的工厂函数
$()可以创建新节点$(html)
需求：创建两个
<li>放进<ul>中
创建元素节点
var li_1=$("<li></li>");
var li_2=$("<li></li>");
$("ul").append(li_1);
$("ul").append(li_2);
//链式写法
$("ul").append(li_1).append(li_2);
创建文本节点
var li_1=$("<li>香蕉</li>");
var li_2=$("<li>雪梨</li>"); //包括元素节点和文本节点
$("ul").append(li_1).append(li_2);
创建属性节点
var li_1=$("<li title="香蕉">香蕉</li>");
var li_2=$("<li title="雪梨">雪梨</li>"); //包括元素节点和文本节点和属性节点
$("ul").append(li_1).append(li_2);
3.插入节点
其实前面已经使用到了一个插入节点的方法——append()。下面将会列举插入节点的方法
append()——给元素内部追加内容appendTo——将内容追加到指定的元素中$("<span>你好</span>").appendTo("p") //把<span>添加到<p>内 //结果：<p>一个p<span>你好</span></p>prepend()——给元素内部前置内容$("p").prepend("<span>你好</span>") //结果：<p><span>你好</span>一个p</p>prependTo()——将内容前置到指定元素中$("<span>你好</span>").prependTo("p") //结果：<p><span>你好</span>一个p</p>after()——在元素之后插入内容$("p").after("<span>你好</span>") //结果：<p>一个p</p><span>你好</span>insertAfter()——将内容添加在指定元素之后$("<span>你好</span>").insertAfter("p") //结果：<p>一个p</p><span>你好</span>before()——在元素之前插入内容$("p").before("<span>你好</span>") //结果：<span>你好</span><p>一个p</p>insertBefore()——将内容添加在指定元素之前
不仅可以做到新增元素，也可以交换元素的位置：$("<span>你好</span>").insertBefore("p") //结果：<span>你好</span><p>一个p</p>var li_second=$("ul li:eq(1)") //获取<ul>节点中的第二个<li> var li_third=$("ul li:eq(2)") //获取<ul>节点中的第三个<li> li_third.insertBefore(li_second) //移动
4.删除节点
-
remove()当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除。这个方法的返回值是一个指向已被删除的节点的引用，可以理解为自我毁灭
$("ul li:eq(1)").remove() //获取<ul>节点中的第二个<li>后删除//通过传递参数来选择性地删除元素 $("ul li").remove("li[title!=西瓜]") //删除title不为西瓜的<li> -
detach()这个方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。与 remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
-
empty()严格来讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中所有后代节点。
5.复制节点
clone()$("ul li").click(function(){ $(this).clone().appendTo("ul") //复制当前节点后追加到<ul>中 }) //当你点击苹果时，列表后会多一个苹果的<li>//以上的方法不会复制功能 //clone()方法中传递了一个参数true，若为true，复制元素的同时复制元素中所绑定的事件 $(this).clone(true).appendTo("ul") //此时复制的<li>也有复制功能
6.替换节点
假设要把<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>替换成<strong>你最不喜欢的水果是？</strong>
replaceWith()$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")replaceAll()$("<strong>你最不喜欢的水果是？</strong>").replaceAll("p")注意：替换后，原先绑定的事件将会与被替换的元素一起消失
7.包裹节点
-
wrap()$("strong").wrap("<b></b>") //用<b>包裹<strong> //结果：<b><strong>你最不喜欢的水果是？</strong></b> -
wrapAll()它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹。而它是包裹所有元素
假设有： <strong>你最不喜欢的水果是？</strong> <strong>你最不喜欢的水果是？</strong>$("strong").wrapAll("<b></b>") ------------------------------- <b> <strong>你最不喜欢的水果是？</strong> <strong>你最不喜欢的水果是？</strong> </b> -
wrapLnner()包裹元素的子内容
$("strong").wrapInner("<b></b>") //用<b>包裹<strong>中的内容 //结果：<strong><b>你最不喜欢的水果是？</b></strong>
8.属性操作
-
attr()//获取属性值 var p=$("p").attr("title")//设置属性值 $("p").attr("title","your title")//为同一个元素设置多个属性 $("p").attr({"title":"your title","name":"test"})jQuery 中的很多方法都是同一个函数实现获取（getter）和设置（setter）的，例如上面的attr()方法，既能设置元素属性的值，也能获取元素属性的值。类似的还有html()、text()、height()、width()、val()和css()等方法。
-
removeAttr()//删除属性 $("p").removeAttr("title")注意：如果元素没有指定属性将会返回
undefined，为了接受或者改变表单元素的属性如checked、selected或者disabled的属性值，需要用到prop()，即对于布尔类型的属性，最好选择用prop() -
prop()和removeProp()用法与
attr()相似，只需把方法名称替换一下即可
9.样式操作
-
获取样式和设置样式
假设有： <p class="myclass">你最喜欢的水果是？</p>//获取<p>的class var p_class=$("p").attr("class")//切换class $("p").attr("class","high") //结果：<p class="high">你最喜欢的水果是？</p> -
addClass——追加样式$("p").addClass("newclass") //结果：<p class="high newclass">你最喜欢的水果是？</p>注意:如果有不同的class设定了同一样式属性，则后者覆盖前者
-
removeClass——移除样式//删除单个 $("p").removeClass("high") //结果：<p class="newclass">你最喜欢的水果是？</p>//删除多个方式1 $("p").removeClass("high").removeClass("newClass")//删除多个方式2 $("p").removeClass("high newClass")//删除全部 $("p").removeClass() -
toggleClass()()——切换样式如果类名存在则删除它，如果类名不存在则添加它。
$("p").toggleClass("newclass")//切换前 <p class="high">你最喜欢的水果是？</p> //切换后 <p class="high newclass">你最喜欢的水果是？</p> //再次切换 <p class="high">你最喜欢的水果是？</p> -
hasClass()()判断是否含有某个样式，如果有，则返回true，否则返回false。
10.设置和获取HTML
-
html()类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容。
假设有： <p><strong>你最喜欢的水果是？</strong></p>//获取HTML内容 $("p").html() //--><strong>你最喜欢的水果是？</strong>//设置HTML内容 $("p").html("<strong>你最喜欢的水果是？</strong>")注意：html()方法可以用于XHTML文档，但不能用于XML文档。
-
text()
类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。假设有： <p><strong>你最喜欢的水果是？</strong></p>//获取元素文本 $("p").text() //-->你最喜欢的水果是？//设置元素文本 $("p").text("你最喜欢的水果是？")注意：（1）JavaScript中的innerText属性并不能在Firefox浏览器下运行，而jQuery的text()方法支持所有的浏览器。（2）text()方法对HTML文档和XML文档都有效。
-
val()类似于 JavaScript 中的value 属性，可以用来设置和获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以返回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。
假设有： <select id="single"> <option>选择1</option> <option>选择2</option> <option>选择3</option> </select> <select id="multiple" multiple> <option selected>选择1</option> <option>选择2</option> <option selected>选择3</option> </select>//改变单选下拉框的默认值 $("#single").val("选择2")//改变多选下拉框的默认值 $("#multiple").val(["选择2","选择1"])//也可以使用attr()方法来实现同样的功能。 $("#single option:eq(1)").attr(["selected","true"])
11.遍历节点
DOM树遍历
-
children()获取元素的子元素集合。只考虑子元素而不考虑其他后代元素。
$("ul").children("li") //获取ul下的子li，相当于$("ul>li") //可以不传参数，相当于全部的子元素 -
find()获取元素的后代元素集合
$("ul").find("li") //获取ul下的所有li，相当于$("ul li") //可以不传参数，相当于全部的后代元素 -
next()找下一个兄弟元素
$("li").next() //获取li后面的同级元素 -
nextAll()找后面的所有兄弟元素
$("li").nextAll() //获取li后面的所有同级元素 -
prev()找上一个兄弟元素
$("li").prev() //获取li前面的同级元素 -
siblings()找兄弟元素，不包括本身
$("#li").siblings("li") //找出id为li同级的所有li元素 //可以不传参数，相当于全部的同级元素 -
parent()查找父级元素，返回一个元素节点
-
parents()查找祖先元素，返回多个父节点
分类过滤
-
eq(index)$('li').eq(2) //获取第三个<li> -
filter(selector)$('li').filter(':even') //获取索引值为偶数的<li> -
first()$('li').first() //返回li集合中的第一个<li> -
has(selector)筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素。
$('li').has('ul') //返回后代元素有ul的li -
map(fn)通过一个函数匹配当前集合中的每个元素,产生一个包含新的jQuery对象
$(':checkbox').map(function() { return this.id; }).get() //获取所有类型为checkbox的id，转化为dom对象 -
is(表达式|obj|element|fn)根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true
$("input[type='checkbox']").parent().is("form") //判断复选框的父元素是否为form
遍历jq对象
-
each(fn(undex,element))遍历一个jQuery对象，为每个匹配元素执行一个函数
//无参数 $( "li" ).each(function() { $(this).addClass( "foo" ); }); //索引参数 $( "li" ).each(function( index ) { console.log( index + ": "" + $(this).text() ); }); //两个参数的情况 $("li").each(function(index,element){ $(element).css("opacity",(index+1)/10) })
12.CSS-DOM操作
-
css()//获取元素的样式属性 $("p").css("color") //获取<p>元素的color值无论color属性是外部CSS导入，还是直接拼接在HTML元素里（内联），css()方法都可以获取到属性style里的其他属性的值。
//设置元素的样式属性 $("p").css("color","red") //获取<p>元素的color值为red//设置多个样式属性 $("p").css({"color":"red","fontSize":"30px"}) //获取<p>元素的color值为red注意：（1）如果值是数字，将会被自动转化为像素值。（2）在css()方法中，如果属性中带有“-”符号，例如font-size和background-color属性，如果在设置这些属性的值的时候不带引号，那么就要用驼峰式写法
-
height()$("p").height() //获取<p>元素的高度值 $("p").height(100) //获取<p>元素的高度值位100pxwidth()同理 -
offset()获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效。
$("p").offset().left //获取左偏移 $("p").offset().top //获取上偏移 -
position()获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移，与 offset()一样，它返回的对象也包括两个属性，即 top和left
-
scrollTop()和scrollLeft()获取元素的滚动条距顶端的距离和距左侧的距离
//获取值 $("p").scrollTop() $("p").scrollLeft()//设置值 $("p").scrollTop(300) //元素垂直滚动条到指定位置的距离为300px $("p").scrollLeft(300)
五、jQuery中的事件
事件绑定
-
bind('事件类型',fn)为一个元素绑定一个事件处理程序。
$('#btn').bind('click', function() {}); //给一个id为btn的元素绑定点击事件//绑定多个事件 $('#btn').bind('mouseenter mouseleave', function() {});//在jq1.4中，你可以这样绑定多个事件 $('#btn').bind({ click: function() {}, mouseenter: function() {} });//把事件当做参数传递 $('#btn').bind('click', function(event) { alert('The mouse cursor is at (' + event.pageX + ', ' + event.pageY + ')'); }); //会返回鼠标相对于文档左边和顶部的位置更多的事件对象请看这里
//简写 $('#btn').click(function(){})
委托代理事件
-
delegate(selector,eventType,fn)把自身的事件委托给所有匹配选择器的元素执行，即点击自己不执行。这里执行函数的this是委托的对象
$("table").delegate("td", "click", function() {//table不由自己执行而是由td执行 $(this).toggleClass("chosen"); }); -
on(eventType,[selector],[data],fn)在选定的元素上绑定一个或多个事件处理函数
$("p").on("click", function(event){});//委托事件,把div的事件交给p处理 $("div").on("click", "p",function(event){});
合成事件
-
hover()当光标移动到元素上时，会触发指定的第1个函数（enter）；当光标移出这个元素时，会触发指定的第2个函数（leave）。
$("#btn").hover( function () {$(this).addClass("hover")}, function () {$(this).removeClass("hover")} );hover()方法准确来说是替代jQuery中的bind("mouseenter")和bind ("mouseleave")，而不是替代bind ("mouseover")和bind ("mouseout")。
-
toggle()用于模拟鼠标连续单击事件。第1次单击元素，触发指定的第1个函数（fn1）；当再次单击同一元素时，则触发指定的第2个函数（fn2）；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数的轮番调用。
$('#target').toggle( function() {alert('第一次点击')}, function() {alert('第二次点击')} );
事件对象的属性和方法
-
event.type获取到事件的类型
$('a').click(function(event){ console.log(event.type) //"click" //获取事件类型 return false //阻止链接跳转 }) -
event.preventDefault()阻止默认的事件行为
-
event.stopPropagation()阻止事件的冒泡
-
event.targetevent.target的作用是获取到触发事件的元素
$("#target").click(function(event) { console.log(event.target.id); //target }); -
event.relatedTarget事件中涉及的其它任何DOM元素
$("a").mouseout(function(event) { alert(event.relatedTarget.nodeName); // "DIV" }); -
event.pageX和event.pageY获取到光标相对于页面的x坐标和y坐标。如果页面上有滚动条，则还要加上滚动条的宽度或高度。
-
event.which鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键
$("a").mousedown(function(e){ alert(e.which) //1--鼠标左键；2--鼠标中键；3--鼠标右键 }) -
event.metaKey针对不同浏览器对键盘中的
按键解释不同，jQuery也进行了封装，并规定event.metaKey为键盘事件中获取 按键。
节流阀
按下键盘的时候触发，若键盘没弹起，则不让触发下一次键盘按下事件
//在触发函数外定义一个全局变量
var flag=true
//在keydown键盘事件中
if(flag){
flag=false;
//你要执行的事件全部放在里边
}
//这样，每次键盘点击之后就进入了if条件语句，进来之后flag就变成了false，关闭进入通道，
//在keyup键盘事件中，只需把flag改回来即可
flag=true
移除事件
-
unbind([type],[data])第1个参数是事件类型，第2个参数是将要移除的函数；如果没有参数，则删除所有绑定的事件；如果提供了事件类型作为参数，则只删除该类型的绑定事件；如果把在绑定时传递的处理函数作为第2个参数，则只有这个特定的事件处理函数会被删除。
$("#btn").unbind()//删除元素的所有事件$("#btn").unbind("click")//删除元素的所有click事件//已有的点击事件 $("#btn").bind("click",myfun1=function(){}).bind("click",myfun2=function(){}) //删除指定一个 $("#btn2").click(function(){ $("#btn").unbind("click",mufun1) //删除绑定事件mufun1 }) -
one()触发一次后立即解除绑定
-
off()移除一个事件处理函数
$("p").off() //移除p元素上的所有事件$("p").off("click") //移除p元素上的所有click事件$("p").off("click","**") //移除p元素上的所有代理事件
操作模拟
-
常用模拟
有时，需要通过模拟用户操作，来达到单击的效果。例如在用户进入页面后，就触发click事件，而不需要用户去主动单击。
$("#btn2").trigger("click") //简化 $("#btn2").click() -
触发自定义事件
//自定义的事件 $("#btn").bind("myClick",function(){}) //触发自定义事件 $("#btn").trigger("myClick") -
传递数据
trigger(type,[data])方法有两个参数，第1个参数是要触发的事件类型，第2个参数是要传递给事件处理函数的附加数据，以数组形式传递。$("#btn").bind("myClick",function(e,msg1,msg2){}) $("#btn").trigger("myClick",["我的自定义","事件"])
其他用法
-
添加事件命名空间
event.namespace//可以把为元素绑定的多个事件类型用命名空间规范起来 //在所绑定的事件类型后面添加命名空间， //这样在删除事件时只需要指定命名空间即可。 $("p").bind("click.plugin", function() {}); $("p").bind("mouseover.plugin", function() {}); $("p").bind("dblclick", function() {}); $("#btn").bind("click", function() { $("p").unbind(".plugin") //删除 }); -
相同事件名称，不同命名空间执行方法
//当单击<p>元素后，会同时触发click事件和click.plugin事件。 $("p").bind("click.plugin", function() {}); $("p").bind("click", function() {}); $("#btn").bind("click", function() { $("p").trigger("click!") //注意有感叹号 }); //如果只是单击<button>元素，则只触发 click 事件，而不触发 click.plugin 事件。注意，trigger("click!")后面的感叹号的作用是匹配所有不包含在命名空间中的click方法。
六、jQuery中的动画
show()和hide()
hide()会将该元素的display样式改为“none”。show()将元素的display样式设置为先前的显示状态（“block”或“inline”或其他除了“none”之外的值）
//隐藏
$("div").hide()
//与该方法效果相同
$("div").css("display","none")
//显示
$("div").show()
如果希望在调用show()方法时，元素慢慢地显示出来，可以为show()方法指定一个速度参数，例如，指定一个速度关键字“slow”。运行该代码后，元素将在600毫秒内慢慢地显示出来。其他的速度关键字还有“normal”和“fast”（长度分别是400毫秒和200毫秒）不仅如此，还可以为显示速度指定一个数字，单位是毫秒。
$("div").show("slow")
$("div").show(1000)
fadeIn()和fadeOut()
与show()方法不相同的是，fadeIn()方法和fadeOut()方法只改变元素的不透明度。fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（“display: none”）。fadeIn()方法则相反。
$("div").fadeIn()
$("div").fadeOut()
slideUp()和slideDown()
slideUp()方法和slideDown()方法只会改变元素的高度。如果一个元素的display 属性值为“none”，当调用 slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反。
$("div").slideUp()
$("div").slideDown()
自定义动画方法animate()
语法结构：animate(params,speed,callback)
（1）params：一个包含样式属性及值的映射，比如{property1:“value1”，property2: “value2”,...}
（2）speed：速度参数，可选。可以是"swing"摇摆效果；可以是"linear"线性匀速效果
（3）callback：在动画完成时执行的函数，可选。
自定义简单动画
假设给div一个样式：
div{
position:relative;
100px;
height:100px;
border:1px silid #ccc;
background:green;
}
注意:在使用 animate()方法之前，为了能影响该元素的“top”、“left”、“bottom”和“right”样式属性，必须先把元素的position样式设置为“relative”或者“absolute”。
//添加jq代码
$("div").click(function(){
$(this).animate({left:"500px"},3000)
//使元素在3秒内，向右移动500像素。
})
累加、累减动画
$("div").click(function(){
$(this).animate({left:"+=500px"},3000)
//与上面不同的是，上面点击一次就不会再动
//而这个累加可以点击一次就移动一次
})
同时执行多个动画
$("div").click(function(){
$(this).animate({left:"500px",height:"200px"},3000)
})
按顺序执行多个动画
$("div").click(function(){
$(this).animate({left:"500px"},3000)
$(this).animate({height:"200px"},3000)
})
综合动画
$("div").css("opacity","0.5")//设置不透明度
$("div").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px","200px"},3000).fadeOut("slow")
})
动画回调函数
在上例中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素。如果只是按照常规的方式，将fadeOut ("slow") 改为css("border","5px solid blue")，实际的效果是，刚开始执行动画的时候，css()方法就被执行了。这时候需要用到回调函数
$("div").css("opacity","0.5")//设置不透明度
$("div").click(function(){
$(this).animate({left:"400px",height:"200px",opacity:"1"},3000).animate({top:"200px","200px"},3000,function(){
$(this).css("border","5px solid blue")
})
})
注意：callback回调函数适用于jQuery所有的动画效果方法，例如slideDown()方法的回调函数
停止动画
停止元素的动画
语法：stop([clearQueue],[gotoEnd])
参数clearQueue和gotoEnd都是可选的参数，为Boolean值（ture或flase）。
clearQueue代表是否要清空未执行完的动画队列，
gotoEnd代表是否直接将正在执行的动画跳转到末状态。
stop()方法会结束当前正在进行的动画，并立即执行队列中的下一个动画。
$("div").hover(function(){
$(this).stop().animate({height:"150","300"},1000),
function(){$(this).stop().animate({height:"22","60"},1000)}
//这里hovor是个合成事件
})
如果遇到组合动画。此时只用一个不带参数的stop()方法就显得力不从心了。因为stop()方法只会停止正在进行的动画，如果动画正执行在第1阶段，只会停止当前的动画，并继续进行下面的animate。
这种情况下stop()方法的第1个参数就发挥作用了，可以把第1个参数（clearQueue）设置为true，此时程序会把当前元素接下来尚未执行完的动画队列都清空。但会保持在最后一帧的状态
$("div").hover(function(){
$(this).stop(true).animate({height:"150"},200).animate({"300"},200),
function(){$(this).stop(true).animate({height:"22"},200)}.animate({"60"},300)}
})
第2个参数（gotoEnd）可以用于让正在执行的动画直接到达结束时刻的状态，通常用于后一个动画需要基于前一个动画的末状态的情况，可以通过 stop(false,true)这种方式来让当前动画直接到达末状态。
当然也可以两者结合起来使用 stop(true,true)，即停止当前动画并直接到达当前动画的末状态，并清空动画队列。注意，jQuery只能设置正在执行的动画的最终状态，而没有提供直接到达未执行动画队列最终状态的方法
判断元素是否处于动画状态
为了避免动画积累而导致的动画与用户的行为不一致。就要判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。
if(!$(element).is(":animated")){
//如果当前没有进行动画，则添加新动画
}
延迟动画
delay()
$(this).animate({left:"400px",height:"200px"},300).delay(1000).animate({top:"200px","200px"}).delay(2000).fadeOut("slow")
其他动画方法
-
toggle(speed, [callback])可以切换元素的可见状态。如果元素是可见的，则切换为隐藏的；如果元素是隐藏的，则切换为可见的。
$("li").click(function(){ $(this).next().toggle() }) -
slideToggle( speed, [easing ], [callback] )通过高度变化来切换匹配元素的可见性。这个动画效果只调整元素的高度。相当于
slideUp()和slideDown()$("li").click(function(){ $(this).next().slideToggle() }) -
fadeTo(speed, opacity, [callback])可以把元素的不透明度以渐进方式调整到指定的值。这个动画只调整元素的不透明度
$("li").click(function(){ $(this).next().fadeTo(600,0.2) }) -
fadeToggle(speed, [ easing ], [callback])通过不透明度变化来切换匹配元素的可见性。这个动画效果只调整元素的不透明度
$("li").click(function(){ $(this).next().fadeToggle() })
七、jQuery Mobile
jQuery Mobile简介
jQuery Mobile则是用来填补 jQuery在移动设备应用上的缺憾的一个新项目。它基于jQuery框架并使用了HTML 5和CSS 3这些新的技术，除了能提供很多基础的移动页面元素开发功能外，框架自身还提供了很多可供扩展的API
jQuery Mobile主要特性
jQuery Mobile提供了非常友好的UI组件集和一个强有力的AJAX的导航系统，以支持动画页面转换。它的策略可以简单地总结为：创建一个在常见智能手机/平板电脑浏览器领域内能统一用户界面的顶级JavaScript库
-
基于jQuery构建
-
兼容绝大部分手机平台
-
轻量级的库
-
模块化结构
-
HTML 5标记驱动的配置
-
渐进增强原则
-
响应设计
通过灵敏的技术设计和工具，使得相同的基础代码库可以在不同屏幕大小中自动缩放。
-
强大的Ajax的导航系统
-
支持触摸和鼠标事件
-
统一的UI组件
-
强大的主题化框架
jQuery Mobile的使用
首先去官方下载最新的jQuery Mobile版本。其次，建议在页面中使用HTML 5标准的页面声明和标签，因为移动设备浏览器对HTML 5标准的支持程度要远远优于PC设备
-
引入
CDN
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script><link rel=stylesheet href=jquery.mobile-1.3.2.css> <script src=jquery.js></script> <script src=jquery.mobile-1.3.2.js></script> -
构建html框架
<div data-role="page"> <div data-role="header"> <h1>my title<h1> </div> <div data-role="content"> <p>hello world</p> </div> <div data-role="footer"> <h1>footer content<h1> </div> </div>user-scalable=no设置宽度为设备的最大宽度，禁止用户放大和缩小。<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no" >
data-role属性
- button——设置为button类型——
data-role="button" - collapsible——设置元素为一个包裹标题和内容的容器——
data-role="collapsible" - collapsible-set——设置元素为一个包裹collapsible的容器——
data-role="collapsible-set" - content——设置元素为内容容器——
data-role="content" - dialog——设置元素为对话框——
data-rel="dialog" - field container——设置元素为一个区域包裹容器——
data-role="fieldcontain" - header——页面标题容器——
data-role="header" - footer——页面标题容器——
data-role="footer" - listview——设置元素为一个列表视图——
data-role="listview" - navbar——设置元素为导航栏——
data-role="navbar" - page——设置元素为页面容器——
data-role="page" - radio button——设置元素为单选框——
type="radio" - checkbox——设置复选框类型——
type="checkbox" - select——设置元素为下拉框——
<select></select> - slider——设置元素为有范围值的文本框——
data-role="slider"
添加内容
<ul data-role="listview">
<li><a href="#">我</a></li>
<li><a href="#">来</a></li>
<li><a href="#">了</a></li>
<li><a href="#">啊</a></li>
</ul>
如果不喜欢100宽度，可以给<ul>设置data-inset="true"
样式切换
<ul data-role="listview" data-inset="true" data-theme="e">
<li><a href="#">我</a></li>
<li><a href="#">来</a></li>
<li><a href="#">了</a></li>
<li><a href="#">啊</a></li>
</ul>
其他框架
移动框架
在移动框架方面，除了jQuery Mobile之外，还有很多移动框架可选。
-
jqMobi (http://jqmobi.com)
适应于iOS和Android等移动设备的JavaScript框架，它含有 jQuery Mobile的大部分功能，但是 jqMobi体积更小，速度更快，兼容性也有所不同。jqMobi由三个组件组成：查询库、jqUi和jqPlugin。查询库库提供了60多个API调用，包括Ajax调用、针对webkit的系统选择器调用等
-
Sencha Touch (http://sencha.com)
Sencha Touch是专门为移动设备开发应用的JavaScript框架。通过Sencha Touch你可以创建一个非常像native app的web app，用户界面组件和数据管理全部基于HTML 5和CSS3的Web标准，兼容Android和iOSSencha Touch是一个重量级的框架，组件封装较多，在各平台交互表现统一，但入门门槛较高。
-
Zepto.js (http://zeptojs.com/)
Zepto.js是一个专为Mobile WebKit浏览器而开发的一个JavaScript框架。它能够帮助开发人员简单、快速地完成开发任务。更重要的是这个JavaScript框架，是超轻量级的，只有5KB。Zepto.js的语法借鉴并兼容jQuery。
PhoneGap
PhoneGap是一个开源的开发框架，使用HTML、CSS和JavaScript来构建跨平台的的移动应用程序。它使开发者能够利用iPhone、Android、Palm、Symbian、Blackberry、Windows Phone和Beda智能手机的核心功能—包括地理定位、加速器、联系人、声音和振动等。同时借助PhoneGap， Web开发者还可以把已有的Web应用打包成移动平台上的本地应用或者应用商店里的App，让用户直接下载安装。PhoneGap的特性包括：将 HTML/JavaScript 代码打包成本地 App，帮助开发者部署到各种平台上，并提供了访问移动应用本地特性的接口，同时支持多语言混合的插件机制。
八、插件
jq不可能包含所有功能，我们可以通过插件扩展jq的功能，使用这些插件能给jq提供一些额外的功能,你可以去官网查看全部插件
插件使用步骤：
1. 引入jquery文件
2. 引入插件
3. 使用插件
常用插件
jquery.color.js
animate不支持颜色简便，但是这个插件安装了之后就可以支持颜色渐变
jquery.lazyload.js
懒加载插件,延迟长页面中图片的加载，只加载在可视范围内的图片
//引入插件
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
//使用插件，把图片地址的属性改成data-src，你也可以加上一个src放占位符
<img class="lazyload" data-src="img/example.jpg" width="765" height="574" />
//如果前面没有加任何element，它将加载全部
lazyload();
//你也可以加个类，例如给每个需要懒加载的图片加上lazyload类
$(".lazyload").lazyload()
//另一种写法
let images = document.querySelectorAll(".lazyload");
lazyload(images);
jquery.validation.js
表单验证插件
jquery.ui.js
- 如果你想使用 jQuery UI 请点击 官方网址
- 这里是一些插件的demo jQuery UI API中文文的
- jqueryui的中文教程
制作插件
原理：给jquery对象添加一个方法
制作一个简易插件:改变背景颜色的方法
//原始
$("div").css("backgroundColor","red")
//添加原型 $.fn表示原型
//我们添加一个bgColor，使可以直接用这个方法更改背景颜色
//注意 方法名称不要和已有的重复，否则会覆盖
$.fn.bgColor=function(color){
//这里的this是jquery对象，即谁调用这个方法谁就是this
this.css("backgroundColor",color)
//jq的链式编程特点，返回对象，这样，后面就能继续使用其他方法了
return this;
}
//使用
$("div").bgColor("red")
如果可以实现效果，我们就可以将其封装成一个插件了
- 创建一个文件命名为
jquery.bcColor.js - 将方法放进去
$.fn.bgColor=function(color){ this.css("backgroundColor",color) return this; } - 引入插件
<script scr="jquery.bcColor.js"></script>注意：前提是本身就引入了jq插件