柚子快報激活碼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的頂級對象

DOM對象和jQuery對象

1.DOM對象: 用原生js獲取過來的對象就是DOM對象

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

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

錯誤寫法：

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

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

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

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

1.DOM --> jQuery：

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

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

2.jQuery --> DOM:

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

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

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

jQuery基礎(chǔ)選擇器

基礎(chǔ)選擇器：

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

層級選擇器:

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

隱式迭代

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

jQuery篩選選擇器

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

jQuery篩選方法

語法用法說明parent()$("li").parent();查找父級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)對于$("li:eq(2)")

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

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

http://yzkb.51969.com/

精彩文章