摘要:<!DOCTYPE html><html><head> <title>jquery选择器</title></head><body><script type="text/javascript">//1基本选择器//语法$('#id')根据ID$('.class名
<!DOCTYPE html>
<html>
<head>
<title>jquery选择器</title>
</head>
<body>
<script type="text/javascript">
//1基本选择器
//语法
$('#id')根据ID
$('.class名')根据给定的class名来匹配元素
$('element')根据给定的标签名来匹配元素
$('*')匹配所有元素
$('id,.class,element')匹配到页面中的多个选择器
//2层级选择器(相当于父类和子类的元素关系)
$('父级元素>子级元素')//给定的父级元素下匹配所有的子元素
$('祖先元素 后代元素')//级定的祖先元素下匹配所有的后代元素
$('prev +next')//匹配紧跟在prev元素后面的NEXT元素
$('prev ~ siblings')//匹配prev元素后面所有的siblings元素
//3.1顺序选择器
$(':first')第一个元素
$(':last')最后一个元素
//3.2比较
$(':gt(x)')表示大于值X的元素
$(':lt(x)')表示小于值X的元素
$(':eq(x)')表示等于值X的元素
//3.3奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
//4.非
$(':not(selector)')匹配不是selector的所有元素
//2内容选择器
语法
$(':contains(text)')匹配包含给定文本(text)的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)
$(':parent')匹配含有子元素或者文本的元素
//3属性选择器
$('[属性名]')匹配包含给定属性的元素
例:$('input[type]').css('background','pink')
$('标签名[属性名=value]')匹配给定属性是某个特定值的元素
$('标签名[属性名!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素
$('标签名[属性名^=value]')匹配给定属性是以某些值开始的元素
$('标签名[属性名 $=value]')匹配给定属性是以某些值结尾的元素
$('标签名[属性名 *=value]')匹配给定属性包含某些值的元素
$('标签名[属性名] 标签名[属性名] 标签名[属性名]')复合选择器,需要同时满足多个条件时使用
例:$(input[id][name*=n]).css('background','red')
//4表单选择器
$(':enabled')所有激活的input元素(可以使用的input元素)
$(':disabled')所有禁用的input元素(不可以使用的input元素)
$(':selected')所有被选取 的元素,针对于(select元素-->下拉框
$(':checked')所有被选中的input元素,针对于checked多选框,jq要用.parent().css(':parent')匹配含有子元素或者文本的元素
</script>
</body>
</html>
批改老师:西门大官人批改时间:2019-04-08 10:19:11
老师总结:总结的很好,最好每个配上一个案例说明一下