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>元素
一、选择器
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>元素
