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

更新時(shí)間：2016年05月31日 09:33:51 投稿：jingxian

下面小編就為大家?guī)硪黄猨Query基礎(chǔ)知識點(diǎn)總結(jié)(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

jQuery是一個(gè)優(yōu)秀的、輕量級的js庫，它兼容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)記語言下的一個(gè)應(yīng)用）、events、實(shí)現(xiàn)動(dòng)畫效果，并且方便地為網(wǎng)站提供AJAX交互。jQuery還有一個(gè)比較大的優(yōu)勢是，它的文檔說明很全，而且各種應(yīng)用也說得很詳細(xì)，同時(shí)還有許多成熟的插件可供選擇。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3、jQuery選擇器

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