jQuery选择器(中)

最新推荐文章于 2021-10-31 14:50:02 发布

落魄三无青年

最新推荐文章于 2021-10-31 14:50:02 发布

阅读量141

点赞数

分类专栏：前端学习文章标签： jquery js

本文链接：https://blog.csdn.net/weixin_45858192/article/details/109501154

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

基本过滤选择器

jQuery 的基本过滤选择器具有以下几种：

选择器	描述
:first 过滤选择器	获取第一个元素
:last 过滤选择器	获取最后一个元素
:even 过滤选择器	匹配所有索引值为偶数的元素，从 0 开始计数
:odd 过滤选择器	匹配所有索引值为奇数的元素，从 0 开始计数
:eq()过滤选择器	匹配一个给定索引值元素
:gt()过滤选择器	匹配所有大于给定索引值的元素
:lt()过滤选择器	匹配所有小于给定索引值的元素
:not()过滤选择器	去除所有与给定选择器匹配的元素
:header 过滤选择器	匹配如 h1,h2,h3 之类的标题元素
:animated 过滤选择器	匹配所有正在执行动画效果的元素

说明：由于 jQuery 对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>基本过滤择器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
  <style>
    #pdx{
      width: 100px;
      height: 200px;
      background-color: aqua;
    }
  </style>
</head>
<body>
  <h1>比基尼海滩</h1>
  <h2>菠萝屋</h2>
  <div>派大星</div>
  <div id="box">
    <div id="son"></div>
  </div>
  <div></div>
  <div></div>
  <div>海绵宝宝</div>
  <div id="pdx"></div>
  <script>
    console.log($('div:first'));
    console.log($('div:last'));
    // 索引值为偶数时 -> 奇数元素：索引值为奇数时 -> 偶数元素
    console.log($('div:even'));
    console.log($('div:odd'));
    // :eq(index) -> index表示索引值
    console.log($('div:eq(0)'));
    console.log($('div:gt(2)'));//大于
    console.log($('div:lt(2)'));//小于
    // :header -> 匹配h1~h6元素
    console.log($(':header'));

    function animated(){
      $('#pdx').slideToggle(animated);
    }
    animated();
    // :animated -> 只能匹配由jQuery实现的动画
    console.log($(':animated'));

    console.log($('div:not("#son")'));
  </script>
</body>
</html>

内容过滤选择器

jQuery的内容过滤选择器具有以下几种：

选择器	描述
:contains()过滤选择器	匹配包含给定文本的元素
:empty过滤选择器	匹配所有不包含子元素或者文本的空元素
:parent过滤选择器	匹配含有子元素或者文本的元素
:has()过滤选择器	匹配含由选择器所有匹配的元素的元素

说明：由于jQuery对象是类数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内容过滤选择器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
</head>
<body>
  <div>这是div元素</div>
  <div></div>
  <div>
    <div id="son"></div>
  </div>
  <script>
  	//含有di文字内容的元素
    console.log($('div:contains("di")'));
    // 匹配所有不包含子元素或者文本的空元素
    console.log($('div:empty'));
    //匹配含有子元素或者文本的元素
    console.log($('div:parent'));
	//div的id值为son的元素
    console.log($('div:has("#son")')[0]);
  </script>
</body>
</html>

可见性过滤选择器

jQuery的可见性过滤选择器具有以下几种：

选择器	描述
:hidden过滤选择器	匹配所以不可见元素，或者type为hidden的元素
:visible过滤选择器	匹配所有的可见元素

说明：由于jQuery对象是数组对象，即使匹配的元素只有一个，返回的结果依旧是类数组对象。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>可见性过滤选择器</title>
  <script src="../../js/jquery-1.12.4.js"></script>
  <style>
    #box{
      display: none;
    }
    #box1{
      visibility: hidden;
    }
  </style>
</head>
<body>
  <div id="box">派大星</div>
  <div id="box1">海绵宝宝</div>
  <input type="hidden" value="章鱼哥">
  <input type="text" name="username">
  <script>
    /*
        :hidden选择器
        * 不能匹配CSS样式属性visibility设置为hidden的隐藏元素
        * 还能匹配HTML页面中不做任何显示效果的元素
        * 用法 - 尽量确定元素类型或指定范围
    */ 
    console.log($(':hidden'));
    /*
      :visible选择器
      * 匹配css样式属性visibility设置为hidden的隐藏元素
        * 当visibility设置为hidden时的元素，依旧占有页面空间
      * 还能匹配到HTML页面中的<html>和<body>元素
    */ 
    console.log($(':visible'));
  </script>
</body>
</html>