zoukankan      html  css  js  c++  java
  • 3.操作jQuery集合《jquery实战》

    操作集合

    3.1 创建HTML元素

    使用 jquery 创建动态元素是相当容易的。可以通过 $() 函数包含一个 HTML 标签的字符串来创建。

    $('<div>Hello</div>')
    

    任何在已经存在的元素上执行的 jQuery 方法都是可以在新创建的元素上使用。

    注意,如果想创建一个空的 div 元素,可以这样写:

    $('<div>');
    

    前面介绍了 $() 函数的第二个参数 context。当使用 $() 函数来创建新元素时,可以使用 context 参数来为正要创建的新元素指定属性及其值

    假设创建一个img元素,包含多个属性,而且可以点击该图片。

    $('<img>',
     {
        src: '../images/little.bear.png',
        alt: 'Little Bear',
        title:'I woof in your general direction',
        click: function() {
           alert($(this).attr('title'));
        }
     }).appendTo('body');
    

    动态创建复杂的元素也是相当简单

    3.2 管理jQuery 集合

    3.2.1 确定集合大小

    假设你知道页面中所有段落的数量,现在需要显示。

    alert($('p').length);
    

    3.2.2 从集合获取元素

    有了集合,就可以执行一些排序操作。有时经常需要直接访问元素或者执行原生 javascript 的操作。

    (1)通过索引查找元素

    例如获取 alt 属性的 图片元素集合中第一个元素。

    var imgElement = $('img[alt]')[0];
    

    如果选择使用方法而不是索引,可以使用 get() 方法。

    ① get()方法语法

    get([index])
    取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

    参数:[index]
    取得第 index个位置上的元素

    get()
    取得所有匹配的 DOM 元素集合。

    var imgElement = $('img[alt]').get(0);
    

    等价于全前面的索引代码。get()方法可接受负数索引。使用 get(-1) 会查找倒数第一个元素。

    ② eq()方法语法

    eq(index)
    获取集合中指定索引的元素,返回包含结果的新集合。

    有时候想获取一个包含特定元素的 jQuery 对象,而不是原始元素。

    $('div:eq(1)');
    

    为了了解与过滤器 :eq() 的区别:

    var $secondDiv = $('div').eq(1); //使用eq()方法选择
    var $secondDiv = $('div:eq(1)'); //使用:eq()过滤器选择
    

    出于性能的考虑,建议选择第一种(eq())。

    ③ first()方法语法

    ④ last()方法语法

    ⑤ toArray()方法语法

    toArray()
    作为数组返回 Dom 元素的集合。

    var allLableButtions = $(`lable + button`).toArray();
    

    这条语句查询所有页面上跟在 label 后面的 button 元素,做为javascript对象转换为数组赋值给 allLableButtions 变量。

    (2)获取元素的索引

    ① index()方法语法

    index([element])
    查找集合中的特定元素,返回集合中的索引值。或者查找其兄弟元素的集合的第一个元素的索引。如果没有找到,则返回 -1 。

    参数:element
    (Selector|Element|jQuery)包含选择器的字符串、元素引用,或者恶意确定值的 jQuery 对象。

    如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置。
    如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置。
    如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置。如果找不到匹配的元素,则返回-1。

    <ul>
      <li id="foo">foo</li>
      <li id="bar">bar</li>
      <li id="baz">baz</li>
    </ul>
    -------------------
    $('li').index(document.getElementById('bar')); //1,传递一个DOM对象,返回这个对象在原先集合中的索引位置
    $('li').index($('#bar')); //1,传递一个jQuery对象
    $('li').index($('li:gt(0)')); //1,传递一组jQuery对象,返回这个对象中第一个元素在原先集合中的索引位置
    $('#bar').index('li'); //1,传递一个选择器,返回#bar在所有li中的做引位置
    $('#bar').index(); //1,不传递参数,返回这个元素在同辈中的索引位置。 
    

    3.2.3 使用关系获取集合

    <div class="box-small">
            <h2>Dom Sample</h2>
            <div id="sample-dom">
                <span>Some images:</span>
                <div>
                    ![](../images/image.1.jpg)
                    ![](../images/image.2.jpg)
                    ![](../images/image.3.jpg)
                    ![](../images/image.4.jpg)
                    ![](../images/image.5.jpg)
                    ![](../images/image.6.jpg)
                </div>
                <div id="some-div">This is a <div> with an id of <code>some-div</code></div>
                <h2>Hello, I'm a <h2> element</h2>
                <p>
                    I'm a paragraph, nice to meet you.
                </p>
                <ul class="my-list">
                    <li>
                        <a href="http://jquery.com">jQuery website</a>
                        <ul>
                            <li><a href="#css1">CSS1</a></li>
                            <li><a href="#css2">CSS2</a></li>
                            <li><a href="#css3">CSS3</a></li>
                            <li>Basic XPath</li>
                        </ul>
                    </li>
                    <li>
                        jQuery also supports
                        <ul>
                            <li>Custom selectors</li>
                            <li>Form selectors</li>
                        </ul>
                    </li>
                </ul>
                <table id="languages">
                    <thead>
                        <tr>
                            <th>Language</th>
                            <th>Type</th>
                            <th>Invented</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Java</td>
                            <td>Static</td>
                            <td>1995</td>
                        </tr>
                        <tr>
                            <td>Ruby</td>
                            <td>Dynamic</td>
                            <td>1993</td>
                        </tr>
                        <tr>
                            <td>Smalltalk</td>
                            <td>Dynamic</td>
                            <td>1972</td>
                        </tr>
                        <tr>
                            <td>C++</td>
                            <td>Static</td>
                            <td>1983</td>
                        </tr>
                    </tbody>
                </table>
                <form id="form-fake" action="#">
                    <div>
                        <label for="aTextField">Text:</label>
                        <input type="text" id="aTextField" name="someTextField" />
                    </div>
                    <div>
                        <span>Radio group:</span>
                        <label>
                            <input type="radio" name="radio-group" id="radio-a" value="A" /> A</label>
                        <label>
                            <input type="radio" name="radio-group" id="radio-b" value="B" checked="checked" /> B</label>
                        <label>
                            <input type="radio" name="radio-group" id="radio-c" value="C" /> C</label>
                    </div>
                    <div>
                        <span>Checkboxes:</span>
                        <label>
                            <input type="checkbox" name="checkboxes" id="checkbox-1" value="1" /> 1</label>
                        <label>
                            <input type="checkbox" name="checkboxes" id="checkbox-2" value="2" /> 2</label>
                        <label>
                            <input type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked" /> 3</label>
                        <label>
                            <input type="checkbox" name="checkboxes" id="checkbox-4" value="4" /> 4</label>
                    </div>
                    <input type="submit" id="button-submit" value="Submit" />
                </form>
            </div>  
        </div>
    

    效果图

    ① parents()方法语法

    parents([expr])
    取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。

    参数
    expr:用于筛选祖先元素的表达式

    例子:获取id为radio-b的所有父元素集合

    $('#radio-b').parents()
    

    获取id为radio-b的所有父元素集合

    ② children()方法语法

    想知道这里 #form-fake 子元素数量:

    $('#form-fake > *')
    

     子元素
    这里使用了极力不推荐使用的通用选择器。所以该使用 children() 方法。

    $('#form-fake').children()
    

    ③ contents()方法语法

    children() 方法不会返回文本节点。
    对于处理文本节点的情况,使用 contents()。和 children() 的不同在于:contents() 不接收任何参数,还可以获得文本节点和框架内元素。

    contents():查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

    处理文本节点的情况,使用 contents()

    ④ find()方法语法

    find(expr|obj|element)
    搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
    参数
    expr:用于查找的表达式
    obj:一个用于匹配元素的jQuery对象
    element:一个DOM元素

    find() 的强大之处体现在 jQuery 的链式调用中,

    $('#form-fake').children().find('span')
    

    $('#form-fake').children() 下的 span 元素

    ⑤ nextUntil()方法语法

    nextUntil([expr|element][,filter])
    查找当前元素之后所有的兄弟元素,但不包括那个选择器匹配到的元素。
    参数
    [expr][,filter]:
    expr: 用于筛选祖先元素的表达式。
    filter: 一个字符串,其中包含一个选择表达式匹配元素。
    [element][,filter]:
    element: 用于筛选祖先元素的DOM元素。
    filter: 一个字符串,其中包含一个选择表达式匹配元素。

    看一个例子:

             <ul>
                <li class="awesome">First</li>
                <li>Second</li>
                <li class="useless">Third</li>
                <li class="good">Fourth</li>
                <li class="brilliant amazing">Fifth</li>
             </ul>
    

    查询样式为 awesome 的元素的兄弟元素,排除样式为 brilliantamazing 的元素。

    $('.awesome').nextUntil('.brilliant.amazing');
    

    $('.awesome').nextUntil('.brilliant.amazing');

    如果只想查找样式 good 的元素,这个函数的第二个参数是可选参数 filter,允许你来实现目标。

    $('.awesome').nextUntil('.brilliant.amazing','.good');
    

    只查找good元素

    3.2.4 分割集合

    (1)集合中添加新元素(不是在html添加元素,是在选择器中添加)

    ① add()方法语法

    $('img[alt]')
    .addClass('red-border')
    .add('img[title]')
    .addClass('opaque')
    

    add()方法

    (2)集合中删除元素

    ② not()方法语法

    not(expr|ele|fn)
    删除与指定表达式匹配的元素
    参数
    expr:一个选择器字符串。
    element:一个DOM元素
    function(index):一个用来检查集合中每个元素的函数。this是当前的元素

    $("p").not( $("#selected")[0] )
    

    当需要最大的灵活的时候,传递函数给 not() 方法。

    $('div').not(function(index){
    	return $(this).children().length > 2 && index % 2 === 0;
    });
    

    ③ filter()方法语法

    filter(expr|obj|ele|fn)
    筛选出与指定表达式匹配的元素集合

    例子:创建所有包含正整数的 <td> 元素的集合。

    $('td').filter(function(index) {
                return this.innerHTML.match(/^d+$/);
             });
    

    包含正整数的td元素集合

    (3)获取集合的子集

    ④ slice()方法语法

    slice(start, [end])
    选取一个匹配的子集
    参数
    start:开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起
    end:结束选取自己的位置,如果不指定,则就是本身的结尾。

    $('*').slice(12,19)
    

    选择其中的12~19的位置

    ⑤ has()方法语法

    has(selector)
    创建并返回新的集合,只包含匹配 selector 选择器的子元素
    参数
    selector(Selector|Element)包含选择器的字符串会应用到集合中元素的所有子元素上,或者测试 Dom 上。

    $('div').has('img[alt]')
    

    包含所有div元素的集合并返回至少一个子元素和alt属性的div元素

    (4)转换集合的元素

    ⑥ map()方法语法

    map(callback)
    一组元素转换成其他数组(不论是否是元素数组)
    (在集合中的每个元素调用 callback 函数,然后返回值到一个 jQuery 对象中。)

    例子:页面上所有div元素的ID:

    $('div').map(function(){
                return this.id;
    }).toArray();
    //["sample-dom", "", "some-div", "", "", ""]
    

    (5)遍历集合的元素

    map()方法对于遍历集合元素后搜集值或转换为其他元素非常有用,但是很多时候为了达到其他目的才迭代元素。

    ⑦ each()方法语法

    each(iterator)
    遍历集合里的所有元素,然后为每个元素传入的 iterator(迭代器)函数

    例子:为匹配集合中的每个元素设置一个属性值:

    $('img').each(function(i){
                this.alt = 'This is image['+ i +'] with an id of ' +this.id;
             })
    

    对每个img图片元素执行传入的函数代码,使元素的ID和索引来修改元素

    3.2.5 使用集合的其他方法

    ① is()方法语法

    is(selector)
    确定集合中是否有元素匹配给定的选择器,如果有一个就返回 true

    <form><input type="checkbox" /></form>
    ---
    $("input[type='checkbox']").parent().is("form")
    //true
    

    判断点击li标签增加背景色为红色,如果点击的是第2个strong,当前的li增加背景色为绿色

    <ul>
      <li>
    	<strong>list</strong> item 1 - one strong tag
      </li>
      <li>
    	<strong>list</strong> item 
    	<strong>2</strong> - two <span>strong tags</span>
      </li>
      <li>list item 3</li>
    </ul>
    
    ----
    $("li").click(function() {
      var $li = $(this),
        isWithTwo = $li.is(function() {
          return $('strong', this).length === 2;
        });
      if ( isWithTwo ) {
        $li.css("background-color", "green");
      } else {
        $li.css("background-color", "red");
      }
    });
    

    判断点击li标签增加背景色为红色,如果点击的是第2个strong,当前的li增加背景色为绿色

    ② end()方法语法

    end()
    在 jQuery 链式调用中使用该方法;
    在当前调用链中结束最近的过滤操作,然后返回匹配元素的集合到之前的状态。
    回到最近的一个"破坏性"操作之前(hide()不是)

    $('img')
    .filter('[title]')
    .hide()
    .end()
    .addClass('red-border')
    

    end()

    jQuery对象维护了一个内部栈来保存针对匹配元素的集合修改。调用诸如之前的方法时,新集合被压栈,调用 end() 方法时,顶部集合就会弹出,留出前一个集合来后续操作。

    ③ addBack()方法语法

    addBack([selector])
    把栈上前一个集合的元素添加到当前集合里,可以选择性提供选择器参数。

    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li class="third-item">list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    
    ----
    $('li.third-item').nextAll().addBack()
    .css('background-color', 'red');
    
    

    首先,初始选择位于第3项,初始化堆栈集合只包含这项。调用.nextAll() 后将第4和第5项推入堆栈。最后,调用.addBack() 合并这两个组元素在一起,创建一个jQuery对象,指向所有三个项元素

    addBack() 前一个集合的元素添加到当前集合

  • 相关阅读:
    python 并发编程 多线程 event
    python 并发编程 多线程 定时器
    python 并发编程 多线程 信号量
    linux top 查看CPU命令
    python 并发编程 多线程 GIL与多线程
    python 并发编程 多线程 死锁现象与递归锁
    python 并发编程 多线程 GIL与Lock
    python GIL全局解释器锁与互斥锁 目录
    python 并发编程 多线程 GIL全局解释器锁基本概念
    执行python程序 出现三部曲
  • 原文地址:https://www.cnblogs.com/tangge/p/6784816.html
Copyright © 2011-2022 走看看