jQuery基礎(chǔ)知識(shí)點(diǎn)總結(jié)(必看)

2019-11-20 09:50:52

字體：大中小

供稿：網(wǎng)友

jQuery是一個(gè)優(yōu)秀的、輕量級(jí)的js庫(kù) ，它兼容CSS3，還兼容各種瀏覽器（IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+），而jQuery2.0及后續(xù)版本將不再支持IE6/7/8瀏覽器。jQuery使用戶能更方便地處理HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫(huà)效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢(shì)是，它的文檔說(shuō)明很全，而且各種應(yīng)用也說(shuō)得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。

1、jQuery入口函數(shù)與Js入口函數(shù)的區(qū)別

【注】js入口函數(shù)指的是：window.onload = function(){};

區(qū)別一：書(shū)寫(xiě)個(gè)數(shù)不同

Js入口函數(shù)只能出現(xiàn)一次，出現(xiàn)多次會(huì)存在事件覆蓋的問(wèn)題。

jQuery的入口函數(shù)，可以出現(xiàn)任意多次，并不會(huì)存在事件覆蓋問(wèn)題。

區(qū)別二：執(zhí)行時(shí)機(jī)不同

Js入口函數(shù)是在所有的文件資源加載完成后，才執(zhí)行。這些文件資源包括：頁(yè)面文檔、外部的js文件、外部的css文件、圖片等。

jQuery的入口函數(shù)，是在文檔加載完成后，就執(zhí)行。文檔加載完成指的是：DOM樹(shù)加載完成后，就可以操作DOM了，不用等到所有的外部資源都加載完成。

文檔加載的順序：從上往下，邊解析邊執(zhí)行。

2、jQuery對(duì)象和DOM對(duì)象的相互轉(zhuǎn)換

①DOM對(duì)象此處指的是：使用js操作DOM返回的結(jié)果

var btn = document.getElementById(“btnShow”); // btn就是一個(gè)DOM對(duì)象

②jQuery對(duì)象此處指的是：使用jQuery提供的操作DOM的方法返回的結(jié)果

var $btn = $(“#btnShow”); // $btn就是一個(gè)jQuery對(duì)象

③DOM對(duì)象轉(zhuǎn)換成jQuery對(duì)象

var $btn1 = $(btn); // 此時(shí)就把DOM對(duì)象btn轉(zhuǎn)換成了jQuery對(duì)象$btn1// $(document）.ready(function(){}); // 調(diào)用入口函數(shù)// 此處是將document這個(gè)js的DOM對(duì)象，轉(zhuǎn)換成了jQuery對(duì)象，然后才能調(diào)用jQuery提供的方法：ready

④jQuery對(duì)象轉(zhuǎn)換成DOM對(duì)象

// 第一種方式var btn1 = $btn[0]; // 此時(shí)就把jQuery對(duì)象$btn轉(zhuǎn)換成了DOM對(duì)象btn1 （推薦使用此方式）// 第二種方式var btn2 = $btn.get(0);// 此時(shí)就把jQuery對(duì)象$btn轉(zhuǎn)換成了DOM對(duì)象btn2

3、jQuery選擇器

符號(hào)（名稱(chēng)）	說(shuō)明	用法
基本選擇器（重點(diǎn)）
#	ID選擇器	$(“#btnShow”).css(“color”, “red”); 選擇id為btnShow的一個(gè)元素（返回值為jQuery對(duì)象，下同）
.	類(lèi)選擇器	$(“.liItem”).css(“color”, “red”); 選擇含有類(lèi)liItem的所有元素
element	標(biāo)簽選擇器	$(“l(fā)i”).css(“color”, “red”); 選擇標(biāo)簽名為li的所有元素
層級(jí)選擇器
空格	后代選擇器	$(“#j_wrap li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有后代元素li
>	子代選擇器	$(“#j_wrap > ul > li”).css(“color”, “red”); 選擇id為j_wrap的元素的所有子元素ul的所有子元素li
基本過(guò)濾選擇器
:eq(index)	選擇匹配到的元素中索引號(hào)為index的一個(gè)元素，index從0開(kāi)始	$(“l(fā)i:eq(2)”).css(“color”, ”red”); 選擇li元素中索引號(hào)為2的一個(gè)元素
:odd	選擇匹配到的元素中索引號(hào)為奇數(shù)的所有元素，index從0開(kāi)始	$(“l(fā)i:odd”).css(“color”, “red”); 選擇li元素中索引號(hào)為奇數(shù)的所有元素
:even	選擇匹配到的元素中索引號(hào)為偶數(shù)的所有元素，index從0開(kāi)始	$(“l(fā)i:odd”).css(“color”, “red”); 選擇li元素中索引號(hào)為偶數(shù)的所有元素
篩選選擇器（方法）（重點(diǎn)）
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個(gè)元素，index是索引號(hào)，從0開(kāi)始	$(“l(fā)i”).eq(2).css(“color”, “red”); 選擇所有li元素中的第二個(gè)