摘要：<!doctype html><html><head><meta charset="UTF-8"><title>jQuery的各種選擇器</title><link rel="stylesheet" href=""><script type="
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的各種選擇器</title>
<link rel="stylesheet" href="">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
#id-name1{
width: 150px;
height: 50px;
background: red;
color: white;
}
.box2{width: 200px;height: 50px;background:pink;}
</style>
</head>
<body>
<script type="text/javascript">
// 基本選擇器：
// 1.標(biāo)簽元素選擇器：$("element")
// 2.id選擇器：$("#id-name")
// 3.類選擇器：$(".class-name")
// 4.全局選擇器：$("*")
// 5.匹配多個元素：$('#id,.class,element')
//文檔就緒函數(shù)
$(document).ready(function(){
$("*").css("background","#ccc");
$('.class-name1').css('color','red');
$('#id-name1').css('background','blue');
$("h2").css("color","blue");
})
//層級選擇器：
//1.給定的父元素下匹配所以的子元素：$('父元素>子元素')
//2.給定的祖先元素下匹配所以的后代元素：$('父元素 后代元素')
//3.匹配緊跟在prev元素后面的next元素：$('prev+next')
//4.匹配prev元素后面所以的siblings元素：$('prev~siblings')
$(document).ready(function(){
$(".box1>span").css("color","green");
$(".box1 span").css("background","yellow");
$(".p1+h3").css("font-size","38px");
$(".p1~h3").css("background","pink");
})
//順序選擇器：
//1.順序 $(":first")第一個元素；$(":last")最后一個元素
//2.比較（x的順序從零開始）
//$(":gt(x)")表示大于值x的元素；$(":lt(x)")表示小于值x的元素；
//$(":eq(x)")表示等于值x的元素；
//3.奇偶 $(":odd")奇數(shù)順序；$(":even")偶數(shù)順序。（從0開始）。
//4.非 $(":not(selector)")匹配不是selector的所有元素。
$(document).ready(function(){
$("li:first").css("color","red");
$("li:last").css("color","blue");
$("li:gt(1)").css("font-size","20px");
$("li:lt(3)").css("font-style","italic");
$("li:eq(3)").css("color","green");
$("li:odd").css("background","yellow");
$("li:even").css("background","pink");
$("").css("","");
})
//內(nèi)容選擇器：
//$(":contains()text")匹配包含給定文本text的元素
//$(":has(selector)")匹配包含特定選擇器的元素
////$(":empty")匹配不包含內(nèi)容的元素，即不包含元素或者文本的空元素
//$(":parent")匹配含有子元素或者文本的元素
$(document).ready(function(){
$("p:contains(中原)").css("color","green");
$("p:has(i)").css("font-size","29px");
$(".box2:empty").css("background","blue");
$(".box2:parent").css("background","green");
})
//屬性選擇器：
//$("[attribute]")匹配包含給定屬性的元素
//$("[attribute=value]")匹配給定屬性等于特定值的元素
//$("[attribute！=value]")匹配給定屬性不等于特定值的元素
//$("[attribute ^=value]")匹配給定屬性以某特定值開頭的元素
//$("[attribute $=value]")匹配給定屬性以某特定值結(jié)尾的元素
//$("[attribute *=value]")匹配給定屬性內(nèi)包含特定值的元素
//$("[attrSel[1] attrSel[1] ] attrSel[1]")復(fù)合選擇器，需要同時滿足多個條件時使用
$(document).ready(function(){
$("strong[id]").css("color","green");
$("strong[class=class2]").css("color","blue");
$("strong[class!=cla3]").css("font-size","27px");
$("strong[class^=a]").css("font-size","15px");
$("strong[class$=5]").css("color","red");
$("strong[class*=jjj]").css("color","blue");
$("strong[class][name*=me111]").css("color","red");
})
//表單選擇器：
//$(":enbaled")匹配所有激活的input元素，即可以使用的
//$(":disabled")匹配所有禁用的input元素
//$(":selected")匹配所有被選取的select元素
//$(":checked")匹配所有被選中的input元素
$(document).ready(function(){
$("input:enabled").css("background","pink");
$("input:disabled").css("background","blue");
// $("option:selected").css("color","pink");
$(":checked").parent().css("color","blue");
})
</script>
<!-- 基本選擇器： -->
<h2>標(biāo)簽選擇器</h2>
<div id="id-name1">id選擇器。。。</div>
<p>類選擇器ccccc</p>
<hr>
<!-- 層級選擇器： -->
<div>
<h2>計(jì)算機(jī)原理</h2>
<span>php中文網(wǎng)，一個學(xué)習(xí)web開發(fā)的優(yōu)秀網(wǎng)站</span><br>
<p><span>計(jì)算機(jī)軟件</span></p>
<h3>javascript腳本語言</h3>
<h3>php腳本語言</h3>
</div>
<hr>
<!-- 順序選擇器： -->
<ul>
<li>中 文</li>
<li>英 文</li>
<li>俄羅斯文</li>
<li>法 文</li>
<li>德 文</li>
<li>西班牙文</li>
<li>日 文</li>
</ul>
<hr>
<!-- 內(nèi)容選擇器： -->
<p id="p2"><i>中原輸油氣分公司</p></i>
<div></div>
<div>baiduwangzhan</div>
<hr>
<!-- 屬性選擇器： -->
<strong id="id2">屬性選擇器。</strong>
<strong>屬性選擇器里第二個部分。</strong>
<strong>屬性選擇器，屬性不等于。。。</strong>
<strong>dddddddddddddddddd。。。</strong>
<strong>屬ggggggggggggg。。。</strong><br>
<strong>tttttttttttt</strong>
<strong name="name111">復(fù)合條件都要成立。</strong>
<hr>
<!-- 表單選擇器 -->
<form action="">
<input type="text" disabled="disabled">
<input type="text" enabled="enabled">
<input type="text" enabled="enabled"><br>
<select name="" id="">
<option value="">中國</option>
<option value="" selected>俄羅斯</option>
<option value="">印度尼西亞</option>
<option value="">日本</option>
</select>
愛好：
<label for=""><input type="checkbox">游泳</label>
<label for=""><input type="checkbox">上網(wǎng)</label>
<label for=""><input type="checkbox" checked>乒乓球</label>
</form>
</body>
</html>
批改老師：滅絕師太批改時間：2019-03-18 09:15:30
老師總結(jié)：jquery中選擇器是比較重要的知識,要好好掌握,熟練使用!