jQuery选择器介绍

作者: 佩佩216 | 来源:发表于2018-07-16 10:15 被阅读0次

jQuery选择器说明

jQuery最核心的组成部分就是选择器引擎，它完全继承css的风格，可以对DOM元素的标签名，属性名，状态等进行快速准确的选择，而且不必担心浏览器的兼容性，写法更加简洁。
优点：相对于直接使用Javascript获取页面元素和处理业务逻辑相对，使用jQuery选择器进行操作代码更简单且拥有完善的代码检测机制。

基本选择器

主要有：ID选择器，类选择器，标签选择器，并集选择器和通配符选择器。

选择器	语法	功能	参考示例
ID选择器	#id	根据给定的ID匹配一个元素	$('#divID')
类选择器	.class	根据给定的类名匹配所有的元素	$(“.box”)
标签选择器	element	根据给定的元素名匹配所有的元素	$(“div”)
通配符选择器	*	匹配所有的元素	$(“*”)
并集选择器	#id,.class	将每个选择器匹配到的元素合并在一起后返回	$(“#divID,.box”)

<div id="demo">我是id为demo的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box1">我是class为box1的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<div class="box2">我是class为box2的div标签</div>
<p>我是p标签</p>
<script>
 $(function () {
        //ID选择器:获取页面中id为demo的标签,设置背景颜色为红色
        $('#demo').css('background','red');
        //类选择器:获取页面中所有class为box1的标签,并设置背景颜色
        $('.box1').css('background','yellow');
        //标签选择器:获取页面中所有的p标签
        $('p').css('background','blue');
        //并集选择器:获取页面中id为demo的标签以及class为box2的所有标签
        $('#demo,.box2').css('background','green');
        //并集选择器:获取页面中id为demo的标签以及class为box2的所有标签
        $('*').css('background','purple')
    })
</script>

层级选择器

层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、直接后代、下一个相邻兄弟和后面所有兄弟元素的关系，通过其中某类关系可以方便快捷地定位元素。

选择器	语法	功能	参考示例
后代选择器	parent child	根据祖先元素匹配所有的后代元素	$(“div p”)
直接后代选择器	parent > child	根据父元素匹配所有的子元素	$(“div > .box”)
下一个相邻兄弟	prev + next	匹配所有紧接在prev元素后的相邻元素	$(“#demoID + div”)
后面所有兄弟	prev ~ siblings	匹配 prev 元素之后的所有兄弟元素	$(“#demoID ~ div”)

补充：next（） == 下一个相邻兄弟 ||nextAll() == 后面所有的兄弟

<script>
    $(function () {
         //1.后代标签$('.box div')
        //要获取class为box的标签所有后代中的div标签
        $('.box div').css('background','red');
        //2.获取直接后代$('.box>div')
        $('.box>div').css('background','orange');
        //3.当前标签后面的第一个兄弟节点 $(".box1 + div")
        $(".box1 +div").css("background","green");
        //4. 当前标签后面的所有的兄弟节点 $(".box1 ~ div")
        $(".box1 ~ div").css("background","green");
    })
</script>

父子选择器相关方法
parent（）获取当前标签的父节点；
parents（）获取当前标签的祖先节点；
parentsUntil（）获取当前标签的祖先节点直到···；
children（）获取当前标签的子节点；
sibling（）获取当前标签的兄弟节点。

<body>
<div>
    <div class="box">
        <div>demo</div>
        <div class="active">demo</div>
        <div>demo</div>
        <div>demo</div>
        <div>demo</div>
    </div>
    <span>我是span</span>
</div>
<button>点击我</button>
<script>
    $(function () {

        $("button").click(function () {
            //(1) 获取当前标签的父节点
            $(".active").parent().css("background","red");
            //(2) 获取当前标签的祖先节点
            $(".active").parents().css("background","red");
            //(3) 获取当前标签的祖先节点直到...
            $(".active").parentsUntil("body").css("background","red");
            //(4) 获取当前标签的子节点
            $(".box").children().css("background","green");
            //(5) 获取除了当前标签之外的其他兄弟节点
            $(".active").siblings().css("background","green");
        })
    })

筛选选择器

筛选选择器可以划分为 :基本筛选选择器、内容筛选选择器、可见性筛选选择器、属性筛选选择器、子元素筛选选择器、表单对象属性筛选选择器。

基本筛选选择器：

选择器语法	功能
last() 或 : last	获取最后一个元素
first() 或 : first	获取第一个元素
:eq(index)	获取指定索引值的元素
:gt(index)	获取大于给定索引值的元素
:lt(index)	获取小于给定索引值的元素
:not(selector)	获取除给定选择器外的所有元素
:header	获取所有标题类型的元素，如h1 h2
:animated	获取正在执行动画效果的元素
:even	获取所有索引值为偶数的元素，索引号从0开始
:odd	获取所有索引值为奇数的元素，索引号从0开始

<script>
    $(function () {
        //01 获取整个页面中第一个li标签,并设置背景颜色
        $("li:first").css("background","green");
        //02 获取整个页面中最后一个li标签,并设置背景颜色
        $("li:last").css("background","green");
        //03 获取整个页面中所有的li标签,除了最后一个
        $("li:not(:last)").css("background","green");
        //04 获取整个页面中所有的li标签,除了索引为2的之外
       $("li:not(:eq(2))").css("background","green");
        //05 获取索引值为偶数的li标签
        $("li:even").css("background","green");
        //06 获取索引值为奇数的li标签
        $("li:odd").css("background","green");
        //07 获取索引值为4的li标签
        $("li:eq(4)").css("background","green");
        //08 获取所有索引值大于4的li标签
        $("li:gt(4)").css("background","green");
        //09 获取所有索引值小于4的li标签
        $("li:lt(4)").css("background","green");
    });
</script>

内容筛选选择器

选择器语法	功能
:contains(text)	获取包含给定文本的元素
:parent	获取含有子元素或者文本的元素
:empty	获取所有不包含子元素或文本的空元素
:has(selector)	获取含有选择器所匹配的元素

<body>
<div>天王盖地虎</div>
<div><span>我是span</span></div>
<div>宝塔镇河妖</div>
<div></div>
<script>
    $(function () {
        //(1) 获取包含给定文本的元素
        $("div:contains('天')").css("background","red");
        $("div:contains('塔')").css("background","green");
        //(2) 获取不包含子元素或文本的空元素
        $("div:empty").css("background","red");
        //(3) 获取含有子元素或者是文本的元素
        $("div:parent").css("background","yellow");
        //(4) 获取含有span子标签的div
        $("div:has('span')").css("background","red");
    })
</script>
</body>

属性筛选选择器
根据元素的某个属性获取元素，在使用的时候我们可以匹配单个属性也可以进行多个属性的匹配。

选择器语法	功能
[属性名]	获取包含给定属性的元素
[属性名='value']	获取包含给定属性且等于指定值的元素
[属性名！='value']	获取包含给定属性且不等于指定值的元素
[属性名^='value']	获取包含给定属性且以指定字符开头的元素
[属性名$='value']	获取包含给定属性且以指定字符结尾的元素
[属性名*='value']	获取包含给定属性且包含指定字符的元素
[属性名1][属性名2]	获取满足多个条件的复合属性的元素

<div>
    <a href="www.baidu.com">www.baidu.com</a><br>
    <a href="www.jd.com">www.jd.com</a><br>
    <a href="www.taobao.com">www.taobao.com</a><br>
    <a href="www.12306.cn">www.12306.cn</a><br>
    <a href="www.12306.cn" title="demo">www.12306.cn</a><br>
    <a href="www.12306.cn" title="Test">www.12306.cn</a><br>
    <a>我什么也不是</a>
</div>
<button>设置所有拥有href属性的a标签</button><br>
<button>设置harf属性值为www.baidu.com的a标签</button><br>
<button>设置harf属性值不为www.baidu.com的a标签</button><br>
<button>设置harf属性值以www开头的a标签</button><br>
<button>设置harf属性值以com结尾的a标签</button><br>
<button>设置harf属性值包含123的a标签</button><br>
<button>设置harf属性值中以www开头且title中包含demo的a标签</button><br>
<script src="js/jquery-3.2.1.js"></script>
<script>
    $(function () {
        $("button").eq(0).click(function () {
            $("a[href]").css("background","green");
        });
        $("button").eq(1).click(function () {
            $("a[href='www.baidu.com']").css("background","green");
        });
        $("button").eq(2).click(function () {
           $("a[href!='www.baidu.com']").css("background","green");
        });
        $("button").eq(3).click(function () {
            $("a[href^='www']").css("background","green");
        });
        $("button").eq(4).click(function () {
            $("a[href$='com']").css("background","green");
        });
        $("button").eq(5).click(function () {
            $("a[href*='520']").css("background","green");
        });
        $("button").eq(6).click(function () {
            $("a[href^='www'][title='demo']").css("background","green");
        });
    });
</script>

子元素筛选选择器
通过子元素筛选选择器可以方便轻松的获取父元素中制定的某个元素

选择器语法	功能
:first-child	获取每个父元素下的第一个子元素
:last-child	获取每个父元素下的最后一个子元素
:only-child	获取每个父元素下的仅有一个子元素
:nth-child(eq-index)	获取每个父元素下特定位置的元素索引从1开始

可见性筛选选择器
根据元素是否可见的特征获取元素，分为可见和不可见两种。

选择器语法	功能
:visible	获取所有的可见元素
:hidden	获取所有不可见元素,或者type为hidden的元素

表单对象属性筛选选择器
通过表单中某对象的属性特征获取该类元素，主要有enabled、disabled、checked（选中）elected等属性。

选择器语法	功能
:enabled	获取表单中所有属性为可用的元素
:disabled	获取表单中所有属性为不可用的元素
:checked	获取表单中所有被选中的元素
:selected	获取表单中所有被选中option的元素

表单选择器

表单在前端开发中是非常重要的标签，在显示和提交数据的数据经常需要用到，在 jQuery 框架中引入了表单选择器，该选择器专为表单量身打造，通过表单选择器可以在页面中快速定位某表单对象。

选择器语法	功能
:file	获取所有文件域
:image	获取所有的图像域
:text	获取所有的单行文本框
:reset	获取所有重置按钮
:radio	获取所有单选框按钮
:button	获取所有按钮
:submit	获取所有提交按钮
:checkbox	获取所有的复选框
:password	获取所有的密码框
:input	获取所有的input、textarea、select标签

jQuery选择器知识结构

网友评论

本文标题： jQuery选择器介绍

本文链接：https://www.haomeiwen.com/subject/egknrxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！