摘要：1、基本選擇器語法$('#id名') 根據(jù)給定的id來匹配到元素$('.class') 根據(jù)給定的clss來匹配到元素$('element') 根據(jù)給定的標(biāo)簽名來匹配到元素$('*') 匹配所有元素$('#id,.class,element') 匹配到頁面中多個(gè)選擇器下面是基本選擇器的一些用法<!DOC
1、基本選擇器
語法
$('#id名') 根據(jù)給定的id來匹配到元素
$('.class') 根據(jù)給定的clss來匹配到元素
$('element') 根據(jù)給定的標(biāo)簽名來匹配到元素
$('*') 匹配所有元素
$('#id,.class,element') 匹配到頁面中多個(gè)選擇器
下面是基本選擇器的一些用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中的選擇器</title>
<style>
div {width: 100px;height: 100px;background: #ccc;margin-top: 20px;}
</style>
<script src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$('#box').css('background','red');
$('.box').css('background','blue');
$('span').css('font-size','30px');
$('*').css('font-family','宋體')
$('#box,.box,span').css('color','pink');
});
</script>
</head>
<body>
<div id="box">測(cè)試1</div>
<div>測(cè)試2</div>
<span>PHP中文網(wǎng)</span>
</body>
</html>下面是測(cè)試結(jié)果圖
2、層級(jí)選擇器
給定的符集元素匹配所有的子元素：$('父級(jí)元素 > 子集元素')
給定的祖先元素下匹配所有的后代元素: $('祖先元素 后代元素')
匹配緊跟在prev元素后面的next元素：$('prev + next') (同級(jí)的元素)
匹配prev元素后面所有的siblings元素: $('prev ~ siblings')
$(document).ready(function() {
// $('ul > li').css({'color':'red','list-style':'none'});
$('ul li').css('list-style','none');
$('input+button').css('height','50px');
$('label~input').css('background','pink');
});<ul> <li>1</li> <li>2</li> <div> <li>div里面的li <div><li>多層嵌套里的li</li></div> </li> </div> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <form action=""> <label for="">姓名</label> <input type="text"> <button>按鈕</button> <input type="text"><input type="text"> </form>
3、順序選擇器
1、順序
$(':first') 第一個(gè)元素
$(':last') 第二個(gè)元素
2、比較
$(':gt(x)') 表示大于值x的元素
$(':lt(x)') 表示小于值x的元素
$(":eq(x)") 表示等于值x的元素
3、奇偶數(shù)
$(':odd') 奇數(shù)順序
$(':even') 偶數(shù)順序
4、非
$(':not(selector)') 匹配不是selector的所有元素
4、內(nèi)容選擇器
語法：
$(':contains(text)') 匹配包含給定文本(text)的元素
$(':has(selector)') 匹配包含特定選擇器元素的元素
$('empty()') 匹配不包含內(nèi)容的元素 (即 不包含子元素或者文本的空元素)
$(':parent') 匹配含有子元素或者文本的元素
5、屬性選擇器
語法：
$('[屬性名]') 匹配包含給定屬性的元素
$('[attribute=value]') 匹配給定屬性是某個(gè)特定值的元素
$('[attribute!=value]') 匹配所有不含有指定值的屬性，或者屬性不等于特定值的元素
$('[attribute ^= value]') 匹配給定屬性是以某些值開始的元素
$('[attribute $= value]') 匹配給定屬性是以某些值結(jié)尾的元素
$('[attribute *= value]') 匹配給定屬性包含某些值結(jié)尾的元素
$('attrSel[1] attrSel[1] attrSel[1]') 復(fù)合選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
6、表單選擇器
語法：
$(':enabled') 所有激活的input元素 (可以使用的input元素)
$(':disabled') 所有禁用的input元素 (不可以使用的input元素)
$(':selected') 所有被選取的元素，針對(duì)于select元素
$(':checked') 所有被選中的input元素
批改老師：滅絕師太批改時(shí)間：2019-01-14 16:42:12
老師總結(jié)：完成的很好！很用心，jQuer核心部分就是選擇器，一定要好好掌握