jQuery:选择器使用详解

444 阅读5分钟

小知识,大挑战!本文正在参与“  程序员必备小知识  ”创作活动

作者的其他平台:

| CSDN:blog.csdn.net/qq_4115394…

| 掘金:juejin.cn/user/651387…

| 知乎:www.zhihu.com/people/1024…

| GitHub:github.com/JiangXia-10…

| 公众号:1024笔记

本文大概5816字,读完共需17分钟

1 前言

都说不会前端的测试不是一个好的后端开发。最近维护一个老的项目,其中的前端代码使用到了JQuery,由于自己以前对前端的了解并不是很多,没有系统的学习,都是遇到了问题才学习一下, 所以这次对Jquery进行了一次学习。

jQuery 是 js 的一个库,封装了我们开发过程中常用的一些功能,方便我们调用,能够大大提高开发效率。js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里即可。而使用jQuery较多的就是进行DOM操作,其中就涉及到了选择器的使用。

所以这篇文章就整理一下,JQuery中关于选择器的使用。

2 什么是jQuery选择器

jQuery选择器的使用使得获得页面元素变得更加容易、更加灵活,从而大大减轻了开发人员的压力,提高开发效率,而不需要像使用原生的js一样使用 document 对象的 getElementById(),getElementsByName() 和 getElementsByTagName() 方法访问 Document中的某个标签。

首先来一个原生的js写法和Jquery的写法,体现其不一样的地方。

原生Js代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 100px;
            background-color: yellow;
            margin: 10px;
            display: none;
        }
</style>
    <script>
        //原生js
        window.onload = function () {
            var btn = document.getElementsByTagName("button")[0];
            var divArr = document.getElementsByTagName("div");

            btn.onclick = function () {
                for (var i = 0; i < divArr.length; i++) {
                    divArr[i].style.display = "block";
                    divArr[i].innerHTML = "1024笔记";
                }
            }
        }
</script>
</head>
<body>
<button>这是一个按钮</button>
<div></div>
</body>
</html>

如果用 jQuery 来写,保持其他的代码不变,

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 100px;
            background-color: yellow;
            margin: 10px;
            display: none;
        }
</style>
   //需要先引入jquery
   <script src="jquery-1.11.1.js"></script>
    <script>
        $(document).ready(function () {
            //获取元素
            //根据标签名获取按钮元素
            var jQbtn = $("button");
            //根据标签名获取div元素
            var jQdiv = $("div");
            //绑定事件
            //事件是通过方法绑定的。
            jQbtn.click(function () {
               //显示div内容
                jQdiv.show(1000);
                //设置内容
                jQdiv.html("1024笔记");
            });
        });
</script>
</head>
<body>
<button>这是一个按钮</button>
<div></div>
</body>
</html>

上面的("button")("button")和("div")就是通过element选择器来获取标签元素。

JQuery的选择器基本可以分为以下九种:

  1. 基本选择器

  2. 层次选择器

  3. 基本过滤选择器

  4. 内容过滤选择器

  5. 可见性过滤选择器

  6. 属性过滤选择器

  7. 子元素过滤选择器

  8. 表单对象属性过滤选择器

  9. 表单选择器

接下来对这九种选择器一一进行说明。

3 选择器详解

一、基本选择器

1、ID选择器

栗子:获取所有id为demo1的元素

$('#demo1'

2、Element选择器

栗子:获取所有button的元素

$("button")

3、Class选择器

栗子:获取所有class为demo2的元素

$(".demo2")

注:Class和ID的区别在于id使用的符号是"#",而class使用的是"."。

4、*选择器

*表示遍历所有的元素,一般适用于结合上下文的搜索匹配,栗子:遍历获取demo3元素下所有元素:

$("demo3 *")

5、并列选择器

并列选择器又叫多选择器。栗子:获取所有的input元素、或id="demo4"的元素、或class="demo5"元素

$("input, #demo4, .demo5")

二、层次选择器

1、Parent>Child

直系子元素,匹配parent下第一层的子元素。栗子:id为list元素(父元素)里的第一代div元素(子元素):

$("#list > div")

2、Prev + next

当前元素的下一兄弟元素。栗子:class="item"元素的下一个div兄弟元素:

$(".item + div")

等同于next()方法,也可以写成:

$(".item").next("div")

3、Prev ~ Sibling

当前元素后面的所有的兄弟元素。栗子:class="item"元素之后的所有div兄弟元素:

$(".item ~ div"

等同于nextAll()方法,也可以写成:

$(".item").nextAll("div")

4、ancestor descendant

当前元素的所有的子元素,。栗子:id为list元素里所有的div元素:

$("#list div")

三、基本过滤选择器

1、:first 和 :last

获取第一个或最后一个元素。栗子:获取第一个button元素

$("button:first") 

栗子:获取最后一个input元素:

$("input:last"

2、:not

获取非元素。栗子:获取class不为demo的div元素

$("div:not(.demo)")

3、eq(x)

获取指定索引的元素。栗子:获取tr标签的第3行:

$("tr:eq(2)")

4、:even 和:odd

获取偶数或者奇数索引元素(下标从0开始),even为偶数;odd为奇数。栗子:获取tr标签下所有的偶数或奇数行

$("tr:even")
$("tr:odd")

5、:gt(x) 和 :lt(x)

获取大于x索引或者小于x索引的元素。栗子:获取tr标签下第三行之前或第三行之后的元素:

$("tr:gt(2)")//第三行之前所有行

$("tr:lt(2)")//第三行之后所有行

6、:header

获取所有标题元素元素(h1-h6标题)。栗子:

$(":header")

四、表单选择器

1、:input

获取input元素。栗子:获取所有的input元素

$(":input")

2、:text

获取text单行文本框元素。栗子:获取所有的text单行文本输入框元素

$(":text")

如果使用input,可以写成:

$("input[type=text]") 

3、:password

获取密码框元素。栗子:获取所有的密码输入框元素

$(":password")

如果使用input,可以写成:

$("input[type=password]") 

4、:radio

获取单选框元素。栗子:获取所有的单选框元素

$(":radio")

如果使用input,可以写成:

$("input[type=radio]") 

5、:checkbox

获取所有的复选框元素。栗子:获取所有的复选框框元素

$(":checkbox")

如果使用input,可以写成:

$("input[type=checkbox]") 

6、:image

获取图像按钮元素。栗子:获取所有的图像按钮元素

$(":image")

如果使用input,可以写成:

$("input[type=image]") 

7、:submit

获取所有的提交按钮元素。栗子:获取所有的提交按钮元素

$(":submit")

如果使用input,可以写成:

$("input[type=submit]") 

8、:reset

获取所有的重置按钮元素。栗子:

$(":reset")

如果使用input,可以写成:

$("input[type=reset]") 

9、:button

获取所有的按钮元素。栗子:

$(":button")

如果使用input,可以写成:

$("input[type=button]") 

10、:file

获取所有的上传控件元素。栗子:

$(":file")

如果使用input,可以写成:

$("input[type=file]") 

五、表单对象属性过滤选择器

1、:enable

获取所有激活的 input 元素。栗子:

  $(":enabled")

2、:disabled

获取所有禁用的 input 元素。栗子:

$(":disabled")

3、:selected

获取所有被选取的 input 元素。:selected 选择器选取被选择的 元素。栗子:

$(":selected")

4、:checked

获取所有被选中的 input 元素,:checked选择器选取所有选中的复选框或单选按钮。栗子:

$(":checked")

六、可见性过滤选择器

1、:hidden

:hidden选择器选取每个当前是隐藏的元素。栗子:

$(":hidden")

注:以下几种情况的元素是隐藏元素:

  • 设置为 display:none

  • 带有 type="hidden" 的表单元素

  • 隐藏的父元素(这也会隐藏子元素)

 该选择器对 visibility:hidden 和 opacity: 0 的元素不起作用。

2、:visible

:visible 选择器选取每个当前是可见的元素。栗子:

$(":visible ")

注:除以下几种情况之外的元素即是可见元素:

  • 设置为 display:none

  • type="hidden" 的表单元素

  • Width 和 height 设置为 0

  • 隐藏的父元素(同时隐藏所有子元素)

七、内容过滤选择器

1、:contains(text)

获取包含指定字符串的所有元素。栗子:

$(":contains('1024笔记')")

2、:empty

获取不包含子元素或文本为空的元素。栗子:获取所有没有子元素,或者内容文本为空的div元素。

$('div:empty')

3、:parent

选取包含子元素或文本的元素,与:empty相反。栗子:选取所有带有子元素或包含文本的 元素:

$("td:parent")

4、:has

选取指定子元素的元素。栗子:选取所有包含有 元素在其内的

元素:

$("p:has(span)")

八、属性过滤选择器

1、[attribute]

获取拥有attribute属性的所有元素。栗子:获取所有拥有title属性的a标签

$("a[title]")

2、[attribute=value]和[attribute!=value]

获取attribute属性等于或不等于value的所有元素。栗子:获取所有拥有title属性的值等于/不等于1024笔记的a标签

$("a[title="1024笔记"]")

$("a[title!="1024笔记"]")

3、[attribute^=value],[attribute$=value]和[attribute*=value]

获取attribute属性以value开始或以value结束或包含value的所有元素。栗子:

$('a[title^="1024笔记"]') 
$('a[title$="1024笔记"]') 
$('a[title*="1024笔记"]')

4、[selector1][selector2]

复合型属性过滤器,获取同时满足多个条件的元素。栗子:获取所有title以1024笔记开头,且class="demo"的a标签

$('a[title^="1024笔记"][class="demo"]')

九、子元素过滤选择器

1、:first-child 和 :last-child

获取第一个或最后一个子元素合并后的元素集合。栗子:

 $('div:first-child')
 $('div:last-child')

注: :fisrst 和 :last 返回的都是单个元素,而 :first-child 和 :last-child 返回的都是集合元素。比如 div:first 返回的是整个 DOM 文档中第一个 div 元素,而 div:first-child 是返回所有每个 div 元素下的第一个元素合并后的集合。

2、:only-child

获取当某个元素有且仅有一个子元素。栗子:

$('div:only-child')

3、:nth-child(x)

获取第N个子元素。栗子:

$('div:nth-child(1)')

**注:**除了 :nth-child(x),还有 :nth-child(even) 和 :nth-child(odd)。

$('tr:nth-child(even)')
$('tr:nth-child(odd)')

4 结尾

以上就是就是Jquery关于选择器的使用。个人对前端知识掌握有限,如有错误和问题,欢迎交流讨论。

最后如果觉得本文写得不错,就点下赞和再看推荐给更多的人呗。

以下是jQuery的一些相关网站:

今日推荐

SpringBoot开发Restful风格的接口实现CRUD功能

Postman接口测试图文教程

SpringBoot整合ElasticSearch实战

如何玩转Git

SpringBoot整合JPA进行数据访问