摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="/xuexi/static/jQuery/jquery-3.3.1.min.js">&l
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/xuexi/static/jQuery/jquery-3.3.1.min.js"></script>
<title>jquery选择器总结</title>
<style>
/* div{
width: 100px; height: 100px; background: aqua;
} */
</style>
</head>
<body>
<script>
$(document).ready(function(){
// $('#id_a').css('background','lemonchiffon'); //id选择器
// $('.class_a').css('fontSize','30px'); //class选择器
// $('p').css('color','red') ; //元素选择器
// $('*').css('fontWeight','bold'); //所有元素选择器
// $('#id_a,.class_a,p').css('fontFamily','楷体'); //多个选择器
// $('ul>li').css('color','red'); //子元素选择器
// $('ul li').css('listStyle','none'); //后代元素选择器
// $('h2+h3').css('background','red'); //相邻兄弟选择器
// $('h3~h2').css('background','#ccc') //一般兄弟选择器
// $('h2:first').css('text-decoration','underline') //顺序选择器第一个元素
// $('h2:last').css('text-decoration','underline') //顺序选择器最后一个元素
// $('.class_b>h2:first').css('text-decoration','underline') //父级顺序中第一个元素
// $('li:gt(1)').css('color','red') //比较选择器 设置比1大的元素
// $('li:lt(4)').css('color','pink') //比较选择器 设置比4小的元素
// $('li:eq(2)').css('color','blue') //比较选择器 设置下标为2的元素
// $('.class_b >h2:gt(0)').css('color','blue') //比较选择器 设置class_b中比0大的元素
// $('li:odd').css('background','#ccc') //奇偶数选择器中的 奇数顺序设置
// $('li:even').css('background','red') //奇偶数选择器中的 偶数顺序设置
// $('h2:not(#id_b)').css('color','red') //设置不是此ID或CLASS名以外的元素
// $('.class_b>h2:not(#id_c)').css('color','red') //设置class属性中非id_c的同类元素
// $('h2:contains(我)').css('color','red') //匹配包含给定文本（我）的元素
// $('div:has(h4)').css('color','red') // 匹配包含特定选择器元素的元素
// $('div:empty').css('background','red') // 匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
// $(':parent').css('background','#ccc') // 匹配含有子元素或者文本的元素
// $('input[type]').css('background','pink') //匹配包含给定属性的元素 例如$('input[type]') input框下type属性
// $('input[type=button]').css('background','pink') //匹配给定属性是某个特定值的元素 $('input[type=button]') input框下type=button的元素
// $('input[type!=button]').css('background','pink') //匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素 $('input[type!=text]')
// $('input[type ^=t ]').css('background','pink') //匹配给定属性是以某些值开始的元素 $('input[type ^=t ]') 以t开始的type属性
// $('input[type $=n ]').css('background','pink') //匹配给定属性是以某些值结尾的元素 $('input[type $=n ]') 以n结尾的type名属性
// $('input[type *=xt ]').css('background','pink') //匹配给定属性包含某些值的元素 $('input[type *=xt ]') type包含o的属性名
// $('input[id][name*=n]').css('background','pink') //复合选择器，需要同时满足多个条件时使用。$('input[id][name*=n]') input框包含id的，mame名包含n的。
// $(':enabled').css('background','pink') //所有激活的input元素（可以使用的input元素）
// $('input:disabled').css('background','pink') //所有禁用的input元素（不可以使用的input元素）
// $(':selected').css('color','blue') //所有被选取的元素，针对于select元素
// $('input:checked').parent().css('color','blue') //所有被选中的input元素
})
</script>
<div id="id_a">
<h1 class="class_a">class选择器</h1>
<p>元素选择器</p>
<ul>
<li>我1</li>
<li>1</li>
<div>
<li>2</li>
</div>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<h2 id="id_b">1我是h2</h2>
<h3>相邻兄弟</h3>
<h2>2我是h2</h2>
<h3>相邻兄弟</h3>
<h3>相邻兄弟</h3>
<h2>3我是h2</h2>
<h2>4我是h2</h2>
<h2>5我是h2</h2>
<div class="class_b">
<h2>6我是h2</h2>
<h2 id="id_c">7我是h2</h2>
<h2>8我是h2</h2>
<p>李涛</p>
<div></div> <!--不包含内容的元素-->
</div>
</div>
<div>
<h4>内容选择</h4>
<h4>内容选择</h4>
<h4>内容选择</h4>
</div>
<div></div>
<form>
输入框1<input type="text" name="myname" id="for_1"><br>
输入框2<input type="text" name="my" id="for_2"><br>
输入框3<input type="text" name="" disabled><br>
<input type="button" value="按钮"><br>
<select>
<option>摩羯座</option>
<option selected>双鱼座</option>
<option>射手座</option>
<option>天蝎座</option>
</select>
<br>
爱好：
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戏</label>
</form>
</body>
</html>
选择器总结笔记
选择器
id选择器 语法：$('#id名') 理解：和CSS语法一样
class选择器 语法：$('.class名') 理解：和CSS语法一样
元素选择器 语法：$('元素名') 理解：和css语法一样
所有元素选择器 语法：$('*') 理解：和css语法一样
页面中多个选择器 语法：$('#id名 class名 元素名') 理解：中间用空格分开，可以设置多个不同的选择器
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
层级选择器
子元素选择器 语法：$('父级元素>子级元素') 理解：匹配所有属于E元素的子元素F
后代元素选择器 语法：$('祖先元素 后代元素') 理解：匹配所有属于E元素后代的F元素，E和F之间用空格分隔
相邻兄弟选择器 语法：$('E元素 + F元素') 理解：匹配所有紧随E元素之后的同级元素F（只能同级元素）
一般兄弟选择器 语法：$('E元素~F元素) 理解：匹配将E元素后面的所有兄弟元素F
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
顺序选择器
第一个元素 语法：$(':first') 理解：匹配全文的第一个元素)$('p:first')
最后一个元素 语法：$(':last') 理解：匹配全文的最后一个元素$('p':last')
盒子内第一个元素 语法：$('父级元素 > 子元素:first') 理解：匹配盒子内第一个元素 $('父级元素>p:first')
盒子内最后一个元素 语法：$('父级元素 > 子元素:last') 理解：匹配盒子内最后一个元素 $('父级元素>p:last')
---------------------------------------------------------------------------------------------------------
比较选择器 (x的顺序是从0开始的)
表示大于值x的元素 语法：$(':gt(x)') 理解：如$('p:gt(1)') 匹配页面中P标签顺序除了第1/2个之后的所有P标签
表示小于值X的元素 语法：$(':lt(x)') 理解：如$('p:lt(2)') 匹配页面中P标签顺序除了第1/2/3的的P标签
表示等于值X的元素 语法：$(':eq(x)') 理解：如$('p:eq(5)') 匹配页面中P标签显示顺序第6个P标签
如果选择某一个div里面的可以加上父级选择器 $('div> p:gt(1)')
---------------------------------------------------------------------------------------------------
奇数偶数
奇数顺序 语法：$(':odd') 理解：$('li:odd') 匹配li元素顺序为奇数的li元素
偶数顺序 语法：$(':even') 理解：$('li:even')匹配li元素顺序为偶数的li元素
----------------------------------------------------------------------------------------------------------
非 排除ID名或class名以外的所有元素
语法：$('h2:not(#id名 或.class名)') 理解：匹配h2中不是此ID或CLASS名以外的的所有元素
$('.class_b>h2:not(#id_c)') 理解：匹配.class_b选择器下h2元素中不是id名：#id_c以外的所有元素
-----------------------------------------------------------------------------------------------------------
内容选择器
匹配包含给定文本（text）的元素 语法：$(':contains(text)') 理解：如$('h2:contains(love)') 匹配h2本中包含love的h2元素
匹配包含特定选择器元素的元素 语法：$(':has(selector)') 理解：$('div:has(h4)')匹配div中包含h4元素
匹配不含有内容的元素 语法：$(':empty') 理解：$('div:empty')匹配没有子元素同时也为空的div（即不包含子元素或者文本的空元素）
匹配含有子元素或者文本的元素 语法：$(':parent') 理解：$(':parent') 匹配有子元素或者文本的元素
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
属性选择器（主要适用于input框）
包含给定属性的元素 语法：$('[属性名]') 理解：匹配包含给定属性的元素 如$('input[type]') 匹配input框下含有type属性的元素
属性是某个特定值的元素 语法：$('[attribute=value]') 理解：匹配给定属性是某个特定值的元素,如$('input[type=button]') input框下type=button的名的元素
不含有指定值的属性元素 语法：$('[attribute!=value]')理解：匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素 $('input[type!=text]') type不等于text的元素
给定属性是以某些值开始的元素 语法:$('[attribute ^= value]') 理解:匹配给定属性是以某些值开始的元素 $('input[type ^=t ]') 以t开始的input type元素
给定属性是以某些值结尾的元素 语法:$('[attribute $= value]') 理解:匹配给定属性是以某些值结尾的元素 $('input[type $=n ]') 以n结尾的input type名元素
给定属性包含某些值的元素 语法: $('[attribute *= value]') 理解:匹配给定属性包含某些值的元素 如：$('input[type *=o ]') type名包含o的元素
复合选择器 语法：$('attrSel[1] attrSel[1] attrSel[1]') 理解：中间用空格分开，需同时满足多个条件时使用。$('input[id][name*=n]') input框包含id，且name名包含n的元素。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
表单选择器
所有激活的input元素 语法：$(':enabled') 理解:如$(':enabled')或$('input:enabled') 匹配可以使用的input元素。
所有禁用的input元素 语法：$(':disabled') 理解:$(':disabled') 或$('input:disabled')匹配不可以使用禁止input元素，input框属性为disabled=“disabled”就是禁止使用的意思。
下拉框被选取的元素 语法：$(':selected') 理解:所有被选取的元素，针对于下拉框元素,下拉框<select><option selected="selected">双鱼座</option></select> selected是选择的意思
选择框被撞中的元素 语法：$(':checked') 理解：匹配所有被选中的input元素 如<input type="checkbox" name="" checked> checkbox是选择框 checked=“checked”是选择的意思
批改老师：天蓬老师批改时间：2019-02-03 15:07:33
老师总结：总结的相当完整 , 推荐将这个内容当成原创文章,发表到php中文 网上, 这样可以帮到列多的新人
