學習雞湯:學習之美磁餐,在于一頭霧水
jQuery介紹:
jQuery是別人封裝好的一個js庫酱虎,免費開源易用莺禁,提供了我們開發(fā)中常用到的操作DOM的API稼锅,解決了我們使用js操作DOM常遇到的一些問題(兼容性、繁瑣等)雄人,并且統(tǒng)一的入口从橘,簡化我們的操作,讓我們更專注于業(yè)務(wù)柠衍!
jQuery的特點:
兼容性好洋满、強大的jQuery選擇器、統(tǒng)一的入口降低了學習門檻珍坊、write less牺勾,do more,隱式迭代阵漏、鏈式編程
jQuery對象和DOM對象的相互轉(zhuǎn)換(難點理解)
jQuery對象-> DOM對象:$(selector)[0]
DOM對象-> jQuery對象:$(domObject)
jQuery選擇器(重點)
重點選擇器
#
Id選擇器
$(“#btnShow”).css(“color”, “red”);
選擇id為btnShow的一個元素(返回值為jQuery對象驻民,下同)
.
類選擇器
$(“.liItem”).css(“color”, “red”);
選擇含有類liItem的所有元素
element
標簽選擇器
$(“l(fā)i”).css(“color”, “red”);
選擇標簽名為li的所有元素
層級選擇器
后代選擇器
$(“#j_wrapli”).css(“color”, “red”);
選擇id為j_wrap的元素的所有后代元素li
子代選擇器
$(“#j_wrap > ul >li”).css(“color”,? “red”);
選擇id為j_wrap的元素的所有子元素ul的所有子元素li(親兒子)
基本過濾選擇器
選擇匹配到的元素中索引號為index的一個元素,index從0開始
$(“l(fā)i:eq(2)”).css(“color”, ”red”);
選擇li元素中索引號為2的一個元素
選擇匹配到的元素中索引號為奇數(shù)的所有元素履怯,index從0開始
$(“l(fā)i:odd”).css(“color”, “red”);
選擇li元素中索引號為奇數(shù)的所有元素
選擇匹配到的元素中索引號為偶數(shù)的所有元素回还,index從0開始
$(“l(fā)i:odd”).css(“color”, “red”);
選擇li元素中索引號為偶數(shù)的所有元素
篩選(方法)
find(selector)
查找指定元素的所有后代元素(子子孫孫)
$(“#j_wrap”).find(“l(fā)i”).css(“color”,? “red”);
選擇id為j_wrap的所有后代元素li
children()
查找指定元素的直接子元素(親兒子元素)
$(“#j_wrap”).children(“ul”).css(“color”,? “red”);
選擇id為j_wrap的所有子代元素ul
siblings()
查找所有兄弟元素(不包括自己)
$(“#j_liItem”).siblings().css(“color”, “red”);
選擇id為j_liItem的所有兄弟元素
parent()
查找父元素(親的)
$(“#j_liItem”).parent(“ul”).css(“color”,? “red”);
選擇id為j_liItem的父元素
eq(index)
查找指定元素的第index個元素,index是索引號叹洲,從0開始
$(“l(fā)i”).eq(2).css(“color”, “red”);
選擇所有l(wèi)i元素中的第二個