JQuery对DOM的操作

发表于 | 分类于

JQuery对DOM的操作

[TOC]

JQuery简介

  • $是著名的jQuery符号。

    实际上，jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名：

    1
    2
    3
    4
    window.jQuery; // jQuery(selector, context)
    window.$; // jQuery(selector, context)
    $ === jQuery; // true
    typeof($); // 'function'

    $本质上就是一个函数，但是函数也是对象，于是$除了可以直接调用外，也可以有很多其他属性。

JQuery的选择器

  1. 通过id查找

    1
    2
    // 查找<div id="abc">:
    var div = $('#abc');  //返回的对象是jQuery对象,jQuery对象类似数组，它的每个元素都是一个引用了DOM节点的对象。

    获取到jquery对象之后即可获取dom对象。

    1
    2
    3
    var div = $('#abc'); // jQuery对象
    var divDom = div.get(0); // 假设存在div，获取第1个DOM元素
    var another = $(divDom); // 重新把DOM包装为jQuery对象

  2. 通过标签查找

    1
    2
    var ps = $('p'); // 返回所有<p>节点
    ps.length; // 数一数页面有多少个<p>节点

  3. 通过class查找

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var a = $('.red'); // 所有节点包含`class="red"`都将返回
    // 例如:
    // <div class="red">...</div>
    // <p class="green red">...</p>
    //查找多个class属性的dom
    var a = $('.red.green'); // 注意没有空格！
    // 符合条件的节点：
    // <div class="red green">...</div>
    // <div class="blue green red">...</div>

  4. 通过属性查找

    1
    2
    3
    var email = $('[name=email]'); // 找出<??? name="email">
    var passwordInput = $('[type=password]'); // 找出<??? type="password">
    var a = $('[items="A B"]'); // 找出<??? items="A B">

  5. 组合查找

    1
    var emailInput = $('input[name=email]'); // 不会找出<div name="email">

  • 层级选择器

    首先要定位父节点，才能选择相应的子节点，这样避免了页面其他不相关的元素，缩小了选择范围。

    如果两个DOM元素具有层级关系（只要是包涵关系都是层级关系），就可以用$('ancestor descendant')来选择，层级之间用空格隔开：

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- HTML结构 -->
    <div class="testing">
        <ul class="lang">
            <li class="lang-javascript">JavaScript</li>
            <li class="lang-python">Python</li>
            <li class="lang-lua">Lua</li>
        </ul>
    </div>
    1
    2
    $('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
    $('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

  • 父子选择器

    两个元素必须是父子关系才行（直接包涵不能隔代）。

    1
    2
    $('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
    $('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系

  • 过滤器

    1
    2
    3
    4
    5
    6
    7
    $('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
    $('ul.lang li:first-child'); // 仅选出JavaScript
    $('ul.lang li:last-child'); // 仅选出Lua
    $('ul.lang li:nth-child(2)'); // 选出第N个元素，N从1开始
    $('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
    $('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

查找与过滤

  • 查找

    当我们那个某个dom的jquery对象之后，我们可以通过这个对象进行纵向或者横向查找它的兄弟，父子节点。

    1
    2
    3
    4
    5
    6
    7
    8
    <!-- HTML结构 -->
    <ul class="lang">
        <li class="js dy">JavaScript</li>
        <li class="dy">Python</li>
        <li id="swift">Swift</li>
        <li class="dy">Scheme</li>
        <li name="haskell">Haskell</li>
    </ul>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //通过find查找子节点
    var ul = $('ul.lang'); // 获得<ul>
    var dy = ul.find('.dy'); // 获得JavaScript, Python, Scheme
    var swf = ul.find('#swift'); // 获得Swift
    var hsk = ul.find('[name=haskell]'); // 获得Haskell
    //获取父节点
    var swf = $('#swift'); // 获得Swift
    var parent = swf.parent(); // 获得Swift的上层节点<ul>
    var a = swf.parent('div.red'); // 从Swift的父节点开始向上查找，直到找到某个符合条件的节点并返回
    //查找兄弟节点
    var swift = $('#swift');
    swift.next(); // Scheme
    swift.next('[name=haskell]'); // Haskell，因为Haskell是后续第一个符合选择器条件的节点
    swift.prev(); // Python
    swift.prev('.js'); // JavaScript，因为JavaScript是往前第一个符合选择器条件的节点

  • 过滤

    1. 通过filter过滤dom

      1
      2
      3
      4
      5
      6
      7
      var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
      var a = langs.filter('.dy'); // 拿到JavaScript, Python, Scheme
      var langs = $('ul.lang li'); // 拿到JavaScript, Python, Swift, Scheme和Haskell
      langs.filter(function () {
          return this.innerHTML.indexOf('S') === 0; // 这里的this代表dom对象
      }); // 拿到Swift, Scheme

操作DOM

  • 修改dom的内容

    jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- HTML结构 -->
    <ul id="test-ul">
        <li class="js">JavaScript</li>
        <li name="book">Java &amp; JavaScript</li>
    </ul>
    <script>
    	$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
    	$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
    </script>

    无参数调用text()是获取文本，传入参数就变成设置文本，HTML也是类似操作，

    1
    $('#test-ul li[name=book]').text('你好');

    由于jquery对象包含了可能不只一个对象，所以它的方法会作用在每一个dom对象上，即使没有对象也不会报错。

  • 添加新的dom

    通过append方法可以添加dom，对于之前html页面：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    var ul = $('#test-ul');//拿到父节点的对象
    ul.append('<li><span>Haskell</span></li>'); //添加dom对象
    // 创建DOM对象:
    var ps = document.createElement('li');
    ps.innerHTML = '<span>Pascal</span>';
    // 添加DOM对象:
    ul.append(ps);
    // 添加jQuery对象:不过会先删除原有的对象
    ul.append($('.js'));
    // 添加函数对象:
    ul.append(function (index, html) {
        return '<li><span>Language - ' + index + '</span></li>';
    });

  • 删除节点

    1
    2
    var li = $('#test-ul>li');
    li.remove(); // 所有<li>全被删除

    ​