首页 > 代码库 > jQuery学习笔记整理
jQuery学习笔记整理
一.子元素选择器.:nth-child:匹配父元素下的第N个子或者奇偶元素.注意:序号是从1开始的,而eq是从0开始计数的!它匹配的是前方选择器选择到的元素的父元素下面的第几个元素.例如:ul li:first-child:匹配的是<ul>下面的这个<li>的父元素的第一个孩子.判断是否为li.见下面的代码:
<ul> <a href="#"></a> <li> <ul> <!--此行的li被选中,因为是其父类元素的第一个子元素, 如果将上面的选择条件改为ul>li:first-child的话,则没有元素被选中--> <a><li></li></a> <li></li> </ul> </li> </ul>
二.jQuery的id选择器,class选择器,名称选择器也可以取交集,但是中间不能加逗号,也不能有任何空格!例如:$("div.div#one")
三.jQuery对象的remove方法和detach和empty方法.empty方法与两者有本质的区别,empty方法删除的是选择器匹配的元素的子类元素,而保留选择器的元素(即该方法删除所有子类元素),remove方法会删除匹配的元素,并通过返回值返回.但是这个方法的返回的元素中会删除绑定的事件.(注意:只能删除在<script>标签中的事件,而绑定在标签上的事件将不会删除.)而detach方法则不会删除事件.
四.body中的Onload函数和jQuery中的ready函数的区别:
1.onload函数只能调用一次.如果多次调用,后调用的会把前者覆盖,ready方法可以多次调用
2.ready函数在DOM加载完后就会调用,而onload方法需要等待大部分视频音频加载完才调用
五.jQuery完成编码,有两组方法,encodeURI和decodeURI,以及encodeURIComponent和decodeURIComponent方法.
<script type="text/javascript"> //escape()不能直接用于URL编码,它的真正作用是返回一个字符的Unicode编码值。比如"春节"的返回结果是%u6625%u8282,escape()不对"+"编码 主要用于汉字编码。 alert(escape("春节")); alert(unescape(escape("春节"))); //encodeURI()是用来对URL编码的函数。 编码整个url地址,但对特殊含义的符号"; / ? : @ & = + $ , #"不进行编码。对应的解码函数是:decodeURI()。 alert(encodeURI(‘http://baidu.com?hello=您好&word=文档‘)); alert(decodeURI(encodeURI(‘http://baidu.com?hello=您好&word=文档‘))); //encodeURIComponent() 能编码"; / ? : @ & = + $ , #"这些特殊字符。对应的解码函数是decodeURIComponent()。 alert(encodeURIComponent(‘http://baidu.com?hello=您好&word=文档‘)); alert(decodeURIComponent(encodeURIComponent(‘http://baidu.com?hello=您好&word=文档‘))); </script>
六.jQuery的移动元素可以有两种方法:例如:假定我们选中了一个div元素,需要把它移动到p元素后面。
第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$(‘div‘).insertAfter($(‘p‘));
第二种方法是使用.after(),把p元素加到div元素前面:
$(‘p‘).after($(‘div‘));
表面上看,这两种方法的效果是一样的,唯一的不同似乎只是操作视角的不同。但是实际上,它们有一个重大差别,那就是返回的元素不一样。第一种方法返回div元素,第二种方法返回p元素。需要根据需要,选择到底使用哪一种方法。
七.jQuery的事件委托处理.
javascript的事件模型,采用"冒泡"模式,也就是说,子元素的事件会逐级向上"冒泡",成为父元素的事件。也就是说,一个事件,如果在子元素上未定义某个事件,那么该事件会在其父类元素上一直向外传播,直到被处理或者到达对象层次的最顶层.例如,在处理一个表格的时候,假设表格有100行,每一行都要求点击的时候会触发事件,那么可能会写下面的代码:
$("td").click(function() { alert("click!"); });
虽然可以这样做,但是这样做是及其没有效率的,由于事件的冒泡传播的特性,那么实际上可以这么处理:
$("table").click(function() { alert("click!");//采用父类元素集中处理 });
这种方式大大的提高了效率.
八.jQuery的一些提高性能的方法:
1.少改动DOM结构,不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
2.js的原生函数效率要高,用js提供的for,while循环速度要比$.each要快
3.由于js采用的是链式作用域的规则,因此对于变量能够声明为较近的局部变量就这么声明.
jQuery学习笔记整理