柚子快報(bào)激活碼778899分享：前端 JQuery的基礎(chǔ)筆記

http://yzkb.51969.com/

前言：

j --> JavaScript Query --> 查詢

jquery的入口函數(shù)

等DOM結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼

相當(dāng)于原生js的DOMContentLoaded

不同于原生js中的load是等一切加載完畢再執(zhí)行

用法：（推薦第二種）

$(document).ready(function() { // 執(zhí)行代碼 })

$(function() { // 執(zhí)行代碼 })

$ 和 jQuery

1.$是jQuery的別稱

jQuery(function() {

? ?jQuery('div').hide();

});

2.$是jQuery的頂級(jí)對(duì)象

DOM對(duì)象和jQuery對(duì)象

1.DOM對(duì)象: 用原生js獲取過(guò)來(lái)的對(duì)象就是DOM對(duì)象

2.jQuery對(duì)象： 用jquery方式獲取過(guò)來(lái)的就是jQuery對(duì)象。本質(zhì)：通過(guò)$把DOM元素進(jìn)行了包裝

3.jQuery對(duì)象 只能使用jquery方法 DOM對(duì)象則使用原生的JavaScript屬性和方法

錯(cuò)誤寫(xiě)法：

myDiv.hide(); ?//myDiv是一個(gè)DOM對(duì)象不能使用jquery里面的hide方法

$('div').style.display = 'none'; ?

//這個(gè)$('div')是一個(gè)jQuery對(duì)象不能使用原生js的屬性和方法

DOM對(duì)象和jQuery對(duì)象的轉(zhuǎn)換

1.DOM --> jQuery：

a.直接獲?。?('video');

b.將dom轉(zhuǎn)換為jquery：$(DOM對(duì)象)

2.jQuery --> DOM:

(1).$('div')[index] //index是索引號(hào)

eg： $('div')[index].play()

(2).$('div').get(index) // 通過(guò)此方法可以引用DOM有的一些而jq沒(méi)有的方法

jQuery基礎(chǔ)選擇器

基礎(chǔ)選擇器：

名稱用法描述ID選擇器$("#id")全選選擇器$("*")類選擇器$(".class")標(biāo)簽選擇器$("div")并集選擇器$("div,p,li")選取多個(gè)元素交集選擇器$("li.current")交集元素

層級(jí)選擇器:

子代選擇器$("ul>li")親兒子后代選擇器$("ul li")兒子、孫子等

隱式迭代

把匹配的所有元素內(nèi)部進(jìn)行遍歷循環(huán)

jQuery篩選選擇器

語(yǔ)法用法描述:first$("li:first")獲取第一個(gè)li元素:last$("li:last")最后一個(gè):eq(index)$("li:eq(2)")索引號(hào)為2的元素，索引號(hào)從0開(kāi)始:odd$("li:odd")奇數(shù):even$("li:even")偶數(shù)

jQuery篩選方法

語(yǔ)法用法說(shuō)明parent()$("li").parent();查找父級(jí)children(selector)$("ul").children("li")相當(dāng)于$("ul>li")找親兒子find(selector)$("ul").find("li")相當(dāng)于$("ul li")找后代siblings(selector)$(".first").siblings("li")兄弟，不包括自己nextAll([expr])$(".first").nextAll()該元素之后所有同輩元素prevtAll([expr])$(".last").prevAll該元素之前所有同輩元素hasClass(class)$('div').hasClass("protected")檢查當(dāng)前元素是否含某特定值,若有則返回trueeq(index)$("li").eq(2)當(dāng)對(duì)于$("li:eq(2)")

寫(xiě)在最后：這個(gè)是備戰(zhàn)藍(lán)橋杯web組時(shí)學(xué)習(xí)的一些JQuery基礎(chǔ)用法，不過(guò)現(xiàn)在藍(lán)橋杯web組已經(jīng)不考JQuery了

柚子快報(bào)激活碼778899分享：前端 JQuery的基礎(chǔ)筆記

http://yzkb.51969.com/

精彩文章