【jQuery】2、選擇器
阿新 • • 發佈：2019-01-09
一、基本選擇器
1. 是什麼? - 有特定格式的字串 2. 作用 - 用來查詢特定頁面元素 3. 基本選擇器 - #id : id選擇器 - element : 元素選擇器 - .class : 屬性選擇器 - * : 任意標籤 - selector1,selector2,selectorN : 取多個選擇器的並集(組合選擇器) - selector1selector2selectorN : 取多個選擇器的交集(相交選擇器)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>05_基本選擇器</title> </head> <body> <div id="div1" class="box">div1(class="box")</div> <div id="div2" class="box">div2(class="box")</div> <div id="div3">div3</div> <span class="box">span(class="box")</span> <br> <ul> <li>AAAAA</li> <li title="hello">BBBBB(title="hello")</li> <li class="box">CCCCC(class="box")</li> <li title="hello">DDDDDD(title="hello")</li> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 選擇id為div1的元素 2. 選擇所有的div元素 3. 選擇所有class屬性為box的元素 4. 選擇所有的div和span元素 5. 選擇所有class屬性為box的div元素 */ // 1. 選擇id為div1的元素 //$('#div1').css('background','red') // 2. 選擇所有的div元素 //$('div').css('background','red') // 3. 選擇所有class屬性為box的元素 //$('.box').css('background','red') // 4. 選擇所有的div和span元素 //$('div,span').css('background','red') // 5. 選擇所有class屬性為box的div元素 $('div.box').css('background','red') </script> </body> </html>
二、層次選擇器
層次選擇器: 查詢子元素, 後代元素, 兄弟元素的選擇器 1. ancestor descendant 在給定的祖先元素下匹配所有的後代元素 2. parent>child 在給定的父元素下匹配所有的子元素 3. prev+next 匹配所有緊接在 prev 元素後的 next 元素 4. prev~siblings 匹配 prev 元素之後的所有 siblings 元素
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_層次選擇器</title> </head> <body> <ul> <li>AAAAA</li> <li class="box">CCCCC</li> <li title="hello"><span>BBBBB</span></li> <li title="hello"><span class="box">DDDD</span></li> <span>EEEEE</span> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 選中ul下所有的的span 2. 選中ul下所有的子元素span 3. 選中class為box的下一個li 4. 選中ul下的class為box的元素後面的所有兄弟元素 */ // 1. 選中ul下所有的的span //$('ul span').css('background','red') // 2. 選中ul下所有的子元素span //$('ul>span').css('background','red') // 3. 選中class為box的下一個li //$('.box+').css('background','red') // 4. 選中ul下的class為box的元素後面的所有兄弟元素 $('ul .box~*').css('background','red') </script> </body> </html>
三、過濾選擇器
在原有選擇器匹配的元素中進一步進行過濾的選擇器 * 基本 * 內容 * 可見性 * 屬性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>07_過濾選擇器</title> </head> <body> <div id="div1" class="box">class為box的div1</div> <div id="div2" class="box">class為box的div2</div> <div id="div3">div3</div> <span class="box">class為box的span</span> <br/> <ul> <li>AAAAA</li> <li title="hello">BBBBB</li> <li class="box">CCCCC</li> <li title="hello">DDDDDD</li> <li title="two">BBBBB</li> <li style="display:none">我本來是隱藏的</li> </ul> <script src="js/jquery-1.10.1.js" type="text/javascript"></script> <script type="text/javascript"> /* 需求: 1. 選擇第一個div 2. 選擇最後一個class為box的元素 3. 選擇所有class屬性不為box的div 4. 選擇第二個和第三個li元素 5. 選擇內容為BBBBB的li 6. 選擇隱藏的li 7. 選擇有title屬性的li元素 8. 選擇所有屬性title為hello的li元素 */ // 1. 選擇第一個div //$('div:first').css('background','red') // 2. 選擇最後一個class為box的元素 //$('.box:last').css('background','yellow') // 3. 選擇所有class屬性不為box的div //$('div:not(.box)').css('background','red') //沒有class屬性值也可以被選中 // 4. 選擇第二個和第三個li元素 //$('li:lt(3):gt(0)').css('background','blue') // 5. 選擇內容為BBBBB的li //$('li:contains("BBBBB")').css('background','red') // 6. 選擇隱藏的li console.log($('li:hidden').length,$('li:hidden')[0]) // 7. 選擇有title屬性的li元素 //$('li[title]').css('background','red') // 8. 選擇所有屬性title為hello的li元素 //$('li[title=hello]').css('background','red') $('li[title="hello"]').css('background','red') </script> </body> </html>
四、表單選擇器
表單選擇器 1). 表單 2). 表單物件屬性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>08_表單選擇器</title>
</head>
<body>
<form>
使用者名稱: <input type="text"/><br>
密 碼: <input type="password"/><br>
愛 好:
<input type="checkbox" checked="checked"/>籃球
<input type="checkbox"/>足球
<input type="checkbox" checked="checked"/>羽毛球 <br>
性 別:
<input type="radio" name="sex" value='male'/>男
<input type="radio" name="sex" value='female'/>女<br>
郵 箱: <input type="text" name="email" disabled="disabled"/><br>
所在地:
<select>
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交"/>
</form>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 選擇不可用的文字輸入框
2. 顯示選擇愛好 的個數
3. 顯示選擇的城市名稱
*/
// 1. 選擇不可用的文字輸入框
$(':text:disabled').css('background','#ccccff')
// 2. 顯示選擇愛好 的個數
$(':checkbox').click(function () {
console.log($(':checkbox:checked').length)
})
// 3. 顯示選擇的城市名稱
$(':submit').click(function () {
var city = $('select>option:selected').html()
var number = $('select').val()
console.log(city,number)
alert('確認')
})
</script>
</body>
</html>