day 53 JavaScript之jQuery快速入门
1 jQuery初识
1.1 jQuery介绍
1.1.1 jQuery是什么
-
jQuery是一个轻量级的、兼容多浏览器、高效、精简并且功能丰富的 JavaScript 工具库。jQuery极大的简化了JavaScript 编程。
-
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“。让你用更少的代码完成更多的事情
-
jQuery内部封装了原生的js代码(还额外添加了很多的功能)，能够让你通过书写更少的代码，完成js操作 ，类似于python里面的模块，在前端模块不叫模块，叫“类库”。jQuery兼容多个浏览器的，你在使用jQuery的时候就不需要考虑浏览器兼容问题
1.1.2 jQuery的优势
开源，免费
便捷的选择器
方便的DOM操作
方便的动画特效
易用的ajax操作
丰富的插件扩展
解决浏览器兼容性效果
1.1.3 jQuery内容
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点django部分学)
python导入模块发生了哪些事？
导入模块其实需要消耗资源，jQuery在使用的时候也需要导入，但是它的文件非常的小，只有几十KB，基本不影响网
络速度
-------------------------------------------------------------------------
jQuery文件下载：
压缩版本 ：容量更小
未压缩版本
-------------------------------------------------------------------------
注意事项： jQuery在使用之前 一定要确保已经导入了
1.2 针对导入问题
1 本地导入
// 1 文件下载到了本地，如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
2 在线导入。在线导入没有自动补全功能
// 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN：内容分发网络，CDN有免费的也有收费的
前端免费的cdn网站:
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
1.3 jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没
不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0] //jQuery对象转成DOM对象
拿上面那个例子举例，jQuery对象和DOM对象的使用：
$("#i1").html(); //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML; // DOM对象使用DOM的方法
要区分开 jQuery对象和标签对象
// jQuery对象如何变成标签对象
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
---------------------------------------------------------------------------------------
// 标签对象如何转jQuery对象
$(document.getElementById('d1'))
w.fn.init [div#d1]
2 jQuery基础语法
# jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨，jQuery简写：$
jQuery() === $()
-----------------------------------------------------
# jQuery与js代码对比
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
2.1 先学如何查找标签
2.1.1 选择器
通过选择器，可以获取到页面元素。jQuery具有强大的选择器，跟CSS3选择器类似
基本选择器之id选择器
$('#d1')
w.fn.init [div#d1]0: div#d1length: 1__proto__: Object(0)
基本选择器之class选择器
$('.c1')
w.fn.init [p.c1, prevObject: w.fn.init(1)]0: p.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
基本选择器之标签选择器
$('span')
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
组合选择器
$('#d1,.c1,p') # 并列+混用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
配合使用
$('div')
w.fn.init(2) [div#d1, div.c1, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('div.c1') /*这里表示解释：类名是c1的div标签，在后面加的是限制条件*/
w.fn.init [div.c1, prevObject: w.fn.init(1)]0: div.c1length: 1prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('div#d1') /*这里表示解释：ID是d1的div标签*/
w.fn.init [div#d1, prevObject: w.fn.init(1)]
所有元素选择器
$('*')
w.fn.init(19) [html, head, meta, title, meta, link, script, script, body, span, span, div#d1, span, p#d2, span, span, div.c1, span, span, prevObject: w.fn.init(1)]
层级选择器
$('div span') # 后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # 儿子
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # 毗邻
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # 弟弟
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
2.1.2 基本筛选器
语法
:first // 第一个
:last // 最后一个
:eq(index )// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index )// 匹配所有大于给定索引值的元素
:lt(index) // 匹配所有小于给定索引值的元素
:not(元素选择器) // 移除所有满足not条件的标签
:has(元素选择器) // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
示例
点击查看代码
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
---------------------------------------------------------------------------------------
$('ul li')
w.fn.init(10) [li, li, li, li, li, li, li.c1, li, li//d1, li, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('ul li:first') // 大儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:last') // 小儿子
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:eq(2)') // 放索引
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:even') // 偶数索引 0包含在内
w.fn.init(5) [li, li, li, li.c1, li//d1, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li//d1length: 5prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:odd') // 奇数索引
w.fn.init(5) [li, li, li, li, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li4: lilength: 5prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:gt(2)') // 大于索引
w.fn.init(7) [li, li, li, li.c1, li, li//d1, li, prevObject: w.fn.init(1)]0: li1: li2: li3: li.c14: li5: li//d16: lilength: 7prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:lt(2)') // 小于索引
w.fn.init(2) [li, li, prevObject: w.fn.init(1)]0: li1: lilength: 2prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('ul li:not("//d1")') // 移除满足条件的标签
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('div')
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('div:has("p")') // 选取出包含一个或多个标签在内的标签
w.fn.init [div, prevObject: w.fn.init(1)]
2.1.3 属性选择器
[attribute] // 属性
[attribute=value] // 属性等于
[attribute!=value] // 属性不等于
$('[username]')
w.fn.init(3) [input, input, p, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('[username="jason"]')
w.fn.init [input, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('p[username="egon"]')
w.fn.init [p, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('[type]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('[type="text"]')
w.fn.init(2) [input, input, prevObject: w.fn.init(1)]
2.1.4 表单筛选器
选择器
:input // 匹配所有 input, textarea, select 和 button 元素
:text // 匹配所有的单行文本框
:password // 匹配所有密码框
:radio // 匹配所有单选按钮
:checkbox // 匹配所有复选框
:submit // 匹配所有提交按钮，匹配 type="submit" 的input或者button
:image // 匹配所有图像域
:reset // 匹配所有重置按钮
:button // 匹配所有按钮
:file // 匹配所有文件域
表单对象属性:
:enabled 匹配所有可用元素
:disabled 匹配所有不可用元素
:checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)
:selected
例子：
$(":checkbox") // 找到所有的checkbox
$('input[type="text"]')
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('input[type="password"]')
w.fn.init [input, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
有一种简写只适用于表单的方式：
$(':text') // 等价于上面第一个
w.fn.init [input, prevObject: w.fn.init(1)]0: inputlength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$(':password') // 等价于上面第二个
w.fn.init [input, prevObject: w.fn.init(1)]
找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
特殊情况
$(':checked') // 它会将checked和selected都拿到
w.fn.init(2) [input, option, prevObject: w.fn.init(1)]0: input1: optionlength: 2prevObject: w.fn.init [document]__proto__: Object(0)
---------------------------------------------------------------------------------------
$(':selected') // 它不会，只拿selected
w.fn.init [option, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('input:checked') // 自己加一个限制条件
w.fn.init [input, prevObject: w.fn.init(1)]
2.1.5 筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
查找：搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。
$("div").find("p")
// 等价于$("div p")
筛选：筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的
//等价于 $("div.c1")
补充：
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
示例
点击查看代码
$('#d1').next() //同级别下一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span#d1]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('#d1').nextAll()
w.fn.init(5) [span, div#d2, span, span, span.c1, prevObject: w.fn.init(1)]0: span1: div#d22: span3: span4: span.c1length: 5prevObject: w.fn.init [span#d1]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('#d1').nextUntil('.c1') //不包括最后一个
w.fn.init(4) [span, div#d2, span, span, prevObject: w.fn.init(1)]0: span1: div#d22: span3: spanlength: 4prevObject: w.fn.init [span#d1]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('.c1').prev() //上一个
w.fn.init [span, prevObject: w.fn.init(1)]0: spanlength: 1prevObject: w.fn.init [span.c1, prevObject: w.fn.init(1)]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('.c1').prevAll()
w.fn.init(5) [span, span, div#d2, span, span#d1, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('.c1').prevUntil('#d2')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('#d3').parent() //第一级父标签
w.fn.init [p, prevObject: w.fn.init(1)]0: plength: 1prevObject: w.fn.init [span#d3]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('#d3').parent().parent()
w.fn.init [div#d2, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parent().parent().parent()
w.fn.init [body, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parent().parent().parent().parent()
w.fn.init [html, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parent().parent().parent().parent().parent()
w.fn.init [document, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parent().parent().parent().parent().parent().parent()
w.fn.init [prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parents()
w.fn.init(4) [p, div#d2, body, html, prevObject: w.fn.init(1)]
---------------------------------------------------------------------------------------
$('#d3').parentsUntil('body')
w.fn.init(2) [p, div#d2, prevObject: w.fn.init(1)]
$('#d2').children() //儿子
---------------------------------------------------------------------------------------
$('#d2').siblings() //同级别上下所有
---------------------------------------------------------------------------------------
$('div p')
//等价
$('div').find('p') //find从某个区域内筛选出想要的标签
---------------------------------------------------------------------------------------
"""下述两两等价"""
$('div span:first')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').first()
w.fn.init [span, prevObject: w.fn.init(3)]0: spanlength: 1prevObject: w.fn.init(3) [span, span#d3, span, prevObject: w.fn.init(1)]__proto__: Object(0)
---------------------------------------------------------------------------------------
$('div span:last')
w.fn.init [span, prevObject: w.fn.init(1)]
$('div span').last()
w.fn.init [span, prevObject: w.fn.init(3)]
---------------------------------------------------------------------------------------
$('div span:not("#d3")')
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div span').not('#d3')
w.fn.init(2) [span, span, prevObject: w.fn.init(3)]
2.2 操作标签
2.2.1 样式操作
样式类
js版本 jQuery版本
classList.add() addClass(); // 添加指定的CSS类名。
classList.remove() removeClass(); // 移除指定的CSS类名。
classList.contains() hasClass(); // 判断样式存不存在
classList.toggle() toggleClass(); // 切换CSS类名，如果有就移除，如果没有就添加。
CSS
$("p").css("color", "red"); //将所有p标签的字体设置为红色
<p>111</p>
<p>222</p>
$('p').first().css('color','red').next().css('color','green')
// 一行代码就实现将第一个p标签变成红色，第二个p标签变成绿色
// jQuery的链式操作，使用jQuery可以做到一行代码操作很多标签
# python也可以实现链式操作：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()
2.2.2 位置操作
offset() // 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() // 获取匹配元素相对父元素的偏移
scrollTop() // 获取匹配元素相对滚动条顶部的偏移
scrollLeft() // 获取匹配元素相对滚动条左侧的偏移
// offset()方法允许我们检索一个元素相对于文档（document）的当前位置。和 position()的差别在于： position()是相
对于相对于父级元素的位移。
# 位置操作
offset() # 相对于浏览器窗口
position() # 相对于父标签
----------------------------------------
scrollTop() # 需要了解
$(window).scrollTop()
----------------------------------------
$(window).scrollTop()
969
----------------------------------------
$(window).scrollTop() # 括号内不加参数就是获取
1733
----------------------------------------
$(window).scrollTop(0) # 加了参数就是设置
n.fn.init [Window]
----------------------------------------
$(window).scrollTop(500)
返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>位置相关示例之返回顶部</title>
<style>
.c1 {
width: 100px;
height: 200px;
background-color: red;
}
.c2 {
height: 50px;
width: 50px;
position: fixed;
bottom: 15px;
right: 15px;
background-color: #2b669a;
}
.hide {
display: none;
}
.c3 {
height: 100px;
}
</style>
</head>
<body>
<button id="b1" class="btn btn-default">点我</button>
<div class="c1"></div>
<div class="c3">1</div>
<div class="c3">2</div>
<div class="c3">3</div>
<div class="c3">4</div>
<div class="c3">5</div>
<div class="c3">6</div>
<div class="c3">7</div>
<div class="c3">8</div>
<div class="c3">9</div>
<div class="c3">10</div>
<div class="c3">11</div>
<div class="c3">12</div>
<div class="c3">13</div>
<div class="c3">14</div>
<div class="c3">15</div>
<div class="c3">16</div>
<div class="c3">17</div>
<div class="c3">18</div>
<div class="c3">19</div>
<div class="c3">20</div>
<div class="c3">21</div>
<div class="c3">22</div>
<div class="c3">23</div>
<div class="c3">24</div>
<div class="c3">25</div>
<div class="c3">26</div>
<div class="c3">27</div>
<div class="c3">28</div>
<div class="c3">29</div>
<div class="c3">30</div>
<div class="c3">31</div>
<div class="c3">32</div>
<div class="c3">33</div>
<div class="c3">34</div>
<div class="c3">35</div>
<div class="c3">36</div>
<div class="c3">37</div>
<div class="c3">38</div>
<div class="c3">39</div>
<div class="c3">40</div>
<div class="c3">41</div>
<div class="c3">42</div>
<div class="c3">43</div>
<div class="c3">44</div>
<div class="c3">45</div>
<div class="c3">46</div>
<div class="c3">47</div>
<div class="c3">48</div>
<div class="c3">49</div>
<div class="c3">50</div>
<div class="c3">51</div>
<div class="c3">52</div>
<div class="c3">53</div>
<div class="c3">54</div>
<div class="c3">55</div>
<div class="c3">56</div>
<div class="c3">57</div>
<div class="c3">58</div>
<div class="c3">59</div>
<div class="c3">60</div>
<div class="c3">61</div>
<div class="c3">62</div>
<div class="c3">63</div>
<div class="c3">64</div>
<div class="c3">65</div>
<div class="c3">66</div>
<div class="c3">67</div>
<div class="c3">68</div>
<div class="c3">69</div>
<div class="c3">70</div>
<div class="c3">71</div>
<div class="c3">72</div>
<div class="c3">73</div>
<div class="c3">74</div>
<div class="c3">75</div>
<div class="c3">76</div>
<div class="c3">77</div>
<div class="c3">78</div>
<div class="c3">79</div>
<div class="c3">80</div>
<div class="c3">81</div>
<div class="c3">82</div>
<div class="c3">83</div>
<div class="c3">84</div>
<div class="c3">85</div>
<div class="c3">86</div>
<div class="c3">87</div>
<div class="c3">88</div>
<div class="c3">89</div>
<div class="c3">90</div>
<div class="c3">91</div>
<div class="c3">92</div>
<div class="c3">93</div>
<div class="c3">94</div>
<div class="c3">95</div>
<div class="c3">96</div>
<div class="c3">97</div>
<div class="c3">98</div>
<div class="c3">99</div>
<div class="c3">100</div>
<button id="b2" class="btn btn-default c2 hide">返回顶部</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#b1").on("click", function () {
$(".c1").offset({left: 200, top:200});
});
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b2").removeClass("hide");
}else {
$("#b2").addClass("hide");
}
});
$("#b2").on("click", function () {
$(window).scrollTop(0);
})
</script>
</body>
</html>
2.2.3 尺寸操作
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
$('p').height() # 文本
20
----------------------------------------
$('p').width()
1670
----------------------------------------
$('p').innerHeight() # 文本+padding
26
----------------------------------------
$('p').innerWidth()
1674
----------------------------------------
$('p').outerHeight() # 文本+padding+border
26
----------------------------------------
$('p').outerWidth()
1674
2.2.4 文本操作
操作标签内部文本
js jQuery
----------- ------------------
innerText text() 括号内不加参数就是获取，加了就是设置
innerHTML html()
HTML代码：
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值：
text() // 取得所有匹配元素的内容
text(val) // 设置所有匹配元素的内容
示例
// 获取被选中的checkbox或radio的值：
<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">
$("input[name='gender']:checked").val()
-------------------------------------------------------------
$('div').text()
"
有些话听听就过去了，不要在意，都是成年人!
"
-------------------------------------------------------------
$('div').html()
"
<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)]
自定义登录校验示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文本操作之登录验证</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="input-name">用户名</label>
<input type="text" id="input-name" name="name">
<span class="error"></span>
</div>
<div>
<label for="input-password">密码</label>
<input type="password" id="input-password" name="password">
<span class="error"></span>
</div>
<div>
<input type="button" id="btn" value="提交">
</div>
</form>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$("#btn").click(function () {
var username = $("#input-name").val();
var password = $("#input-password").val();
if (username.length === 0) {
$("#input-name").siblings(".error").text("用户名不能为空");
}
if (password.length === 0) {
$("#input-password").siblings(".error").text("密码不能为空");
}
})
</script>
</body>
</html>
2.2.5 获取值操作
val() // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2]) // 设置多选的checkbox、多选select的值
----------------------------------------------------------------------------
js：.value
jQuery：.val()
示例
<input type="checkbox" value="basketball" name="hobby">篮球
<input type="checkbox" value="football" name="hobby">足球
<select multiple id="s1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
// 设置值：
$("[name='hobby']").val(['basketball', 'football']);
$("#s1").val(["1", "2"])
-----------------------------------------------------------------
$('#d1').val()
"sasdasdsadsadad"
$('#d1').val('520快乐') // 括号内不加参数就是获取值，加了参数就是设置
w.fn.init [input#d1]
$('#d2').val()
"C:\fakepath\01_测试路由.png"
// 获取文件
$('#d2')[0].files[0] // 牢记两个对象之间的转换
File {name: "01_测试路由.png", lastModified: 1557043083000, lastModifiedDate: Sun May 05 2019 15:58:03 GMT+0800 (中国标准时间), webkitRelativePath: "", size: 28733, …}
2.2.6 属性操作
用于ID等或自定义属性：
attr(attrName) // 返回第一个匹配元素的属性值
attr(attrName, attrValue) // 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2}) // 为所有匹配元素设置多个属性值
removeAttr() // 从每一个匹配的元素中删除一个属性
属性操作
js中 jQuery
setAttribute() attr(name,value)
getAttribute() attr(name)
removeAttribute() removeAttr(name)
用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
举个例子：
<input type="checkbox" id="i1" value="1">
针对上面的代码，
$("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false
可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。
如果换成下面的代码：
<input type="checkbox" checked id="i1" value="1">
再执行：
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true
这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。
接下来再看一下针对自定义属性，attr和prop又有什么区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性">
执行以下代码：
$("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。
总结一下：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
示例
在用变量存储对象的时候 js中推荐使用
XXXEle 命名标签对象
jQuery中推荐使用
$XXXEle 命名jQuery对象
---------------------------------------------------------------------------------------------------------
let $pEle = $('p')
$pEle.attr('id')
"d1"
-------------------------------------------
$pEle.attr('class')
undefined
-------------------------------------------
$pEle.attr('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)]
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
attr全称attribute(属性)
prop全称property(属性)
-----------------------------------------
$('#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')
false
$('#d2').prop('checked')
true
-----------------------------------------
$('#d3').prop('checked',true)
w.fn.init [input#d3]
$('#d3').prop('checked',false)
w.fn.init [input#d3]
2.2.7 文档操作
文档处理
js jQuery
createElement('p') $('<p>')
appendChild() append()
添加到指定元素内部的后面
$(A).append(B) // 把B追加到A
$(A).appendTo(B) // 把A追加到B
添加到指定元素内部的前面
$(A).prepend(B) // 把B前置到A
$(A).prependTo(B) // 把A前置到B
添加到指定元素外部的后面
$(A).after(B) // 把B放到A的后面
$(A).insertAfter(B) // 把A放到B的后面
添加到指定元素外部的前面
$(A).before(B) // 把B放到A的前面
$(A).insertBefore(B) // 把A放到B的前面
移除和清空元素
remove() // 从DOM中删除所有匹配的元素。
empty() // 删除匹配的元素集合中所有的子节点。
示例
let $pEle = $('<p>')
$pEle.text('你好啊 草莓要不要来几个?')
----------------------------------------------------------------
$pEle.attr('id','d1')
$('#d1').append($pEle) # 内部尾部追加
$pEle.appendTo($('#d1')) // 把A追加到B
----------------------------------------------------------------
$('#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]
案例：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
replaceWith()
replaceAll()
克隆
clone()// 参数
案例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>克隆</title>
<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>
<hr>
<button id="b2">屠龙宝刀，点击就送</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
// clone方法不加参数true，克隆标签但不克隆标签带的事件
$("#b1").on("click", function () {
$(this).clone().insertAfter(this);
});
// clone方法加参数true，克隆标签并且克隆标签带的事件
$("#b2").on("click", function () {
$(this).clone(true).insertAfter(this);
});
</script>
</body>
</html>
2.3 jQuery练习题
练习题
练习题:
1.找到本页面中id是i1的标签
2.找到本页面中所有的h2标签
3.找到本页面中所有的input标签
4.找到本页面所有样式类中有c1的标签
5.找到本页面所有样式类中有btn- -default的标签
6.找到本页面所有样式类中有c1的标签和所有h2标签
7.找到本页面所有样式类中有c1的标签和id是p3的标签
8.找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
9.找到本页面中form标签中的所有input 标签
10.找到本页面中被包裹在label标签内的input标签
11.找到本页面中紧挨在label标签后面的input标签
12.找到本页面中id为p2的标签后面所有和它同级的li标签
13.找到id值为f1的标签内部的第一个input标签
14.找到id值为my-checkbox的标签内部最后-一个input标签
15.找到id值为my-checkbox的标签内部没有被选中的那个input标签
16.找到所有含有input标签的label标签
---------------------------------------------------
$('#i1')
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)]
3 事件
3.1 事件绑定
.off() 方法用于移除用
.on() 方法用于绑定的事件处理程序。
3.1.1 事件绑定
.on( events [, selector ],function(){} )
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
3.1.2 移除事件
.off( events [, selector ][,function(){}])
- events： 事件
- selector: 选择器（可选的）
- function: 事件处理函数
// 第一种
$('#d1').click(function () {
alert('别说话 吻我')
});
----------------------------------------------------------
// 第二种(功能更加强大，还支持事件委托)
$('#d2').on('click',function () {
alert('借我钱买草莓，后面还你')
})
3.1.3 常用事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
3.2 案例
完整代码去看源代码
3.2.1 克隆事件
this指代是当前被操作的标签对象
<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>
3.2.2 自定义模态框
"""
模态框内部本质就是给标签移除或者添加上hide属性
"""
3.2.3 左侧菜单
<script>
$('.title').click(function () {
// 先给所有的items加hide
$('.items').addClass('hide')
// 然后将被点击标签内部的hide移除
$(this).children().removeClass('hide')
})
</script>
<!--尝试用一行代码搞定上面的操作-->
3.2.4 返回顶部
<script>
$(window).scroll(function () {
if($(window).scrollTop() > 300){
$('#d1').removeClass('hide')
}else{
$('#d1').addClass('hide')
}
})
</script>
3.2.5 自定义登陆校验
# 在获取用户的用户名和密码的时候 用户如果没有填写 应该给用户展示提示信息
<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>
3.2.6 input实时监控
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log(this.value)
})
</script>
3.2.7 hover事件
<script>
$("#d1").hover(function () { // 鼠标悬浮 + 鼠标移开
alert(123)
})
$('#d1').hover(
function () {
alert('我来了') // 悬浮
},
function () {
alert('我溜了') // 移开
}
)
</script>
3.2.8 键盘按键按下事件
<script>
$(window).keydown(function (event) {
console.log(event.keyCode)
if (event.keyCode === 16){
alert('你按了shift键')
}
})
</script>
3.3 阻止后续事件执行
- return false; // 常见阻止表单提交等
- e.preventDefault();
<script>
$('#d2').click(function (e) {
$('#d1').text('宝贝 你能看到我吗?')
// 阻止标签后续事件的执行，方式1
// return false
// 阻止标签后续事件的执行，方式2
// e.preventDefault()
})
</script>
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止默认事件</title>
</head>
<body>
<form action="">
<button id="b1">点我</button>
</form>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("#b1").click(function (e) {
alert(123);
//return false;
e.preventDefault();
});
</script>
</body>
</html>
3.4 阻止事件冒泡
冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。
我们在平时的开发过程中，肯定会遇到在一个div（这个div可以是元素）包裹一个div的情况，但是呢，在这两个div上都添加了事件，如果点击里面的div我们希望处理这个div的事件，但是呢，我们不希望外层的div的事件也执行，这时候我们就要用到阻止冒泡。
通俗点来说吧，你在家里看电视，躲在自己的小房间，但是你不希望声音传到隔壁父母的耳朵里，这时候，你可能躲在被窝里，或者墙壁的隔音效果很好，阻隔声音可以理解为阻止冒泡
<script>
$('#d1').click(function () {
alert('div')
})
$('#d2').click(function () {
alert('p')
})
$('#d3').click(function (e) {
alert('span')
// 阻止事件冒泡的方式1
// return false
// 阻止事件冒泡的方式2
// e.stopPropagation()
})
</script>
3.5 事件委托
3.5.1 概念讲解
一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段
如上图所示，事件传播分成三个阶段：
捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
通俗解释
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM
代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快
递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来
了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
3.5.2 事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a；
比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div。有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
3.5.3 事件委托怎么实现
子节点实现相同的功能，实现功能是点击li，弹出123：
<ul id="ul1">
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
</ul>
window.onload = function(){
var oUl = document.getElementById("ul1");
var aLi = oUl.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
aLi[i].onclick = function(){
alert(123);
}
}
}
上面的代码的意思很简单，相信很多人都是这么实现的，我们看看有多少次的dom操作，首先要找到ul，然后遍历li，然后点击li的时候，又要找一次目标的li的位置，才能执行最后的操作，每次点击都要找一次li；
那么我们用事件委托的方式做又会怎么样呢？
window.onload = function(){
var oUl = document.getElementById("ul1");
oUl.onclick = function(){
alert(123);
}
}
3.6 页面加载
// DOM中等待页面加载完毕再执行代码
window.onload = function(){
// js代码
}
---------------------------------------
// jQuery中等待页面加载完毕
# 第一种
$(document).ready(function(){
// js代码
})
// 第二种
$(function(){
// js代码
})
// 第三种(最常用)
// 直接写在body内部最下方
3.7 动画效果
示例
$('#d1').hide(5000)
w.fn.init [div#d1]
$('#d1').show(5000)
w.fn.init [div#d1]
$('#d1').slideUp(5000)
w.fn.init [div#d1]
$('#d1').slideDown(5000)
w.fn.init [div#d1]
$('#d1').fadeOut(5000)
w.fn.init [div#d1]
$('#d1').fadeIn(5000)
w.fn.init [div#d1]
$('#d1').fadeTo(5000,0.4)
w.fn.init [div#d1]
-----------------------------
// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定义（了解即可）
animate(p,[s],[e],[fn])
4 补充
4.1 each()
jQuery.each(collection, callback(indexInArray, valueOfElement))：
描述：一个通用的迭代函数，它可以用来无缝迭代对象和数组。数组和类似数组的对象通过一个长度属性（如一个函数的参数对象）来迭代数字索引，从0到length - 1。其他对象通过其属性名进行迭代。
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//index是索引，ele是每次循环的具体元素。
})
输出：
010
120
230
340
.each(function(index, Element))：
描述：遍历一个jQuery对象，为每个匹配元素执行一个函数。
.each() 方法用来迭代jQuery对象中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数)。由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
注意: jQuery的方法返回一个jQuery对象，遍历jQuery集合中的元素 - 被称为隐式迭代的过程。当这种情况发生时，它通常不需要显式地循环的 .each()方法：
也就是说，上面的例子没有必要使用each()方法，直接像下面这样写就可以了：
$("li").addClass("c1"); // 对所有标签做统一操作
注意：
在遍历过程中可以使用 return false提前结束each循环。
终止each循环
return false；
示例
# each()
# 第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').each(function(index){console.log(index)})
VM181:1 0
VM181:1 1
VM181:1 2
VM181:1 3
VM181:1 4
VM181:1 5
VM181:1 6
VM181:1 7
VM181:1 8
VM181:1 9
$('div').each(function(index,obj){console.log(index,obj)})
VM243:1 0 <div>1</div>
VM243:1 1 <div>2</div>
VM243:1 2 <div>3</div>
VM243:1 3 <div>4</div>
VM243:1 4 <div>5</div>
VM243:1 5 <div>6</div>
VM243:1 6 <div>7</div>
VM243:1 7 <div>8</div>
VM243:1 8 <div>9</div>
VM243:1 9 <div>10</div>
# 第二种方式
$.each([111,222,333],function(index,obj){console.log(index,obj)})
VM484:1 0 111
VM484:1 1 222
VM484:1 2 333
(3) [111, 222, 333]
"""
有了each之后 就无需自己写for循环了 用它更加的方便
"""
4.2 data()
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值。
.data(key, value):
描述：在匹配的元素上存储任意相关数据。
$("div").data("k",100);//给所有div标签都保存一个名为k，值为100
.data(key):
描述: 返回匹配的元素集合中的第一个元素的给定名称的数据存储的值—通过 .data(name, value)或 HTML5 data-*属性设置。
$("div").data("k");//返回第一个div标签中保存的"k"的值
.removeData(key):
描述：移除存放在元素上的数据，不加key参数表示移除所有保存的数据。
$("div").removeData("k"); //移除元素上存放k对应的数据
示例：
点击查看代码
# data()
"""
能够让标签帮我们存储数据 并且用户肉眼看不见
"""
$('div').data('info','回来吧，我原谅你了!')
w.fn.init(10) [div#d1, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
$('div').first().data('info')
"回来吧，我原谅你了!"
$('div').last().data('info')
"回来吧，我原谅你了!"
$('div').first().data('xxx')
undefined
$('div').first().removeData('info')
w.fn.init [div#d1, prevObject: w.fn.init(10)]
$('div').first().data('info')
undefined
$('div').last().data('info')
"回来吧，我原谅你了!"
5 总结
5.1 js事件
点击查看代码
# js绑定事件的两种方式
# 自己独立的敲出来昨天的案例
1.开关灯
pEle.classList.add()
...
2.input框获取、失去焦点
onfocus
onblur
3.计时器
onclick
js代码逻辑
4.省市联动
onchange文本域变化
就记忆一个select
5.2 jQuery简介
点击查看代码
内部封装了并且提供了额外功能的模块、框架
类库
兼容多个浏览器
版本更新
1.X
2.X
3.X
宗旨
write less do more
如何导入jQuery
1.将文件下载到本地直接导入(压缩、未压缩)
好处在于没有网也可以正常使用
不好的地方在于需要重复书写，文件路径还要固定
(pycharm模块功能 自动添加固定的代码
配置
编辑
file and code template
html
py
)
2.CDN服务
CDN的概念:内容分发网络
参考网站:bootcdn
前端相关的应用程序都有免费的cdn服务
好处在于无需下载对应的文件，直接走网络请求使用
不好的地方在于必须要有网
基本语法结构
jQuery().action() === $().action()
5.3 jQuery选择器
点击查看代码
# 基本选择器
$('#d1')
$('.c1')
$('span')
jQuery选择器拿到的都是jQuery对象(你可以看成是一个数组)
重点
jQuery对象和标签对象的区分
jQuery >>> 标签对象
$('#d1')[0]
标签对象 >>> jQuery
$(document.getElementById('d1'))
不同的对象之间调用的方法是不一样的，不能混用
# 组合、分组、嵌套
$('div,span,p')
$('#d1,.c1,div')
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
# 基本筛选器
针对已经得到的结果进行二次筛选
:first
:last
:eq(index)
:even
:odd
:gt(index)
:lt(index)
:not
:has 从后代元素中筛选
$('div:has(".c1")')
# 属性选择器
$('[username]')
$('[username="jason"]')
$('input[username="jason"]')
# 表单筛选器
$('input[type="text"]')
$(':text')
:text
...
:file
特殊情况
$(':checked') 拿到默认选中的checkbox和option
$('input:checked')
在书写表单筛选器的时候 如果前面可以加限制条件最好加一个
# 筛选器方法
.next()
.nextAll()
.nextUntil() # 不包含最后一个
.prev()
.prevAll()
.prevUntil() # 不包含最后一个
.parent()
.parents()
.parentsUntil() # 不包含最后一个
.children() # 儿子们
.siblings() # 兄弟 同级别上下所有
$('div p') === $('div').find('p')
# 基本筛选器优化封装
.first()
.last()
.not()
.has()
.eq()
"""
选择器无论你用哪个都可以 只要能够实现需求就行
"""
5.4 样式类操作
点击查看代码
addClass() classList.add()
removeClass()
hasClass()
toggleClass()
5.5 css操作
点击查看代码
.css(属性名,属性值)
jQuery链式操作
一行代码可以搞定很多事情
jQuery对象在调用jQuery方法之后返回的还是当前对象本身
(本质:return self)
5.5.1 位置操作
点击查看代码
scrollTop
scrollLeft
# 回到顶部
$(window).scrollTop() # 获取
$(window).scrollTop(300) # 设置
5.5.2 尺寸操作
点击查看代码
# 文本的高和宽
height()
# 文本+padding
innerHeight()
# 文本+padding+border
outterHeight()
5.5.3 文本操作
点击查看代码
.text() 文本 innerText()
.html() 文本+标签 innerHTML()
括号内不加参数就是获取 加了就是设置
获取值
.val() value
获取文件数据
5.5.4 属性操作
点击查看代码
.attr()
.attr('class') getAttribute
.attr('class','c1') setAttribute
.removeAttr() removeAttribute
# 针对checkbox、radio、option选中的checked、selected属性不要用attr
建议你使用prop()
prop('checked')
prop('checked',true/false)
5.5.5 文档处理
点击查看代码
# jQuery如何创建标签
document.createElement('p') === $('<p>')
A.append(B)
B.appendTo(A)
prepend()
prependTo()
...
remove() 移除标签
empty() 清空标签内部所有的内容
5.5.6 事件处理
点击查看代码
# jQuery两种绑定事件的方式
# 第一种
$('#d1').click(function(){})
# 第二种
$('#d1').on('click',function(){})
"""
this
指代的就是当前被操作对象本身(有点像面向对象的self)
"""
# 克隆事件
clone() 默认情况下只克隆标签和文本不克隆事件
clone(true)
# 自定义模态框
绑定事件控制标签类属性的添加和删除
# 左侧菜单
一行代码搞定
# 返回顶部
$(window).scroll(function(){
})
# 自定义登陆校验功能
.val()
# hover事件
$('#d1').hover(function(){}) # 进出都会触发
$('#d1').hover(
function(){},
function(){}
)
# input框实时监控输入内容事件
$('#d1').on('input',function(){})
# 键盘按键事件
$(window).keydown(function(event){
event.keyCode
})
$(window).keyup(function(){})
"""
web领域永远没有绝对的安全！！！
"""
浙公网安备 33010602011771号