jQuery核心对象——筛选


过滤:过滤的结果是原集合的子集
查找:查找,查找的是子孙、后代、兄弟。

过滤

  • eq(index|-index) :获取第N个元素,(获取的元素仍然是jQuery对象)
  • first():获取第一个元素
  • last():获取最后个元素
  • hasClass(class):检查当前的元素是否含有某个特定的类,如果有,则返回true。
  • filter(expr|obj|ele|fn):筛选出与指定表达式匹配的元素集合。
    这个方法用于缩小匹配的范围。用逗号分隔多个表达式
  • is(expr|obj|ele|fn):根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
  • map(callback):将一组元素转换成其他数组(不论是否是元素数组)
  • has(expr|ele):保留包含特定后代的元素,去掉那些不含有指定后代的元素。
  • not(expr|ele|fn):删除与指定表达式匹配的元素
  • slice(start, [end]):选取一个匹配的子集
    与原生的slice方法类似。

注意:

  • $lis.first()是一个jQuery对象,$lis[0]是一个Dom元素对象
  • jQuery对象的一些方法的返回值一般都是一个jQuery对象。

eg:
需求:

  1. ul 下 li 标签第一个
  2. ul 下 li 标签的最后一个
  3. ul 下 li 标签的第二个
  4. ul 下 li 标签中title属性为hello的
  5. ul 下 li 标签中title属性不为hello的
  6. ul 下 li 标签中有span子标签的
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <li>AAAAA</li>
      <li title="hello" class="box2">BBBBB</li>
      <li class="box">ccccc</li>
      <li title="hello">DDDDDD</li>
      <li title="two"><span>BBBBB</span></li>
    </ul>
    <li>eeeee</li>
    <li>EEEEE</li>
    <br />
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $lis = $('ul>li')
        // 1. ul 下 li 标签第一个
        // 注意:$lis.first()是一个jQuery对象,$lis[0]是一个Dom元素对象
        $lis.first().css('background','red')
        // 2. ul 下 li 标签的最后一个
        $lis.last().css('background','red')
        // 3. ul 下 li 标签的第二个
        $lis.eq(1).css('background','red')
        // 4. ul 下 li 标签中title属性为hello的
        $lis.filter('[title=hello]').css('background','yellow')
        // 5. ul 下 li 标签中title属性不为hello的
        // 没有title的也会被选中
        $lis.not('[title=hello]').css('background','green')
        $lis.filter('[title!=hello]').css('background','green')
        // 有title属性但title属性不为hello的也会被选中
        $lis.filter('[title][title!=hello]').css('background','blue')
        $lis.filter('[title]').not('[title=hello]').css('background','blue')

        // 6. ul 下 li 标签中有span子标签的
        $lis.has('span').css('background','purple')
    </script>
  </body>
</html>

小结

  • filter(selector):对当前元素提要求
  • not(selector):对当前元素提要求,并取反
  • has(selector):对子孙元素提要求

查找

  • children([expr]):取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
  • closest(expr,[con]|obj|ele):从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素。
  • find(expr|obj|ele):搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
  • next([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
  • nextAll([expr]):查找当前元素之后所有的同辈元素。
  • nextUntil([exp|ele]\[,fil]):查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止。
  • offsetParent():返回第一个匹配元素用于定位的父节点。
  • parent([expr]):取得一个包含着所有匹配元素的唯一父元素的元素集合。
  • parents([expr]):取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
  • parentsUntil([exp|ele]\[,fil]):查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。
  • prev([expr]):取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
  • prevAll([expr]):查找当前元素之前所有的同辈元素
  • prevUntil([exp|ele]\[,fil]):查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。
  • siblings([expr]):取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

eg:
需求:

  1. ul 标签的第2个span子标签
  2. ul 标签的第2个span后代标签
  3. ul 标签的父标签
  4. id 为 cc 的 li 标签的前面的所有 li 标签
  5. id 为 cc 的 li 标签的所有兄弟 li 标签

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找</title>

</head>
<body>
    <div>
        <ul>
            <span>span文本1</span>
            <li>AAAAA</li>
            <li title="hello" class="box2">BBBBB</li>
            <li class="box" id='cc'>CCCCC</li>
            <li title="hello">DDDDDD</li>
            <li title="two"><span>span文本2</span></li>
            <span>span文本3</span>
        </ul>
        <span>span文本4</span>
        <li>eeeee</li>
        <li>EEEEE</li>
        <br />
    </div>
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $ul =$('ul')
        // 1. ul 标签的第2个span子标签
        $ul.children('span:eq(1)').css('background','red')
        // 2. ul 标签的第2个span后代标签
        $ul.find('span:eq(1)').css('background','yellow')
        // 3. ul 标签的父标签
        $ul.parent().css('background','lightblue')
        // 4. id 为 cc 的  li  标签的前面的所有 li 标签
        var $li = $('#cc')
        $li.prevAll('li').css('background','lightpink')
        // 5. id 为 cc 的 li 标签的所有兄弟 li 标签
        $li.siblings('li').css('background','lightyellow')
    </script>
    
</body>
</html>

串联

  • add(expr|ele|html|obj[,con]):把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集。
  • andSelf():加入先前所选的加入当前元素中
    对于筛选或查找后的元素,要加入先前所选元素时将会很有用。
  • contents():查找匹配元素内部所有的子节点(包括文本节点)。
    如果元素是一个iframe,则查找文档内容
  • end():回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态。

练习:爱好选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="post" action="">
    你爱好的运动是?<input type="checkbox" id="checkedAllBox"/>全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
    <input type="checkbox" name="items" value="篮球"/>篮球
    <input type="checkbox" name="items" value="羽毛球"/>羽毛球
    <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>

    <input type="button" id="checkedA11Btn" value="全选"/>
    <input type="button" id="checkedNoBtn" value="全不选"/>
    <input type="button" id="checkedRevBtn" value="反选"/>
    <input type="button" id="sendBtn" value="提交"/>
    </form>

    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
    <script>
        var $checkedAllBox = $('#checkedAllBox')
        var $items = $(':checkbox[name=items]')
        // 全选
        $('#checkedA11Btn').click(function (){
           $items.prop('checked',true)
           $('#checkedAllBox').prop('checked',true)
        })

        // 全不选
        $('#checkedNoBtn').click(function (){
           $items.prop('checked',false)
           $('#checkedAllBox').prop('checked',false)
        })

        // 反选
        $('#checkedRevBtn').click(function (){
           $items.each(function (){
              this.checked = !this.checked
           })
        //    未选中的长度 == 0,表示全选
        // $items.filter(':not(:checked)').length==0
           $('#checkedAllBox').prop('checked',$items.filter(':not(:checked)').length==0)
        })

        // 提交
        $('#sendBtn').click(function (){
           $items.filter(':checked').each(function (){
              alert(this.value)
           })
        })

        // 上部全选
        $('#checkedAllBox').click(function (){
           $items.prop('checked',this.checked)
        })

        // 点击某个爱好的时候更新"全选/全不选"状态
        $items.click(function (){
           $checkedAllBox.prop('checked',$items.filter(':not(:checked)').length==0)
        })



    </script>
</body>
</html>

在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,关于 jQuery 的事件,我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中,我们可以通过以下方式来绑定事件: ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中,`selector` 表示要绑定事件的元素,`event` 表示要绑定的事件类型,比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件: ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样,当 `event1` 或 `event2` 中任意一个事件触发时,对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序,可以使用 `off()` 方法: ``` $(selector).off(event); ``` 其中,`event` 表示要解除的事件类型。如果不指定事件类型,则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中,我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上,而不是绑定到子元素上,然后通过事件冒泡来判断是哪个子元素触发了该事件。这样,当子元素数量较多时,只需要绑定一次事件,就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中,`selector` 表示父元素,`event` 表示要绑定的事件类型,`childSelector` 表示要委托的子元素的选择器,事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值