abstract:1、基本选择器语法$('#id名') 根据给定的id来匹配到元素$('.class') 根据给定的clss来匹配到元素$('element') 根据给定的标签名来匹配到元素$('*') 匹配所有元素$('#id,.class,element') 匹配到页面中多个选择器下面是基本选择器的一些用法1、基本选择器
语法
$('#id名') 根据给定的id来匹配到元素
$('.class') 根据给定的clss来匹配到元素
$('element') 根据给定的标签名来匹配到元素
$('*') 匹配所有元素
$('#id,.class,element') 匹配到页面中多个选择器
下面是基本选择器的一些用法
jQuery中的选择器 测试1测试2PHP中文网下面是测试结果图
2、层级选择器
给定的符集元素匹配所有的子元素:$('父级元素 > 子集元素')
给定的祖先元素下匹配所有的后代元素: $('祖先元素 后代元素')
匹配紧跟在prev元素后面的next元素:$('prev + next') (同级的元素)
匹配prev元素后面所有的siblings元素: $('prev ~ siblings')
$(document).ready(function() { // $('ul > li').css({'color':'red','list-style':'none'}); $('ul li').css('list-style','none'); $('input+button').css('height','50px'); $('label~input').css('background','pink'); });
- 1
- 2
- div里面的li
- 多层嵌套里的li
- 3
- 4
- 5
- 6
3、顺序选择器
1、顺序
$(':first') 第一个元素
$(':last') 第二个元素
2、比较
$(':gt(x)') 表示大于值x的元素
$(':lt(x)') 表示小于值x的元素
$(":eq(x)") 表示等于值x的元素
3、奇偶数
$(':odd') 奇数顺序
$(':even') 偶数顺序
4、非
$(':not(selector)') 匹配不是selector的所有元素
4、内容选择器
语法:
$(':contains(text)') 匹配包含给定文本(text)的元素
$(':has(selector)') 匹配包含特定选择器元素的元素
$('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-01-14 16:42:12
Teacher's summary:完成的很好!很用心,jQuer核心部分就是选择器,一定要好好掌握