JQuery学习笔记

一. jquery对象和DOM对象

两者是不同的概念，不可互相使用对方的方法。不过可以相互转换。jquery对象转换为DOM对象可使用[index]，因为jquery对象是个类似数组的对象；或使用jQuery对象的get(index)方法获取DOM对象。$.get()表示获取原jQuery对象集合中的所有元素，相当于转化成了JavaScript的Array对象，可以调用相应的数组方法。

DOM对象转换为jQuery对象直接用“\$()”将其包括起来。

二. jQuery选择器

（1）基本选择器

（2）层次选择器

$(“pre + sibling”)：下一个兄弟结点（同层次），可用next()方法替代；

$(“pre ~siblings”)：后面所有兄弟结点，可用nextAll()方法替代；

siblings()：返回所有兄弟结点，不分前后位置。

（3）过滤选择器 “:”

常用于查找一组集合元素中某一位置的单个元素。

基本过滤选择器

内容过滤选择器

隐藏过滤选择器

:hidden 用于提取所有不可见元素，所选取的包括display为none、visibility:hidden，以及文本隐藏域（<\input type=”hidden” />）。

:visible用于匹配所有可见元素。

属性过滤选择器 []

子元素过滤选择器

ele:nth-child(index/even/odd)，index是从1开始算，并且ele是要选取的子元素而非其父元素。与ele：odd的区别：

<div class="one test">
<h3>The first part</h3>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact me</a></li>
</ul>
</div>
<ul class="outer">
<li class="current"><a href="#">Home</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Contact me</a></li>
</ul>
<script type="text/javascript">
$("ul li:nth-child(odd)").css("background-color","#CCFFCC");
</script>

如果使用ul li：odd，则是在整篇文档中所有ul下的li按出现的先后顺序组成一个集合，选取里面位于奇数位置的li（index从0开始算）；

若为ul li:nth-child(odd)则是分别在各个ul中选取位于奇数位置的孩子li（index从1算起）。

:first只匹配第一个元素，而ele:first-child会匹配所有作为第一个孩子的ele元素。

:eq(index)只匹配一个元素，找到第一个符合条件的就停止，而:nth-child(n)匹配所有父元素符合条件的子元素。注意“：”前面都是目标元素，而不是其父元素。

:first-child和:first-of-type的区别：

:first-child匹配的是作为父元素且为某种类型的元素，意思是它在满足某种类型的同时还必须是父元素的第一个孩子；

而:first-of-type匹配的是某种类型的元素中的第一个，不一定是父元素的第一个孩子，只是将父元素中某种类型的子元素筛选成一个集合，而最后选择这个集合中的第一个。

参考：/article/5062188.html

注意：只有nth-child、nth-of-type的索引从1开始计数，其余的都是从0开始;负数的index表示倒数第几个，从1开始

表单过滤选择器

（4）表单选择器

注意：过滤选择器中空格。有空格表示后代，带空格的过滤选择器看做一个单独的对象，表示具备某个过滤属性且是前面元素的后代的元素；无空格的“:”表示一种过滤规则，表示过滤后应该剩下前面的元素。

选择器中包含 . # * [ 等特殊字符应该转义，“”中应该用\进行转义。

三. 查找方法

1.$.children()方法只查找儿子结点，而find查找$的所有后代结点，包括子孙结点。这里的儿子及后代不包括文本结点。

2. 查找兄弟元素，但是不包括一些元素，使用$collection.siblings().not($collection)

3.children()方法不包括text和comments结点，而contens()方法包括text、comments以及html结点。

4. each(function(){})

对集合中的每个元素运行function方法，如果想早点结束遍历，可在function内返回false提前结束。

串联方法

1.add(expr|ele|html|obj[,con])方法

将新的set添加到当前set（jQuery Object）中，返回一个新的jQuery Object，原来的并不改变。并且新的set中的元素顺序是按照在DOM树中出现的先后顺序排列的，并非后添加进去的就排在后面。

2.addBack([selector ])和addSelf()方法

其中addSelf不接收任何参数，并且在1.8及之后的版本中弃用了，用addBack([selector ])来替代。考虑到链式操作维护了一个栈，每查找/遍历一次都把新的set添加到了栈顶，这两个方法都表示把先前的set也添加到当前的set中。这两个方法仍是创建了一个新的jQuery Object。

3. end()方法

每进行一次遍历或者查找，都会将产生的新的set添加到栈顶（这些set是jQuery Object），但有时候我们需要回访之前的某一个set，可使用end方法将当前栈顶的set弹出，访问到之前的set。常用在jQuery的链式操作中。

jquery文档中是这么解释的：

Most of jQuery’s DOM traversal methods operate on a jQuery object instance and produce a new one, matching a different set of DOM elements. When this happens, it is as if the new set of elements is pushed onto a stack that is maintained inside the object. Each successive filtering method pushes a new element set onto the stack. If we need an older element set, we can use end() to pop the sets back off of the stack.

addBack、end方法都是回溯到当前栈顶set的前一个set，再往前的就顾不上了。

此外，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法。

四. 文档处理

1.replaceWith：如果参数为在文档树中已有的结点，则是用参数结点来替换目标结点，参数结点从原来在文档树中的位置删除。即不是复制一份后替换，而是移动替换。

appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法.

五. 事件

1.mouseover和mouseenter的区别

首先理解鼠标“穿过”元素是什么意思：即鼠标从元素外部进入到了元素内部。mouseover：鼠标穿过目标元素的子元素也算作穿过了目标元素（也就说说该事件是冒泡的），而mouseenter则是必须从目标元素外部进入到目标元素才会触发事件，从目标元素内部进入到子元素是不会触发事件的（在子元素上进行动作不会冒泡到父元素）。

hover方法是用来替代bind(‘mouseenter’)和bind(‘mouseleave’)的。

2.on和bind都会为集合中的所有元素进行事件绑定，事件处理函数中的$(this)表示当前的元素。

3. on参数中的过滤器的意思是：对调用on方法的元素（集合）的后代进行筛选，而不是对调用on方法的元素（集合）进行筛选。

4. trigger(type,data)

顾名思义，就是触发了元素上的某个事件，原本应该是人为做了某个动作后才触发，现在是直接就触发了这个事件。该方法的第二个参数data是传递给事件处理程序的：

$("p").click( function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
} ).trigger("click", ["foo", "bar"]);

举个例子：

//html
<button id="btn1">button1</button>
<button id="btn2">button2</button>
<div id="test"></div>

//js
$("#btn1").bind("myClick", function (event, message1, message2) {
$("#test").append("<p>" + message1 + message2 + "</p>");
});
//触发btn1上绑定的自定义事件，并传递两个参数
$('#btn2').click(function(){
$('#btn1').trigger("myClick",["我的自定义","事件"]);
})

具体用法参看：jquery中使用trigger()方法模拟事件

2.合成事件

hover（）

toggle（）

toggle在1.9版本后不能再用于模拟切换鼠标事件了，只能用于切换调用该方法的元素的可见性，举个例子，当点击标题dt时，dd在隐藏和显示之间进行切换并且动作发生后改变dt的背景和字体颜色：

//html
<dl>
<dt id="question">Who is Bob Dylan?</dt>
<dd id="explanation">Robert Dylan is an American singer-songwriter, artist, and writer.</dd>
</dl>

//jquery
var dt = $('#question');
var dd = $('#explanation');
$(function(){
dt.bind('click',function(){
dd.toggle('slow',function(){
dt.css({'background':'purple','color':'#fff'});
})
})
})

toggle中的参数function表示当动画完成后调用的函数，很遗憾这个函数只能设置一个？？

而在较低版本的jQuery中，则可以模拟点击鼠标切换事件：

dt.toggle(function(){
dd.show();
},function(){
dd.hide();
})

3.事件冒泡和事件捕获

jQuery不支持事件捕获。

阻止事件的默认行为：event.preventDefault();

阻止事件冒泡：event.stopPropagation();

两个都阻止，在事件处理函数中return false;

addClass()方法添加的类，通过attr(“class”)可以访问到。

选择器