5.19
昨日回顾
BOM与DOM操作
-
BOM
window.innerHeight window.innerWidth window.open(url,'',height,width); window.close() navigator.userAgent() //用于反爬 hisotry.forward() history.back() location.href location.href = url location.reload() //弹出框 alert('123') confirm('123') prompt() //计时器相关 //触发一次 setTimeout(function,2000) clearTimeout() //循环触发 setInterval() clearInterval() -
DOM操作
DOM树，一个节点可以找到所有的节点
要操作，先学会查找
-
查找方法
//id查找 divEle = document.getElementById('d1'); //根据类查找，得到是一个数组，要加索引，得到具体的一个对象才能操作 divEle[0] = document.getElementsByClassName('c1') //根据标签名查找 document.getElementsByTagName('div')//间接查找 parentElement children firstElementChild -
节点操作
//创建标签 let pEle = document.createElement('p'); //赋值属性 pEle.id = 'd1' pEle.setAttribute('username','aaa'); pEle.setAttribute('class','c1'); //写内部文本 pEle.innerText = '我是p标签' //添加到其他标签内部 appendChild() -
innerText与innerHTML
innerText只能获得文本，不识别html，自动去掉空格和回车
innerHTML获取文本和标签
-
获取input框的值
iptEle = document.getElementById('ipt1'); val = iptEle.value iptEle.file[0] //获取文件对象 -
class操作
iptEle.classList //查看对象所有的类 iptEle.classList.add('c1') //给对象添加类 iptEle.classList.remove('c1') //删除对象的类 iptEle.toggle('c2') //有则删除，无则添加 -
CSS操作
只要想操作CSS，就用style起手
iptEle.style.color = 'red'; iptEle.style.marginTop = '20px'; //这个操作会将横杠去掉，变成驼峰体 //font-size ====> fontSize
-
-
事件 开头
到达某个条件，自动触发的动作
-
绑定事件的两种方式
<!--1.在标签内部直接书写绑定事件的函数--> <p onclick="func()">p</p> <!--2.先找到标签，再绑定事件--> <p> id='p1'>ppp</p> <script> function func(){} pEle = document.getElementById('p1'); pEle.onclick = func() </script> -
xxx.onload
等待xxx加载好了，才运行
-
script一般放在末尾
-
今日内容
- 原生Javascript事件
- jQuery
原生JS事件绑定
直接写几个案例
开关灯示例
<head>
<style>
.c1{
200px;
height: 200px;
}
.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')
let divEle = document.getElementById('d1')
btnEle.onclick = function () { // 绑定点击事件
divEle.classList.toggle('bg_red')
//有这个class，就删除，显示绿色，没有就添加，显示红色
}
</script>
</body>
焦点框案例
搜索框，自带文字，得到焦点之后文字消失
<!--onfocus事件，改变input标签的value为空-->
<!--onblur失去焦点事件，将input的value改回原样-->
<body>
<input type="text" value="没有焦点" id="d1">
<script>
let iptEle = document.querySelector('#d1');
iptEle.onfocus = function () {
iptEle.value = '';
}
iptEle.onblur = function () {
iptEle.value = '失去焦点';
}
</script>
</body>
实时显示时间
//访问页面之后，将访问的时间展示到input框中
//动态展示当前时间，设置一个循环计时器，循环改变时间
//问题：按多次开始按钮，会开启多个定时器，按结束，只能结束一个定时器
//解决：设置一个变量，有值的时候不开启计时器，没有值的时候才能开启。在清除计时器的时候重置计时器为null
<body>
<div id="d1">Time</div>
<div>
<button id="st">Start</button>
<button id="ed">Stop</button>
</div>
<script>
let t = null
let divEle = document.querySelector('#d1');
let stEle = document.querySelector('#st');
let edEle = document.querySelector('#ed');
//展示时间函数。获得一个时间对象，改变div中的字
function showTime() {
let currentTime = new Date();
divEle.innerText = currentTime.toLocaleString()
}
//start按钮的点击事件，检查是否已经有计时器，如果没有，开启一个计时器，每一秒调用一次展示时间
stEle.onclick = function () {
if(!t){
t = setInterval(showTime,1000)
}
}
//停止显示按钮，清除计时器
edEle.onclick = function () {
clearInterval(t)
t = null
}
</script>
</body>
省市联动
两个select框，选择了省，在第二个select框显示对应的市：仅模拟
<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事件
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 // <option value="省">省</option>
// 4 将创建好的option标签添加到第一个select中
cityEle.appendChild(opEle)
}
}
</script>
</body>
jQuery
内部封装了原生的js代码，能够书写更少的代码完成js操作，还添加了一些功能
前端，模块不叫模块，叫类库
jQuery使用的时候也需要导入，但是文件非常小，基本不影响网络速度
jQuery版本：使用3版本
下载：用第一个，压缩之后的，内容更小
新建一个js文件
导入jQuery
<script src="jQuery-3.4.1"></script>
为了不让多个html都手动输入引入jQuery的语句代码，可以借助webstorm代码初始化功能，自动添加
也可以直接引入jQuery提供的cdn服务，基于网络直接请求加载
cdn：内容分发网络，用于加速访问。有收费也有免费：bootcdn，复制对应的script标签就行
jQuery基本语法
jQuery(选择器).action，也可以简写成 $(选择器).action
jQuery与原生代码对比
例，将p标签内部颜色改为红色
<p id='d1'>ppp</p>
<script>
//原生
let pEle = getElementById('d1');
pEle.style.color = 'red';
//jQuery
$('p').css('color','blue')
</script>
jQuery查找标签
-
基本选择器
$('#d1') //id选择器 $('#c1') //class选择器 $('div') //标签选择器 //得到的都是jQuery对象，通过取索引才能得到标签对象，jQuery对象只能使用jQuery方法，标签对象只能使用标签的方法 $('div')[0] //标签对象转jQuery对象：$括起来 $(document.getElementById('d1')) -
组合选择器
$('div.c1') //找类是c1的div标签 $('div#d1') //找id的d1的div标签 -
混合使用
$('.c1,.c2') //c1类和c2类 $('div span') //div的所有后代span $('div>span') //div的儿子span
基本筛选器
$('ul li:fist') //ul标签下的第一个li标签
$('ul li:last') //ul标签下的最后一个li标签
$('ul li:eq(2)') //eq对应索引，拿到li表中索引是2的li
$('ul li:even') //拿到偶数位的li，odd：奇数位的
$('ul li:gt(2)') //拿到索引大于2的所有元素
$('ul li:lt(2)') //拿到索引小于2的所有元素
//同html的特殊符号，大于小于
其他：has，not
$('ul li:not("#d1")') //移除满足条件的标签，不要id为d1的
$('div:has("p")') //内部含有p标签的div，选出包含一个或多个标签在内的标签
属性查找器
$('[username]') //查找所有包含username属性的标签
$('[type='text']') //拿到type类型为text的所有标签
$('input[type='text']') //所有type为text的input框
表单筛选器
只用于表单里
$(':text') //只适用于form表单里的标签，等价于上面第二个 $('input[type='text']')
/*一类的方法包括
:text
:password
:file
:checked等等*/
//checked会将checked和selected都拿到，而selected不会，所以在用checked的时候，自己加一个限制条件：input:checked
筛选器方法
next，nextAll，nextUntil，prev，prevAll，prevUntil，parent，
$('#d1').next() //jQuery对象的方法，拿到d1标签的下一个标签
$('#d1').nextAll() //拿到同级别下面所有的标签
$('#d1').nextUntil('.c1') //拿d1下面的标签，直到类为c1的标签
$('.c1').prev() //拿到c1类的上一个标签
//同样有All，Until
$('#d1').parents() //一层层拿，得到一个数组，一直拿到html
$('#d1').parentsUntil('body')
$('#d2').children() //拿到所有的子标签
$('#d1').siblings() //同级别上下所有
//找div下的p标签
$('div p')
//也可以
$('div').find('p')
//拿第一个标签，处理用冒号:first，也可以用.first()
$('div').find('p').first() //拿到div下的第一个p标签