jquery可见性过滤选择器,jquery属性过滤选择器

http://www.itjxue.com  2023-01-18 09:15  来源:未知  点击次数: 

jquery中简单过滤选择器有哪些

1. 基本过滤选择器

a) ":first",选取第一个元素,别忘记它也是被放在一个集合里哦!因为JQuery它是DOM对象的一个集合。如,“$("tr:first")”返回所有tr元素的第一个tr元素,它仍然被保存在集合中。

b)“:last”,选取最后一个元素。如,“$("tr:last")”返回所有tr元素的最后一个tr元素,它仍然被保存在集合中。

c)“:not(selector)”,去除所有与给定选择器匹配的元素。如,“$("input:not(:checked)")”返回所有input元素,但去除被选中的元素(单选框、多选框)。

d)“:even”,选取所有元素中偶数的元素。因为JQuery对象是一个集合,这里的偶数指的就是集合的索引,索引从0开始。

e) “:odd”,选取所有元素中奇数的元素,索引从0开始。

f) “:eq(index)”,选取指定索引的元素,索引从0开始。

g) “:gt(index)”,选取索引大于指定index的元素,索引从0开始。

h) “:lt(index)”,选取索引小于指定index的元素,索引从0开始。

i) “:header”,选取所有的标题元素,如hq、h2等。

j) “:animated”,选取当前正在执行的所有动画元素。

2). 内容过滤选择器

它是对元素和文本内容的操作。

a) “:contains(text)”,选取包含text文本内容的元素。

b) “:empty”,选取不包含子元素或者文本节点的空元素。

c) “:has(selector)”,选取含有选择器所匹配的元素的元素。

d) “:parent”,选取含有子元素或文本节点的元素。(它是一个父节点)

3). 可见性过滤选择器

根据元素的可见与不可见状态来选取元素。

“:hidden”,选取所有不可见元素。

“:visible”,选择所有可见元素。

可见选择器:hidden 不仅包含样式属性 display 为 none 的元素,也包含文本隐藏域 (input type=“hidden”)和 visible:hidden 之类的元素。

4).属性过滤选择器

通过元素的属性来选取相应的元素。

a) “[attribute]”,选取拥有此属性的元素。

b) “[attribute=value]”,选取指定属性值为value的所有元素。

c) “[attribute !=value]”,选取属性值不为value的所有元素。

d) “[attribute ^= value]”,选取属性值以value开始的所有元素。

e) “[attribute $= value]”,选取属性值以value结束的所有元素。

f) “[attribute *= value]”,选取属性值包含value的所有元素。

g) “[selector1] [selector2]…[selectorN]”,复合性选择器,首先经[selector1]选择返回集合A,集合A再经过[selector2]选择返回集合B,集合B再经过[selectorN]选择返回结果集合。

5). 子元素过滤选择器

一看名字便是,它是对某一元素的子元素进行选取的。

a) “:nth-child(index/even/odd)”,选取索引为index的元素、索引为偶数的元素、索引为奇数的元素。

l nth-child(even/odd):能选取每个父元素下的索引值为偶(奇)数的元素。

l nth-child(2):能选取每个父元素下的索引值为 2 的元素。

l nth-child(3n):能选取每个父元素下的索引值是 3 的倍数的元素。

l nth-child(3n + 1):能选取每个父元素下的索引值是 3n + 1的元素。

b) “:first-child”,选取第一个子元素。

c) “:last-child”,选取最后一个子元素。

d) “:only-child”,选取唯一子元素,它的父元素只有它这一个子元素。

6). 表单过滤选择器

选取表单元素的过滤选择器。

a) “:input”,选取所有input、textarea、select 和button元素。

b) “:text”,选取所有的文本框元素。

c) “:password”,选取所有的密码框元素。

d) “:radio”,选取所有的单选框元素。

e) “:checkbox”,选取所有的多选框元素。

f) “:submit”,选取所有的提交按钮元素。

g) “:image”,选取所有的图像按钮元素。

h) “:reset”,选取所有重置按钮元素。

i) “:button”,选取所有按钮元素。

j) “:file”,选取所有文件上传域元素。

k) “:hidden”,选取所有不可见元素。

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

选取表单元素属性的过滤选择器。

“:enabled”,选取所有可用元素。

“:disabled”,选取所有不可用元素。

“:checked”,选取所有被选中的元素,如单选框、复选框。

“:selected”,选取所有被选中项元素,如下拉列表框、列表框。

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、属性过滤器选择器

[attribute] 、[attribute=value] 、[attribute!=value] 、[attribute^=value] 、[attribute$=value] 、[attribute*=value] 、[attrSel1][attrSel2][attrSelN]

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选择器有哪些

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

1 .基本选择器

$("#test")???????????? ?? 选择id值为test的元素,id值是唯一的所以返回单个元素。

$("div")?????????????? ?? 选择所有的div标签元素,返回div元素数组

$(".myclass")????????? ?? 选择使用myclass类的css的所有元素

$("*")???????????????? ?? 选取所有元素。

$("#test,div,.myclass")? ??? 选取多个元素。

2.层次选择器

$("div span") ? 选取div里的所有span元素

$("div span")?? ? 选取div元素下元素名是span的子元素

$("#one +div")?? ? 选取id为one的元素的下一个div同辈元素??? 等同于$("#one").next("div")

$("#one~div")??? ? 选取id为one的元素的元素后面的所有div同辈元素??? 等同于$("#one").nextAll("div")

$("#one").siblings("div") ?? 获取id为one的元素的所有div同辈元素(不管前后)

$("#one").prev("div")  获取id为one的元素的前面紧邻的同辈div元素

所以 获取元素范围大小顺序依次为:

$("#one").siblings("div")$("#one~div")$("#one +div")

或是

$("#one").siblings("div")$("#one").nextAll("div")$("#one").next("div")

3.基本过滤选择器

$("div:first")?????????????? 选取所有div元素中第1个div元素

$("div:last")?????????????????? 选取所有div元素中最后一个div元素

$("input:not(.myClass)")??????? 选取class不是myClass的input元素

$("input:even")???????????????? 选取索引是偶数的input元素(索引从0开始)

$("input:odd")????????????????? 选取索引是基数的input元素(索引从0开始)

$("input:eq(2)")??????????????? 选取索引等于2的input元素

$("input:gt(4)")??????????????? 选取索引大于4的input元素

$("input:lt(4)")??????????????? 选取索引小于4的input元素

$(":header")??????????????????? 过滤掉所有标题元素,例如:h1、h2、h3等

$("div:animated")?????????????? 选取正在执行动画的div元素

$(":focus")???????????????????? 选取当前获取焦点的元素

4.内容过滤选择器

$("div:contains('Name')")?????? 选取所有div中含有'Name'文本的元素

$("div:empty")????????????????? 选取不包含子元素(包括文本元素)的div空元素

$("div:has(p)")???????????????? 选取所有含有p元素的div元素

$("div:parent")???????????????? 选取拥有子元素的(包括文本元素)div元素

5.可见性过滤选择器

$("div:hidden")???????????????? 选取所有不可见的div元素

$("div:visible")??????????????? 选取所有可见的div元素

6.属性过滤选择器

$("div[id]")????????????? 选取所有拥有属性id的元素

$("input[name='test']")???? 选取所有的name属性等于'test'的input元素

$("input[name!='test']")? 选取所有的name属性不等于'test'的input元素

$("input[name^='news']")??????? 选取所有的name属性以'news'开头的input元素

$("input[name$='news']")??????? 选取所有的name属性以'news'结尾的input元素

$("input[name*='news']")??????? 选取所有的name属性包含'news'的input元素

$("div[title|='en']")?????????? 选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的div元素

$("div[title~='en']")?????????? 选取属性title用空格分隔的值中包含字符en的div元素

$("div[id][title$='test']")???? 选取拥有属性id,并且属性title以'test'结束的div元素

7.子元素过滤选择器

$("div .one:nth-child(2)")?????? 选取class为'one'的div父元素下的第2个子元素

$("div span:first-child")??????? 选取每个div中的第1个span元素

$("div span:last-child")???????? 选取每个div中的最后一个span元素

$("div button:only-child")?????? 在div中选取是唯一子元素的button元素

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

$("#form1 :enabled")???????????? 选取id为'form1'的表单内所有可用元素

$("#form2 :disabled")??????????? 选取id为'form2'的表单内所有不可用元素

$("input :checked")????????????? 选取所有被选中的input元素

$("select option:selected")????? 选取所有的select 的子元素中被选中的元素

9.表单选择器

$(":input")????????????????????? 选取所有input,textarea,select 和 button元素

$(":text")??????????????????? 选取所有的单行文本框

$(":password")?????????????????? 选取所有的密码框

$(":radio")????????????????????? 选取所有单的选框

$(":checkbox")?????????????????? 选取所有的多选框

$(":submit")???????????????????? 选取所有的提交按钮

$(":image")????????????????????? 选取所有的图像按钮

$(":reset")????????????????????? 选取所有的重置按钮

$(":button")???????????????????? 选取所有的按钮

$(":file")?????????????????????? 选取所有的上传域

$(":hidden")???????????????????? 选取所有不可见元素

jquery有几种选择器

jQuery选择器一般分为四种

一、基本选择器

基本选择器是jQuery中最常用也是最简单的选择器,它通过元素的id、class和标签名等来查找DOM元素。

1、ID选择器 #id

描述:根据给定的id匹配一个元素, 返回单个元素(注:在网页中,id名称不能重复)

示例:$("#test") 选取 id 为 test 的元素

2、类选择器 .class

描述:根据给定的类名匹配元素,返回元素集合

示例:$(".test") 选取所有class为test的元素

3、元素(标签)选择器 element

描述:根据给定的元素名匹配元素,返回元素集合

示例:$("p") 选取所有的p元素 $("div") :选取所有的div标签

4、*

描述:匹配所有元素,返回元素集合

示例:$("*") 选取所有的元素

5、selector1,selector2,...,selectorN(并集选择器)

描述:将每个选择器匹配到的元素合并后一起返回,返回合并后的元素集合

示例:$("p,span,p.myClass") 选取所有p,span和class为myClass的p标签的元素集合

二、层次选择器

层次选择器根据层次关系获取特定元素。

1、后代选择器

示例:$("p span") 选取p元素里的所有的span元素(注:后代选择器选择父元素所有指定选择的元素,不管是儿子级,还是孙子级)

2、子选择器 $("parentchild")

示例:$("pspan") 选择p元素下的所有span元素 (注:子选择器只选择直属于父元素的子元素)

3、同辈选择器 $("prev+next")

描述:选取紧接在prev元素后的next元素,返回元素集合

示例:$(".one+p") 选取class为one的下一个p同辈元素集合

4、同辈选择器 $("prev~siblings")

描述:选取prev元素后的所有siblings元素,返回元素集合

示例:$("#two~p")选取id为two的元素后所有p同辈元素集合

三、过滤选择器

1基本过滤选择器

1、 :first

描述:选取第一个元素,返回单个元素

示例:$("p:first") 选取所有p元素中第一个p元素

2、 :last

描述:选取最后一个元素,返回单个元素

示例:$("p:last") 选取所有p元素中最后一个p元素

3、 :not(selector)

描述:去除所有与给定选择器匹配的元素,返回元素集合

示例:$("input:not(.myClass)") 选取class不是myClass的input元素

4、 :even

描述:选取索引是偶数的所有元素,索引从0开始,返回元素集合

5、 :odd

描述:选取索引是奇数的所有元素,索引从0开始,返回元素集合

6、 :eq(index)

描述:选取索引等于index的元素,索引从0开始,返回单个元素

7、 :gt(index)

描述:选取索引大于index的元素,索引从0开始,返回元素集合

8、 :lt(index)

描述:选取索引小于于index的元素,索引从0开始,返回元素集合

9、 :focus

描述:选取当前获取焦点的元素

2内容过滤选择器

1、:contains(text)

描述:选取含有文本内容为text的元素,返回元素集合

示例:$("p:contains('我')") 选取含有文本“我”的元素

2、:empty

描述:选取不包含子元素或者文本元素的空元素,返回元素集合

示例:$("p:empty") 选取不包含子元素或者文本元素的空p元素(p/p)

3、:has(selector)

描述:选取含有选择器所匹配的元素的元素,返回元素集合

示例:$("p:has(p)") 选取含有p元素的p元素(pp//p)

4、:parent

描述:选取含有子元素或者文本的元素,返回元素集合

示例:$("p:parent") 选取含有子元素或者文本元素的p元素(pp//p或者p文本/p)

3可见性过滤选择器

1、:hidden

描述:选取所有不可见的元素,返回元素集合

2、:visible

描述:选取所有可见的元素,返回元素集合

4属性过滤选择器(返回元素集合)

1、[attribute]

示例:$("p[id]") 选取拥有id属性的p元素

2、[attribute=value]

示例:$("input[name=text]") 选取拥有name属性等于text的input元素

3、[attribute!=value]

示例:$("input[name!=text]") 选取拥有name属性不等于text的input元素

4、[attribute^=value]

示例:$("input[name^=text]") 选取拥有name属性以text开始的input元素

5、[attribute$=value]

示例:$("input[name$=text]") 选取拥有name属性以text结束的input元素

6、[attribute*=value]

示例:$("input[name*=text]") 选取拥有name属性含有text的input元素

7、[attribute~=value]

示例:$("input[class~=text]") 选取拥有class属性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述:合并多个属性过滤选择器

5表单对象属性过滤选择器(返回元素集合)

1、:enabled

描述:选取所有可用元素

2、:disabled

描述:选取所有不可用元素

3、:checked

描述:选取所有被选中的元素(单选框,复选框)

示例:$("input:checked") 选取所有被选中的input元素

4、:selected

描述:选取所有被选中的选项元素(下拉列表)

示例:$("select option:selected") 选取所有被选中的选项元素

四、表单选择器(返回元素集合,使用相似)

1、:text

描述:选择所有的单行文本框

示例:$(":text")选取所有的单行文本框

2、:password

描述:选择所有的密码框

3、:button

描述:选择所有的按钮

4、:checkbox

描述:选择所有的多选框

(责任编辑:IT教学网)

更多