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核心部分就是选择器，一定要好好掌握
Copyright 2014-2024 //m.sbmmt.com/ All Rights ReservedSu ICP Filing No 2020058653号-1