备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

jQuery中的选择器及筛选器

2017-08-16 990
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 1.jQuery的介绍1.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!2.它是轻量级的js库,这是其它的js库所不及的3.它兼容CSS3，还兼容各种浏览器4.jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。

1.jQuery的介绍

1.jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
2.它是轻量级的js库,这是其它的js库所不及的
3.它兼容CSS3，还兼容各种浏览器
4.jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
5.jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

下载地址: jQuery官网

2.jQuery对象

jQuery对象是通过jQuery包装DOM对象后产生的对象

jQuery对象是jQuery独有的,如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法.

$(".class_name")    意思是获取当前html文件中所有class名为class_name的标签

如果用DOM来实现的代码:

document.getElementsByClassName("class_name")

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.

约定:如果获取的是jQuery对象,那么要在变量前面加上$

例如:

var $variable=jQuery对象
var variable=DOM对象

把jQuery对象转化为DOM对象的方法:

$("#msg").html()
$("#msg")[0].innerHTML

jQuery的基础语法:

$(selector).action()

参考

在一个HTML文档中使用jQuery,必须在HTML文档中的title下面插入一句话:

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

3.寻找元素(选择器和筛选器)

3.1 基本选择器:

$("*")              选取所有的css标签
$("#id1")           选取所有的id名为id1的标签
$(".class_name")    选取所有的class名为class_name的标签
$("element1")       选取所有的标签名为element1的标签
$(".class,p,div")   选取符合这三个条件中任何一个条件的标签

例子:
标签代码:

<p id="p1">p1</p>
<div class="c1">div1</div>

处理代码:

var ele1=document.getElementById("p1");//获取当前HTML文档中id号为"p1"的标签
var ele2=document.getElementsByClassName("c1");//获取当前HTML文档中class名为"c1"的标签

console.log(ele1.innerHTML);//打印id号为"p1"的标签的值
console.log($("#p1").html());//使用jQuery方法获取当前文档中id号为"p1"的标签并打印其值

console.log(ele2[0].innerHTML);//打印class名为"c1"的第一个标签的值
console.log($(".c1").html());//使用jQuery方法获取当前文档中class名为"c1"的标签并打印其值

打印结果如下:

img_e954b315b7171fe70a1db25e50455c90.png

jQuery与javascript最大的不同表现在批量处理:
用javascript处理标签时,如果查找到的是一个集合的话,必须在使用循环一个一个的处理,
而jQuery则不需要使用循环就可以直接批量处理这个集合

例子:

标签代码:

<div class="c1">div1</div>
<div class="c1">div2</div>
<div class="c1">div3</div>
<div class="c1">div4</div>

现在想把这四个标签都变成红颜色的,使用javascript处理的代码如下:

var eles_div=document.getElementsByClass("c1");
for (var i=0;i<eles_div.length;i++){
    eles_div[i].style.color="red";
}

而使用jQuery实现批量处理这些标签的代码:

$(".c1").css("color","red");

实现结果如下:

img_66a5b648229151a80743717d94e90c79.png

3.2 层级选择器

$(".father_div div")        后代选择器
$(".father_div>div")        子代选择器
$(".father_div+div")        毗邻选择器
$(".father_div~div")        普通相邻选择器

用法跟CSS的选择器用法一样

3.3 基本筛选器

$("div:first")      选取第一个div标签
$("div:last")       选取最后一个div标签

$("div:eq(2)")      选取索引为2的div标签
$("div:lt(2)")      选取索引小于2的div标签
$("div:gt(2)")      选取索引大于2的div标签

$("div:even")       选取索引为偶数的div标签
$("div:odd")        选取索引为奇数的div标签

$(":focus")         当前获取焦点的元素
$(":animated")      正在执行动画效果的元素

标签代码:

<div class="c1">div1</div>
<div class="c1">div2</div>
<div class="c1">div3</div>
<div class="c1">div4</div>
<div class="c1">div5</div>
<div class="c1">div6</div>
<div class="c1">div7</div>

例子一:

$("div:first").css("color","red");//把第一个div标签的颜色设置为红色
$("div:eq(2)").css("color","blue");//把索引为2的div标签颜色设置为蓝色
$("div:gt(2)").css("color","pink");//把索引大于2的div标签颜色设置为粉色

效果如下:

img_b6871e9ecd5437418abcb94a3a1ab8e2.png

例子二:
$("div:lt(4)").css("color","blue");//把索引小于4的div标签颜色设置为蓝色

效果如下:

img_b1f661b9a010afb4fd8ab4fcd30e289b.png

例子三:
$("div:even").css("color","red");//把索引为偶数的div标签颜色设置为红色
效果如下:

img_51a21f3fa54dc447fbedfc528f6b706e.png

3.4 属性选择器

$("[id='div1']")//获取所有的"id='div1'"这个属性的标签
$("[name='img_list']")//获取所有的"name='img_list'"这个属性的标签

标签代码:

<div class="c1" name="test">div1</div>
<div name="test">div2</div>
<div class="c1" id="c100">div3</div>

例子一:

$("[name='test']").css("color","red");//把含有"name='test'"这类标签的颜色变成红色
$("[id='c100']").css("color","blue");//把含有"id='c100'"这类标签的颜色变成蓝色

效果如下:

img_da04036adedf06c86b83bdd2a084206f.png

操作二:

$("[name='test'][class]").css("color","red");//把含有"name='test'"又含有class这个类的标签颜色变成红色

效果如下:

img_e5de1036192abb7b5c77c77163e37231.png

3.5 表单选择器(只适用于input表单)

$("input:checked")      获取所有处于选中状态的复选框
$(":input")             获取所有的input,textarea,select和button元素
$(":text")              获取所有的单行文本框
$(":password")          获取所有的密码框
$("radio")              获取所有的单选按钮
$("checkbox")           获取所有的复选框
$("submit")             获取所有的提交按钮
$("reset")              获取所有的重置按钮
$("button")             获取所有的button按钮
$("file")               获取所有的文件域

标签代码:

<input type="text">
<input type="checkbox">

例子:

$("[type='text']").css("border","2px solid red");//把"type='text'"这种输入框的边框设置为2px的红色实线边框

显示如下:

img_ea4fc345bab6d724ce60cd8018cfcc61.png

上面的代码也可以写成下面这样:

$(":text").css("border","2px solid red");//把"type='text'"这种输入框的边框设置为2px的红色实线边框

3.6 过滤筛选器

其用法与基本筛选器一样

$("li").eq(2)                   获取列表中索引为2的标签
$("li").first()                 获取列表中的第一个标签
$("ul li").hasclass("test")     查询列表中是否有"test"这个类

3.7查找筛选器

3.7.1 查找子标签

$("div").children(".div1")  查找div标签中包含div1的所有子类标签
$("div").find(".div2")  查找div标签中包含div2的所有的后代标签

标签如下：

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子一：

$(".div1").find("p").css("color","blue")//查找类名为div1的标签的后代中所有的p标签，并把颜色设置成蓝色

显示如下：

img_348b5a689092c1aa4ba34e92b4e375b8.png

例子二：

$(".div1").children("p").css("color","blue")//查找类名为div1的标签的子代中所有的p标签，并把颜色设置成蓝色

显示如下:

img_40ea6559a718331492ce4f74c3d9996a.png

3.7.2 向下查找兄弟标签

$(".div1").next()               获取div1这个类的下一个标签
$(".div1").nextAll()            获取div1这个类的后面的所有标签
$(".div1").nextUntil("div2")    获取div1这个类后面,直到div2(不含div2)之间的所有标签

标签如下:

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子一:

$("#p3").next().css("color","red");//把id为"p3"的标签的下一个标签,也即"p4"标签颜色设置为红色
$("#p5").nextAll().css("color","blue");//把id为"p5"以后的所有的标签颜色都设置成为蓝色的

显示如下:

img_66fe96dc855d1a0ed45eb622de530b68.png

例子二:

$("#p5").nextUntil("#p8").css("color","pink");//把id为"p5"以后的直到"p8"(不包含p8)标签前的所有标签颜色都设置成为粉色的

显示如下:

img_26c997d06c0969ef244150408810e784.png

3.7.3 向上查找兄弟标签

$(".div1").prev()                   获取div1类的前一个标签
$(".div1").prevAll()                获取div1类的所有的标签
$(".div1").prevUntil(div2)          获取div1类之前,直到div2(不含div2)的所有的标签

标签如下:

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子一:

$("#p8").prev().css("color","red");//把id为"p8"的标签的上一个标签,也即"p7"标签颜色设置为红色
$("#p5").prevAll().css("color","yellow");//把id为"p5"的标签的上面的所有标签颜色设置为黄色

显示如下：

img_8ce00b4dc1879ec6cb441d1677caa8d4.png

例子二：

$("#p8").prevUntil("#p5").css("color","blue");//把id为"p8"上面直到"p5"(不包含p5标签)之前的所有的标签颜色都设置成为蓝色的

显示如下：

img_f5c817d57093349e57ba27cc9c5dec32.png

3.7.4 查找所有兄弟标签

$(".div1").siblings()       获取div1类的所有的同级标签

标签如下：

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子：

$("#p5").siblings().css("color","red");//把id为"p5"所有的兄弟标签颜色都设置成为红色的

显示如下：

img_d8ab8f6553d4f0027a69ca583761ffca.png

3.7.5 查找父标签

$(".div1").parent()                 获取div1类的父标签
$(".div1").parents()                获取div1类所有的父标签(包括父标签,父标签的父标签等,直到最上一级标签为止)
$(".div1").parentsUntil()           获取div1类所有的父标签,直到指定的条件停止

标签代码:

<div class="div1">
    <div class="div2">
        <div class="div3">
            <p>p1</p>
        </div>
    </div>
    <p>p2</p>
</div>
<div class="div4">
    <p class="p10" id="p3">p3</p>
    <p class="p10">p4</p>
    <p class="p10" id="p5">p5</p>
    <p class="p10">p6</p>
    <p class="p10">p7</p>
    <p class="p10" id="p8">p8</p>
</div>

例子一:

console.log($(".p10").parent().attr("class"));//打印"p10"类的父标签的类名

显示如下:

img_4b794a083821979469b87095355c8361.png

例子二:

$(".p10").parents().css("color","red");//把"p10"的父标签的样式设为红色

显示如下:

img_ba785b26e1f07fb52477619b128b08ad.png

例子三:

$(".div3").parentsUntil(".div1").css("color","red")//获取从"div3"类直到"div1"类之前的父标签,并把其父标签的颜色高为红色

显示如下:

img_0882741ae9ff27dc98048102be4ce838.png

$("p").hasClass("test") 查找p标签中class名为test的标签

3.8更多选择器

 $("[href]")                    选取所有的href属性的元素
 $("a[target='_blank']")        选取所有的target属性值等于"_blank"的<a>标签
 $("a[target!='_blank']")       选取所有的target属性值不等于"_blank"的<a>标签
文章标签：
前端开发
JavaScript
索引
关键词：
jQuery选择器
任平生78
目录
相关文章
N..
|
30天前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
14 1
那维莱特
|
3月前
|
JavaScript
jquery的9大选择器
jquery的9大选择器
那维莱特
28 2
jphyfw4633bze
|
3月前
|
JavaScript
jQuery :nth-of-type(n)选择器的用法详解
jQuery中，:nth-of-type(n)选择器可以对selector选择器匹配选择到的所有HTML元素进行二次匹配选择，为了更好地阐述:nth-of-type(n)的语法，这里假设selector是一个元素p选择器，如此，:nth-of-type(n)可以用于匹配p元素选择器选择到的p元素指向的父元素中第n个类型为p的子元素，而且与p是否是该父元素的第n个子元素无关，比如
jphyfw4633bze
40 5
Ar.小白
|
6月前
|
JavaScript 前端开发 索引
jQuery入门&以及选择器
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
Ar.小白
31 0
不念那年晚春
|
6月前
|
JavaScript 前端开发 Java
jQuery入门&选择器
jQuery入门&选择器
不念那年晚春
32 0
云小君
|
6月前
|
存储 JavaScript 前端开发
jQuery 入门&选择器
jQuery 入门&选择器
云小君
37 0
穆雄雄.
|
1月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
穆雄雄.
8 0
穆雄雄.
|
1月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
穆雄雄.
9 1
穆雄雄.
|
1月前
|
JavaScript 前端开发
jQuery选择器整理
jQuery选择器整理
穆雄雄.
13 0
穆雄雄.
|
1月前
|
前端开发 JavaScript 索引
第二章jQuery选择器
第二章jQuery选择器
穆雄雄.
8 0