今日内容概要
原生JS事件结束
jQuery(封装了js的前端框架(模块))
很容易与我们学的DOM操作混淆
原生js事件绑定
我们直接写几个案例，看懂即可
案例一：开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 {
height: 400px;
width: 400px;
border-radius: 50%;
}
.bg_green {
background-color: green;
}
.bg_red {
background-color: red;
}
</style>
</head>
<body>
<div id="d1" class="c1 bg_red bg_green"></div>
<button id="d2">变色</button>
<script>
let btnEle = document.getElementById('d2') // 找到b2标签
let divEle = document.getElementById('d1')
btnEle.onclick = function () { // 绑定点击事件
// 动态的修改div标签的类属性
divEle.classList.toggle('bg_red')
// 上句代码意思：点击按钮就会判断就会判断div里面有没有bg_red这个类属性，有就移除，没有就添加
}
</script>
</body>
</html>
案例二：input框获取焦点失去焦点案例
需求：鼠标放到框里面就把内容清掉，鼠标出来就把内容修改成别的（对应的就是两个事件的应用）
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<input type="text" value="老板 去吗？" id="d1">
<script>
let iEle = document.getElementById('d1')
// 获取焦点事件
iEle.onfocus = function () {
// 将input框内部的值去除
iEle.value = ''
// 只是点value就是获取标签的value属性 如果有等号，就是将value属性赋值为等号后面的值，这里写的是空
}
// 失去焦点事件
iEle.onblur = function () {
// 给input标签重新赋值
iEle.value = '没钱，不去'
}
</script>
</body>
</html>
案例三：实时展示当前时间
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<input type="text" id="d1" style="display:block;height:50px;width:200px">
<button id="d2">开始</button>
<button id="d3">结束</button>
<script>
// 先定义一个全局存储定时器的变量
let t = null
let inputEle = document.getElementById('d1')
let startBtnEle = document.getElementById('d2')
let endBtnEle = document.getElementById('d3')
// 1.访问页面之后，将访问的时间展示到input框中
// 2.动态展示当前时间
// 3.页面上加两个按钮，一个开始，一个结束
function showTime() {
let currentTime = new Date()
inputEle.value = currentTime.toLocaleString() // 转成当地的时间
}
// setInterval(showTime,1000) // 没间隔1秒钟执行一次函数
startBtnEle.onclick = function () { // 给开始按钮绑定点击事件
// 限制定时器只能开一个
if(!t){ // !t的意思是只有t是非空的时候才会开设
t = setInterval(showTime,1000) // 每点击一次就会开设一个定时器，而t只指代最后一个
}
}
endBtnEle.onclick = function () {
clearInterval(t)
// 还应该将t重置为空
t = null
}
</script>
</body>
</html>
案例四：省市联动
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<select name="" id="d1">
<option value="" selected disabled>--请选择--</option>
</select>
<select name="" id="d2"></select>
<script>
let proEle = document.getElementById('d1')
let cityEle = document.getElementById('d2')
// 先模拟省市数据
data = {
"河北": ["廊坊", "邯郸",'唐山'],
"北京": ["朝阳区", "海淀区",'昌平区'],
"山东": ["威海市", "烟台市",'临沂市'],
'上海':['浦东新区','静安区','黄浦区'],
'深圳':['南山区','宝安区','福田区']
}
// 先for循环获取省
for(let key in data){
// 将省信息做成一个个option标签 添加第一个select框中
// 1.创建option标签
let opEle = document.createElement('option')
// 2.设置文本
opEle.innerText = key
// 3.设置value
opEle.value = key // <option value='省'>省</option>
// 4.将创建好的option标签添加到第一个select框中
proEle.appendChild(opEle)
}
// 文本域变化事件，也就是change事件 主要针对select框
proEle.onchange = function () {
// 先获取用户选择的省
let currentPro = proEle.value
// 获取对应的市信息
let currentCityList = data[currentPro]
// 清空市select中所有的option
cityEle.innerHTML = ''
// 自己加一个请选择
let ss = "<option disabled selected>请选择</option>>"
// let oppEle = document.createElement('option')
// oppEle.innerText = '请选择'
// oppEle.setAttribute('selected','selected')
cityEle.innerHTML = ss
// for循环所有的市，渲染到第二个select框中
for (let i=0;i<currentCityList.length;i++){
let currentCity = currentCityList[i]
// 1.创建option标签
let opEle = document.createElement('option')
// 2.设置文本
opEle.innerText = currentCity
// 3.设置value
opEle.value = currentCity
// 4.将创建好的option标签添加到第一个select中
cityEle.appendChild(opEle)
}
}
</script>
</body>
</html>
jQuery
"""
jQuery内部封装了原生的js代码(还额外添加了很多的功能)
能够让你通过书写更少的代码 完成js操作
类似于python里面的模块 在前端模块不叫模块 叫 “类库”
兼容多个浏览器的 你在使用jQuery的时候就不需要考虑浏览器兼容问题
jQuery的宗旨
write less do more
让你用更少的代码完成更多的事情
复习
python导入模块发生了哪些事？
导入模块其实需要消耗资源
jQuery在使用的时候也需要导入
但是它的文件非常的小(几十KB) 基本不影响网络速度
jQuery内容：
选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax(重点 django部分学)
版本介绍
jQuery文件下载
压缩 容量更小
未压缩
"""
# jQuery在使用之前 一定要确保已经导入了
针对导入问题
新建文件设置默认内容：
# 1 文件下载到了本地 如何解决多个文件反复书写引入语句的代码
可以借助于pycharm自动初始化代码功能完成自动添加
配置
编辑
file and code template
"""我不想下载jQuery文件 能不能使用呢？"""
# 2 直接引入jQuery提供的CDN服务(基于网络直接请求加载)
CDN:内容分发网络
CDN有免费的也有收费的
前端免费的cdn网站:https://www.bootcdn.cn/ 免费cdn
bootcdn
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
"""你的计算机必须要有网络"""
# jQuery基本语法
jQuery(选择器).action()
秉持着jQuery的宗旨 jQuery简写 $
jQuery() === $()
# jQuery与js代码对比
<body>
<p id="d1">到底谁好用</p>
</body>
</html>
eg:将p标签内部的文本颜色改为红色
// 原生js代码操作标签
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
先学如何查找标签
<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 id="d1">div
<span>div>span</span>
<p>div>p
<span>div>p>span</span>
</p>
</div>
<p class="c1">p</p>
<span>span</span>
</body>
</html>
基本选择器
// 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)]
"""一定要区分开(重点)"""
// jQuery对象如何变成标签对象
undefined
$('#d1')[0]
<div id="d1">…</div>
document.getElementById('d1')
<div id="d1">…</div>
// 标签对象如何转jQuery对象
undefined
$(document.getElementById('d1'))
w.fn.init [div#d1]
组合选择器/分组与嵌套
<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>
<span>span</span>
<span>span</span>
<div id="d1">div
<span>div>span</span>
<p id="d2">div>p
<span>div>p>span</span>
</p>
<span>div>span</span>
</div>
<div class="c1"></div>
<span>span</span>
<span>span</span>
</body>
</html>
$('div') # 找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)]
组合选择器：
$('#d1,.c1,p') # 多个选择器并列+混用使用
w.fn.init(3) [div#d1, p#d2, div.c1, prevObject: w.fn.init(1)]
$('div span') # 找div所有的span后代
w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
$('div>span') # 找儿子的span
w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
$('div+span') # 毗邻（找紧挨着我的span）
w.fn.init [span, prevObject: w.fn.init(1)]
$('div~span') # 弟弟
w.fn.init(2) [span, span, 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>
<ul>
<li>101</li>
<li>102</li>
<li>103</li>
<li>104</li>
<li>105</li>
<li>106</li>
<li class="c1">107</li>
<li>108</li>
<li id="d1">109</li>
<li>110</li>
</ul>
<div>div
<p></p>
<span></span>
</div>
<div>div
<a href=""></a>
</div>
</body>
</html>
$('ul 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') # 大儿子（只拿第一个li）
w.fn.init [li, prevObject: w.fn.init(1)]0: lilength: 1prevObject: w.fn.init [document]__proto__: Object(0)
$('ul li:last') # 小儿子（只拿最后一个li）
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)') # 大于索引（这句是拿到索引大于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)') # 小于索引（这句是拿到索引小于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")') # 移除满足条件的标签（拿ul下的所有li，不要带有id是的）
w.fn.init(9) [li, li, li, li, li, li, li.c1, li, li, prevObject: w.fn.init(1)]
$('div') # 先找div
w.fn.init(2) [div, div, prevObject: w.fn.init(1)]
$('div:has("p")') # 选取出包含一个或多个标签在内的标签（找内部含有p标签的div）
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" username="jason">
<input type="text" username="egon">
<p username="egon"></p>
</body>
$('[username]') # 找所有含有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]') # 找所有含有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)]
表单筛选器
<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>
<from action="">
<p><input type="text"></p>
<p><input type="password"></p>
<input type="checkbox" value="111">111
<input type="checkbox" value="111" checked>222
<input type="checkbox" value="111">333
<select name="" id="">
<option value="">111</option>
<option value="">222</option>
<option value="" selected>333</option>
</select>
<input type="button" value="按钮">
</from>
</html>
$('input[type="text"]') # 拿到type="text"的input框
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)]
其他的筛选器：
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
表单对象属性
:enabled
:disabled
:checked
:selected
"""特殊情况"""
$(':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)]
筛选器方法
$('#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)]