目录
一、原生js事件绑定
1 开关灯案例
<script>
let divEle = document.getElementById('d1')
let butEle = document.getElementById('d2')
butEle.onclick = function () {
divEle.classList.toggle('back_yellow')
}
</script>
2 input框获取焦点，失去焦点案例
<script>
let inpEle = document.getElementById('d1')
// 获取input框焦点时
inpEle.onfocus = function () {
inpEle.value = ''
}
// 点其他地方失去input焦点时
inpEle.onblur = function () {
inpEle.value = '请吃屎'
}
</script>
3 实现展示当前时间，定时功能
<script>
let inpEle = document.getElementById('d1')
let butEle_start = document.getElementById('start')
let butEle_end = document.getElementById('end')
let t = null
function showTime() {
let nowTime = new Date();
inpEle.value = nowTime.toLocaleString()
}
butEle_start.onclick = function () {
if (!t){
// 设置定时器
t = setInterval(showTime,1000)
}
}
butEle_end.onclick = function () {
// 清除定时器
clearInterval(t)
t = null
}
</script>
4 省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</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(let key in data){
let opEle = document.createElement('option')
opEle.innerText = key
opEle.value = key
proEle.appendChild(opEle)
}
proEle.onchange = function () {
let currentPro = proEle.value
let currentCityList = data[currentPro]
let sa = "<option disabled selected>请选择</option>"
cityEle.innerHTML = sa
cityEle.innerText = ''
for(let i=0;i<currentCityList.length;i++){
let citys = currentCityList[i]
let currcityEle = document.createElement('option')
currcityEle.value = citys
currcityEle.innerText = citys
cityEle.appendChild(currcityEle)
}
}
</script>
</body>
</html>
二、jQuery入门
介绍：jQuery内部封装了原生的js代码，能让我们通过写更少的代码去完成更多的功能。
jQuery和js的关系就像python中的模块和python的关系相同，但在前端模块称为‘类库’
1 jQuery的两种导入方式
1.1 直接下载本地
如果觉得每个页面都要添加链接jQuery很麻烦，可以在pycharm自动初始化代码处修改
1.2 直接引入jQuery提供的CDN服务（基于网络直接请求加载）
国内免费的CDN：https://www.bootcdn.cn/
// 在有网的情况下
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
1.3 jQuery基本语法
jQuery(选择器).action()
// jQuery === $
// jQuery与js代码对比
let pEle = document.getElementById('d1')
pEle.style.color = 'red'
// jQuery操作标签
$('p').css('color','blue')
2、查找标签
// id选择器
$('#d1')
S.fn.init [div#d1]
// 类选择器
$('.c1')
S.fn.init [p.c1, prevObject: S.fn.init(1)]
// 标签选择器
$('span')
S.fn.init(3) [div, div#d1, div, prevObject: S.fn.init(1)]
// jQuery选择到的是一个jQuery对象，可以直接使用也可以转化成标签对象再使用
// jQuery对象如何转化成标签对象
$('#d1')[0]
// 标签对象转化成jQuery对象
$(document.getElementById('d1')）
2 组合选择器/分组选择器
$('div') # 找到所有的div标签
$('div.c1') # 找到所有div中继承了c1类的div标签
$('div#d1') # 找到id=d1的div标签
$('#d1,.c1,span') # 并列，找到id=d1的标签，继承了c1类的标签，所有span标签
$('div span') # 后代
$('div>span') # 儿子
$('div+span') # 毗邻
$('div~span') # 弟弟
3 基本筛选器
$('ul li')
$('ul li:first') # 取第一个子标签
# 注意所有选择器内部：后面的方法都可以拿出来写
$('ul li').first() == $('ul li:first')
$('ul li:last') # 最后一个子标签
$('ul li:eq(2)') # 取索引为2的标签（第三个！）
$('ul li:even') # 所有偶数索引标签 包括0
$('ul li:odd') # 所有奇数索引标签
$('ul li:lt(2)') # 索引小于索引为2的标签 不包括2
$('ul li:gt(2)') # 索引大于索引为2的标签 不包括2
$("ul li:not('#d1')") # 移除满足条件的标签
$('div:has("p")') #选择包含p标签的div标签
4 属性选择器
$('[username]') # 选择所有有username属性的标签
$('[username = "jason"]') # 选择所有username = jason 属性的标签
$('p[name = "hz"]') # 选择所有有name = hz的p标签
5 表单筛选器
# 表单选择器可以简写
$('input[type = "text"]') == $(':text')
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
...
# 以上都可以简写
"""特殊情况"""
$(':checked') # 它会将含有checked的input标签，和selected的option标签都拿到
$(':selected') # 它不会 只拿selected
$('input:checked') # 自己加一个限制条件
6 筛选器方法
$('#d1').next() # id=d1标签的下一个
$('#d1').nextAll() # 下面全部
$('#d1').nextUntil('.c1') # 下面直到继承类c1的标签
$('.c1').prev() # 上面一个
$('.c1').prevAll() # 上面全部
$('.c1').prevUntil('#d2') #上面直到
$('#d3').parent() # 父标签
$('#d3').parent().parent() # 爷标签
$('#d3').parents() # 所有父标签
$('#d3').parentsUntil('body') # 取所有父标签直到body
$('#d2').children() # 所有的第一层子标签
$('#d2').siblings() # 所有同级别标签