正文

2.1寻找元素（重要的选择器和筛选器）

author  author  2022-08-01  741

关键词：

2 、寻找元素（重要的选择器和筛选器）

2.1、选择器

1.1 基本选择器 $("*") $("#id") $(".class") $("element") $(".class, p, div")

【基本选择器】代码展示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <div id="notMe"><p>id="notMe"</p></div>
    <div id="myDiv">id="myDiv"</div>
    <span id="foo:bar">1</span>
    <span id="foo[bar]">2</span>
    <span id="foo.bar">3</span>
    <div class="notMe">div class="notMe"</div>
    <div class="myClass">div class="myClass"</div>
    <span class="myClass">span class="myClass"</span>

    <script>
        // id 选择器
        var x1 = $("#myDiv")  // 默认获取的列表  [ <div id="myDiv">id="myDiv"</div> ]
        x1.each(function () {
            console.log("id 选择器",this)
        })

        var x2 = $("#foo\[bar\]") // 重点注意转义。
        x2.each(function () {
            console.log("id 选择器",this)
        })

        // 标签选择器
        var x3 = $("div") // [ <div>DIV1</div>, <div>DIV2</div> ]
        x3.each(function () {
            console.log("标签选择器 ",this)
        })

        // class 选择器
        var x4 = $(".myClass")   // [ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]
        x4.each(function () {
            console.log("class 选择器 ",this)
        })
        $("*")

        /*
        匹配所有元素
        多用于结合上下文来搜索
        */

        // selector1,selector2,selectorN
        /*将每一个选择器匹配到的元素合并后一起返回。
        你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
        */
        $("div,span,p.myClass")  //[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

</script>

</body>
</html>

1.2 、层级选择器 $(".outer div")(所有的后代) $(".outer>div")(所有的子代) $(".outer+div")(匹配所有跟在.outer后面的div) $(".outer~div")(.outer后面的所有div)

【层级选择器】代码展示：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../jquery-1.9.1.min.js"></script>
</head>
<body>

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />


<script>
    // 后代选择器 ancestor descendant
    // 在给定的祖先元素下匹配所有的后代元素
    var x1 = $("form input") //[ <input name="name" />, <input name="newsletter" /> ]
    x1.each(function () {
        console.log("后代选择器 ",this)
    })
    // 儿子选择器 在给定的父元素下匹配所有的子元素
    var x2 = $("form > input") //[ <input name="name" /> ]

    // 只要是相邻的即可
    var x3 = $("label + input") //[ <input name="name" />, <input name="newsletter" /> ]

    // 兄弟选择器
    var x4  = $("form ~ input") //[ <input name="none" /> ]

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

1.3 基本筛选器 $("li:first") $("li:eq(2)") $("li:even")(偶数) $("li:gt(1)")

冒号的基本选择器

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>

    <input name="apple" />
    <input name="flower" checked="checked" />
    <table>
      <tr><td>Header 1</td></tr>
      <tr><td>Value 1</td></tr>
      <tr><td>Value 2</td></tr>
    </table>

    <h1>Header 1</h1>
    <p>Contents 1</p>
    <h2>Header 2</h2>
    <p>Contents 2</p>
    <button id="run">Run</button><div></div>


   <script src="jquery-1.12.4.js">
        // first last
        var x1 = $("li:first")  //[ <li>list item 1</li> ]

        // not()
        var x2 = $("input:not(:checked)") //[ <input name="apple" /> ]

        // even 偶数

        var x3 = $("tr:even")  //[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]
        // odd 奇数
        var x4 = $("tr:odd") // [ <tr><td>Value 1</td></tr> ]

        // eq 找索引 gt() lt() $("div:lang(en)")
        var x5 = $("tr:eq(1)") //[ <tr><td>Value 1</td></tr> ]
        // :header 匹配如 h1, h2, h3之类的标题元素
         $(":header").css("background", "#EEE"); //[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

        // :animated 匹配所有正在执行动画效果的元素
        $("#run").click(function(){
          $("div:not(:animated)").animate({ left: "+=20" }, 1000);
        });

            $("div").click(function(){
          if ( $(this).hasClass("protected") )
            $(this)
              .animate({ left: -10 })
              .animate({ left: 10 })
              .animate({ left: -10 })
              .animate({ left: 10 })
              .animate({ left: 0 });
        });
        // focus
        // :root  html元素
    </script>

</body>
</html>

1.4 属性选择器 $(‘[id="div1"]‘) $(‘["alex="sb"][id]‘)

>>1.4.1、内容选择器：

代码展示：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>



<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn</div>

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

<div><p>Hello</p></div>
<div>Hello again!</div>

<script>
       // contains()  匹配包含给定文本的元素
    var x6 = $("div:contains(‘John‘)")    //[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

    // empty  匹配所有不包含子元素或者文本的空元素
    $("td:empty")                        //[ <td></td>, <td></td> ]
    //:has(selector)  匹配含有选择器所匹配的元素的元素

    $("div:has(p)").addClass("test");     //[ <div class="test"><p>Hello</p></div> ]


    //:parent  匹配含有子元素或者文本的元素
    $("td:parent")    //[ <td>Value 1</td>, <td>Value 2</td> ]  查找所有含有子元素或者文本的 td 元素



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

>> 1.4.2、可见性：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="jquery-1.12.4.js"></script>
</head>
<body>

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

<script>
    // :hidden 匹配所有不可见元素，或者type为hidden的元素
    $("tr:hidden")      //[ <tr style="display:none"><td>Value 1</td></tr> ]
    $("input:hidden")  //[ <input type="hidden" name="id" /> ]

    //:visible 匹配所有的可见元素
    $("tr:visible")   //[ <tr><td>Value 2</td></tr> ]
    
</script>


</body>
</html>

>> 1.4.3、属性：

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.4.js"></script>
</head>
<body>

    <div>
      <p>Hello!</p>
    </div>
    <div id="test2"></div>
    
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="accept" value="Evil Plans" />
    <input name="man-news" />
    <input name="milkman" />
    <input name="letterman2" />
    <input name="newmilk" />

    <script>
    
        //[attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
        $("div[id]")  //[ <div id="test2"></div> ]
        //[attribute=value]  匹配给定的属性是某个特定值的元素
        $("input[name=‘newsletter‘]").attr("checked", true);  //[ <input type="checkbox" name="newsletter" value="Hot Fuzz" checked="true" />, <input type="checkbox" name="newsletter" value="Cold Fusion" checked="true" /> ]
        //[attribute!=value]  [attribute^=value]
    
    
        //[selector1][selector2][selectorN]  复合属性选择器，需要同时满足多个条件时使用。
            $("input[id][name$=‘man‘]") //[ <input id="letterman" name="new-letterman" /> ]
    
        //[attribute*=value]  匹配给定的属性是以包含某些值的元素‘
        $("input[name*=‘man‘]") //[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]
        
    </script>


</body>
</html>

1.5 表单选择器 $("[type=‘text‘]") 简写成 $(":text") 注意: 只适用于input标签

表单选择器

代码展示：

$("input:checked")


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="jquery-1.12.4.js"></script>
</head>
<body>

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" />
    <input type="reset" />

    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>

<script>
    $(":input")     //所有input
    $(":password")  //[ <input type="password" /> ]
    $(":checkbox") 
</script>
</body>
</html>

来自为知笔记(Wiz)

jquery选择器——子元素筛选选择器和表单元素选择器

子元素筛选选择器和表单元素选择器1 子元素筛选选择器描述$(":first-child") 选择所有父级元素下的第一个子元素$(":last-child") 选择所有父级元素下的最后一个子元素$(":only-child")&... 查看详情

jquery——表单对象属性筛选选择器和特殊选择器this

...和特殊选择器this1 表单对象属性选择器专门针对表单元素，可以附加在其他选择器的后面，对所选择的表单元素进行筛选2 表单对象属性选择器的描述$(":enabled") 选取可用的表单元素$(":disabled") &nb... 查看详情

jquery选择器和方法

选择器补充筛选选择器伪类选择器:XX():eq()根据索引找元素,从0开始:first()第一个子元素:last()最后一个子元素:nth-child(index)根据序号找元素,从1开始$(‘ulli:eq(3)‘).css(‘color‘,‘green‘);$(‘ulli:first‘).css(‘color‘,‘red‘);$(‘ulli:last... 查看详情

jquery

目录jQuery是什么？什么是jQuery对象？寻找元素(选择器和筛选器)操作元素(属性，css，文档处理)事件动画效果扩展方法(插件机制)经典实例练习一jQuery是什么？<1>jQuery是由美国人JohnResig创建，至今已吸引了来自世界各地的众多... 查看详情

jquery选择器和筛选器(代码片段)

一、jQuery选择器和筛选器总体　　1.选择器　　　　1）基本选择器　　　　　　(1)标签选择器：$("标签名") 例：$("p") $("div") //p,div这些都是html中的固定标签，... 查看详情

jquery(代码片段)

...jquery的基础语法：$(selector).action()二、寻找元素(选择器和筛选器) 2.1 选择器2.1.1基本选择器& 查看详情

jquery-基础知识

...ry是什么？二什么是jQuery对象？三寻找元素(选择器和筛选器) 四操作元素(属性，css，文档处理)扩展方法(插件机制)回到顶部一jQuery是什么？［1］ jQuery由美国人JohnResig创建，至今已吸引了来自世界各地的众多javasc... 查看详情

前端基础之jquery

...ry是什么？二什么是jQuery对象？三寻找元素(选择器和筛选器) 四操作元素(属性，css，文档处理)扩展方法(插件机制)回到顶部一jQuery是什么？［1］ jQuery由美国人JohnResig创建，至今已吸引查看详情

前端基础之jquery（day55）

...ry是什么？二什么是jQuery对象？三寻找元素(选择器和筛选器) 四操作元素(属性，css，文档处理)扩展方法(插件机制) 一.jQuery是什么？［1］ jQuery由美国人JohnResig创建，至今已吸引了来自世界各地的众多javascript高手... 查看详情

jquery选择器

...ery选择器包括了css选择器和自己新增的一些选择器：基本筛选器：　　：first 　　：last 　　：gt()　　：lt()　　：eq()　　：even　　：odd可见性选择器：　　：hidden（匹配所有不可见（包括display:none,不包括visibility：hidden... 查看详情

css选择器伪类选择器和伪元素选择器

选择器的权重伪类:hover当鼠标悬浮在元素上方时，向元素添加样式 :active向被激活的元素添加样式 :first-child向元素的第一个子元素添加样式 :focus向拥有键盘输入焦点的元素添加样式 :link 向未被访问的链接添加样式 :visited 向已被... 查看详情

jquery选择器和基本操作(代码片段)

...om对象$("#msg").html();$("#msg")[0].innerHTMLViewCode 1.选择器和筛选器1<!DOCTYPEhtml>2<htmllang="en"& 查看详情

h514-后代选择器和子元素选择器

14-后代选择器和子元素选择器<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>14-后代选择器和子元素选择器</title></head><body><!--1.后代选择器和子元素选择器之间的区别?1.1后代选择器使用空查看详情

css选择器——属性选择器和基于元素结构关系的选择器

...否存在该属性来选择　　　　如果希望选择有某个属性的元素，例如要选择有class属性的所有h1元素，使其文本为银色，可以这样写：/*根据单个属性来选择*/h1[class]{color:sliver;}/*还可以根据多个属性来选择*/h1[class][id]{　　color:yell... 查看详情

css3中伪类选择器和伪元素介绍

...须要掌握的，下面和大家讨论一下css3中伪类选择器和伪元素。类选择器在css中可以使用类选择器把相同的元素定义成不同的样式。比如：p.left{text-align:left}p.rigth{text-align:right}伪类选择器类选择器和伪类选择器的区别在于，类选... 查看详情

css3选择器和伪类

元素选择子:* 任何元素E 与E标签结合的任何元素EF E的所有派生标签中，有F标签的元素E>F 或者 E/F E的所有直接的拥有F标签的子类E+F 所有具有F标签的元素，紧靠的前一个元素有E标签E~F 所有具有F... 查看详情

css类选择器和id选择器

ID用于标识页面上的特定元素（比如站点导航），而且必须是唯一的。ID也可以用来标识持久的结构性元素，例如主导航或内容区域。ID还可以用来标识一次性元素，例如某个链接或表单元素。一个ID只能应用于页面上的一个元素... 查看详情

选择器和层叠

... 常见CSS属性：属性color，示例color:red，描述设置元素内容的颜色属性text-align，示例text-align:center，描述设置元素内容的对齐text-align，方式text-align:center，描述设置元素内容的对齐方式属性font-size，示例font-size:28px，描述... 查看详情

正文

2.1寻找元素（重要的选择器和筛选器）

2 、寻找元素 （重要的选择器和筛选器）

jquery选择器——子元素筛选选择器和表单元素选择器

jquery——表单对象属性筛选选择器和特殊选择器this

jquery选择器和方法

jquery

jquery选择器和筛选器(代码片段)

jquery(代码片段)

jquery-基础知识

前端基础之jquery

前端基础之jquery（day55）

jquery选择器

css选择器伪类选择器和伪元素选择器

jquery选择器和基本操作(代码片段)

h514-后代选择器和子元素选择器

css选择器——属性选择器和基于元素结构关系的选择器

css3中伪类选择器和伪元素介绍

css3选择器和伪类

css类选择器和id选择器

选择器和层叠

2 、寻找元素（重要的选择器和筛选器）