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