首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

3.操作jQuery集合《jquery实战》

作者：拍友2502926823 | 来源：互联网 | 2023-05-22 13:21
3.1创建HTML元素使用jquery创建动态元素是相当容易的。可以通过$()函数包含一个HTML标签的字符串来创建。$('<div>Hello<div>

,
alt: 'Little Bear',
title:'I woof in your general direction',
click: function() {
alert($(this).attr('title'));
}
}).appendTo('body');


id="some-div">This is a
with an id of some-div

Hello, I'm a

element



I'm a paragraph, nice to meet you.


class="my-list">

  • href="http://jquery.com">jQuery website

    • href="#css1">CSS1

    • href="#css2">CSS2

    • href="#css3">CSS3

    • Basic XPath




  • jQuery also supports

    • Custom selectors

    • Form selectors




    • id="languages">


    Language
    Type
    Invented




    Java
    Static
    1995


    Ruby
    Dynamic
    1993


    Smalltalk
    Dynamic
    1972


    C++
    Static
    1983



    id="form-fake" action="#">

    for="aTextField">Text:
    type="text" id="aTextField" name="someTextField" />


    Radio group:

    type="radio" name="radio-group" id="radio-a" value="A" /> A

    type="radio" name="radio-group" id="radio-b" value="B" checked="checked" /> B

    type="radio" name="radio-group" id="radio-c" value="C" /> C


    Checkboxes:

    type="checkbox" name="checkboxes" id="checkbox-1" value="1" /> 1

    type="checkbox" name="checkboxes" id="checkbox-2" value="2" /> 2

    type="checkbox" name="checkboxes" id="checkbox-3" value="3" checked="checked" /> 3

    type="checkbox" name="checkboxes" id="checkbox-4" value="4" /> 4

    type="submit" id="button-submit" value="Submit" />


    效果图

    ① parents()方法语法

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

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

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

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

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

    ② children()方法语法

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

    $('#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: 一个字符串，其中包含一个选择表达式匹配元素。

    看一个例子：

             

                   class="awesome">First
                  
    • Second

      •              class="useless">Third
                   class="good">Fourth
                   class="brilliant amazing">Fifth

    查询样式为 awesome 的元素的兄弟元素，排除样式为 brilliant 和 amazing 的元素。

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

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

    <ul>
      <li>
        <strong>list</strong> item 1 - one strong tag
     >
      <li>
        <strong>list</strong> item 
     2> - two <span>strong tags</span>
     >
      <li>list item 3</li>
    >

    ----
    $("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>
     
  • list item 2>
        <li class="third-item">list item 3</li>
     
  • list item 4>
        <li>list item 5</li>
    >

    ----
    $('li.third-item').nextAll().addBack()
    .css('background-color', 'red');
    •

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

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


    推荐阅读
    author-avatar
    拍友2502926823
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有