jq的选择器笔记

Original 2019-02-21 10:22:01 166
abstract:基本选择器 语法 $('#id名')根据给定的id第来匹配到元素 $('.class名')根据给定的class第来匹配到元素 $('*')匹配所以元素 $('#id,.class名,element')匹配到页面中多个选择器层级选择器(相当于父类和子类的元素关系) 给定的父级元素下匹配的所有的子元素:$('父级元素 > 子

基本选择器

语法

$('#id名')根据给定的id第来匹配到元素

$('.class名')根据给定的class第来匹配到元素

$('*')匹配所以元素

$('#id,.class名,element')匹配到页面中多个选择器


层级选择器(相当于父类和子类的元素关系)

给定的父级元素下匹配的所有的子元素:$('父级元素 > 子级元素')

给定的祖先元素下匹配所有的后代元素:$('祖先元素 后代元素')

匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素)

匹配prev元素后面所有的siblings元素:$('prev ~ siblings')


顺序选择器

1.顺序

$(':first')第一个元素

$(':last')最后一个元素

2.比较(x的顺序是从0开始)

$(':gt(x)')表示大于值x的元素

$(':lt(x)')表示小于值x的元素

$(':eq(x)')表示等于值x的元素

3.奇偶数

$(':odd')奇数顺序

$(':even')偶数顺序

4.非

$(':not(selector)')匹配不是selector的所有元素



内容选择器

语法:

$(':contains(text)')匹配包含给定文本(text)的元素

$(':has(selector)')匹配包含特定选择器元素的元素

$(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)

$(':parent')匹配含有子元素或者文本的元素


表单选择器

语法:

$(':enabled')所有激活input元素(可以使用的input元素)

$(':disabled')所有禁用的input元素(不可以使用input元素)

$(':selected')所有被选取的元素,针对于select元素

$(':checked')所有被选中的input元素


属性选择器

语法:

$('[属性名]')匹配包含给定属性的元素

$('[attribute=value]')匹配给定属性是某个特定值的元素

$('[attribute ! =value]')匹配所有不包含指定的属性,或者说是属性不等于特定值的元素

$('[attribute ^= value]')匹配给定属性是一某些值开始的元素

$('[attribute $= value]')匹配给定属性是以某些值结尾的元素

$('[attribute] *= value')匹配给定属性包含某些值的元素

$('attSel[1] attSel[1] attSel[1]')复合选择器,需要同时满足多个条件使用




Correcting teacher:韦小宝Correction time:2019-02-21 11:39:19
Teacher's summary:总结的是没有任何毛病 也很全面 但是这些选择器还是要使用到实际的案例中才能更快的掌握哦

Release Notes

Popular Entries