您好,登錄后才能下訂單哦!
看這篇文章時,建議有一定的HTML,CSS,javascript基礎(chǔ)
jQuery是一個兼容多瀏覽器的,輕量級的javascript庫,我們做前段開發(fā)時可以用jquery做到以下幾點:
1.找到HTML中的元素
2.改變HTML的內(nèi)容
3.根據(jù)用戶的反饋,比如按下按鈕頁面做出相應(yīng)的動作
4.使用動畫效果和網(wǎng)絡(luò)交互
5.不刷新頁面而改變頁面的內(nèi)容
首先理解什么是DOM,它是Document Object Model的縮寫,簡單來說,就是瀏覽器加載HTML時生成的樹狀結(jié)構(gòu)。如下圖:
瀏覽器在加載DOM時如下圖:瀏覽器第一步加載HTML到DOM,但是有時候,javascript有時候會在DOM加載完之前就運行了,然而這時候DOM是沒有加載完的所以,要讓DOM加載完畢再執(zhí)行js代碼,就需要:
$(document).ready(function(){
代碼塊。。。
});
#id選擇器
格式:$("#id")
例子:
element選擇器
格式:$("element")
例子:
.class選擇器
格式:$(".class")
例子:
.*選擇器
格式:$("*") 注意:由于使用*選擇器獲取的是全部元素,因此,有些瀏覽器將會比較緩慢,這個選擇器也需要謹(jǐn)慎使用。
例子:
sele1,sele2,sele3選擇器:每個之間用逗號隔開,哪種類型都可以如$("#id,.class,myname")
格式:$("sele1,sele2,sele3")
例子:
ance desc選擇器:ance參數(shù)(ancestor祖先的簡寫)表示父元素;desc參數(shù)(descendant后代的簡寫)表示后代元素,即包括子元素、孫元素等等。
格式:$("ance desc")
例子:
橫線的代碼表示 div下的所有l(wèi)abel元素,但選不到<p>里面的label元素
$("div label")//獲取的是div下的所有l(wèi)abel元素,包括子輩和孫輩
parent>child選擇器
格式:$("parent>child")
例子:
$("div>label")//獲取的是div下的所有子輩元素,不包括孫輩
prev+next選擇器 “prev”元素最緊鄰的下一個元素由“next”選擇器返回的并且只返回唯的一個元素。
格式:$("prev+next")
例子:
prev~next選擇器
格式:$("prev~next")
例子:
總結(jié)
1.$("div span")獲取div下的所有span子元素
2.$("div>span")獲取div下的所有直接子元素,沒有孫子輩
3.$("div+span")獲取div相鄰的span元素
4.$("div~span")獲取div相鄰的所有span元素
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。