jQuery常用选择器

jQuery常用选择器

1.所有的函数大体分为四组：

   (1)DOM操作函数 (2)事件处理函数 (3)动画函数 (4)AJAX操作

 

2.jQuery函数的特性：

   (1)几乎所有的函数都自带循环功能，可以对选中的元素进行遍历

    (2)几乎所有的函数都返回jQuery对象本身，可以实现方法的链式调用

   (3)jQuery对象转换为DOM对象：

$('div')[0].style.color = '#f00'; //可以转换字符串 | html片段

   (4)DOM对象转换为jQuery对象：

$(domObj).css('color', '#f00'); //注意$()里边不能使用引号

 

3.jQuery查找元素 —— 重点

  jQuery中查找元素，使用函数： jQuery('选择器') 或其别名 $('选择器')

 其中的参数选择器支持CSS中所有的选择器，并进行了扩展。(选择器都是对所选元素的描述语言)

 

 (1)Basic（基本选择器）

#id .class div * s1,s2,s3

 

  (2)Hierarchy（层级选择器）

parent > child	子元素选择器，选择父元素下的指定类型的直系子元素
parent  child	后代选择器，选择父元素下指定类型的后代元素
prev + nextSibling	相邻兄弟选择器，选择元素后一个指定类型的兄弟元素
prev ~ nextAllSibling	通用兄弟选择器，选择某元素后的所有指定类型的兄弟元素

 

 (3)Attribute（属性选择器）

[属性名]	选择带有指定属性的元素
[属性名="值"]	选择有指定属性和值的元素
[属性名!="值"]	(反选)选择指定属性的值不为指定值的元素
[属性名^="值"]	选择指定属性的值由某个单词开头的元素
[属性名$="值"]	选择指定属性的值由某个单词结尾的元素
[属性名*="值"]	选择指定属性的值中包含某字符(段)的元素
[属性名~="值"]	选择指定属性的值有某个单词组成的元素

 

  (4)Form（表单元素选择器）

1.  <input  type="???"> 例：$(':text') 选定 <input type="text">的元素

:text

单行文本

:radio

单选按钮

:submit

提交按钮

:hidden

隐藏域

:password

密码域

:checkbox

复选框

:reset

重置按钮

:file

文件域

:image

图像域

:button

按钮

2.选定具有特定属性的表单元素

:disabled

不可用

:enabled

可用的

:checked

单选多选被选中的

:selected

被选中的option

 

 (5)Basic Filter（基本过滤选择器）

注意：基本过滤选择器把选定的所有元素放在一个大的集合中！下标从0开始分配。
:first	所有元素中指定类型的首个元素	:last	所有元素中指定类型的最后一个元素
:odd	匹配所有索引值为奇数的元素，从 0 开始计数	:even	匹配所有索引值为奇数的元素，从 0 开始计数
:eq(i)	匹配指定索引值为i的元素
:lt(i)	匹配所有小于索引值i的元素	:gt(i)	匹配所有大于索引值i的元素

 

  (6)Child Filter（子元素过滤选择器）

:first-child	父元素下的首个子元素
:last-child	父元素下最后一个子元素
:nth-child(2 / odd / even / 3n+1)	父元素下第n个子元素(可用于指定奇 偶)
:only-child	父元素下的唯一子元素(其没有兄弟元素)
注意：子元素过滤选择器把选定的元素按照所在父元素进行分组！下标从1开始分配。

 

  (7)Content Filter（内容过滤选择器）

:contains(txt)	匹配包含指定文本的元素
:has(selector)	匹配含有参数选择器所匹配的元素的元素
:empty	匹配空元素(不包含文本或子元素)
:parent	匹配含有文本或子元素的元素

 

  (8)Visibility Filter（可见性过滤选择器）

head / meta / script / title标签或属性display:none都为不可见元素

opacity:0 / visibility:hidden的元素并不是不可见元素

:hidden	匹配所有不可见的元素，或者type为hidden的元素
:visible	匹配页面中所有可见元素