jQuery的核心功能选择器

选择器是jquery的核心

jquery选择器返回的对象是jquery对象，不会返回undefined或者null，因此不必进行判断

基本选择器：

ID选择器 $("#ID")

element选择器（标签选择器）$("标签") 如 $("div")

获取具体的标签，使用数组下标的方式 $("div")[index]

获取当前元素的索引值 $(this).index()

class选择器 $(".类名")

通配符选择器 $("*") 匹配所有元素，尽量不要用，效率比较低

多项选择器：

$("selector1, selector2, selector3...") 合并返回，每个选择器之间用逗号隔开

如果不同选择器的内容之间有重复，会自动舍去重复

返回的数组中的顺序是根据DOM中元素的顺序，而不是根据选择器的顺序

层级选择器

祖先后代选择器： $("父元素子孙元素") 中间用空格分开

如：获取aside里面的summary元素

var summaries=$("aside summary");

直接后代选择器：$("父元素>子元素") 中间用 >

如：获取aside下面的直接子元素summary

var summaries=$("aside>summary");

亲密兄弟选择器：$("兄元素+弟元素") 获取兄元素后面紧跟的一个弟元素

如：获取aside后面紧跟的details元素

var summaries=$("aside+details");

兄弟选择器： $("兄元素~弟元素") 获取兄元素后面的所有弟元素

如：获取aside后面出现的所有兄弟元素details

var summaries=$("aside~details");

属性选择器：

[attribute] 包含该属性的元素，如：$("[class]")

[attribute=value] 属性值等于指定值的元素，如：$("[class=tool]")

[attribute!=value] 属性值不等于指定的元素，如：$("[class!=tool]")

[attribute^=value] 属性值以指定元素开头，是单词的开头部分，如：$("[class^=tool]")

[attribute$=value] 属性值以指定元素结束，是单词的结束部分，如：$("[class$=tool]")

[attribute*=value] 属性值包含指定元素，可以是单词的一部分，也可以是一个单独的单词，如：$("[class*=tool]")

[attribute~=value] 常用于多个class的情况，只要其中一个class是指定值，是一个完整的单词，如：$("[class~=tool'")

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var div1=$("[class~=one]");//取到1

            console.log(div1);

            var div2=$("[class*=one]");//取到1和2

            console.log(div2);

        })

    </script>

</head>

<body>

<div class="tool one">1</div>

<div class="tool tool_one">2</div>

</body>

</html>

[selector1][selector2][selector3] 多个属性选择器，如：$("[type][class=tool]")

过滤器之child系列（最大特点必须是指定元素）：

ele:first-child 其父元素的第一个子元素，且刚好是指定元素

ele:last-child 其父元素的最后一个子元素，且刚好是指定元素

ele:nth-child(n | even | odd | 计算式) 其父元素的第n个子元素，且刚好是指定元素（此处下标从1开始）

ele:nth-last-child(n | even |odd | 计算式) 其父元素的倒数第n个子元素，且刚好是指定元素（此处下标从1开始）

ele:only-child 是其父元素的唯一子元素，且是指定元素

过滤器之type系列（最大特点计数时自动跳过非指定元素）：

ele:first-of-type 其父元素的第一个指定子元素（计数时可以自动跳过非指定元素）

ele:last-of-type 其父元素的最后一个指定子元素

ele:nth-of-type(n) 其父元素的第n个指定子元素

ele:nth-last-of-type 其父元素的倒数第n个指定子元素

ele:only-of-type 其父元素的唯一指定子元素

child和type系列对比

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            var p=$("p:only-child()");//p的父元素只有一个子元素，且是p标签

            console.log(p);

            var p2=$("p:only-of-type()");//p的父元素的子元素中，只有一个p标签，允许有其他标签

            console.log(p2);

        })

    </script>

</head>

<body>

<div>

    <p>p</p>

    <span>span</span>

</div>

</body>

</html>

过滤器参数

ele:nth-child(n) n必须为整数，从1开始

ele:nth-of-type(n)

ele:nth-child(even) 偶数项

ele:nth-of-type(even)

ele:nth-child(odd) 奇数项

ele:nth-of type(odd)

ele:nth-child(3n+4) 类似特殊公式

ele:nth-of-type(3n+4)

小案例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $("p:nth-of-type(even)").css({"background":"#abcdef"});

            $("p:nth-of-type(odd)").css({"background":"pink"});

        })

    </script>

</head>

<body>

<div>

    <p>慕道威仪立善缘</p>

    <p>课童更渫墙西井</p>

    <p>网罗文献吾倦矣</p>

    <p>恭请光尧寿圣来</p>

    <p>祝教寿比天难尽</p>

    <p>学画鸦儿犹未就</p>

    <p>习气若为除未尽</p>

    <p>愉贵神兮般以乐</p>

    <p>快风凉雨火云摧</p>

</div>

</body>

</html>

表单相关选择器：

:input 可以选择input textarea select button

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $(":input").css({"background":"#abcdef"});

        })

    </script>

</head>

<body>

<form>

    input:text<input type="text"><br>

    select<select>

        <option></option>

    </select><br>

    textarea<textarea></textarea><br>

    input:submit<input type="submit" value=""><br>

    button<button>按钮</button>

</form>

</body>

</html>

:text = input[type="text"] 匹配所有单行文本框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $(":text").css({"background":"#abcdef"});

        })

    </script>

</head>

<body>

<form>

    input:text<input type="text"><br>

    select<select>

        <option></option>

    </select><br>

    textarea<textarea></textarea><br>

    input:submit<input type="submit" value=""><br>

    button<button>按钮</button>

</form>

</body>

</html>

其他type类型也是同理，如：

:password :radio :checkbox :reset :submit :image :button :file

其中发现:submit也选中了button元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $(":password").css({"background":"#abcdef"});

            $(":file").css({"background":"pink"});

            $(":submit").css({"background":"orange"});

        })

    </script>

</head>

<body>

<form>

    input:text<input type="text"><br>

    input:password<input type="password"><br>

    input:file<input type="file"><br>

    select<select>

        <option></option>

    </select><br>

    textarea<textarea></textarea><br>

    input:submit<input type="submit" value=""><br>

    button<button>按钮</button>

</form>

</body>

</html>

表单状态相关选择器：

:enabled 可用元素

:disabled 不可用元素

:checked 选中元素（除了checkbox和radio中被checked元素，还有option中被selected的元素）

:selected 选中option中被selected的元素

查找和过滤选择器

.find("元素") 搜索与指定表达式匹配的元素（类似祖先后代子孙选择器）

.children("元素") 搜索与指定表达式匹配的元素（类似直接父子元素选择器）

.parent("元素") 搜索一个元素的父元素

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $("details").find("p").css({"background":"#abcdef"});//内容1和内容2

            $("details").children("p").css({"color":"orange"});//内容1

        })

    </script>

</head>

<body>

<details>

    <summary>标题1</summary>

    <p>内容1

        <div>

            <p>内容2</p>

        </div>

    </p>

</details>

</body>

</html>

.next() 紧跟在元素后面的直接兄弟元素

.prev() 紧跟在元素前面的直接兄弟元素

.eq(n) 元素返回的数组中第n个元素，下标是从0开始的；如果n是负数，就是倒数

.siblings() 元素的所有同级兄弟元素（前面后面都可以，不包括元素本身），中间可以加选择器

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $(".p").next().css({"background":"#abcdef"});

            $(".p").prev().css({"background":"pink"});

            $("p").eq(2).css({"background":"orange"});

            $("p").eq(-1).css({"background":"lightgreen"});

            $(".p").siblings().css({"font-style":"italic"});

            $(".p").siblings("[id]").css({"font-weight":"bold"});

        })

    </script>

</head>

<body>

<div>

    <p>1</p>

    <p id="p2">2</p>

    <p class="p">3</p>

    <p id="p4">4</p>

    <p>5</p>

</div>

</body>

</html>

.filter(expr | object | element | fn) 参数如果用 [ ] 表示为可选参数

expr 字符串值，选择器表达式，如：filter( ".class" )

object 现有的jquery对象，如：filter( $(".class") )

element DOM元素，如：fliter( document.getElementById("class") )

fn 函数的返回值（index是filter方法的默认参数，表示当前元素的索引值）

expr | object | element 其实都是通过选择器查找的意思

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $("p").filter(function(index){

                console.log(index);

            });

        })

    </script>

</head>

<body>

<div>

    <p>1</p>

    <p id="p2">2</p>

    <p class="p">3</p>

    <p id="p4">4</p>

    <p>5</p>

</div>

</body>

</html>

filter的另一种用法：

        var arr=[2,5,33];

        function fn(num){

            return num>18;//返回大于18的元素

        }

        var res=arr.filter(fn);

        console.log(res);//[33]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $("div").filter(function(index){

                //在当前对象内，寻找P元素的个数为1的div

                return $("p",this).length===1;

            }).css({"background":"#abcdef"});

        })

    </script>

</head>

<body>

<div>

    <p>文字</p>

</div>

<div>

    <p>文字</p>

    <p>文字</p>

</div>

</body>

</html>

关于隐式迭代：

类似遍历数组，使用$(this) 返回当前触发的元素

不再需要像js那样循环

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

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

    <script>

        $(function(){

            $("p").click(function(index){

                $(this).css({"background":"pink"});

            });

        })

    </script>

</head>

<body>

<div>

    <p>文字</p>

    <p>文字</p>

</div>

</body>

</html>

jQuery的核心功能选择器的更多相关文章

jQuery mobile 核心功能
原文地址:http://jquerymobile.com/demos/1.0b2/#/demos/1.0b2/docs/about/features.html 基于 jQuery 核心,使用和jQue ...
基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于jQuery带备忘录功能的日期选择器.这款日期控制带有备记忘录功能.有备忘录的日期有一个圆圈,单击圆圈显示备忘录.该实例适用浏览器:360.FireFox.Chrome.Safa ...
JQuery的核心的一些方法[扒来的]
JQuery的核心的一些方法 each(callback) '就像循环 $("Element").length; ‘元素的个数,是个属性 $("Element" ...
jQuery入门（1）jQuery中万能的选择器
jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...
从零开始学习jQuery (二) 万能的选择器
本系列文章导航从零开始学习jQuery (二) 万能的选择器一.摘要本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
JQuery学习笔记——基础选择器
第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...
jQuery 常用核心方法
jQuery 常用核心方法 .each() 遍历一个jQuery对象,为每个匹配元素执行一个函数 $('p').each(function(idx,node){ $(node).text(idx + ...
jQuery的核心思想
jQuery?----www.jQuery.com jQuery的理念:write less, do more jQuery的成就:世界排名前100的公司,46%都在使用jQuery,远远超过其他库, ...
JQuery的介绍及选择器
1.什么是JQuery. JavaScript开发的过程中,处理浏览器的兼容很复杂而且很耗时,于是一些封装了这些操作的库应运而生.这些库还会把一些常用的代码进行封装. 把一些常用到的方法写到一个单独的 ...

随机推荐

.net Core 2.*使用autofac注入
创建项目 1.创建一个.net core 项目 2.创建一个类库 2.1创建interface文件夹 2.2创建Service文件夹好了给大家看项目目录对的.我创建了一个IUserService和 ...
[ Python入门教程 ] Python中日期时间datetime模块使用实例
Python中datetime模块提供强大易用的日期处理功能,用于记录程序操作或修改时间.时间计算.日志时间显示等功能.datatime模块重新封装了time模块,提供的类包括date.time.da ...
[HNOI2008]GT考试（kmp，dp，矩阵乘法）
[HNOI2008]GT考试(luogu) Description 求有多少个n位的数字串不包含m位的字符串(范围 n <= 1e9 n<=1e9, m <= 20m<=20) ...
jQuery-01-jQuery选择器及元素操作
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
SpringBoot缓存篇Ⅱ --- 整合Redis以及序列化机制
一.Redis环境搭建系统默认是使用ConcurrentMapCacheManager,然后获取和创建ConcurrentMapCache类型的缓存组件,再将数据保存在ConcurrentMap中 ...
释放innodb空间
记一次MySQL运维 [root@b2btest ~]# free -h total used free shared buffers cached Mem: 125G 124G 780M 13M 2 ...
精心整理「服务器Linux C/C++」成长路程（附思维导图）
前言我不是名校毕业,更没有大厂的背景,我只是一个毕业不到 2 年的普普通通的程序员,在摸爬滚打的工作这段时间里,深知了有一个「完整的知识体系」是非常重要的.当事人非常后悔没有在大学期间知道这个道理- ...
HanLP《自然语言处理入门》笔记--6.条件随机场与序列标注
笔记转载于GitHub项目:https://github.com/NLP-LOVE/Introduction-NLP 6. 条件随机场与序列标注本章介绍一种新的序列标注模型条件随机场.这种模型与感知 ...
讲一下java，c语言，c+和c++都是干嘛的，他们运行的软件都是哪些
讲一下java,c语言,c+和c++都是干嘛的,他们运行的软件都是哪些都是用于开发软件的,用于不同的方面.比如,淘宝的后台,是java做的.而腾讯的qq的后台服务器,是c和c++的.暴雪游戏的后台服 ...
【科创人独家】科界CTO林镇南：言必真，行必果，没有尽力而为，只有全力以赴
B2C-->B2B-->O2O-->B2G.从传统电商到电子商务,再到最火医美,最后转入国企,80末的林镇南成长路径有特点:行业跨度大.技能涉猎广.误以为"4点半下班&qu ...

jQuery的核心功能选择器

jQuery的核心功能选择器的更多相关文章

随机推荐

热门专题