一、JQuery簡(jiǎn)介?
1.什么是JQuery？
JavaScript+查詢（Query），是由javascript編寫的js庫(kù)，為編寫javascript提供了更高效便捷的接口
2.JQuery特點(diǎn)
- jQuery是一個(gè)輕量級(jí)的javascript框架，核心理念是WRITE LESS,DO MORE。
- jQuery應(yīng)用廣泛，在世界前10000個(gè)訪問(wèn)最多的網(wǎng)站中有55%在使用jQuery。
- jQuery是免費(fèi)、開(kāi)源的，文檔豐富。
- 眾多第三方的js庫(kù)都采用jQuery輔助編寫，如jquery-mobile、easyUI、jqueryUI等等。
3.JQuery作用功能
JQuery的功能作用與JavaScript一致，都是對(duì)dom元素節(jié)點(diǎn)進(jìn)行操作
- HTML 元素選?。禾峁┝嗽谖臋n上查找dom元素的方式。
- HTML 元素操作：提供了對(duì)dom元素的操作增刪改功能。
- CSS 操作 ：提供了對(duì)dom元素樣式的修改功能。
- HTML 事件函數(shù) ：擴(kuò)展了javascript事件，并實(shí)現(xiàn)了兼容。
- JavaScript 特效和動(dòng)畫 。
- AJAX ：簡(jiǎn)化了javascript對(duì)于ajax的調(diào)用。
- Utilities ：提供了若干工具函數(shù)。
二、JQuery版本下載和引入方式
1.版本
jQuery的版本：目前jQuery已經(jīng)升級(jí)到3.5.1版本，下載時(shí)盡量不下載最新版本，最新版本都會(huì)不穩(wěn)定
2.下載地址
http://jquery.com/download/
3.下載文件說(shuō)明
- jquery-1.9.1.js：jquery代碼開(kāi)發(fā)庫(kù)，可供閱讀，也可以通過(guò)斷點(diǎn)調(diào)試程序。
- jquery-1.9.1.minjs：jquery代碼迷你庫(kù)，但已經(jīng)刪除掉所有縮進(jìn)格式。(參見(jiàn)js目錄，已經(jīng)下載)
注意：一般建議在開(kāi)發(fā)階段使用jQuery.js,上線后修改為min文件，從而減少客戶端下載量
4.jquery引入方式
首先下載jquery.js文件到本地
-
創(chuàng)建script標(biāo)簽進(jìn)行內(nèi)聯(lián)式引入
<script src="./js/jquery-3.5.1.js"></script>
三、JQuery語(yǔ)法和文檔加載完成事件
1.語(yǔ)法 $(selector).action();
$： jQuery的核心函數(shù),也可編寫成jQuery
selector：jQuery的查找網(wǎng)頁(yè)元素的表達(dá)式,返回jQuery封裝的DOM對(duì)象
action：jQuery的內(nèi)置函數(shù)
-
例
$("#username").val; //獲取id為username的value值
2.文檔加載完成事件
在編寫JavaScript代碼，執(zhí)行某些操作的時(shí)候，需要當(dāng)文檔完全加載完成之后再去執(zhí)行，否則可能出現(xiàn)意向不到的情況。
-
dom下文檔加載完成事件
window.onload = function() { ... //要執(zhí)行的js代碼 } -
jquery文檔加載事件
$(document).ready(function(){ ... //要執(zhí)行的jquery代碼 }); //簡(jiǎn)寫方式 $(function(){ ... //要執(zhí)行的jquery代碼 });
三、JQuery對(duì)象和DOM對(duì)象
1.獲取元素的方式可以用JQuery和document對(duì)象來(lái)獲取，但是獲取到的對(duì)象是兩個(gè)完全不同的對(duì)象，JQuery獲取到的是JQuery對(duì)象，document獲取到的是DOM對(duì)象，兩個(gè)對(duì)象的獲取元素，設(shè)置元素屬性，設(shè)置事件的方法都有區(qū)別。
-
例
const pEle = document.getElementById("#id名")； //dom對(duì)象 $("#id名")； //jquery對(duì)象
2.Jquery對(duì)象與DOM對(duì)象的關(guān)系
jQuery 對(duì)象：就是通過(guò)jQuery封裝的DOM對(duì)象，兼容性更強(qiáng)。
- jQuery對(duì)象中封裝了dom對(duì)象
- jQuery對(duì)象擴(kuò)展了dom對(duì)象的屬性及方法
3.Jquery對(duì)象和DOM對(duì)象的轉(zhuǎn)換
$(function(){
//jquery對(duì)象轉(zhuǎn)換成dom對(duì)象
const jqObj = $(".p1");
jqObj.html("這是jquery對(duì)象");
const jqObjToDom = jqObj[0]; //方法一：將jquery對(duì)象轉(zhuǎn)換成dom對(duì)象
const jqObjToDom = jqObj.get[0]; //方法二：將jquery對(duì)象轉(zhuǎn)換成dom對(duì)象
//dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
const domObj = document.querySelector(".p2");
domObj.innerHTML = "這是dom對(duì)象"；
const domObjToDom = $(domObj); //將dom對(duì)象轉(zhuǎn)換成jquery對(duì)象
})
四、jQuery選擇器
1.基本選擇器
- id選擇器 $("#id").action()
- 類選擇器 $(".class").action()
- 元素選擇器 $("元素").action()
2.高級(jí)選擇器
- 層次選擇器 $("ul li").action()
- 偽類選擇器 $("ul li:first-child").action();
- 屬性選擇器 $("ul[name = "uEel"]").action;
五、操作節(jié)點(diǎn)元素
1.增刪改
(1)創(chuàng)建元素
//通過(guò)$符號(hào)創(chuàng)建的元素為jquery對(duì)象
var image = $('<img src="1.png" alt="圖片" style="width: 100px;"/>');
//插入body下
$(document.body).append(image);
(2)插入元素，將jQuery的dom對(duì)象插入到指定位置上
插入元素常用API
(3)刪除DOM元素
刪除元素常用API
(4)修改DOM元素
修改元素常用API
2.操作樣式及屬性
(1)屬性操作，獲取或設(shè)定DOM元素屬性值
常用API
注意：prop與attr的區(qū)別，prop可以訪問(wèn)元素自定義屬性，attr無(wú)法訪問(wèn)（例如，操作input元素的checked的值用porp）
(2)樣式操作，修改目標(biāo)元素所使用的樣式類
常用API
-
例如
//獲取樣式取值 $('#div').css("font-size") //設(shè)定一個(gè)樣式 $('#div').css('color','red'); //批量設(shè)定樣式 $('#div').css({color:'red','background-color':'yellow'});
3.html設(shè)置，用于設(shè)置元素內(nèi)部的html代碼或字符
- obj.html():讀取和設(shè)置某個(gè)元素中的HTML 內(nèi)容，與dom中的innerHTML一致
- obj.text():讀取和設(shè)置某個(gè)元素中的文本內(nèi)容，與dom中的innerText一致
-
obj.val();讀取和設(shè)置input元素中的value值，與dom中的value一致
六、顯示和隱藏特效
1.基本的隱藏和顯示
常用API
2.淡入淡出
常用API
3.滑動(dòng)的隱藏和顯示
常用API
七、事件
1.事件的語(yǔ)法
$("#submit").click(function(){
...
});
2.事件的綁定和解綁
-
on：在選定的元素上綁定一個(gè)或多個(gè)事件處理函數(shù)
$("#submit").on("click",function(){ ... }); -
off：移除一個(gè)事件處理函數(shù)
$("#submit").off("click",function(){ ... });
3.jQuery事件對(duì)象API介紹
事件對(duì)象API
八、工具函數(shù)
1.obj.each（）：遍歷jQuery的對(duì)象中的dom對(duì)象
示例
2.$.serializeArray（）：表單數(shù)據(jù)轉(zhuǎn)換成以表單元素name為key值，實(shí)際填寫值為value的數(shù)組
示例
3.$.param(data)：將目標(biāo)數(shù)據(jù)轉(zhuǎn)換為加密字符，用于get請(qǐng)求的數(shù)據(jù)提交
示例
