abstrak：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery選擇器</title> <script type="text/javascript" src="
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery選擇器</title>
<script type="text/javascript" src="static/jquery-3.3.1.min.js"></script>
<style type="text/css">
#box,.box,.box2{width: 100px;height: 100px;border: 1px solid #ccc;margin: 10px 50px;}
.txt{border: 1px solid #ccc;display: block; width: 100px;height: 30px;line-height: 20px;text-align: center;}
</style>
</head>
<body>
<!-- 基本選擇器 -->
<!-- <div class="box"></div>
<div id="box"></div>
<span class="txt">php</span> -->
<!-- 層級選擇器 -->
<!-- <ul>
<li>1</li>
<li>2</li>
<li>3
<ul>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="">
<button>按鈕</button>
<button>單擊</button>
<button>雙擊</button>
</form> -->
<!-- 順序選擇器 -->
<!-- <p id="box1">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->
<!-- 內(nèi)容選擇器 -->
<!-- <div class="box2">html</div>
<div class="box2">javascript</div>
<div class="box2">jquery</div>
<div class="box2">css</div>
<div class="box2"><span>php</span></div>
<div class="box2"></div>
<div class="box2"><b></b></div> -->
<!-- 屬性選擇器 -->
<!-- <label>1</label><input type="text" name="new" id="woman"><br>
<label>2</label><input type="password" name="new1" id="man"><br>
<label>3</label><input name="" id="new"><br>
<label>4</label><input type="button" value="按鈕" name=""><br> -->
<!-- 表單選擇器 -->
<form>
輸入框1<input type="" name=""><br>
輸入框2<input type="" name=""><br>
輸入框3<input type="" name="" disabled=""><br>
輸入框4<input type="" name=""><br>
<select>
<option selected="">教皇</option>
<option>射手座</option>
<option>白羊座</option>
<option>雙子座</option>
<option>雙魚座</option>
</select><br>
愛好:
<label><input type="checkbox" name="">看書</label>
<label><input type="checkbox" name="">游泳</label>
<label><input type="checkbox" name="" checked>游戲</label>
</form>
<script type="text/javascript">
// 基本選擇器
// $(function(){
// // $('.class')根據(jù)給定的class匹配元素
// $('.box').css('background','yellow');
// // $('#id')根據(jù)給定的id匹配元素
// $('#box').css('background','green');
// // $('標(biāo)簽名')根據(jù)給定的標(biāo)簽名匹配元素
// $('span').css('color','red');
// // $('*')匹配所有元素
// $('*').css('border-radius','20px');
// // $('.class','#id','element')匹配頁面多個選擇器
// $('.box,#box,span').css('background','#ccc');
// })
// 層級選擇器
// $(function(){
// // $('父級元素>子集元素')給定父級元素下匹配所有子集元素
// $('ul>li').css('list-style','none');
// // $('祖先元素 后代元素')給定祖先元素下匹配所有后代元素
// $('ul li').css('font-size','20px');
// // $('prev+next')匹配緊跟在prev后面的next元素(同級)
// $('label+input').css('height','50px');
// // $('prev~siblings')匹配prev元素后邊所有的siblings元素
// $('label~button').css('background','red');
// })
// 順序選擇器
// $(function(){
// // 1.順序
// // $(':first')第一個元素
// $('p:first').css('color','#ccc');
// // $(':last')第一個元素
// $('p:last').css('color','red');
// // 2.比較
// // $(':gt(x)')大于值X的元素
// $('p:gt(2)').css('font-size','20px');
// // $(':lt(x)(')小于值X的元素
// $('p:lt(2)').css('font-size','30px');
// // $(':eq(x)')等于值X的元素
// $('p:eq(2)').css('color','blue');
// // 3.奇偶數(shù)
// // $(':odd')奇數(shù)順序
// $('p:odd').css('background','pink');
// // $(':even')偶數(shù)順序
// $('p:even').css('background','green');
// // 4.非
// // $(':ont(selector)')匹配不是selector的所有元素
// $('p:not(#box1)').css('background','red');
// })
// 內(nèi)容選擇器
// $(function(){
// // $(':contains(text)')匹配包含給定文本的元素
// $('div:contains(html)').css('background','red');
// // $(':has(selector)')匹配包含特定選擇器的元素
// $('div:has(span)').css('color','blue');
// // $(':empty')匹配不含有內(nèi)容的元素
// $('div:empty').css('background','red');
// // $(':parent')匹配含有子元素或文本的元素
// $('div:parent').css('background','yellow');
// })
// 屬性選擇器
// $(function(){
// // $('[屬性名]')匹配包含給定屬性的元素
// $('input[type]').css('background','blue');
// // $('[attribute=value]')匹配給定屬性是某個特定值的元素
// $('input[type=button]').css('background','red');
// // $('[attribute!=value]')匹配所有不含有指定元素值的屬性
// $('input[type!=text]').css('background','green');
// // $('[attribute^=value]')匹配給定屬性是以某些值開始的元素
// $('input[type^=t]').css('background','red');
// // $('[attribute$=value]')匹配給定屬性是以某些值開始的元素
// $('input[type$=n]').css('background','yellow');
// // $('[attribute*=value]')匹配給定屬性包含某些值的元素
// $('input[type*=s]').css('background','black');
// // $('attrsel[1]attrsel[1]attrsel[1]')復(fù)合選擇器，需要同時滿足多個條件
// $('input[id][name*=n]').css('background','blue');
// })
// 表單選擇器
$(function(){
// $(':enabled')所有激活的input元素
$('input:enabled').css('background','red');
// $(':disabled')所有禁用的input元素
$(':disabled').css('background','blue');
// $(':selected')所有被選取的元素
$(':selected').css('color','red');
// $(':checked')所有被選中的input元素
$(':checked').parent('label').css('color','blue');
})
</script>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-05-13 09:26:08
Rumusan guru：完成的不錯。jq比js簡單很多，多練習(xí)。繼續(xù)加油。