码磊姐姐
雄关漫道真如铁,而今迈步从头越。

定义:JQuery选择器允许对HTML元素组或单个元素进行操作

基于元素的id、类、类型、属性、属性值等“查找”(或选择)HTML元素。它基于已经存在的CSS选择器,还有一些自定义的选择器

 

所有的选择器都以美元符号开头:$()

一、元素选择器

基于元素名选取元素 $(“p”)

 $(document).ready(function(){

            $("button").click(function(){

               $("p").hide();

            });

        });

  

 

 

 

        

运行结果:点击按钮,p标签隐藏

 

 

 

 

 

 二、id选择器

JQuery #id选择器通过HTML元素的id属性选取指定的元素

页面中元素的id应该是唯一的。所以要在唯一的元素需要通过#id选择器

语法:$(“#test”)

实例:

 // 2.id选择器

    $(document).ready(function(){

        $("button").click(function(){

         $("#test").hide();

        });

    });

 

三、.class选择器

JQuery类选择器可以通过指定的class查找元素

点击按钮后所有带有class=test”属性的元素都隐藏

$(document).ready(function(){

      $("button").click(function(){

        $(".test").hide();

      });

    });

四、更多实例:

$(“*”)   选取所有元素

$(this)   选取当前HTML元素

$(“p.intro”) 选取class intro<p>元素

$(“p.first”)  选取第一个<p>元素

$(“ul li:first”) 选取第一个<ul>元素的第一个<li>元素

$(“ul li:first-child”) 选取每一个<ul>元素的第一个<li>元素

$(“[href]”)选取带有href属性的元素

$(“a[target=’_blank’]”)  选取target属性值等于”_blank”<a>元素

$(“a[target!=’_blank’]”)   选取target属性值不等于”_blank”<a>元素

$(“:button”)  选取所有type=”button”<input>元素和<button>元素

$(“tr:even”)  选取偶数位置的<tr>元素

$(“tr:odd”)   选取奇数位置的<tr>元素

五、独立文件中使用JQuery函数

 

<head>

 <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"> </script> 

<script src="my_jquery_functions.js"></script> 

</head>

 

 六、通过$(“:button”)可以选取所有type=”button”<input>元素和<button>元素,

        如果去掉冒号,$(“button”)只能获取<button>元素

代码实例:

    <p id="test1">点进这里测试  <b>button</b></p><p id="test2">点进这里测试 <b>:button</b></p><button>Button 按钮</button><input type="button" value="Input 按钮">

 

关于:和[]

: JQuery的过滤选择器,语法类似于css中的伪类选择器,可分为基本过滤(p:first),内容过滤(:empty),子元素过滤(:first-child) 和属性过滤[href]。

可以理解为种类的意思,如p:first,p的种类为第一个

[] 属性。如[href]选取带有href属性的元素

$("#id", ".class")  复合选择器

$(div p span)       层级选择器 //div下的p元素中的span元素

$(div>p)            父子选择器 //div下的所有p元素

$(div+p)            相邻元素选择器 //div后面的p元素(仅一个p)

$(div~p)            兄弟选择器  //div后面的所有p元素(同级别)

$(.p:last)          类选择器  过滤选择器  第一个和最后一个(first 或者 last

$("#mytable td:odd")      层级选择  过滤选择器 奇偶(odd 或者 even

$("div p:eq(2)")    索引选择器 div下的第三个p元素(索引是从0开始)

$("a[href='www.baidu.com']")  属性选择器

$("p:contains(test)")        // 内容过滤选择器,包含text内容的p元素

$(":emtyp")        //内容过滤选择器,所有空标签(不包含子标签和内容的标签)parent 相反

$(":hidden")       //所有隐藏元素 visible

$("input:enabled") //选取所有启用的表单元素

$(":disabled")     //所有不可用的元素

$("input:checked") //获取所有选中的复选框单选按钮等

$("select option:selected") //获取选中的选项元素

 

posted on 2020-08-04 16:19  码磊姐姐  阅读(116)  评论(0编辑  收藏  举报