当前位置 : 主页 > 网页制作 > JQuery >

1. jQuery 选择器

来源:互联网 收集:自由互联 发布时间:2021-06-15
基础选择器 1. ALL Selector 选择所有的元素 1. 例 $("div *") div 下所有的元素 2. class Selector 类选择器 1. 例 $(".box") 选择class为box的元素 3. Element Selector 标签名选择器 1. 例 $("span") 选择span元素

基础选择器

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相反

网友评论