jquery經常使用api

1.1.1 jQuery對象和DOM對象的相互轉換

DOM對象此處指的是：使用js操做DOM返回的結果。

var btn = document.getElementById(「btnShow」); // btn就是一個DOM對象

jQuery對象此處指的是：使用jQuery提供的操做DOM的方法返回的結果。

jQuery拿到DOM對象後又對其作了封裝，讓其具備了jQuery方法的jQuery對象，說白了，就是把DOM對象從新包裝了一下。

（聯想：手機和有手機殼的手機，手機就比如是DOM對象，有手機殼的手機就比如是jQuery對象）

var $btn = $(「#btnShow」); // $btn就是一個jQuery對象

DOM對象轉換成jQuery對象：

var $btn1 = $(btn); // 此時就把DOM對象btn轉換成了jQuery對象$btn1

// $(document）.ready(function(){}); // 調用入口函數

// 此處是將document這個js的DOM對象，轉換成了jQuery對象，而後才能調用jQuery提供的方法：ready

 

jQuery對象轉換成DOM對象：

// 第一種方式

var btn1 = $btn[0]; // 此時就把jQuery對象$btn轉換成了DOM對象btn1 （推薦使用此方式）

// 第二種方式

var btn2 = $btn.get(0);// 此時就把jQuery對象$btn轉換成了DOM對象btn2

1.1.2jQuery 入口的三種方法

第一種：

$(function(){

});

注意：jQuery中的函數不能之間調用，只能經過綁定事件調用

第二種：

$(document).ready(function(){

});

注意：jQuery中的函數不能之間調用，只能經過綁定事件調用

第三種： 其實是$的別名(和第一種相似)

jQuery(function(){

});

1.1.3 jQuery入口函數與js入口函數的區別（理解）

js入口函數指的是：window.onload = function() {};

 

區別一：書寫個數不一樣

Js入口函數只能出現一次，出現屢次會存在事件覆蓋的問題。

jQuery的入口函數，能夠出現任意屢次，並不會存在事件覆蓋問題。

區別二：執行時機不一樣

Js入口函數是在全部的文件資源加載完成後，才執行。這些文件資源包括：頁面文檔、外部的js文件、外部的css文件、圖片等。

jQuery的入口函數，是在文檔加載完成後，就執行。文檔加載完成指的是：DOM樹加載完成後，就能夠操做DOM了，不用等到全部的外部資源都加載完成。

 

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

1.1.4 強大的jQuery選擇器（重點）

強大的緣由：jQuery實現了從CSS1到CSS3全部的選擇器以及其餘經常使用的選擇器。

各類選擇器之間能夠相互代替，因此，平時真正用到的只是最經常使用的選擇器。

1.1.5 基本選擇器（重點）

符號(名稱)	說明	用法
#	Id選擇器	$(「#btnShow」).css(「color」, 「red」); 選擇id爲btnShow的一個元素（返回值爲jQuery對象，下同）
.	類選擇器	$(「.liItem」).css(「color」, 「red」); 選擇含有類liItem的全部元素
element	標籤選擇器	$(「li」).css(「color」, 「red」); 選擇標籤名爲li的全部元素

 

1.1.6 層級選擇器（重點）、基本過濾選擇器

符號(名稱)	說明	用法
層級選擇器
空格	後代選擇器	$(「#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的一個元素，index從0開始	$(「li:eq(2)」).css(「color」, 」red」); 選擇li元素中索引號爲2的一個元素
:odd	選擇匹配到的元素中索引號爲奇數的全部元素，index從0開始	$(「li:odd」).css(「color」, 「red」); 選擇li元素中索引號爲奇數的全部元素
:even	選擇匹配到的元素中索引號爲偶數的全部元素，index從0開始	$(「li:odd」).css(「color」, 「red」); 選擇li元素中索引號爲偶數的全部元素

 

 

1.1.7 篩選選擇器（方法）（重點）

符號(名稱)	說明	用法
find(selector)	查找指定元素的全部後代元素（子子孫孫）	$(「#j_wrap」).find(「li」).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個元素，index是索引號，從0開始	$(「li」).eq(2).css(「color」, 「red」); 選擇全部li元素中的第二個