jQuery的选择器（基础版）

xiaochen_03

已于 2023-07-20 11:19:58 修改

阅读量72

点赞数

文章标签： jquery 前端 javascript css3

于 2023-07-20 11:19:09 首次发布

本文链接：https://blog.csdn.net/xiaochen_03/article/details/131783641

版权

基础选择器

类型	语法
id选择器	$("#id").action()
class选择器	$(".class").action()
标签选择器	$("element").action()
*选择器	$("*").action()
并列/组合选择器	$("element，element").action()

层次选择器

类型	释义	语法
parent>child	直系子元素	$("parent>child").action()
prev + next	下一个兄弟元素，等同于next()方法	$("prev + next").action()/ $("prev").next("next").action()
prev~siblings	元素后面的所有兄弟元素，等同于nextAll()方法	$("prev ~ siblings").action()/ $("prev").nextAll("siblings").action()

过滤选择器

1. 基本过滤选择器

类型	释义	语法
:first 和 :last	取第一个元素或最后一个元素	$("element:first,element:last").action()
:not	取非...的元素	$("element:not()").action()
:even和:odd	取奇偶元素，索引从0开始，even偶数 odd奇数	$("element:even()").action() $("element:odd()").action()
:eq(x)	取指定索引的元素	$("element:eq()").action()
:gt(x) 和 :lt(x)	取大于x索引或小于x索引的元素	$("element:gt(x)").action() $("element:lt(x)").action()
:header	取H1~H6标题元素	$(":header").action()
:animated	选择正在执行的动画元素

2. 内容过滤选择器

类型	释义	语法
:contains(text)	取包含text文本的元素	$("element:contains(' ')").action()
:empty	取不包含子元素或文本为空的元素	$("element:empty").action()
:has(selector)	取选择器匹配的元素	$("element:has(elector)").action()
:parent	取包含子元素或文本的元素	$("element:parent").action()

3.可见过滤选择器

类型	释义	语法
:hidden	取不可见的元素	$(":hidden").action()
:visible	取可见的元素	$(":visible").action()

4.属性过滤选择器

类型

释义

语法

[attribute]

取拥有 attribute 属性的元素

$("element[attribute]").action()

[attribute=value]

[attribute ！= value]

取属性等于某个value的元素

取属性不等于某个value的元素

$("element[attribute='value']").action()

$("element[attribute!='value']").action()

[attribute^=value]

[attribute$=value]

[attribute*=value]

属性值中包含以...开头的值

属性值中包含以...结尾的值

属性值包含..

$("element[attribute^='value']").action()

$("element[attribute$='value']").action()

$("element[attribute*='value']").action()

[selector1]

[selector2]

复合型属性过滤器，同时满足多个条件

$("element[attribute][attribute=‘value’]").action（）

(存在attribute，且值为value)

5.子元素过滤选择器

类型	释义	语法
:first-child :last-child	取第一个子元素取最后一个子元素	$("element:first-child").action() $("element:last-child").action()
:only-child	某个元素是父元素唯一的子元素时..	$("element:only-child").action()
:nth-child	取第...个子元素	$("element:nth-child(x/even/odd/*n)").action()
1):nth-child(x)
2):nth-child(even) :nth-child(odd)
3):nth-child(公式)

6.表单过滤选择器

类型	释义	语法
:enabled :disabled	取可用或不可用元素	$("element:enabled").action()
:checked	取选中的单选框或复选框元素	$("element:checked").action()
:selected	取下拉列表被选中的元素	$("element:selected").action()

表单选择器

类型	释义	语法
:input	取input textarea select button 元素含H5新增表单	$(":input").action()
:text	取单行文本框元素	$(":text,:password").action()
:password	取密码框元素	$(":text,:password").action()
:radio	取单选框元素	$(":radio").parent().action()
:checkbox	取复选框	$(":checkbox").parent().action()
:submit	取提交按钮元素	$(":submit").action()
:reset	取重置按钮元素	$(":reset").action()
:button	取按钮元素	$(":button").action()
:file	取上传域元素	$(":file").action()
:hidden	匹配所有不可见元素	$(":hidden").siblings(' ').action()/ $(":hidden").parent().children(' ').action()

*其中 :checkbox 当中若需弹出被选复选框的值则可执行以下代码：

//方法一
$(":checkbox:checked").each(function(){
	alert($(this).val())
})
//方法二
$("input[type='checkbox'][checked]").each(function(){//each相当于for
	alert($(this).val())//value
})
//方法三
$(":checked").each(function(){
	alert($(this).val())
})