jquery样式之选择器

jquery之样式学习

一、选择器

jquery选择器

jquery选择器之id选择器  $("#id")

jquery选择器之类选择器  $(".class")

jquery选择器之元素选择器  $("div")

jquery选择器之全选择器  $("*")

jquery选择器之层级选择器：
子元素  $("div > p")
后代元素 $("div p")
兄弟元素  $(".prev+div") 选取prev后面的第一个的div兄弟节点
相邻元素 $(".prev ~ div") 选取prev后面的所有的div兄弟节点

筛选选择器：

$(":first")匹配第一个元素
例如:$(".div:first") $("div:first") $("#div:first")

$(":last")匹配最后一个元素 例如:$(".div:last")

$(":even")选择索引值为偶数的元素,从0开始计算 例如:$(".div:even")

$(":odd")选择索引值为奇数的元素,从0开始计算 例如: $(".div:odd")

$(":not(selector)")"一个用来过滤的选择器,选择所有元素去除不匹配给到的选择器元素
例如:  $("input:not(:checked)+p")
//:not 选择所有元素去除不匹配给定的选择器的元素
//选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色

$(":eq(index)")在匹配的集合中选择索引值为index的元素 例如:$(".aaron:eq(2)")

$(":gt(index)")选择匹配集合中所有大于给定index(索引值) 的元素 例如: $(".aaron:gt(3)")

$(":lt(index)")选择匹配集合中所有索引值小于给定index参数的元素 例如:$(".aaron:lt(2)")

$(":header")选择所有标题元素 像h1...h6等 例如:

$(":lang(language)")选择指定语言的所有元素 例如:

$(":root")选择该文档的根元素 例如:

$(":animated")选择所有正在执行动画效果的元素 例如:
备注：:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引。gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

内容选择器：

$(":contains(text)") 选择所有包含指定文本的元素
例如： $(".div:contains(':contains')") 查找所有class='div'中DOM元素中包含"contains"的元素节点

$(":parent")选择所有包含子元素或者文本的元素 例如： $("a:parent")选择所有包含子元素或者文本的a元素

$(":empty")选择所有没有子元素的元素(包含文本节点) 例如：$("a:empty")找到a元素下面的所有空节点(没有子元素)

$(":has(selector)")选择元素中至少包含指定选择器的元素 例如：$(".div:has(span)")查找所有class='div'中DOM元素中包含"span"的元素节点

可见性筛选选择器:

$(":visible") 选择所有显示的元素 $("#div1:visible")

$(":hidden")选择所有隐藏的元素

备注：:hidden选择器，不仅仅包含样式是display="none"的元素，还包括隐藏表单、visibility等等

display的值是none。
type="hidden"的表单元素。
宽度和高度都显式设置为0。
一个祖先元素是隐藏的，该元素是不会在页面上显示
CSS visibility的值是hidden
CSS opacity的指是0

属性筛选选择器:

$("[attribute|='value']")选择指定属性值等于给定字符串或以该文字串为前缀(该字符串后跟一个连定字符'-')的元素 $("div[name|='-']")查找所有div中，有属性name中的值只包含一个连字符“-”的div元素

$("[attribute*='value']")选择指定属性具有包含一个给定的子字符串的元素(选择给定的属性是以包含某些值的元素)$("div[name*='test']")查找所有div中，有属性name中的值包含一个test字符串的div元素

$("[attribute~='value']")选择指定属性用空格分隔的值中包含一个给定的元素 $('div[name~="a"]')查找所有div中，有属性name中的值包含一个连字符“空”和“a”的div元素

$("[attribute='value']")选择指定属性是给定值的元素$("div[name=p1]")

$("[attribute!='value']")选择不存在指定属性，或者指定的属性值不等于给定指的元素$("div[testattr!='true']")查找所有div中，有属性testattr中的值没有包含"true"的div

$("[attribute^='value']")选择指定属性是以给定字符串开始的元素$("div[name^=imooc]")查找所有div中，属性name的值是用imooc开头的

$("[attribute$='value']")选择指定属性是以给定值结尾的元素，区分大小写$("div[name$=imooc]")查找所有div中，属性name的值是用imooc结尾的

$("[attribute]")选择所有具有指定属性的元素，该属性可以是任何值 $("div[p2]")

$("[attributeFilter1][attributeFilterN]")选择匹配所有指定的属性筛选器的元素

子元素属性筛选选择器:

$(":first-child")选择所有父级元素下的第一个子元素$(".first-div a:first-child")   //查找class="first-div"下的第一个a元素,针对所有父级下的第一个
$(":last-child")选择所有父级元素下的最后一个子元素$(".first-div a:last-child")         //查找class="first-div"下的最后一个a元素,针对所有父级下的最后一个,如果只有一个元素的话，last也是第一个元素
$(":only-child")如果某个元素是其父元素的唯一子元素,那么选中 $(".first-div a:only-child")         //查找class="first-div"下的只有一个子元素的a元素
$(":nth-child")选择的他们所有父元素的第n个子元素 $(".last-div a:nth-child(2)")         //查找class="last-div"下的第二个a元素
$(":nth-last-child")选择所有他们父元素的第n个子元素,计数从最后一个元素开始到第一个  $(".last-div a:nth-last-child(2)")        //查找class="last-div"下的倒数第二个a元素


表单元素选择器：
$(":input") 选择所有的input,textarea,select,button元素
$(":text")匹配所有文本框$("input:text") //匹配所有input元素中类型为text的input元素
$(":password")匹配所有密码框
$(":radio")匹配所有单选按钮
$(":checkbox")匹配所有复选框
$(":submit")匹配所有提交按钮
$(":image")匹配所有图像域
$(":reset")匹配所有重置按钮
$(":button")匹配所有按钮
$(":file")匹配所有文件域

表单对象属性筛选选择器:
$(":enabled") 选取可用的表单元素   $("input:enabled")        //查找所有input所有可用的（未被禁用的元素）input元素。
$(":disabled")选取不可用的表单元素
$(":checked") 选取被选中的<input>元素$("input:checked")         //查找所有input所有勾选的元素(单选框,复选框)
$(":selected") 选取被选中的<option>元素