一 css選擇器回顧
CSS選擇器
二 jQuery基本選擇器
jQuery選擇器
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函數(shù)與js的不同</title>
<style>
/* li{
color: red;
font-size: 18px;
}*/
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
//1. 設(shè)置選中標(biāo)簽的css樣式
// $("#li3").css("background","red");
//2. 獲取選中標(biāo)簽的樣式
//var bg=$("#li3").css("color");
//var bg=$("#li3").css("font-size");
//alert(bg);
//3. 標(biāo)簽選擇器
//$("li").css("background","red");
//4. 選擇多個(gè)指定元素
$(".ll,div").css("background","green")
})
</script>
</head>
<body>
<ul>
<li class="ll">1111111</li>
<li>2222222</li>
<li class="li3">3333333</li>
<li>4444444</li>
<li class="ll">5555555</li>
<li>6666666</li>
</ul>
<div>
對(duì)方水電費(fèi)
</div>
</body>
</html>
規(guī)律：$(selector).css(“background”,”red”);
Console.log();在控制臺(tái)打印
alert();彈窗打印
三 css的詳細(xì)用法
<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery入口函數(shù)與js的不同</title>
<style>
/* li{
color: red;
font-size: 18px;
}*/
</style>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
/* //css
//1 獲取 .css("background-color")
$("li").css("font-size");
//2 設(shè)置樣式
$("li").css("background-color","red");
//3 設(shè)置多個(gè)樣式
$("li").css({
"background-color":"red",
"font-size":"30px",
"color":"green"
})*/
//4 設(shè)置樣式霜大，可以根據(jù)我們自己的意愿設(shè)置
$("li").css("background",function (index,value) {
//index;指定當(dāng)前元素的索引號(hào)
//value;表示當(dāng)前元素的要設(shè)置的樣式，此處指：background-color
/* alert(index);
alert(value);*/
// return (index + 1) * 10 + "px";
switch(index){
case 0: return "red";break;
case 1: return "green";break;
case 2: return "blue";break;
}
})
})
</script>
</head>
<body>
<ul>
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
</body>
</html>
總結(jié)：
1 獲取選中標(biāo)簽樣式
.css("background-color")
2 設(shè)置樣式
$("li").css("background-color","red");
3 設(shè)置多個(gè)樣式
$("li").css({
"background-color":"red",
"font-size":"30px",
"color":"green"
})
4 設(shè)置樣式，可以根據(jù)我們自己的意愿設(shè)置
$("li").css("background",function (index,value) {
//index;指定當(dāng)前元素的索引號(hào)
//value;表示當(dāng)前元素的要設(shè)置的樣式妓布，此處指：background-color
/* alert(index);
alert(value);*/
// return (index + 1) * 10 + "px";
switch(index){
case 0: return "red";break;
case 1: return "green";break;
case 2: return "blue";break;
}
})
})
四 jQuery是什么
jQuery就是js的一個(gè)庫(kù)棚唆，把我們常用的一些功能進(jìn)行了封裝沛鸵，方便我們調(diào)用批钠，提高我們開(kāi)發(fā)效率晋被。
五 js和jQuery的區(qū)別
js是一門編程語(yǔ)言荔烧，我們用它編寫(xiě)客戶端瀏覽器腳本吱七。
jQuery是js的一個(gè)庫(kù)，包含多個(gè)可重用的函數(shù)鹤竭，用來(lái)輔助我們簡(jiǎn)化js開(kāi)發(fā)踊餐。
jQuery可以做到的js都可以做到，而js能做到的臀稚，jQuery不一定能做到吝岭。
六 jQuery其他選擇器
1 層級(jí)選擇器
層級(jí)選擇器
層級(jí)選擇器選擇了選擇符 后面那個(gè)元素，比如吧寺，div > p窜管，是選擇>后面的p元素。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// documen 是不被引號(hào)包裹的
//$("li").css("font-size","30px");
// 后代選擇器
//$(".wrap li").css("background","red");
// 子代選擇器
//$(".wrap > ul > li").css("font-size","30px");
// 緊鄰選擇器
//$(".wrap + div").css("font-size","30px");
// 兄弟選擇器
$(".liItem ~ li").css("font-size","40px");
});
// jQuery的第二種入口函數(shù)
/*$(function () {});*/
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>姐妹很多01
<p>
<ul>
<li>孩子很多</li>
<li>孩子很多</li>
<li>孩子很多</li>
</ul>
</p>
</li>
<li>姐妹很多02</li>
<li>姐妹很多03</li>
<li class="liItem">姐妹很多04</li>
<li>姐妹很多05</li>
<li>姐妹很多06</li>
<li>姐妹很多07</li>
<li>姐妹很多08</li>
<li>姐妹很多09</li>
<li>姐妹很多10</li>
</ul>
</div>
<p>我是p元素</p>
<div>
我是第一個(gè)div后面的兄弟div
</div>
<div>
我是第er個(gè)div后面的兄弟div
</div>
</body>
</html>
2 過(guò)濾選擇器
基本過(guò)濾選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// :odd
//$("li:odd").css("background","red");
// :even
//$("li:even").css("background","green");
// :eq(index)
//$("ul li:eq(4)").css("font-size","30px");
// :lt(index)
//$("li:lt(6)").css("font-size","30px");
// :gt(index)
//$(".ulList1 li:gt(7)").css("font-size","40px");
// :first
//$(".ulList li:first").css("font-size","40px");
// :last
$("li:last").css("font-size","40px");
});
</script>
</head>
<body>
<ul class="ulList">
<li>01男嘉賓</li>
<li>02男嘉賓</li>
<li>03男嘉賓</li>
<li>04男嘉賓</li>
<li>05男嘉賓</li>
<li>06男嘉賓</li>
<li>07男嘉賓</li>
<li>08男嘉賓</li>
<li>09男嘉賓</li>
<li>10男嘉賓</li>
</ul>
<ul class="ulList">
<li>01男嘉賓</li>
<li>02男嘉賓</li>
<li>03男嘉賓</li>
<li>04男嘉賓</li>
<li>05男嘉賓</li>
<li>06男嘉賓</li>
<li>07男嘉賓</li>
<li>08男嘉賓</li>
<li>09男嘉賓</li>
<li>10男嘉賓</li>
</ul>
</body>
</html>
3 屬性選擇器
屬性選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// 屬性選擇器
/*$("a[href]").css("color","red");*/
// [attr=value]
//$("a[);
// [attr!=value]
//$("a[href!='http://www.baidu.com']").css("font-size","40px");
// [attr^=value]
//$("a[href^='http']").css("font-size","40px");
// [attr$=value]
//$("a[href$='cn']").css("font-size","40px");
// [attr*=value]
//$("a[href*='it']").css("font-size","40px");
// [attr][attr] 都滿足 交集
$("a[href][title*='的']").css("font-size","40px");
});
</script>
</head>
<body>
<div class="divItem">
<a href="www.baidu.com" title="誰(shuí)爸苫幕帆？">百度</a>
<a title="我是title的內(nèi)容">前端移動(dòng)</a>
<a >新浪</a>
<a>我沒(méi)有href</a>
</div>
</body>
</html>
4 篩選選擇器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
// .eq()
// 類比 ":eq(index)" 選擇器
//$("span").eq(1).css("font-size","40px");
// .first()
// 類比 ":first" 選擇器
//$("span").first().css("font-size", "40px");
// .parent()
// 選擇父親元素
//$("#sp").parent().css("background", "gold");
//$("p").parent("#div").css("background", "gold");
// .siblings()
// 選擇所有的兄弟元素
//$("#li04").siblings(".liItem").css("background", "gold");
// .find()
// 查找所有后代元素
$("div").find("#li04").css("background", "gold");
});
</script>
</head>
<body>
<div>
<span>我是第1個(gè)span</span>
<span id="sp">我是第2個(gè)span</span>
<span>我是第3個(gè)span</span>
</div>
<div id="div">
<p>Hello</p>
</div>
<div class="selected">
<p>Hello Again</p>
</div>
<div>
<ul>
<li>我是li01</li>
<li>我是li02</li>
<li>我是li03</li>
<li id="li04">我是li04</li>
<li>我是li05</li>
<li class="liItem">我是li06</li>
<li>我是li07</li>
<li>我是li08</li>
</ul>
</div>
</body>
</html>
