サマリー：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Jquery-選擇器</title><!-- 引入jquery文件 --><script src="https://code.j
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery-選擇器</title>
<!-- 引入jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src='jquery-3.3.1.min.js'></script>
<style type='text/css'>
/* id */
#id{width:100px;height:30px;color:#fff;}
/* class */
.class{width:100px;height:30px;color:#fff;}
/* 標(biāo)簽 */
span{display:block;width:100px;height:30px;color:#fff;}
</style>
<script type='text/javascript'>
$(document).ready(function(){
// id選擇器
$('#id').css('backgroundColor','#f00');
// class選擇器
$('.class').css('backgroundColor','#000');
// 標(biāo)簽選擇器
$('span').css('backgroundColor','blue');
// 選擇所有元素
$('*').css('font-size','10px');
// 組合選擇器
$('#id,.class,span').css('borderRadius','5px');
// 子元素選擇器
$('ul>li').css('listStyle','none');
// 后代選擇器
$('ul li').css('listStyle','none');
// 相鄰選擇器 同級
$('ul>div + span').css({'backgroundColor':'#fff','color':'#000',});
// 某元素后面所有的指定元素
$('div~li').css('backgroundColor','#ff0');
//選取第一個(gè)li元素
$('li:first').css('backgroundColor','#f00');
//選取最后一個(gè)li元素
$('li:last').css('backgroundColor','#f00');
// 選擇順序大于 2 的元素 從0開始
$('li:gt(2)').css('color','blue');
// 選擇順序小于 2 的元素
$('li:lt(2)').css('color','pink');
//選擇順序等于 2 的元素
$('li:eq(2)').css('backgroundColor','pink');
//選擇順序?yàn)槠鏀?shù)
$('li:odd').css('border','1px solid #000');
//選擇順序?yàn)榕紨?shù)
$('li:even').css('font-weight','bold');
//選擇id名不為u_li
$('li:not(#u_li)').css('fontSize','20px');
//選擇包含給定文本的元素
$('li:contains(1)').css('color','#000');
//選擇包含特定選擇器元素的元素
$('span:has(li)').css('backgroundColor','pink');
//選擇不包含子元素或文本的元素
$('div:empty').css({'backgroundColor':'#000','height':'30px'});
//選擇含有子元素或文本的元素
$('div:parent').css('textAlign','center');
//選擇給定屬性的元素
$('input[type]').css('width','200px');
//選擇屬性是指定值的元素
$('input[type=button]').css('height','30px');
//選擇屬性不是指定值的元素
$('input[type!=text]').css('backgroundColor','red');
//選擇屬性值是某些值開始的元素
$('input[type^=r]').css('width','30px');
//選擇屬性值是某些值結(jié)束的元素
$('input[type$=x]').css('width','30px');
//選擇屬性值包含某些值的元素
$('input[type*=tto]').css('border','none');
//選擇滿足多個(gè)條件的元素
$('input[id][name$=b]').css('width','60px');
//選擇激活的元素(可以使用的input)
$(':enabled').css('border','1px solid red');
//選擇禁用的元素(不可以使用的input)
$(':disabled').css('border','1px solid yellow');
//選擇被選取的元素 select 元素
$(':selected').css('color','blue');
//選擇選中的input元素 包含子元素或文本
$(':checked').parent().css('fontSize','30px');
});
</script>
</head>
<body>
<div id='id'>id選擇器</div>
<div class='class'>class選擇器</div>
<span>標(biāo)簽選擇器</span>
<ul>
<li>1</li>
<li id='u_li'>2</li>
<li>
<ul>
<div></div>
<span>
<li>11</li>
</span>
<li>22</li>
<li>33</li>
</ul>
</li>
</ul>
<form>
<p><label>輸入框1<input type='text' name=''></label></p>
<p><label>輸入框2<input type='text' disabled></label></p>
<p><label>輸入框3<input type='text'></label></p>
<p><label><input type='radio' name='sex' value='male' checked>男</label>
<label><input type='radio' name='sex' value='female'>女</label>
</p>
<p><label>地區(qū)
<select>
<option>北京</option>
<option>上海</option>
<option selected>福建</option>
</select>
</label></p>
<p><label><input type='checkbox' name='hobby[]' value='game'>游戲</label>
<label><input type='checkbox' name='hobby[]' value='music' checked>音樂</label>
</p>
<p><input type='button' id='' name='sub' value='提交'></p>
</form>
</body>
</html>
添削の先生：天蓬老師添削時(shí)間：2019-01-24 17:24:13
先生のまとめ：總結(jié)的很齊全, 其實(shí)只需要記住常用的幾個(gè)就可以了, 其它的可以用得時(shí)候再查, 但是對返回值類型一定要清楚