今日内容概要
今天要把jQuery全部结束
jQuery操作标签
jQuery绑定事件
jQuery补充知识点
jQuery动画效果(了解)
今日内容详细
jQuery练习题（具体的html内容看练习题内容里面）：
练习题：
找到本页面中id是i1的标签
找到本页面中所有的h2标签
找到本页面中所有的input标签
找到本页面所有样式类中有c1的标签
找到本页面所有样式类中有btn-default的标签
找到本页面所有样式类中有c1的标签和所有h2标签
找到本页面所有样式类中有c1的标签和id是p3的标签
找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
找到本页面中form标签中的所有input标签
找到本页面中被包裹在label标签内的input标签
找到本页面中紧挨在label标签后面的input标签
找到本页面中id为p2的标签后面所有和它同级的li标签
找到id值为f1的标签内部的第一个input标签
找到id值为my-checkbox的标签内部最后一个input标签
找到id值为my-checkbox的标签内部没有被选中的那个input标签
找到所有含有input标签的label标签
解题：
$('#i1') 1题
r.fn.init [div#i1.container]
$('h2')
r.fn.init [h2, prevObject: r.fn.init(1)]
$('input')
r.fn.init(9) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
$('.c1')
r.fn.init(2) [h1.c1, h1.c1, prevObject: r.fn.init(1)]
$('.btn-default')
r.fn.init [button#btnSubmit.btn.btn-default, prevObject: r.fn.init(1)]
$('.c1,h2')
r.fn.init(3) [h1.c1, h1.c1, h2, prevObject: r.fn.init(1)]
$('.c1,#p3')
r.fn.init(3) [h1.c1, h1.c1, p#p3.divider, prevObject: r.fn.init(1)]
$('.c1,.btn')
r.fn.init(11) [h1.c1, h1.c1, a.btn.btn-primary.btn-lg, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button.btn.btn-warning, button.btn.btn-danger, button#btnSubmit.btn.btn-default, a.btn.btn-success, prevObject: r.fn.init(1)]
$('form').find('input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
$('label input')
r.fn.init(6) [input, input, input, input, input#optionsRadios1, input#optionsRadios2, prevObject: r.fn.init(1)]
$('label+input')
r.fn.init(3) [input#exampleInputEmail1.form-control, input#exampleInputPassword1.form-control, input#exampleInputFile, prevObject: r.fn.init(1)]
$('#p2~li')
r.fn.init(8) [li, li, li, li, li, li, li, li, prevObject: r.fn.init(1)]
$('#f1 input:first')
r.fn.init [input#exampleInputEmail1.form-control, prevObject: r.fn.init(1)]
$('#my-checkbox input:last')
r.fn.init [input, prevObject: r.fn.init(1)]
$('#my-checkbox input[checked!="checked"]')
r.fn.init(3) [input, input, input, prevObject: r.fn.init(1)]0: input1: input2: inputlength: 3prevObject: r.fn.init [document]__proto__: Object(0)
$('label:has("input")')
r.fn.init(6) [label, label, label, label, label, label, prevObject: r.fn.init(1)]
操作标签
# 操作类
"""
js版本 jQuery版本
classList.add() addClass()
classList.remove() removeClass()
classList.contains() hasClass()
classList.toggle() toggleClass()
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<div class="c1 c2 c3"></div>
</body>
</html>
$('div').hasClass('c1') # 判断是否有某一个类属性，有则返回true，无则false
true
$('div').hasClass('c111')
false
$('div').removeClass('c1') # 删除属性
[div.c2.c3, prevObject: S.fn.init(1)]
$('div').addClass('c1') # 添加某个属性
[div.c2.c3.c1, prevObject: S.fn.init(1)]
$('div').toggleClass('c1')
[div.c2.c3, prevObject: S.fn.init(1)]
"""
# css操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<p>111</p>
<p>222</p>
</body>
</html>
需求："""一行代码将第一个p标签变成红色第二个p标签变成绿色"""
$('p').first().css('color','red').next().css('color','green')
# 这里$('p').first()拿到第一个p，控制第一个颜色为红色，然后写next()就是控制下一个的颜色用绿色（如果有第三个p就继续next）
链式操作
# jQuery的链式操作 使用jQuery可以做到一行代码操作很多标签
# jQuery对象调用jQuery方法之后返回的还是当前jQuery对象 也就可以继续调用其他方法
jQuery链式操作的本质：
class MyClass(object):
def func1(self):
print('func1')
return self # 调了一个对象之后又把对象返回来，就可以继续调用下一个方法了
def func2(self):
print('func2')
return self
obj = MyClass()
obj.func1().func2()
# 位置操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
<style>
body {
margin: 0;
}
p {
position: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<p>ppp</p>
</body>
</html>
offset() # 相对于浏览器窗口
position() # 相对于父标签
$('p').offset() # 拿到p标签定位的值（获取当前标签距离当前窗口的相对位移）
{top: 116, left: 100}
$('p').position() # 元素相对于父标签的偏移量，没有父标签那父标签就是body
{top: 100, left: 100}
scrollTop() # 需要掌握
$(window).scrollTop() # 用来获取右侧的滚动条距离顶部的距离（上下滚动，得到的数值就会变）
0
$(window).scrollTop()
969
$(window).scrollTop() # 括号内不加参数就是获取
1733
$(window).scrollTop(0) # 加了参数就是设值
n.fn.init [Window]
$(window).scrollTop(500)
n.fn.init [Window]
scrollLeft() 方法设置或返回被选元素的水平滚动条位置。
# 尺寸
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
<style>
p {
margin: 1px 2px 3px 4px;
padding: 4px 3px 2px 1px;
}
</style>
</head>
<body>
<p>111</p>
</body>
</html>
$('p').height() # 文本的高度
20
$('p').width() # 文本的宽度
1670
$('p').innerHeight() # 文本+上下padding的和
26
$('p').innerWidth() # 文本+左右padding的和
1674
$('p').outerHeight() # 文本+上下padding+border（案例中border边框没有设值）
26
$('p').outerWidth() # 文本+上下padding+border
1674
# 文本操作
<body>
<div>
<p>
有些话听听就过去了，大家都是成年人。
</p>
</div>
</body>
"""
操作标签内部文本
原生js： jQuery：
innerText text()
innerHTML html()
$('div').text() # 拿到div内部的文本（括号内不加参数就是获取，加了就是设值）
"
有些话听听就过去了，不要在意，都是成年人!
"
$('div').html() # 拿到div内部的文本加标签
"
<p>
有些话听听就过去了，不要在意，都是成年人!
</p>
"
$('div').text('你们都是我的大宝贝') # 设置文本内容
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('你个臭妹妹') # 也可以设置文本内容，但是两个有区别
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').text('<h1>你们都是我的大宝贝</h1>') # 不能识别标签
w.fn.init [div, prevObject: w.fn.init(1)]
$('div').html('<h1>你个臭妹妹</h1>') # 可以设置标签
w.fn.init [div, prevObject: w.fn.init(1)]
"""
# 获取值操作
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="file" id="d2">
</body>
"""
js jQuery
.value .val()
"""
$('#d1').val() # 获取标签内部的文本值
"sasdasdsadsadad"
$('#d1').val('520快乐') # 括号内不加参数就是获取，加了参数就是设值
w.fn.init [input#d1]
$('#d2').val() # 想拿文件对象，但是只用val是拿不到的
"C:\fakepath\01_测试路由.png"
$('#d2')[0].files[0] # 牢记两个对象之间的转换（$('#d2')[0]取索引0就有jQuery对象变成了原生的js对象；然后files[0]拿到文件数据）
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="file" id="d2">
<input type="checkbox" name="hobby" value="111">111
<input type="checkbox" name="hobby" value="222">222
<input type="checkbox" name="hobby" value="333">333
</body>
$(':checkbox')
(3) [input, input, input, prevObject: S.fn.init(1)]
$(':checkbox').val()
"111"
$(':checkbox').val(666)
(3) [input, input, input, prevObject: S.fn.init(1)]
属性操作：
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<p id="d1" username="jason"></p>
</body>
"""
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
在用变量存储对象的时候 js中推荐使用
XXXEle 标签对象
jQuery中推荐使用
$XXXEle jQuery对象
"""
let $pEle = $('p') # 用变量把p标签存起来
undefined
$pEle.attr('id') # 获取标签属性
"d1"
$pEle.attr('class')
undefined
$pEle.attr('class','c1')
# 一个参数获取，两个参数设值（这句是设置class值为c1）
w.fn.init [p#d1.c1, prevObject: w.fn.init(1)]
$pEle.attr('id','id666') # 也可以做修改
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.attr('password','jason123') # 设置自定义的属性
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
$pEle.removeAttr('password') # 移除
w.fn.init [p#id666.c1, prevObject: w.fn.init(1)]
·····································································································
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="jquery.js"></script>
</head>
<body>
<p id="d1" username="jason"></p>
<input type="checkbox" value="111" name="hobby" id="d2">
<input type="checkbox" value="222" name="hobby" checked id="d3">
<input type="checkbox" value="333" name="hobby" id="d4">
</body>
</html>
"""
对于标签上有的能够看到的属性和自定义属性用attr
对于返回布尔值比如checkbox radio option是否被选中用prop
"""
$('#d3').attr('checked')
"checked"
$('#d2').attr('checked')
undefined
$('#d2').attr('checked')
undefined
$('#d4').attr('checked')
undefined
$('#d3').attr('checked')
"checked"
$('#d3').attr('checked','checked') # 无效
w.fn.init [input#d3]
$('#d2').prop('checked') # prop是专门提供给选择按钮的
false
$('#d2').prop('checked')
true
$('#d3').prop('checked',true) # 可以自动设置值，设置true就是选中了
w.fn.init [input#d3]
$('#d3').prop('checked',false) # 设置false就是取消了
w.fn.init [input#d3]
·····································································································
# 文档处理
"""
js jQuery
createElement('p') $('<p>')
appendChild() append()
"""
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$pEle.appendTo($('#d1'))
$('#d1').prepend($pEle) # 内部头部追加
w.fn.init [div#d1]
$pEle.prependTo($('#d1'))
w.fn.init [p#d1, prevObject: w.fn.init(1)]
$('#d2').after($pEle) # 放在某个标签后面
w.fn.init [p#d2]
$pEle.insertAfter($('#d1'))
$('#d1').before($pEle)
w.fn.init [div#d1]
$pEle.insertBefore($('#d2'))
$('#d1').remove() # 将标签从DOM树中删除
w.fn.init [div#d1]
$('#d1').empty() # 清空标签内部所有的内容
w.fn.init [div#d1]
```
### 事件
```python
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
// 第二种(功能更加强大 还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓 后面还你')
})
```
* 克隆事件
```html
<button id="d1">屠龙宝刀，点击就送</button>
<script>
$('#d1').on('click',function () {
// console.log(this) // this指代是当前被操作的标签对象
// $(this).clone().insertAfter($('body')) // clone默认情况下只克隆html和css 不克隆事件
$(this).clone(true).insertAfter($('body')) // 括号内加true即可克隆事件
})
</script>
```
* 自定义模态框
```python
"""
模态框内部本质就是给标签移除或者添加上hide属性
"""
```
* 左侧菜单
```html
<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
})
</script>
<!--尝试用一行代码搞定上面的操作-->
```
* 返回顶部
```python
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
```
* 自定义登陆校验
```python
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<p>username:
<input type="text" id="username">
<span style="color: red"></span>
</p>
<p>password:
<input type="text" id="password">
<span style="color: red"></span>
</p>
<button id="d1">提交</button>
<script>
let $userName = $('#username')
let $passWord = $('#password')
$('#d1').click(function () {
// 获取用户输入的用户名和密码 做校验
let userName = $userName.val()
let passWord = $passWord.val()
if (!userName){
$userName.next().text("用户名不能为空")
}
if (!passWord){
$passWord.next().text('密码不能为空')
}
})
$('input').focus(function () {
$(this).next().text('')
})
</script>
```
* input实时监控
```python
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
```
* hover事件
```python
<script>
// $("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
// alert(123)
// })
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
```
* 键盘按键按下事件
```html
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
```
# 今日作业
```python
"""
今日作业
必做
1.利用jQuery链式操作一句话完成菜单显隐展示
2.整理日考题目
3.整理今日内容完成博客书写
选做
1.预习前端框架Bootstrap
"""