首页 > 代码库 > 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学习笔记整理