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
>
