11.5 jQuery
引入方式：
方式一：本地引入
?
方式二：直接使用CDN
文檔就緒事件：
DOM文檔加載的步驟
1
. 解析HTML結(jié)構(gòu)。
2
. 加載外部腳本和樣式表文件。
3
. 解析并執(zhí)行腳本代碼。
4
. DOM樹構(gòu)建完成。
5
. 加載圖片等外部文件。
6. 頁(yè)面加載完畢
11.51 選擇器
id選擇器：
$(
"#i1"
)
標(biāo)簽選擇器：
$(
"p"
)
class選擇器：
$(
".c1"
)
所有元素選擇器：
$(
"*"
)
交集選擇器：
$(
"div.c1")
//
找到類為c1的div標(biāo)簽
并集選擇器：
$(
"#i1,.c1,p")
//
找到所有id="i1"的標(biāo)簽和class="c1"的標(biāo)簽和p標(biāo)簽
層級(jí)選擇器：
$(
"x y");
//
x的所有后代y（子子孫孫）
$("x>y");
//
x的所有兒子y（兒子）
$("x+y")
//
找到所有緊挨在x后面的兄弟y
$("x~y")
//
x之后所有的兄弟y
屬性選擇器：
$(
"input[type='checkbox']");
//
取到checkbox類型的input標(biāo)簽
$("input[type!='text']");
//
取到類型不是text的input標(biāo)簽
基本篩選器：
:first
//
第一個(gè)
:last
//
最后一個(gè)
:eq(index)
//
索引等于index的那個(gè)元素
:even
//
匹配所有索引值為偶數(shù)的元素，從 0 開始計(jì)數(shù)
:odd
//
匹配所有索引值為奇數(shù)的元素，從 0 開始計(jì)數(shù)
:gt(index)
//
匹配所有大于給定索引值的元素
:lt(index)
//
匹配所有小于給定索引值的元素
:not(選擇器)
//
過(guò)濾掉所有滿足not條件的標(biāo)簽
:has(選擇器)
//
過(guò)濾出所有后代中滿足has條件的父標(biāo)簽
?
//
例如
$("div:has(h1)")
//
找到所有后代中有h1標(biāo)簽的div標(biāo)簽
$("div:has(.c1)")
//
找到所有后代中有c1樣式類的div標(biāo)簽
$("li:not(.c1)")
//
找到所有不包含c1樣式類的li標(biāo)簽
$("li:not(:has(a))")
//
找到所有后代中不含a標(biāo)簽的li標(biāo)簽
11.52 表單常用篩選器
表單常用篩選：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
例：
$(
":checkbox")
//
找到所有的checkbox
表單對(duì)象狀態(tài)屬性篩選:
:enabled
:disabled
:checked
:selected
注意：$(":checked")選擇時(shí)連select中的帶有selected屬性的option標(biāo)簽也會(huì)選上，所以要用$("input:checked")
11.53 篩選器
下一個(gè)兄弟元素：
$(
"#id"
).next()
$(
"#id"
).nextAll()
$(
"#id").nextUntil("#i2")
//
從id="id"的標(biāo)簽開始往下選擇兄弟標(biāo)簽直到id=i2的標(biāo)簽(不包含id=i2的標(biāo)簽)
上一個(gè)兄弟元素：
$(
"#id"
).prev()
$(
"#id"
).prevAll()
$(
"#id").prevUntil("#i2")
//
從id="id"的標(biāo)簽開始往上選擇兄弟標(biāo)簽直到id=i2的標(biāo)簽(不包含id=i2的標(biāo)簽)
父親元素：
$(
"#id"
).parent()
$(
"#id").parents()
//
查找當(dāng)前元素的所有的父輩元素
$("#id").parentsUntil("某個(gè)父元素")
//
查找當(dāng)前元素的所有的父輩元素，直到遇到匹配的那個(gè)元素為止。
兒子和兄弟元素：
$(
"#id").children();
//
所有子標(biāo)簽
$("#id").siblings();
//
兄弟標(biāo)簽、
查找
$(
"div").find("p") <==> $("div p"
)
//
搜索所有與指定表達(dá)式匹配的元素,這個(gè)函數(shù)是找出正在處理的元素的后代元素的好方法。
篩選
$(
"div").filter(".c1") <==> $("div.c1")
//
從結(jié)果集中過(guò)濾出有c1樣式類的
//
篩選出與指定表達(dá)式匹配的元素集合,這個(gè)方法用于縮小匹配的范圍,用逗號(hào)分隔多個(gè)表達(dá)式。
.first()
//
獲取匹配的第一個(gè)元素
.last()
//
獲取匹配的最后一個(gè)元素
.not()
//
從匹配元素的集合中刪除與指定表達(dá)式匹配的元素
.has()
//
保留包含特定后代的父元素，去掉那些不含有指定后代的元素。
.eq()
//
索引值等于指定值的元素
11.54 標(biāo)簽操作之樣式操作
11.541 通過(guò)類屬性操作樣式
addClass();
//
添加指定的CSS類名。
removeClass();
//
移除指定的CSS類名。
hasClass();
//
判斷樣式存不存在
toggleClass();
//
切換CSS類名，如果有就移除，如果沒有就添加。
11.542 直接操作CSS樣式
css("color","red")
//
DOM操作：Elem.style.color="red"
$("p").css("color", "red");
//
將所有p標(biāo)簽的字體設(shè)置為紅色
$("#p1").css({"border":"1px solid black","color":"red"});
//
同時(shí)設(shè)置多個(gè)css樣式
11.543 jQuery版模態(tài)框
<
head
>
<
style
>
.cover
{
position
:
fixed
;
top
:
0
;
right
:
0
;
bottom
:
0
;
left
:
0
;
background-color
:
rgba(0,0,0,0.4)
;
z-index
:
999
;
}
.modal
{
background-color
:
white
;
height
:
300px
;
width
:
500px
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
z-index
:
1000
;
margin-top
:
-150px
;
margin-left
:
-250px
;
}
.hide
{
display
:
none
;
//不占空間，也不顯示
}
style
>
head
>
<
body
>
<
div
>
<
h1
>
海燕
h1
>
<
p
>
在蒼茫的大海上，狂風(fēng)卷積著烏云，在烏云和大海之間，海燕像黑色的閃電，在高傲的飛翔。
p
>
div
>
<
button
id
="b1"
>
點(diǎn)我登錄
button
>
<
div
class
="cover hide"
>
div
>
<
div
class
="modal hide"
>
<
form
action
=""
>
<
p
>
<
label
>
用戶名
<
input
type
="text"
>
label
>
p
>
<
p
>
<
label
>
密碼
<
input
type
="password"
>
label
>
p
>
<
p
>
<
input
type
="submit"
>
<
input
type
="button"
id
="cancel"
value
="取消"
>
p
>
form
>
div
>
<
script
src
="jquery-3.3.1.min.js"
>
script
>
<
script
>
//
var b1Ele=document.getElementById("b1"); //原生DOM對(duì)象
//
var b1Ele = $("#b1")[0]; //通過(guò)jQuery對(duì)象找到DOM對(duì)象,找到按鈕，給它綁定事件，
//
b1Ele.onclick = function () { //使用的是js對(duì)象
//
$(".cover,.modal").removeClass("hide"); // 事件觸發(fā)后，找到那兩個(gè)div,移除它們的hide樣式類
//
};
?
var
b1Ele
=
$(
"
#b1
"
);
b1Ele.click(
function
() {
$(
"
.cover,.modal
"
).removeClass(
"
hide
"
);
});
?
//
var cancelButton = $("#cancel")[0]; //使用的是DOM對(duì)象
//
cancelButton.onclick = ()=>{
//
$(".cover,.modal").addClass("hide"); // 事件觸發(fā)后，找到那兩個(gè)div,給它們添加hide樣式類
//
};
var
cancelButton
=
$(
"
#cancel
"
);
cancelButton.click(
function
() {
$(
"
.cover,.modal
"
).addClass(
"
hide
"
);
});
script
>
body
>
11.544 位置
offset()
//
獲取匹配元素在當(dāng)前窗口的相對(duì)偏移或設(shè)置元素位置，可設(shè)置
$(".c3").offset({top:284,left:400
})
position()
//
獲取匹配元素相對(duì)父元素的偏移,不可設(shè)置
$(window).scrollTop()
//
獲取匹配元素相對(duì)滾動(dòng)條頂部的偏移，可設(shè)置
$(window).scrollTop(0)
//
獲取當(dāng)前窗口相對(duì)滾動(dòng)條頂部的偏移，并且可設(shè)置
$(window).scrollLeft()
//
獲取匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移，可設(shè)置
.offset()方法允許我們檢索一個(gè)元素相對(duì)于文檔（document）的當(dāng)前位置。.position()的差別在于： .position()是相對(duì)于父級(jí)元素的位移。
11.545 尺寸
height()
//
獲取當(dāng)前標(biāo)簽內(nèi)容高度，并且可設(shè)置高度
width()
//
獲取當(dāng)前標(biāo)簽內(nèi)容寬度，并且可設(shè)置寬度
innerHeight()
//
內(nèi)容+padding
innerWidth()
//
內(nèi)容+padding
outerHeight()
//
內(nèi)容+padding+border
outerWidth()
//
內(nèi)容+padding+border
11.55 標(biāo)簽操作之文本內(nèi)容操作
text()
//
只查看所有標(biāo)簽內(nèi)的文本
text(val)
//
先清空節(jié)點(diǎn)內(nèi)容，再添加文本字符串:('
我是h1
')
注意：值為標(biāo)簽的時(shí)候 不會(huì)被渲染為標(biāo)簽元素 只會(huì)被當(dāng)做值渲染到瀏覽器中
?
html()
//
查看所有子標(biāo)簽，包括文本和子標(biāo)簽
html(val)
//
先清空節(jié)點(diǎn)內(nèi)容，可識(shí)別文本內(nèi)的html標(biāo)簽('
我是h1
')
$('ul').html('
百度一下
'
)
$(
'ul').html(
function
(){
//
可以使用函數(shù)來(lái)設(shè)置所有匹配元素的內(nèi)容
return
'哈哈哈'
})
?
val
//
用途：val()用于操作input、select、textarea的value值
//
示范一：
$(
'input[type=text]').val()
//
查看輸入框內(nèi)的值或添加值
$(
'input[type=radio]').val(['male',])
//
查看所選選項(xiàng)或選擇選項(xiàng)，選擇選項(xiàng)時(shí)使用列表
?
//
示范二：
$(
'input[type=checkbox]').val(['basketball','football'])
//
查看所選選項(xiàng)或選擇選項(xiàng)(選擇選項(xiàng)時(shí)使用列表)
11.551 登錄注冊(cè)示例
<
style
>
.error
{
color
:
red
;
}
style
>
<
body
>
<
form
action
=""
method
=""
>
<
p
>
<
label
for
="username"
>
用戶名
label
>
<
input
type
="text"
id
="username"
name
="username"
>
<
span
class
="error"
>
span
>
p
>
<
p
>
<
label
for
="pwd"
>
密碼
label
>
<
input
type
="password"
id
="pwd"
name
="pwd"
>
<
span
class
="error"
>
span
>
p
>
<
p
>
<
input
type
="submit"
id
="b1"
value
="登錄"
>
p
>
form
>
<
script
src
="jquery-3.3.1.min.js"
>
script
>
<
script
>
$(
"
#b1
"
).click(
function
() {
var
flag
=
true
;
$(
"
.error
"
).text(
""
);
var
$username
=
$(
"
#username
"
);
var
$pwd
=
$(
"
#pwd
"
);
if
($username.val().length
===
0
){
//
取input框的值(用戶名)判斷長(zhǎng)度是否為0
$username.next().text(
"
用戶名不能為空！
"
);
//
找到class="error"的span標(biāo)簽添加提示信息
flag
=
false
;
//
用戶名或密碼為空時(shí)不提交表單
}
if
($pwd.val().length
===
0
){
//
取input框的值(密碼)判斷長(zhǎng)度是否為0
$pwd.next().text(
"
密碼不能為空！
"
);
//
找到class="error"的span標(biāo)簽添加提示信息
flag
=
false
;
}
return
flag;
//
表單填寫有誤就會(huì)返回false，阻止submit按鈕默認(rèn)的提交表單事件
})
script
>
body
>
11.56 標(biāo)簽操作之屬性操作
用于id、class、name、value等或自定義屬性：
attr(屬性名)
//
返回第一個(gè)匹配元素的屬性值
$('.box2 img').attr('title','美女')
//
為所有匹配元素設(shè)置一個(gè)屬性值
$('.box2 img').attr({'title': '美女', 'alt':'圖片被狗吃了'})
//
為所有匹配元素設(shè)置多個(gè)屬性值
$('.box2 img').removeAttr('title')
//
從每一個(gè)匹配的元素中刪除一個(gè)屬性
用于checkbox和radio：
$(
':radio[value=male]').prop('checked',
true
);
//
設(shè)置屬性
?
$(
"input :checkbox").prop('value')
//
獲取value屬性的值
$("input :checkbox").prop('checked',
true
);
//
設(shè)置屬性
$(':checkbox[value=football]').prop('checked',
true
);
$(
"table :checkbox").removeProp('value')
//
移除value屬性
注意： 在1.x及2.x版本的jQuery中使用attr對(duì)checkbox進(jìn)行賦值操作時(shí)會(huì)出bug，在3.x版本的jQuery中則沒有這個(gè)問(wèn)題。為了兼容性，我們?cè)谔幚韈heckbox和radio的時(shí)候盡量使用特定的prop()，不要使用attr("checked", "checked")
總結(jié)： 1. 對(duì)于標(biāo)簽上有的能看到的屬性和自定義屬性都用attr 2. 對(duì)于返回布爾值的比如 checkbox 、 radio 和 option 的是否被選中都用prop。
11.561 全選反選取消
<
body
>
<
button
id
="b1"
>
全選
button
>
<
button
id
="b2"
>
取消
button
>
<
button
id
="b3"
>
反選
button
>
<
table
border
="1"
>
<
thead
>
<
tr
>
<
th
>
#
th
>
<
th
>
姓名
th
>
<
th
>
愛好
th
>
tr
>
thead
>
<
tbody
>
<
tr
>
<
td
><
input
type
="checkbox"
>
td
>
<
td
>
Egon
td
>
<
td
>
喊麥
td
>
tr
>
<
tr
>
<
td
><
input
type
="checkbox"
>
td
>
<
td
>
Alex
td
>
<
td
>
吹牛逼
td
>
tr
>
<
tr
>
<
td
><
input
type
="checkbox"
>
td
>
<
td
>
Yuan
td
>
<
td
>
不洗頭
td
>
tr
>
tbody
>
table
>
<
script
src
="jquery-3.3.1.min.js"
>
script
>
<
script
>
//
全選
$(
"
#b1
"
).click(
function
() {
$(
"
table :checkbox
"
).prop(
"
checked
"
,
true
)
//
讓所有的checkbox選中
});
//
取消
$(
"
#b2
"
).click(
function
() {
$(
"
table :checkbox
"
).prop(
"
checked
"
,
false
)
//
讓所有的checkbox取消選中
});
//
反選
$(
"
#b3
"
).click(
function
() {
//
$("table input:not(:checked)").prop("checked", true); // 找到?jīng)]有選中的讓它們選中
//
$("table input:checked").prop("checked", false); // 找到所有選中的讓它們?nèi)∠x中
//
方法1：循環(huán)判斷
var
$checkboxs
=
$(
"
table input:checkbox
"
);
for
(let i
=
0
;i
<
$checkboxs.length;i
++
){
var
$currentCheckbox
=
$($checkboxs[i]);
if
($currentCheckbox.prop(
"
checked
"
)){
//
如果之前是選中的，則取消選擇
$currentCheckbox.prop(
"
checked
"
,
false
);
}
else
{
$currentCheckbox.prop(
"
checked
"
,
true
);
//
如果之前沒有選中，則選擇
}
}
//
方法2：直接取當(dāng)前標(biāo)簽的checked屬性的相反值
for
(let i
=
0
;i
<
$checkboxs.length;i
++
){
var
$currentCheckbox
=
$($checkboxs[i]);
var
flag
=
$currentCheckbox.prop(
"
checked
"
);
$currentCheckbox.prop(
"
checked
"
,
!
flag)
}
//
方法3：
$(
'
td input
'
).each(
function
() {
$(
this
).prop(
'
checked
'
,
!
$(
this
).prop(
'
checked
'
));
}
});
script
>
body
>
11.57 標(biāo)簽操作之文檔處理
//
內(nèi)部
$(A).appendTo(B)
//
把A追加到B內(nèi)部的最后面
$(A).prependTo(B)
//
把A前置到B內(nèi)部的最前面
//
內(nèi)部
$(A).append(B)
//
把B追加到A內(nèi)部的最后
$(A).prepend(B)
//
把B前置到A內(nèi)部的最前面
?
//
外部
$(A).insertAfter(B)
//
把A放到B外部的后面
$(A).insertBefore(B)
//
把A放到B外部的前面
//
外部
$(A).after(B)
//
把B放到A外部的后面
$(A).before(B)
//
把B放到A外部的前面
移除和清空元素:
$('.p1').remove()
//
從DOM中刪除所有匹配的元素(標(biāo)簽和事件)，被刪掉的對(duì)象做返回值，包括刪除自身
?
var
$btn=$('button').detach()
//
刪除標(biāo)簽，保留事件，被刪掉的對(duì)象做返回值
$('ul').append($btn)
//
此時(shí)按鈕能追加到ul中
?
$(
'.p1').empty()
//
清空匹配的元素集合中所有的子節(jié)點(diǎn)，不包括自身
替換:
$('.p1').replaceWith($('.p2'))
//
后面的替換前面的所有.p1標(biāo)簽
$('.p1').replaceAll($('.p2'))
//
前面的替換后面的所有.p2標(biāo)簽
克隆:
.clone(
true
)
//
不加參數(shù)true，克隆標(biāo)簽但不克隆標(biāo)簽帶的事件,加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件
11.571 克隆示例
<
head
>
<
style
>
#b1
{
background-color
:
deeppink
;
padding
:
5px
;
color
:
white
;
margin
:
5px
;
}
#b2
{
background-color
:
dodgerblue
;
padding
:
5px
;
color
:
white
;
margin
:
5px
;
}
style
>
head
>
<
body
>
<
button
id
="b1"
>
屠龍寶刀，點(diǎn)擊就送
button
>
<
button
id
="b2"
>
屠龍寶刀，點(diǎn)擊就送
button
>
<
script
src
="jquery-3.3.1.min.js"
>
script
>
<
script
>
$(
"
#b1
"
).on(
"
click
"
,
function
() {
//
clone方法不加參數(shù)true，克隆標(biāo)簽但不克隆標(biāo)簽帶的事件
$(
this
).clone().insertAfter(
this
);
});
$(
"
#b2
"
).on(
"
click
"
,
function
() {
//
clone方法加參數(shù)true，克隆標(biāo)簽并且克隆標(biāo)簽帶的事件
$(
this
).clone(
true
).insertAfter(
this
);
});
script
>
body
>
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫作最大的動(dòng)力，如果您喜歡我的文章，感覺我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
