一萌抵、認識jQuery
jQuery就是一個JavaScript函數(shù)庫內部包含了大量的封裝好的兼砖、可以直接調用的
JS函數(shù)
官方網(wǎng)站：
網(wǎng)址：
https://www.jquery.com
下載歷史版本：下載頁面中下拉頁面到最底部，可以看到這個鏈接記錄
image.png
下載對應的版本文件
image.png
二、頁面加載事件
JavaScript中提供了一個window.onload等待頁面DOM元素和靜態(tài)資源加載完成后再去執(zhí)行事件中的代碼，保障代碼執(zhí)行時可以訪問頁面中的所有數(shù)據(jù)jQuery中提供了一個document.ready()等待頁面DOM元素加載完成后執(zhí)行回調函數(shù)內部的代碼，保障代碼執(zhí)行時可以訪問頁面中的所有DOM元素
// 完整語法悯周，編寫過程過于繁瑣
$(document).ready(function() {
// 等待頁面DOM加載完成后執(zhí)行的代碼
})
// jQuery進行了頁面加載方式簡化
// jQuery提供了/封裝了一個jQuery()函數(shù)
jQuery(function() {
// 等待頁面加載后執(zhí)行的代碼
})
// 【推薦的最終語法】
// jQuery再次進行封裝，將jQuery()封裝成了$()
// jQuery = $
$(function() {
// 等待頁面DOM結構加載完成后執(zhí)行代碼
})
三陪竿、標簽選擇器
jQuery提供了一個選擇器語法禽翼，可以快捷的根據(jù)css選擇器選擇頁面中需要的標簽
// 選擇并獲取到的標簽對象：jQuery對象
$("css選擇器")
(1） 認識jQuery對象
// 1、認識jQuery對象
// JS語法族跛，選擇標簽
const _ct = document.querySelector("#container")
// JS選擇器：標簽對象闰挡、DOM對象
console.log('_ct', _ct)
// jQ語法，選擇標簽
const $ct = $("#container")
// JQ選擇器：jQuery對象礁哄，是一個類似數(shù)組的集合
console.log('$ct', $ct)
// JS對象-> jQ對象：JS對象轉換后就可以使用jQuery的函數(shù)
const jqObj = $(_ct)
console.log(jqObj)
// jQ對象-> js對象
const jsObj = $ct.get(0)
console.log(jsObj)
（2） 常見選擇器
官方文檔：https://jquery.cuishifeng.cn/
image.png
<body>
<div id="container">
<h3>琵琶行 <small>白居易</small></h3>
<p class="impt">潯陽江頭夜送客长酗，楓葉荻花秋瑟瑟。</p>
<p>主人下馬客在船桐绒，舉酒欲飲無管弦夺脾。</p>
<p>醉不成歡慘將別，別時茫茫江浸月茉继。</p>
<p>忽聞水上琵琶聲咧叭，主人忘歸客不發(fā)。</p>
<p>尋聲暗問彈者誰烁竭，琵琶聲停欲語遲菲茬。</p>
<p>移船相近邀相見，添酒回燈重開宴派撕。</p>
<p class="impt">千呼萬喚始出來婉弹，猶抱琵琶半遮面。</p>
<p>轉軸撥弦三兩聲终吼，未成曲調先有情镀赌。</p>
<p>弦弦掩抑聲聲思，似訴平生不得志际跪。 </p>
<div>
<p>低眉信手續(xù)續(xù)彈商佛，說盡心中無限事</p>
</div>
<hr>
<button id="btn1">id選擇器</button>
<button id="btn2">class選擇器</button>
<button id="btn3">標簽選擇器</button>
<button id="btn4">包含選擇器</button>
<button id="btn5">子類選擇器</button>
<button id="btn6">偽類選擇器</button>
</div>
<script src="./js/jquery-2.2.4.js"></script>
<script>
$("#btn1").click(function () {
// id選擇器
const $ct = $("#container")
$ct.css("border", "solid 1px red")
})
$("#btn2").click(function () {
// class選擇器
const $ps = $(".impt")
$ps.css("background-color", "pink")
})
$("#btn3").click(function () {
// 標簽選擇器
const $p = $("p")
$p.css("border-bottom", "orangered 2px solid")
})
$("#btn4").click(function () {
// 包含選擇器
const $ps = $("#container p")
$ps.css("border-bottom", "pink 5px solid")
})
$("#btn5").click(function () {
// 子類選擇器
const $ps = $("#container > p")
$ps.css("border-bottom", "green solid 2px")
})
$("#btn6").click(function () {
// 偽類選擇器
const $p = $("#container > p:nth-of-type(1)")
$p.css("border-bottom", "solid 2px red")
})
// 其他選擇器蛙粘，請移步官方文檔...
</script>
</body>
四、jQuery動畫
jQuery針對網(wǎng)頁中的常見的動畫效果進行了封裝
- 動畫：進入動畫威彰、離開動畫、切換(顯示/隱藏)動畫
-
toggle()：顯示/隱藏直接切換 -
hide()：隱藏 -
show()：顯示 -
fadeIn()：透明度顯示 -
fadeOut()：透明度隱藏 -
fadeToggle()：透明度顯示/隱藏切換 -
fadeTo(0~1)：透明度切換到某個值 -
slideDown()：卷簾動畫顯示 -
slideUp()：卷簾動畫隱藏 -
slideToggle()：卷簾動畫顯示/隱藏 - ...
-
animate()：自定義動畫
五穴肘、事件操作
jQuery中提供了事件的綁定方式歇盼，也提供了事件拓展功能（阻止冒泡、阻止默認行為）
① 快捷綁定
一般情況下评抚，我們給網(wǎng)頁中已經存在的元素進行事件綁定豹缀，使用快捷綁定函數(shù)；通過回調函數(shù)的方式給標簽綁定事件
/ 當用戶點擊了id="box"的標簽時慨代，執(zhí)行傳遞給click()處理單擊事件的回調函數(shù)
$("#box").click(回調函數(shù))
// $("#box") 選擇器邢笙，選擇了頁面中id="box"的標簽
// click() 處理單擊事件的函數(shù)，jQuery是JS函數(shù)庫侍匙，所有的操作都是函數(shù)式開發(fā)
// click(回調函數(shù)) 當單擊事件發(fā)生了之后氮惯，調用回調函數(shù)
$("#box").click(function() {
// 處理單擊事件發(fā)生后的操作
})
② 常用綁定函數(shù)
-
bind()：給指定的元素綁定事件，3.0版本廢棄-
unbind()：給指定的元素取消綁定的事件
-
-
live()：給指定的元素綁定事件想暗，支持事件委托妇汗；1.7版本廢棄-
die()：給指定的元素取消綁定的事件
-
-
delegate()：給指定的元素綁定事件，支持事件委托说莫；3.0版本廢棄-
undelegate()給指定的元素取消綁定的事件
-
-
on()：給指定的元素添加綁定事件杨箭，支持事件委托（特殊語法）【推薦】-
off()給指定的元素取消綁定的事件
③ 標準規(guī)范綁定
規(guī)范1：建議頁面已有元素的綁定，使用快捷方式储狭；未來元素的綁定使用on()函數(shù)進行事件委托綁定
規(guī)范2：建議頁面中不論是存在的或者未來元素互婿，統(tǒng)一使用on()進行綁定【推薦】，便于提高代碼可讀性辽狈、便于后期的的項目維護
④ 事件拓展
事件執(zhí)行過程中慈参，需要處理事件冒泡和默認行為的問題，jQuery中如何處理稻艰？
-
遵循
JavaScript中處理方式懂牧！對原生JS的處理進行了擴展
阻止冒泡：
event.stopPropagation()阻止默認行為：
event.preventDefault()
六、BOM/DOM
（1） BOM
BOM操作尊勿，依然使用原生JavaScript中的內建對象進行操作
windowlocationhistorynavigatorscreendocument
jQuery中可以將DOM對象轉還成jQuery對象進行操作
console.log(window, "BOM對象")
console.log($(window), "jQuery對象,支持使用jQuery提供的功能函數(shù)")
（2） DOM
DOM操作都是對網(wǎng)頁文檔中標簽對象的增刪改查
① 查詢DOM節(jié)點
| 語法 | 描述 |
|---|---|
$(css選擇器) |
jQuery選擇器 |
② 新增DOM節(jié)點
| 語法 | 描述 |
|---|---|
$("<標簽名稱>") |
創(chuàng)建一個節(jié)點<br />如：$("<div>")
|
$box.append($new) |
將$new節(jié)點僧凤，追加到$box的子節(jié)點的末尾[記] |
$new.appendTo($box) |
將$new節(jié)點，追加到$box的子節(jié)點的末尾 |
$box.prepend($new) |
將$new節(jié)點元扔，插入到$box的第一個子節(jié)點位置[記] |
$new.prependTo($box) |
將$new節(jié)點躯保，插入到$box的第一個子節(jié)點位置 |
$ex1.after($ex2) |
將$ex2添加到$ex1的后面（同級/兄弟節(jié)點）[記] |
$ex1.before($ex2) |
將$ex2添加到$ex1的前面[記] |
$ex2.insertAfter($ex1) |
將$ex2添加到$ex1的后面（同級/兄弟節(jié)點） |
$ex2.insertBefore($ex1) |
將$ex2添加到$ex1的前面 |
③ 查詢節(jié)點
| 語法 | 描述 |
|---|---|
$ps.eq(index) |
獲取索引位置的jQuery對象 |
$ps.get(index) |
獲取索引位置的JS對象 |
$ps.first() |
獲取第一個匹配的jQuery對象
|
$ps.last() |
獲取最后一個匹配的jQuery對象 |
$ps.children() |
獲取子節(jié)點 |
$ps.parents() |
獲取所有父節(jié)點 |
$ps.parent() |
獲取唯一的直接父節(jié)點 |
$ps.next() |
獲取下一個兄弟節(jié)點 |
$ps.nextAll() |
獲取后面所有兄弟節(jié)點 |
$ps.prev() |
獲取上一個兄弟節(jié)點 |
$ps.prevAll(0) |
獲取前面所有的兄弟節(jié)點 |
④ 刪除節(jié)點
| 語法 | 描述 |
|---|---|
$box.remove() |
刪除當前節(jié)點 |
$box.empty() |
刪除$box中所有的子節(jié)點 |
（3） DOM 屬性
| 語法 | 描述 |
|---|---|
$box.attr(name, value) |
給名稱為name的屬性設置value值[記] |
$box.attr(name) |
獲取名稱為name的屬性值[記] |
$box.removeAttr(name) |
刪除名稱為name的屬性值[記] |
$box.prop(name, value) |
給名稱為name的屬性設置value值 |
$box.prop(name) |
獲取名稱為name的屬性值 |
$box.removeAttr(name) |
刪除名稱為name的屬性值 |
（4） DOM樣式
| 語法 | 描述 |
|---|---|
$box.css(key, value) |
給名稱為key的樣式設置value值 |
$box.css({k1:v1, k2:v2...}) |
給$box同時設置多個樣式 |
$box.css(key) |
獲取$box中名稱為key的樣式 |
（5） DOM內容
| 語法 | 描述 |
|---|---|
$box.text(內容) |
設置文本內容 |
$box.text() |
獲取文本內容 |
$box.html(內容) |
設置富文本內容 |
$box.html() |
獲取父文本內容 |
（6） class樣式處理
| 語法 | 描述 |
|---|---|
$box.addClass(cname) |
給$box添加一個類名稱 |
$box.removeClass(cname) |
刪除$box上的一個類名稱 |
$box.toggleClass(cname) |
TODO |
