jQuery选择器

Original 2019-04-10 19:38:39 233
abstract:1基本选择器 // 语法// $('#id名')根据给定的id来匹配到元素// $('.class名')根据给定的class来匹配到元素// $('element')根据给定的标签来匹配到元素// $('*')匹配到所有元素// $('#id名,.class名,element')匹配到页面中多个选择器2 层级

1基本选择器 

// 语法

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

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

// $('element')根据给定的标签来匹配到元素

// $('*')匹配到所有元素

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

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

// 语法

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

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

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

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

3 顺序选择器

// 顺序

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

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

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

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

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

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

// 奇偶数  (是从0开始)

// $(':odd')奇数顺序

// $(':even')偶数顺序

// 非

// $(':not(selector)')

4 内容选择器 

// 语法

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

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

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

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

5  属性选择器

// 语法

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

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

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

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

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

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

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

6  表单选择器

// 语法

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

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

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

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


Correcting teacher:天蓬老师Correction time:2019-04-11 09:16:55
Teacher's summary:对于表单中的一个控件, 有很多种方法来选取, 但实际工作中, 建议不要选择过于复杂的选择器, 选择一种最简单的, 最直观的就好, 毕竟代码是让人来读的, 而这个人, 以后不一定是你本人, 就算是你自己, 过上几个月再看, 也不一定能一眼看明白,对不?

Release Notes

Popular Entries