jquery选择器分为哪几大类（jquery的选择器有哪些）

本文目录

• jquery的选择器有哪些
• jquery的选择器有哪几种类型
• jquery选择器包括哪几大类
• jquery中有哪几种类型的选择器
• 几种基础的jquery选择器
• JQuery选择器有哪几种
• jquery常用几种选择器的实例用法区别
• jquery中的层次选择器都有哪些选择器

jquery的选择器有哪些

1、基本选择器：
#id 、element 、.class 、* 、selector1,selector2,selectorN
2、层次选择器：
ancestor descendant 、parent 》 child 、prev + next 、prev ~ siblings
3、基本过滤器选择器
:first 、:last 、:not 、:even 、:odd 、:eq 、:gt 、:lt 、:header 、
:animated
4、内容过滤器选择器
:contains 、:empty 、:has 、:parent
5、可见性过滤器选择器
:hidden 、:visible
6、属性过滤器选择器
7、子元素过滤器选择器
:nth-child 、:first-child 、:last-child 、:only-child
8、表单选择器
:input 、:text 、:password 、:radio 、:checkbox 、:submit 、:image 、:reset 、:button
、:file 、:hidden
9、表单过滤器选择器
:enabled 、:disabled 、:checked 、:selected

jquery的选择器有哪几种类型

大概归纳为9种。
(1)基本
#id
element
.class
*
selector1,selector2,selectorN
(2)层次选择器：
ancestor descendant
parent 》 child
prev + next
prev ~ siblings
(3)基本过滤器选择器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
(4)内容过滤器选择器
:contains
:empty
:has
:parent
(5)可见性过滤器选择器
:hidden
:visible
(6)属性过滤器选择器







(7)子元素过滤器选择器
:nth-child
:first-child
:last-child
:only-child
(8)表单选择器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
(9)表单过滤器选择器
:enabled
:disabled
:checked
:selected

jquery选择器包括哪几大类

其实基本用法同css选择器，即通用选择器（*）、标签选择器（p，dl，header等）、类选择器（.className）、ID选择器（#IDName）、后代选择器（“ ”）、子选择器（》）、属性选择器（）、伪类选择器、群组选择器。而且有些低版本的IE浏览器不支持的，jQuery也能够兼容支持。

jquery中有哪几种类型的选择器

$("#myELement") 选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div") 选择所有的div标签元素，返回div元素数组
$(".myClass") 选择使用myClass类的css的所有元素
$("*") 选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
层叠选择器：
$("form input") 选择所有的form元素中的input元素
$("#main 》 *") 选择id值为main的所有的子元素
$("label + input") 选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev ~ div") 同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器：
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("input:not(:checked) + span")
过滤掉：checked的选择器的所有的input元素
$("tr:even") 选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd") 选择所有的tr元素的第1，3，5... ...个元素
$("td:eq(2)") 选择所有的td元素中序号为2的那个td元素
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器：
$("div:contains(’John’)") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器：
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器：
$("div") 选择所有含有id属性的div元素
$("input") 选择所有的name属性等于’newsletter’的input元素
$("input") 选择所有的name属性不等于’newsletter’的input元素
$("input") 选择所有的name属性以’news’开头的input元素
$("input") 选择所有的name属性以’news’结尾的input元素
$("input") 选择所有的name属性包含’news’的input元素
$("input") 可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器：
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input“)
一个名为 radio_01的radio所选的值
$(”input“).val();
$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A》B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点

几种基础的jquery选择器

基础选择器是jQuery中最常用选择器，也是最简单的选择器，它通过元素id、class和标签名等来查找DOM元素。
id选择器
id选择器$(‘#id’)通过给定的id匹配一个元素，返回单个元素
《p id="test"》测试元素《/p》《script》//选择id为test的元素并设置其字体颜色为红色$(’#test’).css(’color’,’red’);《/script》对应DOM的getElementById()方法，而jQuery内部也使用该方法来处理ID的获取
document.getElementById(’test’).style.color = ’red’;元素选择器
元素选择器$(‘element’)根据给定的元素名匹配元素，并返回符合条件的集合元素
《p》1《/p》
《p》2《/p》
《script》//选择标签名为p的元素并设置其字体颜色为红色$(’p’).css(’color’,’red’);
《/script》对应DOM的getElementsByTagName()方法，而jQuery内部也使用该方法来处理元素名的获取
Array.prototype.forEach.call(document.getElementsByTagName(’p’),function(item,index,arr){
item.style.color = ’red’;
});类选择器
类选择器$(‘.class’)根据给定的类名匹配元素，并返回符合条件的集合元素
《p class="test"》1《/p》
《p class="test"》2《/p》
《script》//选择class为test的元素并设置其字体颜色为红色$(’.test’).css(’color’,’red’);
《/script》对应DOM的getElementsByClassName()方法，而jQuery内部也使用该方法来处理类名的获取
Array.prototype.forEach.call(document.getElementsByClassName(’test’),function(item,index,arr){
item.style.color = ’red’;
});通配选择器
通配选择器$(‘*’)匹配文档中所有的元素，并返回集合元素
$(’*’).css(’margin’,’0’);对应DOM的document.all集合
Array.prototype.forEach.call(document.all,function(item,index,arr){
item.style.margin = 0;});或者参数为通配符*的getElementsByTagName()方法
Array.prototype.forEach.call(document.getElementsByTagName(’*’),function(item,index,arr){
item.style.margin = 0;});群组选择器
群组选择器$(‘selector1,selector2,?’)将每一个选择器匹配到的元素合并后一起，并返回集合元素
《p class="a"》1《/p》
《span id="b"》2《/span》
《a href="#"》3《/a》《script》//选择符合条件的元素并设置其字体颜色为红色$(’.a,#b,a’).css(’color’,’red’);
《/script》对应DOM的querySelectorAll()选择器
Array.prototype.forEach.call(document.querySelectorAll(’.a,#b,a’),function(item,index,arr){
item.style.color = ’red’;
});

JQuery选择器有哪几种

选择器
实例
解释
基本选择器
*
$(*)
选取所有元素
#id
$(“#a”)
选取id=a的元素
.class
$(“.b”)
选取class=b的元素
element
$(“p”)
所有《p》元素
.class.class
$(“.a.b”)
选取所有class=a且class=b的元素
基本过滤选择器
:first
$(“p:first”)
选取第一个p元素
:last
$(“p:last”)
选取最后一个p元素
:odd
$(“p:odd”)
选取所有奇数位上的p元素
:even
$(“p:even”)
选取所有偶数位上的p元素
:ep(n)
$(“p:eq(n)”)
选取第n位p元素（index从0开始）
:gt(n)
$(“li:gt(n)”)
选取第n位之前的所有li元素（不包含第n位）
:lt(n)
$(“li:lt(n)”)
选取第n位之后的所有li元素（不包含第n位）
:root
$(“p:root”)
选取p的根元素（不写标签时代表选取全局的根元素）
:header()
$(“p:header)
选取P标签里的所有标题（不写标签时代表选取全局的标题）
:lang
$(“p:lang(language)”)
给P标签选取指定的语言（不写标签时代表选取全局的标题）
:not
$(“li:not(.active)”)
选取除了.active以外的元素
:hidden
$(“p:hidden”)
隐藏所有P标签
:visible
$(“p:visible”)
显示所有p标签
:target
$(“:target”)
选取所有目标状态的元素
:anmated
$(“p:anmated”)
获取正在运行的动画
子元素过滤器
:first-child
$(“p p:first-last”)
选取p里第一个标签为P的子元素
:last-child
$(“p p:last-child”)
选取p里最后一个为标签p的子元素（不限位置）
:first-of-type
$(“p p:first-of-type”)
获取p里出现的第一个p标签（不限位置）
:last-of-type
$(“p p:last-of-type”)
获取p里最后出现的p标签（不限位置）
:nth-child(n)
$(“p p:nth-child(2)”)
获取p里第二个p标签（下标从1开始）
:nth-of-type(n)
$(“p p:nth-of-type(2)”)
获取p里第二个出现的p标签（下标从0开始）
:nth-last-of-type(n)
$(“p p:nth-last-of-type(n)”)
获取p里倒数第几个出现的p标签
:only-child
$(“p p:only-child”)
获取p里唯一一个子元素p
:only-of-type
$(“p p:only-of-type”)
获取同辈p里唯一一个标签为p的标签
:only-of-type(even/odd)
$(“p p:only-of-type(even/odd)”)
获取p里所有为奇数或偶数的P标签（下标从1开始）
内容过滤器
:contains()
$(“p:contains(123)”)
获取p标签里所有包含“123”的标签
:empty
$(“p:empty”)
获取p标签里没有内容的所有元素（空格也算内容）
:has()
$(“p:has(P)”)
获取所有含有p标签的p
:parent
$(“p:parent”)
获取所有元素中柚子元素的p（包括文本节点）
表单选择器
:text
$(“:text”)
选取所有type为text的字段或type没有属性的
:password
$(“：password”)
选择所有type为password的
:reset
$(“:reset”)
选择所有type为reset(重置)的
:button
$(“:button”)
选择所有type为button(按钮)的
:checkbox
$(“:checkbox”)
选择所有type为checkbox(多选)的
:radio
$(“:radio”)
选择所有type为radio(单选)的
:file
$(“:file”)
选择所有上传域
:image
$(“:image”)
选择所有图像按钮
:input
$(“:input”)
选取所有input、textarea、select、button元素
:enabled
$(“:enabled”)
选取所有可用的input
:disabled
$(“:disabled”)
选择所有不可用的input
:select
$(“:select”)
被选中状态的option元素
:checked
$(“:checked”)
被选中状态的input元素（有checked的）
:focus
$(“:focus”)
选取页面进去就有焦点的input

jquery常用几种选择器的实例用法区别

一、Jquery常用的过滤选择器如下所示：
1、:first，选取第一个元素，比如$("p:first")选取第一个p元素
2、:last，选取最后一个元素，比如$("p:last")选取最后一个p元素
3、:not(选择器)，选取不满足“选择器”条件的元素,比如$("p:not(.className)"),选取样式不是className的所有p元素
4、：even/：odd，选取索引为偶数/奇数的元素，比如$("p:even"),选取索引号为偶数的所有p元素
5、:eq(索引序号)/:gt(索引序号)/:lt(索引序号)，选取等于索引号/大于索引号/小于索引号的元素，比如$("p:lt(3)"),选取索引号小于3的所有p元素
注意：
过滤选择器的混合使用时要记住后面的过滤条件是以前面的过滤选择器过滤后的重新序号为基础，即过滤的逐级性，比如
$("#t1 tr:gt(0):lt(3)").css("fontSize", "28"); //lt(3)是从gt(0)出的新序列中的序号，不要写成lt(4)
二，重点
1. 多条件选择器
多条件选择器：$("p,p,span,menuitem"),同时选择p标签,p标签,和拥有menuitem样式的span标签元素
注意选择器表达式中的空格不能多不能少，易错！
2. 相对选择器
只要在$()指定第二个参数，第二个参数为相对的元素。比如html代码如下
《table id="table1"》
《tr》《td》dsds《/td》《td》dsfdef《/td》《/tr》
《tr》《td》dsds《/td》《td》dsfdef《/td》《/tr》
《tr》《td》dsds《/td》《td》dsfdef《/td》《/tr》
《tr》《td》dsds《/td》《td》dsfdef《/td》《/tr》
《tr》《td》dsds《/td》《td》dsfdef《/td》《/tr》
《/table》那么可以用如下的js代码操作td的背景色
$("td", $(this)).css("background", "red"),这句代码用的就是相对选择器，选择出的td是以当前的tr为相对的元素。选择的td元素是当前的tr元素下的所有td元素，没有涉及到其他行的td元素 。
《script type="text/
javascript
"》
$(function () {
$("#table1 tr").click(function () {
$("td", $(this)).css("background", "red");
});
});
《/script》
3. 层次选择器：
a $("#p li")获取p下的所有li元素（后代，子，子的子....）
b $("#p 》 li")获取p下的直接li子元素//注意空格
c $(".menuitem + p")获取样式名为menuitem之后的第一个p元素，不常用。
d $(".menuitem ~ p")获取样式名为menuitem之后的所有的p元素，不常用。
细节区别在于（易错点）：
多条件选择器：$("p,p,span,menuitem"),相对选择器：$("td", $(this)).css("background", "red")",层次选择器：$("#p li")获取p下的所有li元素（后代，子，子的子....）
三者的区别是：
1. 多条件选择器：在一个“”内有逗号区分，
2. 相对选择器：2个元素分开 ，
3. 层次选择器在一个“”内以空格区分
示例代码如下：
《style type="text/css"》
/*高亮显示*/
.highlight{
background-color: gray
}
《/style》《body》
《div》
《p》Hello《/p》
《/div》
《div id="test"》ID为test的DIV《/div》
《input type="checkbox" id="s1" name="football" value="足球" /》足球
《input type="checkbox" name="volleyball" value="排球" /》排球
《input type="checkbox" id="s3" name="basketball" value="篮球" /》篮球
《input type="checkbox" id="s4" name="other" value="其他" /》其他
《/body》

jquery中的层次选择器都有哪些选择器

层级选择器：

1. ancestor descendant：表示选取ancestor里面所有的descendant元素。
   

2. parent 》 child：表示选择parent元素的所有子元素。
   

3. prev + next：表示选择prev后面的兄弟元素，就是下一个元素。
   

4. prev ~ siblings：表示选择prev后面的兄弟元素，后面所有的元素。