1. 程式人生 > >jQuery的詳細解析以及用法

jQuery的詳細解析以及用法

jQuery

jQuery是一個js庫,免費開源易用,提供了我們開發中常用到的操作DOM的API,解決了我們使用js操作DOM常遇到的一些問題,強大的選擇器,簡化我們的操作

jQuery的特點:

a. 輕量級b. 富應用c. DOM操作、事件處理、運動動畫、AJAXd. 跨瀏覽器(不再考慮瀏覽器相容)e. 鏈式呼叫f. 隱式迭代g. 豐富的外掛庫 .........

jQuery基本使用

官網下載: code.jquery.com/主版本號3是不相容ie9之前的瀏覽器主版本號1是相容所有瀏覽器

引入jQuery

路徑引入
<script src='檔案路徑'></script>
引入線上資源
<script src = "https://code.jquery.com/jquery-1.12.4.js"></script>

入口函式

$(document).ready(function(){
    //類似於原生js的window.onload
});

簡寫

$(function(){   });

和window.onload的區別

區別一:書寫個數不同

Js入口函式只能出現一次,出現多次會存在事件覆蓋的問題。
jQuery的入口函式,可以出現任意多次,並不會存在事件覆蓋問題。

區別二:執行時機不同

Js入口函式是在所有的檔案資源載入完成後,才執行。這些檔案資源包括:頁面文件、外部的js檔案、外部的css檔案、圖片等。
jQuery的入口函式,是在文件載入完成後,就執行。文件載入完成指的是:DOM樹載入完成後,就可以操作DOM了,不用等到所有的外部資源都載入完成。

DOM物件和jQuery物件

jQuery物件:

jQuery選擇器拿到DOM物件後又對其做了封裝,讓其具有了jQuery方法的jQuery物件,說白了,就是把DOM物件重新包裝了一下。

jQuery物件轉換為DOM物件

第一種方式

var btn1 = $btn[0]; 

// 此時就把jQuery物件$btn轉換成了DOM物件btn1 (推薦使用此方式)第二種方式

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

DOM物件轉換為jQuery

使用$(domObject)包裹就可以包裝成一個jQuery物件

jQuery選擇器

jQuery選擇器是jQuery強大的體現,它提供了一組方法,讓我們更加方便的獲取到頁面中的元素。語法和css的選擇符保持一致。

基本選擇器

"#"

Id選擇器

--示例$(“#btnShow”).css(“color”, “red”);選擇id為btnShow的一個元素(返回值為jQuery物件)

"."

類選擇器

--示例$(“.liItem”).css(“color”, “red”);選擇含有類liItem的所有元素

"element"

標籤選擇器

--示例$(“li”).css(“color”, “red”);選擇標籤名為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的一個元素,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元素中索引號為偶數的所有元素

篩選(方法)

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元素中的第二個

優化jQuery的程式碼效能

01 jQuery中效能最快的選擇器是ID選擇器 ($('#someid')). 這是因為它直接對映為JavaScript的getElementById()方法。 選擇單個元素

02 類選擇器前面限定標籤名

03 快取jQuery物件,jQuery有隱式迭代機制,儲存為jQuery物件後在操作可以減少重複選擇

04 利用事件委派處理事件

05 減少直接操作新增多個DOM元素,使用字串拼接,新增給父元素效率會更高。

來源:千鋒HTML5