jQuery对象的过滤_jquery 的过滤 $.filter(":checked");-CSDN博客

本文链接：https://blog.csdn.net/qq_43641432/article/details/104143562

过滤：在原有的里面找出一部分

查找：查找原有的兄弟父母子孙后代

过滤

        //子标签中找
       // $ul.children('span:eq(1)').css('background','red')
        //find后代标签中找
       // $ul.find('span:eq(1)').css('background','red')
        //parent父标签中寻找
        //$ul.parent().parent()
        //
        var $li = $('#cc')
        //前面的标签
        $li.prevAll('li').css('background','green')
        //所有的兄弟li标签
        $li.siblings('li').css('background','red')

爱好选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <form>
        你爱好的运动是？<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="checkedAllBtn" value="全　选"/>
        <input type="button" id="checkedNoBtn" value="全不选"/>
        <input type="button" id="checkedRevBtn" value="反　选"/>
        <input type="button" id="sendBtn" value="提　交"/>
      </form>
      <script src="js/jquery-1.12.3.js"></script>
      <script type="text/javascript">
      var $checkAllBox = $('#checkedAllBox')
      var $items = $(':checkbox[name=items]')  
      //全选
      $('#checkedAllBtn').click(function(){
          $items.prop('checked',true)
          $checkAllBox.prop('checked',true)//获取元素的属性值，并且修改
      })
      //全不选
      $('#checkedNoBtn').click(function(){
            $items.prop('checked',false)
            $checkAllBox.prop('checked',false) 
      })
      //反选
      $('#checkedRevBtn').click(function(){
        $items.each(function(){
            this.checked = !this.checked
        })
        
        $checkAllBox.prop('checked',$items.filter(':not(:checked)').length===0)//筛选元素的属性值 if！= 0 全不选 if=0全选

      })
      //提交
      $('#sendBtn').click(function(){
          $items.filter(':checked').each(function(){
             alert(this.value)
          })
      })
      //all and notAll
      $checkAllBox.click(function(){
          $items.prop('checked',this.checked)
      })
      //点击某爱好时候。更新all or notAll
      $items.click(function(){
        $checkAllBox.prop('checked',$items.filter(':not(:checked)').length===0)
      })
      </script>
</body>
</html>