1. jQuery 选择器

Posted 2022-08-12 fuyi2345

基础选择器

1. ALL Selector 选择所有的元素
　　1. 例 $("div *") div 下所有的元素
2. class Selector 类选择器
　　1. 例 $(".box") 选择class为box的元素
3. Element Selector 标签名选择器
　　1. 例 $("span") 选择span元素
4. ID Selector id选择器
　　1. 例 $("#box") 选择id为#的元素
5. Multiple Selector 合并选择器
　　1. 例 $("select1,select2") 选择select1，select2的元素

属性选择器

1. Attribute Contains prefix Selector [ name|="value"]
　　1. 选择name属性为value的元素
　　2. 例 $("[color|=‘red‘]") 选择color为红色的元素
2. Attribute Contains prefix Selector [ name*="value"]
　　1. 选择选择的name属性中包含value的元素
　　2. 例 $("[color*=‘red‘]") 选择color包含red的元素
3. Attribute Contains prefix Selector [ name~="value"]
　　1. 选择name属性用空格分隔的值包含value的元素
　　2. 例 $("[border~=‘1px‘]") 选择边框中有1px 的元素
4. Attribute Contains prefix Selector [name="value"]
　　1. 选择name属性的值为value的元素
5. Attribute Contains prefix Selector [name!="value"]
　　1. 选择name属性不为value的元素
6. Attribute Contains prefix Selector [name$="value"]
　　1. 选择name属性结尾为value的元素
7. Attribute Contains prefix Selector [name^="value"]
　　1. 选择name属性开始为value的元素
8. Has Attribute Selector [name]
　　1. 选择所有具有指定属性的元素
9. Multiple Attribute Selector [name="value1"] [name2="value2"]
　　1. 选择匹配所有执行属性的元素

题 : 选择具有id属性 且name属性结尾为man的元素 把他值转化为only this one
` $("[id][name$=‘man‘]").val(‘only this one‘)`

基础过滤

1. :animated Select
　　1. $(":animated")
　　2. 选择所有正在执行动画效果元素
2. :eq( index )Select
　　1. $(":eq(index)")
　　2. 选择匹配集合中索引值为index的元素
3. :even Selector
　　1. $(":even ")
　　2. 选择索引值为偶数的元素从0开始计数 也可以查看odd(奇数)
4. :first Selector
　　1. $(":first")
　　2. 选择第一个匹配的元素
5. :focus Selector
　　1. $(":focus")
　　2. 选择当前焦点的元素
6. :header Selector
　　1. $(":header")
　　2. 选择所有标题元素
7. :last Select
　　1. $(":last")
　　2. 选择最后一个匹配的元素
8. :gt() Selector
　　1. $(":gt(index)")
　　2. 选择匹配集合中所有大于给定index的元素
9. :lt() Selector
　　1. $("lt(index)")
　　2. 选择匹配集合中所有小于给定index的元素
10. :not() Selector
　　1. $(":not(selector)")
　　2. 选择所有元素去除不匹配的元素

题 ： 目标被设置焦点时改变背景颜色

前情提要
delegate( )方法
childSelect：添加事件的目标
event ： 规定添加的事件
data ： 规定传递到函数的额外数据
function ： 事件发生时发生的函数
$function( )
$("content").delegate("*","focus bur" , function(event)
var e= $(this);
setTimeout(function(
e.toggleClass("focused", e.is(":focus"),0);
))
)

// 当这个元素获取焦点的时候 就添加focused的组

子元素过滤

1. :first-child
　　1. $(":first-child")
　　2. 选择父级元素的第一个子元素
2. :last-child
　　1. $(":last-child")
　　2. 选择父级元素的最后一个子元素
3. :first-of-type Selector
　　1. $(":first-of-type")
　　2. 选择所有相同元素名称的第一个兄弟元素
4. :last-of-type Selector
　　1. $(":last-of-type")
　　2. 选择所有相同元素名称的最后一个兄弟元素
5. :nth-child() Selector
　　1. $(":nth-child(index)")
　　2. 选择他们所有父元素的第n个元素

内容过滤

1. :content(text) Selector
　　1. jQuery(":contains(text)")
　　2. 选择所有包含指定文本的元素 // 区分大小写
2. :empty Selector
　　1. jQuery(":empty")
　　2. 选择所有没有子元素的元素
3. :has() Selector
　　1. jQuery(":has(selector)")
　　2. 选择其中一个包含指定选择器的元素
　　3. 题 ：选择所有div中含有p元素的元素
　　4. $("div:has(p)")
4. :parent Selector
　　1. jQuery(":parent")
　　2. 选择所有包含子元素的父级元素 // empty相反