新鄉(xiāng)住房與城鄉(xiāng)建設(shè)廳網(wǎng)站網(wǎng)站推廣營銷
jQuery 入門
Date: January 19, 2023
目標(biāo)：
能夠說出什么是 jQuery
能夠說出 jQuery 的優(yōu)點(diǎn)
能夠簡單使用 jQuery
能夠說出 DOM 對(duì)象和 jQuery 對(duì)象的區(qū)別
jQuery 概述
JavaScript 庫
倉庫： 可以把很多東西放到這個(gè)倉庫里面。找東西只需要到倉庫里面查找到就可以了。
JavaScript庫：即 library，是一個(gè)封裝好的特定的集合（方法和函數(shù)）。從封裝一大堆函數(shù)的角度理解庫，就是在這個(gè)庫中，封裝了很多預(yù)先定義好的函數(shù)在里面，比如動(dòng)畫animate、hide、show，比如獲取元素等。
簡單理解： 就是一個(gè)JS 文件，里面對(duì)我們?cè)鷍s代碼進(jìn)行了封裝，存放到里面。這樣我們可以快速高效的使用這些封裝好的功能了。
比如 jQuery，就是為了快速方便的操作DOM，里面基本都是函數(shù)（方法）。
常見的JavaScript 庫
jQuery、Prototype、YUI、Dojo、Ext JS、移動(dòng)端的zepto
這些庫都是對(duì)原生 JavaScript 的封裝，內(nèi)部都是用 JavaScript 實(shí)現(xiàn)的，我們主要學(xué)習(xí)的是 jQuery。
jQuery 的概念
jQuery 是一個(gè)快速、簡潔的 JavaScript 庫，其設(shè)計(jì)的宗旨是“write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。
j 就是 JavaScript； Query 查詢； 意思就是查詢js，把js中的DOM操作做了封裝，我們可以快速的查詢使用里面的功能。
jQuery 封裝了 JavaScript 常用的功能代碼，優(yōu)化了 DOM 操作、事件處理、動(dòng)畫設(shè)計(jì)和 Ajax 交互。
學(xué)習(xí)jQuery本質(zhì)： 就是學(xué)習(xí)調(diào)用這些函數(shù)（方法）。
jQuery 出現(xiàn)的目的是加快前端人員的開發(fā)速度，我們可以非常方便的調(diào)用和使用它，從而提高開發(fā)效率。
優(yōu)點(diǎn)
輕量級(jí)。核心文件才幾十kb，不會(huì)影響頁面加載速度
跨瀏覽器兼容?；炯嫒萘爽F(xiàn)在主流的瀏覽器
鏈?zhǔn)骄幊?、隱式迭代
對(duì)事件、樣式、動(dòng)畫支持，大大簡化了DOM操作
支持插件擴(kuò)展開發(fā)。有著豐富的第三方的插件，例如：樹形菜單、日期控件、輪播圖等
免費(fèi)、開源
jQuery 的基本使用
jQuery 的下載
官網(wǎng)地址： https://jquery.com/
版本：
1x ：兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
2x ：不兼容 IE 678 等低版本瀏覽器， 官網(wǎng)不再更新
3x ：不兼容 IE 678 等低版本瀏覽器， 是官方主要更新維護(hù)的版本
各個(gè)版本的下載：https://code.jquery.com/
jQuery 的使用步驟
-
引入 jQuery 文件
-
使用即可
jQuery 的入口函數(shù)
$(function () { ... // 此處是頁面 DOM 加載完成的入口
}) ;
$(document).ready(function(){ ... // 此處是頁面DOM加載完成的入口
});
- 等著 DOM 結(jié)構(gòu)渲染完畢即可執(zhí)行內(nèi)部代碼，不必等到所有外部資源加載完成，jQuery 幫我們完成了封裝。
- 相當(dāng)于原生 js 中的 DOMContentLoaded。
- 不同于原生 js 中的 load 事件是等頁面文檔、外部的 js 文件、css文件、圖片加載完畢才執(zhí)行內(nèi)部代碼。
- 更推薦使用第一種方式。
-
Code:
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: pink;}</style> </head><body><script>// $('div').hide();// 1. 等著頁面DOM加載完畢再去執(zhí)行js 代碼// $(document).ready(function() {// $('div').hide();// })// 2. 等著頁面DOM加載完畢再去執(zhí)行js 代碼$(function() {$('div').hide();})</script><div></div></body></html>
為什么要等到DOM結(jié)構(gòu)渲染完畢再執(zhí)行內(nèi)部代碼？
jQuery 的頂級(jí)對(duì)象 $
1.$ 是 jQuery 的別稱，在代碼中可以使用 jQuery 代替 $，但一般為了方便，通常都直接使用 $ 。
2.$ 是jQuery 的頂級(jí)對(duì)象， 相當(dāng)于原生JavaScript中的 window。把元素利用$包裝成jQuery對(duì)象，就可以調(diào)用jQuery 的方法。
jQuery 對(duì)象和 DOM 對(duì)象
-
用原生 JS 獲取來的對(duì)象就是 DOM 對(duì)象
-
jQuery 方法獲取的元素就是 jQuery 對(duì)象。
-
jQuery 對(duì)象本質(zhì)是： 利用$對(duì)DOM 對(duì)象包裝后產(chǎn)生的對(duì)象（偽數(shù)組形式存儲(chǔ)）。
注意：
只有 jQuery 對(duì)象才能使用 jQuery 方法，DOM 對(duì)象則使用原生的 JavaScirpt 方法。
DOM 對(duì)象與 jQuery 對(duì)象之間是可以相互轉(zhuǎn)換的。
因?yàn)樵鷍s 比 jQuery 更大，原生的一些屬性和方法 jQuery沒有給我們封裝. 要想使用這些屬性和方法需要把jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象才能使用。
- DOM 對(duì)象轉(zhuǎn)換為 jQuery 對(duì)象： $(DOM對(duì)象)
$('div')
- jQuery 對(duì)象轉(zhuǎn)換為 DOM 對(duì)象（兩種方式）
$('div') [index] index 是索引號(hào)
$('div') .get(index) index 是索引號(hào)
-
Code：jQuery頂級(jí)對(duì)象$
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script><style>div {width: 100px;height: 100px;background-color: pink;}</style> </head><body><div></div><span></span><script>// 1. DOM 對(duì)象： 用原生js獲取過來的對(duì)象就是DOM對(duì)象var myDiv = document.querySelector('div'); // myDiv 是DOM對(duì)象var mySpan = document.querySelector('span'); // mySpan 是DOM對(duì)象console.dir(myDiv);// 2. jQuery對(duì)象： 用jquery方式獲取過來的對(duì)象是jQuery對(duì)象。 本質(zhì)：通過$把DOM元素進(jìn)行了包裝$('div'); // $('div')是一個(gè)jQuery 對(duì)象$('span'); // $('span')是一個(gè)jQuery 對(duì)象console.dir($('div'));// 3. jQuery 對(duì)象只能使用 jQuery 方法，DOM 對(duì)象則使用原生的 JavaScirpt 屬性和方法// myDiv.style.display = 'none';// myDiv.hide(); myDiv是一個(gè)dom對(duì)象不能使用 jquery里面的hide方法// $('div').style.display = 'none'; 這個(gè)$('div')是一個(gè)jQuery對(duì)象不能使用原生js 的屬性和方法</script> </body></html> -
Code：DOM對(duì)象和jQuery對(duì)象相互轉(zhuǎn)換
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="jquery.min.js"></script> </head><body><video src="mov.mp4" muted></video><script>// 1. DOM對(duì)象轉(zhuǎn)換為 jQuery對(duì)象// (1) 我們直接獲取視頻，得到就是jQuery對(duì)象// $('video');// (2) 我們已經(jīng)使用原生js 獲取過來 DOM對(duì)象var myvideo = document.querySelector('video');// $(myvideo).play(); jquery里面沒有play 這個(gè)方法// 2. jQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象// myvideo.play();$('video')[0].play()$('video').get(0).play()</script> </body></html>