jQuery的詳細解析以及用法
jQuery
jQuery是一個js庫,免費開源易用,提供了我們開發中常用到的操作DOM的API,解決了我們使用js操作DOM常遇到的一些問題,強大的選擇器,簡化我們的操作
jQuery的特點:
a. 輕量級b. 富應用c. DOM操作、事件處理、運動動畫、AJAXd. 跨瀏覽器(不再考慮瀏覽器相容)e. 鏈式呼叫f. 隱式迭代g. 豐富的外掛庫 .........
jQuery基本使用
官網下載: https://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