jQuery基础之-jQuery选择器(一)

shmily

1 基础选择器

1.1 基本选择器

基本选择器在开发中使用的频率是最高的,主要有以下4种:

  1. 元素选择器:语法为$("元素名称")

    $("p").css("color","red");
  2. id选择器:语法为$("#id名称"),别忘记写#

    $("#submit").css("color","red");
  3. class选择器:语法为$(".类名称"),别忘记写.

    $(".btn").css("color","red");
  4. 群组选择器:即同时对几个选择器进行相同的操作,语法为$("选择器1, 选择器2, ... , 选择器n")

    $("h3,div,p,span").css("color","red");

1.2 层次选择器

常见的层次关系有:父子、后代、兄弟、相邻,而在jQuery中,层次选择器则有以下4种:

  1. 后代选择器:语法为$("M N"),注意M与N之间用空格隔开,如下例子所示:表示选取id="first"的元素内部的所有p元素,不论是子代还是后代都会被选中

    $("#first p")
  2. 子代选择器:语法为$("M>N"),它只选取子元素,不包括其他后代元素。
  3. 兄弟选择器:语法为$("M~N"),即选取元素后面(不包括前面)的某一类兄弟元素
  4. 相邻选择器:语法为$("M+N"),选取元素后面的某一个相邻的兄弟元素
注:兄弟选择器选择的是某一类元素,而相邻选择器选择的是某一个元素。

1.3 属性选择器

属性选择器即通过元素的属性来选择元素的一种方式,常见的属性选择器如下所示(E代表element,即元素):

属性选择器经常用于选取表单元素
选择器说明
E[attr]选择元素E,其中E元素必须带有attr属性
E[attr="value"]选择元素E,其中E元素的attr属性取值是value
E[attr!= "value"]选择元素E,其中E元素的attr属性取值不是value
E[attr^= "value"]选择元素E,其中E元素的attr属性取值是以value开头的任何字符
E[attr$="value"]选择元素E,其中E元素的attr属性取值是以value结尾的任何字符
E[attr*= "value"]选择元素E,其中E元素的attr属性取值是包含value的任何字符
E[attr| = "value"]选择元素E,其中E元素的attr属性取值等于value或者以value开头
E[attr~= "value"]选择元素E,其中E元素的attr属性取值等于value或者包含value

2 伪类选择器

2.1 位置伪类选择器

位置伪类选择器:即根据页面中的位置来选取元素。常见的选择器如下表所示:

选择器说明
:first选取某元素的第一个
:last选取某元素的最后一个
:odd选取某种元素中序号为“奇数”的所有元素,由于序号从0开始,选中的为偶数行
:even选取某种元素中序号为“偶数”的所有元素,由于序号从0开始,选中的为奇数行
:eq(n)选取某种元素的第n个,n是一个整数,从0开始
:lt(n)选取某种元素中小于n的所有元素,n是一个整数,从0开始
:gt(n)选取某种元素中大于n的所有元素,n是一个整数,从0开始

2.2 子元素伪类选择器

子类伪类选择器:即选取某个元素的子元素,其可以分为两大类:按位置按类型位置(分类名自己起的😅)。

第一类如下表所示:E代表子元素。

选择器说明举例
E:first-child选择父元素下的第一个子元素$("ul li:first-child")
E:last-child选择父元素下的最后一个子元素$("ul li:last-child")
E:nth-child(n)选择父元素下的第n个子元素或奇偶元素,n取值有3种:数字、odd、even,注意:n从1开始
E:only-child选择父元素下唯一的子元素,该父元素只有一个子元素

第二类如下表所示:同样地,E代表子元素。

选择器说明
E:first-of-type选择父元素下的第一个E类型的子元素
E:last-of-type选择父元素下的最后一个E类型的子元素
E:nth-of-type(n)选择父元素下的第n个E类型的子元素或奇偶元素,n取值有3种:数字、odd、even,注意:n从1开始
E:only-of-type选择父元素下唯一的E类型的子元素,注意:该父元素可以有多个子元素

2.3 可见性伪类选择器

可见性伪类选择器,指的是根据元素的可见与不可见两种状态来选取元素。

选择器说明
E:visible选取所有可见元素
E:hidden选取所有不可见元素

如下例子所示:我们将li标签隐藏,待点击按钮后将会显示出来。

<li style="display:none;">隐藏的元素</li>
<input id="btn" type="button" value="显示">
<script>
    $("#btn").click(function(){
        $("li:hidden").css("display","block");
    });
</script>

2.4 内容伪类选择器

选择器说明
:contains(text)选取包含指定文本的元素
:has(selector)选取包含指定选择器的元素
:parent选取内部含有文本或者子元素的元素(多读几遍,定语太多😄)
:empty选取空元素,即不含有文本内容且没有子元素。

举例:

$("p:contains(jQuery)") //取文本内容包含“jQuery”的p元素
$("div:has(span)")  //选取内部含有span的div元素
$("td:empty") //选取内部没有文本也没有子元素的td元素
$("td:parent")  //表示选取内部有文本或者子元素的td元素

2.5 表单伪类选择器

表单伪类选择器是用来专门操作表单元素的。常用的如下表所示:

选择器说明
:input选取所有input元素
:button选取所有普通按钮,即<input type="button" />
:submit选取所有提交按钮,即<input type="submit" />
:reset选取所有重置按钮,即<input type="reset" />
:text选取所有单行文本框
:textarea选取所有多行文本框
:password选取所有密码文本框
:radio选取所有单选框
:checkbox选取所有复选框
:image选取所有图片域
:file选取所有文件域
$("input:checkbox").attr("checked", "checked"); //选取所有的复选框,并设置复选框的checked属性值为checked

2.6 表单属性伪类选择器

表单属性伪类选择器,指的是根据表单元素的属性来选取的一种伪类选择器。具体有:

选择器说明
:checked选取所有被选中的表单元素,一般是单选框或复选框
:selected选取被选中的表单元素的选项,一般是下拉列表
:enabled选取所有可用的表单元素
:disabled选取所有不可用的表单元素
:read-only选取所有只读的表单元素
:focus选取所有获得焦点的表单元素

举例:获取被选中复选框的值。

<script>
    var result = $("input:checked").val();
</script>
<label><input type="checkbox" value="苹果"/>苹果</label>
<label><input type="checkbox" value="西瓜" checked/>西瓜</label>
<label><input type="checkbox" value="蜜桃"/>蜜桃</label>

2.7 其他伪类选择器

如下表所示:

选择器说明
:not(selector)选取除了某个选择器之外的所有元素
:animated选取所有正在执行动画的元素
:root选取页面根元素,即html元素
:header选取h1~h6的标题元素
:target选取锚点元素
:lang(language)选取特定语言的元素

举例:则选取除第4项之外的所有其他项。

<script>
    $("li:not(#select)").css("color", "red");
</script>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li id="select">jQuery</li>
    <li>Vue.js</li>
</ul>
阅读 645

放弃不难,但坚持一定很酷!

1 声望
0 粉丝
0 条评论

放弃不难,但坚持一定很酷!

1 声望
0 粉丝
文章目录
宣传栏