僕と花

JQuery初窥 write less, do more.

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

作为最为长青的JavaScript库自然不必多说。初窥jQuery的笔者将尽可能拼凑出 write less , do more. 的真意，并感受它的魅力。文章内容大量参考自jQuery的设计思想、jQuery Basics、jQuery source code 1.7.2。

jQuery基础

  1. jQuery 如何获取元素

    1
2
3
4
5

    $( '#header' ); // 选择ID为header的元素
$( 'li' );      // 选择页面上所有的列表项
$( 'ul li' );   // 选择无序列表中的列表项
$( '.person' ); // 选择所有class为person的元素
$( 'input[name=first]' ) // 选择name属性等于first的input元素

    jQuery的基本设计思想和主要用法，就是 "选择某个网页元素，然后对其进行某种操作" 。

    特殊构造函数jQuery()（即$()）会接收一个选择表达式，从而得到被选择的元素，但是jQuery函数并不返回这些元素，而是返回一个jQuery对象，这个被构造出来的对象可以操作对应的元素。

    其中选择表达式除了使用CSS选择器外，还可以使用jQuery自身的选择器。

    1
2
3
4
5
6

    $('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素

    为了更进一步筛选目标元素范围，jQuery同时提供了强大的过滤功能，缩小选择结果。

    1
2
3
4
5

    $('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素

  2. jQuery 如何创建元素

    使用jQuery创建新元素，只需要将新元素传入jQuery的构造函数内。

    1
2
3

    $('<div>Hello</div>')
$('<p>这是一段文字</p>')
$('<ul><li class="test">新的列表项</li></ul>')

  3. jQuery 如何进行元素操作

    1. 元素的移动

      使用jQuery移动元素，从不同的视角出发有两种方式。

      1
2
3
4
5
6

      //将div元素插在p元素之后

$('div').insertAfter($('p'))
//操纵div元素，返回div元素
$('p').after($('div'))
//操纵p元素，返回p元素

      类似的操纵方式还有以下几对：

      • .insertAfter()和.after()：在现存元素的外部，从后面插入元素

        1. $.after(#) 即在$元素外部，从后面插入#元素
        2. $.insertAfter(#) 即将$元素插入至#元素外部后

      • .insertBefore()和.before()：在现存元素的外部，从前面插入元素

      • .appendTo()和.append()：在现存元素的内部，从后面插入元素

        1. $.append(#) 即在$元素内部，从后面插入#元素
        2. $.appendTo(#) 即将$元素插入至#元素内部结尾处

      • .prependTo()和.prepend()：在现存元素的内部，从前面插入元素

    2. 元素的复制

      jQuery提供方法.clone()复制元素

      1
2

      $("b").clone().prependTo("p");
//复制所有 b 元素然后将他们插入到所有段落里面的前面。

    3. 元素的删除

      jQuery提供多种方法从DOM树中删除元素

      • .remove()：将匹配元素从DOM中删除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
      • .detach()：将匹配元素从DOM中删除，但保存所有jQuery数据和被移走的元素相关联。
      • .empty()：将匹配元素清空，但不删除该元素。
      • .unwrap()：将匹配元素集合的父级元素删除，保留自身（和兄弟元素）的位置。

    4. 元素的修改

      jQuery通常使用一个函数来完成取值（getter）和赋值（setter），这由函数是否传递参数来决定。

      1
2

      $('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello');//html()有参数Hello，表示对h1进行赋值

      如果被选元素集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。

  4. jQuery 的链式操作

    正因为jQuery函数返回的是一个个jQuery对象，所以不同的操作最终得以链接在一起，像链条一样。这就是jQuery最令人称道的特点之一。

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    $('div').find('h3').eq(2).html('Hello');
//拆分来看即⬇️

$('div') //找到div元素
    .find('h3') //选择其中的h3元素
    .eq(2) //选择第3个h3元素
    .html('Hello'); //将它的内容改为Hello

$(".box").height().width();
//这条代码会报错，因为⬇️

$(".box")//找到class为box的元素，返回jQuery对象
    .height()//读取class = box元素的高度，返回的是值
    .width();//所以无法进行这一步