abstrakt：對比選擇:1. CSS依靠CSS選擇器使得網(wǎng)頁的結構和表現(xiàn)樣式完全分離,CSS選擇器能輕松定位并修改指定元素樣式,CSS選擇器包括標簽選擇器(以文檔元素作為選擇器),ID選擇器(以文檔元素的唯一標識ID作為選擇器),類選擇器(以文檔元素的class作為選擇器),群組選擇器(多個選擇器應用同樣的樣式規(guī)則),后代選擇器(元素X的任意后代元素Y),通配選擇器(以文檔的所有元素作為選擇器),偽類選擇器(以
對比選擇:
1. CSS依靠CSS選擇器使得網(wǎng)頁的結構和表現(xiàn)樣式完全分離,CSS選擇器能輕松定位并修改指定元素樣式,CSS選擇器包括標簽選擇器(以文檔元素作為選擇器),ID選擇器(以文檔元素的唯一標識ID作為選擇器),類選擇器(以文檔元素的class作為選擇器),群組選擇器(多個選擇器應用同樣的樣式規(guī)則),后代選擇器(元素X的任意后代元素Y),通配選擇器(以文檔的所有元素作為選擇器),偽類選擇器(以元素特定行為作為選擇器),子選擇器(元素X的直接子屬元素Y),兄弟選擇器(元素X的直屬兄弟元素Y),屬性選擇器(以文檔元素特定屬性為選擇器),詳情參考(http://www.w3school.com.cn/css/css_selector_type.asp)
2. jQuery選擇器完全繼承了CSS選擇器的風格,CSS選擇器能輕松定位并修改指定元素屬性和行為,而無需擔心瀏覽器是否支持這一選擇器,jQuery的行為規(guī)則都必須在獲取到元素后才能生效
說明: jQuery不僅可以像原生CSS樣修改元素樣式,而且還可以修改元素行為,需要注意的是jQuery中涉及操作CSS樣式的部分比單純的CSS功能更為強大,并且擁有跨瀏覽器的兼容性.
錯誤處理:
說明: 原生JS如果返回的對象不存在則瀏覽器會報錯,如果加if判斷會增加代碼量,而jQuery中$('selector')返回的永遠是封裝后的jQuery對象,因此不能直接if判斷,也不需要if判斷,如果非要去判斷的話可通過判斷$('selector').length屬性是否大于0或$('selector')[0]轉換為DOM對象(其實是調(diào)用的$('selector').toArray()轉換為DOM對象數(shù)組然后再取指定DOM對象的)判斷對象是否存在
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發(fā)</title>
</head>
<body>
</body>
<script src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
// 方式一: 通過判斷其length屬性
if ($("body").length > 0){
alert("存在")
}
// 方式二: 轉換為DOM對象判斷是否存在
if ($('body')[0]){
alert("存在")
}
</script>
</html>JQ選擇器:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發(fā)</title>
<style type="text/css">
div, span, p {
width: 200px;
height: 200px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
}
div.mini {
width: 66px;
height: 66px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
</head>
<body>
<h1>just for test</h1>
<div class="one" id="one">
id為one,class為one的div
<div class="mini">class為mini的div</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<div class="mini" title="other">class為mini,title為other的div</div>
<div class="mini" title="test">class為mini,title為test的div</div>
</div>
<div class="one">
class為one的div
<div class="mini">class為mini的div</div>
<div class="mini">class為mini的div</div>
<div class="mini">class為mini的div</div>
<div class="mini"></div>
</div>
<div class="one">
class為one的div
<div class="mini">class為mini的div</div>
<div class="mini">class為mini的div</div>
<div class="mini">class為mini的div</div>
<div class="mini" title="test">class為mini,title為test的div</div>
</div>
<div style="display: none;" class="one">style的display為"none"的div</div>
<div class="hide">class為"hide"的div</div>
<div>
包含input的type為"hidden"的div
<input type="hidden" name="name">
</div>
<span id="mover">正在執(zhí)行動畫的span</span>
</body>
</html>
# 基本選擇器
說明: 基本選擇器包括元素選擇器/ID選擇器/類選擇器/通用選擇器/分組選擇器.
<script src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
// 改變id為one的元素背景顏色為#bbffaa
$("#one").css("background-color", "#bbffaa")
// 改變class為mini的元素的背景顏色為#bbffaa
$(".mini").css("background-color", "#bbffaa")
// 改變所有div元素的背景顏色為#bbffaa
$("div").css("background-color", "#bbffaa")
// 改變所有元素的背景顏色為#bbffaa
$("*").css("background-color", "#bbffaa")
// 改變所有span和id為two的元素的背景顏色為#bbffaa
$("span, #two").css("background-color", "#bbffaa")
</script># 層次選擇器
說明: 層次選擇器包括子選擇器/后代選擇器/兄弟選擇器/后續(xù)選擇器.
<script type="text/javascript">
// 改變body里面所有div元素的背景顏色為#bbffaa
$("body div").css("background-color", "#bbffaa")
// 改變body內(nèi)第一層同級div元素的背景顏色為#bbffaa
$("body>div").css("background-color", "#bbffaa")
// 改變class為one的后面第一個同級div的背景顏色為#bbffaa
$(".one + div").css("background-color", "#bbffaa")
// 改變id為two后面所有div元素的背景顏色為#bbffaa
$("#two ~ div").css("background-color", "#bbffaa")
</script>擴展: 在層次選擇器中子選擇器和后代選擇器比較常用,而兄弟選擇器和后續(xù)選擇器在jQuery中可以用更簡單的方法代替,兄弟選擇器可通過.next("selector")代替,而后續(xù)選擇器可通過.nextAll("selector")代替,需要注意的是.next("selector")和.nextAll("selector")都是基于同級的,還有一個基于同級但是不論前后的兄弟元素獲取方法是.siblings("selector")
# 過濾選擇器
說明: 過濾選擇器包括基本過濾選擇器/內(nèi)容過濾選擇器/可見性過濾選擇器/屬性過濾選擇器/子元素過濾選擇器/表單屬性過濾選擇器.
<script type="text/javascript">
// 基本過濾選擇器
// 改變第一個div元素的背景色為#bbffaa
$("div:first").css("background-color", "#bbffaa")
// 改變最后一個div元素的背景色為#bbffaa
$("div:last").css("background-color", "#bbffaa")
// 改變class不為one的元素的背景色為#bbffaa
$("div:not(.one)").css("background-color", "#bbffaa")
// 改變索引為偶數(shù)的元素的背景顏色為#bbffaa
$("div:even").css("background-color", "#bbffaa")
// 改變索引為奇數(shù)的元素的背景顏色為#bbffaa
$("div:odd").css("background-color", "#bbffaa")
// 改變索引等于某值元素的背景顏色為#bbffaa
$("div:eq(0)").css("background-color", "#bbffaa")
// 改變索引大于某值的元素的背景顏色為#bbffaa
$("div:gt(0)").css("background-color", "#bbffaa")
// 改變索引小于某值的元素的背景顏色為#bbffaa
$("div:lt(1)").css("background-color", "#bbffaa")
// 改變所有的標題元素(h1~h6)的背景顏色為#bbffaa
$(":header").css("background-color", "#bbffaa")
// 改變所有正在執(zhí)行動畫的元素的背景顏色為#bbffaa
$(":animated").css("background-color", "#bbffaa")
// 內(nèi)容過濾選擇器
// 設置包含文本內(nèi)容為某值的元素背景色為#bbffaa
$("div:contains(為)").css("background-color", "#bbffaa")
// 設置不包含任何子元素或文本內(nèi)容的元素背景色為#bbffaa
$("div:empty").css("background-color", "#bbffaa")
// 設置包含指定選擇器的元素的元素背景色為#bbffaa
$("div:has(div)").css("background-color", "#bbffaa")
// 設置包含有子元素或文本的元素的背景色為#bbffaa(和empty相反)
$("div:parent").css("background-color", "#bbffaa")
// 可見過濾選擇器
// 設置所有不可見元素顯示
$("div:hidden").show(3000)
// 設置所有可見div元素背景色設置為#bbffaa
$("div:visible").css("background-color", "#bbffaa")
// 屬性過濾選擇器
// 設置含有title屬性元素的背景色為#bbffaa
$("[title]").css("background-color", "#bbffaa")
// 設置title屬性值等于test的元素背景色為#bbffaa
// $("[title=test]").css("background-color", "#bbffaa")
// 設置title屬性值不等于test的元素背景色為#bbffaa
$("[title!=test]").css("background-color", "#bbffaa")
// 設置title屬性值以te開頭的元素背景色為#bbffaa
$("[title^=te]").css("background-color", "#bbffaa")
// 設置title屬性值以st結尾的元素背景色為#bbffaa
$("[title$=st]").css("background-color", "#bbffaa")
// 設置title屬性值中含有es的元素背景色為#bbffaa
$("[title*=es]").css("background-color", "#bbffaa")
// 設置包含id屬性且title屬性值為test的元素的背景色為"#bbffaa"
$("[id][title=test]").css("background-color", "#bbffaaa")
// 子元素過濾選擇器
// 設置class為one的div下的第一個子元素背景色為#bbffaa
$("div.one :first-child").css("background-color", "#bbffaa")
// 設置class為one的div下的最后一個子元素背景色為#bbffaa
$("div.one :last-child").css("background-color", "#bbffaa")
// 設置class為one的div下只有一個子元素的元素背景色為#bbffaa
$("div.one :only-child").css("background-color", "#bbffaa")
// 設置每個元素下的第index個子元素或偶數(shù)或奇數(shù)元素的背景色為#bbffaa
$("div.one :nth-child(odd)").css("background-color", "#bbffaa")
</script>說明: 在可見性過濾選擇器中,:hidden不僅包括樣式屬性display:none的元素,也包括文本隱藏域<input type="hidden">和visible:hidden之類的元素,在子元素過濾選擇器中,:nth-child將為每一個符合條件的父元素匹配子元素,但需要注意的是索引是從1開始,而:eq的索引從0開始,同理:first和:first-child,:last和:last-child類似
# 表單選擇器
說明: 表單選擇器包括表單對象屬性過濾選擇器和擴展表單過濾選擇器.
<script type="text/javascript">
// 表單對象屬性過濾選擇器
// 設置id為form1的表單下的可用元素的值為你改變了~
$("#form1 input:enabled").val("你改變了~")
// 設置id為form1的表單下的不可用元素的值為你改變了~
$("#form1 input:disabled").val("你改變了~")
// 獲取多選框中選中的個數(shù)并顯示在div中
$("div:first").html($("input:checked").length + "個被選中!").css({
"color": "red",
"font-weight": "border"
})
// 獲取多選下拉列表中被選中的個數(shù)并顯示在div中
$("div:eq(1)").html($("select:first [selected=selected]").length + "個被選中").css({
"color": "red",
"font-weight": "border"
})
// 獲取單選下拉框中被選中的值并顯示在div中
$("div:last").html($("select:last [selected=selected]").text() + "被選中").css({
"color": "red",
"font-weight": "border"
})
// 表單選擇器
// :input可匹配<input>/<textarea>/<select>/<button>元素
$(":input").css("border", "solid 1px red")
// :text可匹配<input>所有的單行文本框
$(":text").css("border", "solid 1px red")
// :password可匹配所有的密碼框
$(":password").css("border", "solid 1px red")
// :radio可匹配所有的單選框
$(":radio").css("border", "solid 1px red")
// :checkbox可匹配所有的多選框
$(":checkbox").css("border", "solid 1px red")
// :submit可匹配所有的提交按鈕
$(":submit").css("border", "solid 1px red")
// :image可匹配所有的圖像按鈕
$(":image").css("border", "solid 1px red")
// :reset可匹配所有的重置按鈕
$(":reset").css("border", "solid 1px red")
// :button可匹配所有的按鈕
$(":button").css("border", "solid 1px red")
// :file可匹配所有的文件上傳域
$(":file").css("border", "solid 1px red")
// :hidden選取所有不可見元素
$(":hidden").css("border", "solid 1px red")
</script>最佳實踐:
1. 給網(wǎng)頁中的所有的<p>元素添加點擊事件,點擊后彈出元素內(nèi)的文本內(nèi)容?
<script type="text/javascript">
$("p").click(function(event) {
alert($(this).text())
});
</script>2. 使一個特定的表格隔行換色?
<script type="text/javascript">
$("table tr:odd").css("background-color", "#bbffaa")
</script>3. 對多選框進行操作,輸出選中的個數(shù)?
<script type="text/javascript">
$("input[name=newselector]:checkbox").click(function(event){
$("div>span").html(
" " + $("input[name=newselector]:checked").length + "個選項被勾選!"
).css("color", "red")
})
</script>4. 如上要求用戶進入頁面時,品牌列表默認精簡顯示(從第5條開始隱藏后面的品牌,除了最后一條),用戶單機"顯示所有品牌"顯示全部品牌同時高亮顯示推薦的品牌,且按鈕里的文字也換成"精簡顯示品牌",再次單擊"精簡顯示品牌"恢復初始狀態(tài)?
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>前端開發(fā)</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(img/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西歐</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯達</a><i>(9520) </i></li>
<li ><a href="#">賓得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奧林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">愛國者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相機</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>顯示全部品牌</span></a>
</div>
</div>
</body>
<script src="js/libs/jquery.min.js"></script>
<script type="text/javascript">
/*
1. 默認進去頁面,從第5條開始隱藏后面的品牌(最后一條"其它品牌相機"除外)
2. 當用戶點擊"顯示全部品牌"按鈕時
> 顯示隱藏品牌
> "顯示全部品牌"按鈕文本切換成"精簡顯示品牌"
> 高亮推薦品牌
3. 當用戶點擊"精簡顯示品牌"按鈕時
> 從第5條開始隱藏后面的品牌(最后一條"其它品牌相機"除外)
> "精簡顯示品牌"按鈕文本切換成"顯示全部品牌"
> 去掉高亮顯示的推薦品牌
*/
$(function(){
var $moreItems = $(".SubCategoryBox>ul>li:gt(5):not(:last)")
var $moreBtn = $(".showmore>a")
var $highlightItmes = $("ul>li").filter(":contains(佳能),:contains(索尼)")
$moreItems.hide()
$moreBtn.toggle(function(){
$moreItems.show()
$(".showmore>a>span").css("background", "url(img/up.gif) no-repeat 0 0").text("精簡顯示品牌")
$highlightItmes.addClass("promoted")
}, function(){
$moreItems.hide()
$(".showmore>a>span").css("background", "url(img/down.gif) no-repeat 0 0").text("顯示所有品牌")
$highlightItmes.removeClass("promoted")
})
})
</script>
</html>