abstract：1.基本選擇器id選擇器:$('id名')class選擇器:$('class名') 標(biāo)簽選擇器:$('element') *選擇器:$('*')<!DOCTYPE html><html><head><meta charset="UTF-8"><
1.基本選擇器
id選擇器:$('id名')
class選擇器:$('class名')
標(biāo)簽選擇器:$('element')
*選擇器:$('*')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<p id="box">php中文網(wǎng)</p>
<p>php中文網(wǎng)</p>
<div>php中文網(wǎng)</div>
<script>
$(document).ready(function(){
$('#box').css('background','red');
$('.container').css('background','green');
$('div').css('background','blue');
$('*').css('width','100px');
$('*').css('height','100px');
$('*').css('color','#fff');
})
</script>
</body>
</html>
2.層級選擇器
子元素:$('父級元素>子元素')
后代元素:$('祖先元素 后代元素')
相鄰兄弟元素:$('prev + next')
兄弟元素:$('prev ~ siblings')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<div>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
<ul>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
</ul>
<li>PHP中文網(wǎng)</li>
<li>PHP中文網(wǎng)</li>
</div>
<script>
$(document).ready(function(){
$('div>li').css('font-size','30px');
$('div li').css('color','red');
$('li + ul').css('background','blue');
$('ul~li').css('border','1px solid #ccc');
})
</script>
</body>
</html>
3.順序選擇器
第一個:$(':first')
最后一個:$(':last')
大于值x的元素 $(':gt(x)')
等于值x的元素 $(':lt(x)')
小于值x的元素 $(':eq(x)')
奇偶數(shù)
奇數(shù)順序 $(':odd')
偶數(shù)順序 $(':even')
匹配非該元素的所有元素 $(':not(selsctor)')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>順序選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<li id="title">標(biāo)題</li>
<li>PHP中文網(wǎng)00</li>
<li>PHP中文網(wǎng)01</li>
<li>PHP中文網(wǎng)02</li>
<li>PHP中文網(wǎng)03</li>
<li>PHP中文網(wǎng)04</li>
<li>PHP中文網(wǎng)05</li>
<li>PHP中文網(wǎng)06</li>
<li>PHP中文網(wǎng)07</li>
<script>
$(document).ready(function(){
$('li:first').css('font-size','30px');
$('li:last').css('color','yellow');
$('li:gt(3)').css('color','red');
$('li:lt(3)').css('color','green');
$('li:eq(3)').css('color','blue');
$('li:odd').css('background','#000');
$('li:even').css('background','#888');
$('li:not(#title)').css('font-size','20px');
})
</script>
</body>
</html>
4.內(nèi)容選擇器
匹配文本內(nèi)容為text的元素:$(':contains(text)')
匹配包含特定選擇器的元素:$(':has(selector)')
匹配不包含內(nèi)容的元素:$(':empty')
匹配包含內(nèi)容的元素:$(':parent')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>內(nèi)容選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
<style>
div{
height: 100px;
width: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div><span href="">1</span></div>
<div><span href="">1</span></div>
<div>2</div>
<div>2</div>
<div></div>
<div></div>
<script>
$(document).ready(function(){
$('div:contains(2)').css('background','red');
$('div:has(span)').css('background','green');
$('div:empty').css('background','blue');
$('div:parent').css('color','#fff');
})
</script>
</body>
</html>
5.屬性選擇器
匹配包含該屬性的元素 $('[屬性名]')
匹配屬性值為特定值的元素 $('[attribute = value]')
匹配屬性值非特定值的元素 $('[attribute != value]')
匹配屬性值以某些值開始的元素 $('[attribute ^= value]')
匹配屬性值以某些值結(jié)尾的元素 $('[attribute $= value]')
匹配屬性值包含某些值的元素 $('[attribute *= value]')
同時滿足多條件的元素 $('attrSel[1] attrSel[1] attrSel[1]')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<p id="box">php中文網(wǎng)</p>
<p>php中文網(wǎng)</p>
<div id="box2">php中文網(wǎng)</div>
<script>
$(document).ready(function(){
$('p[id]').css('background','red');
$('p[id=box]').css('width','100px');
$('p[id != box]').css('background','blue');
$('p[class ^= c]').css('width','100px');
$('div[id $= 2]').css('background','green');
$('div[id *= 2]').css('width','100px');
$('p[id][id=box]').css('height','100px');
})
</script>
</body>
</html>
6.表單選擇器
所有激活的input元素 $(':enabled')
所有禁用的input元素 $(':disabled')
所有被選取的元素,針對于select元素 $(':selected')
所有被選中的input元素 $(':checked')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單選擇器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
輸入框1:<input type="text"><br>
輸入框2:<input type="text"><br>
輸入框3:<input type="text"><br>
輸入框4:<input type="text" disabled><br>
輸入框5:<input type="text"><br>
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
愛好:
<label for="hobby"><input type="checkbox" name="hobby" id="hobby">運(yùn)動</label>
<label for="hobby1"><input type="checkbox" name="hobby1" id="hobby1">看書</label>
<label for="hobby2"><input type="checkbox" name="hobby2" id="hobby2" checked>打游戲</label>
<script>
$(document).ready(function(){
$(':enabled').css('background','green');
$(':disabled').css('background','#ccc');
$(':selected').css('background','blue');
$(':checked').parent().css('background','red');
})
</script>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-08-15 10:48:15
Teacher's summary：你這是總結(jié)嗎? 如果是, 總結(jié)的還是全面的