day49
昨日内容
url:统一资源定位符(网址)
BOM与DOM操作
BOM操作
window对象 window可以省略不写
window.open(url,'','width=400px,height=400px,top=200px,left=200px') 打开子页面
window.close() 关闭页面
window.opener() 在子页面调用父页面的函数(父子页面通信)
history.forward()
history.back()
location.href 获取当前页面所在的url
location.href = url 跳转到指定的url
location.reload 刷新页面
alert
prompt
confirm
计时器相关
延时任务
t = setTimeout(func,毫秒)
clearTimeout(t)
周期任务
setInterval(func,毫秒)
clearInterval(func,毫秒)
DOM操作
DOM树
节点操作
查找标签
document.getElementById() 标签对象本身
document.getElementsByClassName() 数组套标签对象
document.getElementsByTagName() 数组套标签对象
间接查找
parentElement()
children()
需要掌握 如何用js代码创建标签
通常情况下 如果变量名指代的是一个标签对象
xxxEle
如果变量名指代的是一个jQuery对象
$xxxEle
注意:js对象无法调用jQuery方法 同理jQuery对象也无法调用js的方法
var pEle = document.createElement('p')
属性操作
设置标签默认的属性 还可以通过点的方式直接设置
pEle.id = 'd1'
pEle.setAttribute('class','c1')
pEle.setAttribute('username','jason')
文本操作
pEle.innerText 获取内部文本
pEle.innerText = '好冷 去哪取暖呢?'
pEle.innerHtml 获取内部文本及标签
pEle.innerHtml = 'xxxooo'
innerText不识别标签而innerHtml能够识别标签
小规律：没有赋值符号就是获取值 有赋值符号就是设置值
节点操作
如何往标签内部添加元素
append() 内部最下面
insertBefore(要添加的元素,在谁之前的元素)
获取值操作
获取用户输入(输入 选择 上传...)的文本值
iEle.value 获取用户输入 选择的文本值
iEle.value = '' 修改input框内部文本值
如何获取用户上传的文件对象
获取用户上传文件的标签对象.files[0]
var iEle = document.getElementById('#i1')
iEle.files[0]
var $iEle = \(('#i1') \)iEle.files[0] 错误！！！ \(iEle是一个jQuery对象 不能点标签对象的方法 \)iEle[0].files[0] 正确
原生的js对象(标签对象)与jQuery对象的相互转换
$() 查找的都是一个数组的形式(内部才是一个个的原生js对象)
通过索引取值的方式 就能拿到原生的js对象
原生的js对象如何转换成jQuery对象？
$(原生的js对象) # str([1,2,3,4,])
样式操作
统一点style
style.color
style.backgroudColor
style.fontSize
属性操作
classList
classList.add
classList.remove
classList.contains
classList.toggle
js事件
绑定事件的两种方式
1.标签内部直接写函数名加括号 不推荐使用
2.先利用js查找标签 然后动态绑定 推荐使用
js代码书写位置
1.可以在head内 用script标签书写
onload 等待某某某加载完毕之后才触发
window.onload = function (){
// js代码
}
2.直接写在body最下方
事件的种类
onclick
onfocus
onblur
onchange
语法结构
标签对象.onclick = function(){
// 事件触发之后的操作代码
}
1.开关灯示例
2.input框获取焦点
3.时间示例
4.省市联动
基本筛选器
: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标签
属性选择器
[attribute]
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
举例:
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签
表单筛选器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
表单对象属性
:enabled
:disabled
:checked
:selected
注意:checked前面要加选择器
筛选器方法
下一个元素:
$("#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")
说明:简化上面基本筛选器
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
样式操作
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
.offset()方法允许我们检索一个元素相对于文档（document）的当前位置。
和 .position()的差别在于： .position()是相对于相对于父级元素的位移。
尺寸操作
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作
HTML代码:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值:
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值:
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
举例:
<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"])
属性操作
用于ID等或自定义属性:
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性
用于checkbox和radio:
prop() // 获取属性
removeProp() // 移除属性
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性)
虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，可以认为attr是显式的，而prop是隐式的。
总结：
- 对于标签上有的能看到的属性和自定义属性都用attr
- 对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop
文档处理
添加到指定元素内部的后面
$(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()// 删除匹配的元素集合中所有的子节点。
例子：
点击按钮在表格添加一行数据。
点击每一行的删除按钮删除当前行数据。
替换
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>
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})
事件绑定
推荐这种:.on( events [, selector ],function(){})
input监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<input type="text">
<script>
// $('input').on('input',function () {
// // 获取用户输入的内容
// console.log($(this).val())
// })
// $('input').on('focus',function () {
// // 获取用户输入的内容
// // console.log($(this).val())
// alert(123)
// })
// $('input').focus(function () {
// alert(123)
// })
</script>
</body>
</html>
阻止后续事件执行
return false; // 常见阻止表单提交等
e.preventDefault():
<!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>
阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
$("span").click(function (e) {
alert("span");
e.stopPropagation();
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
事件委托
件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
// $('button').click(function () {
// alert(123)
// })
//
// 事件委托 将特定的事件 委托给标签内部指定的元素 (标签即可以是提前写的 也可以是后期动态添加的)
// $('body').on('click','button',function () {
// alert(123)
// })
</script>
</body>
</html>
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本筛选器</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<!--<style>-->
<!--.c1 {-->
<!--width: 400px;-->
<!--height: 400px;-->
<!--border-radius: 50%;-->
<!--}-->
<!--.bg_green {-->
<!--background-color: green;-->
<!--}-->
<!--.bg_red {-->
<!--background-color: red;-->
<!--}-->
<!--</style>-->
<!--<style>-->
<!--p {-->
<!--margin: 10px 20px 30px 40px;-->
<!--padding:10px 20px 30px 40px ;-->
<!--}-->
<!--</style>-->
</head>
<body>
<h1>注册页面</h1>
<form action="">
<p>
username:<input type="text" id="d1">
<span style="color: red" class="errors"></span>
</p>
<p>
password:<input type="password" id="d2">
<span style="color: red" class="errors"></span>
</p>
<p>
<input type="button" id="submit">
</p>
</form>
<script>
var btnEle=$('#submit')[0];
btnEle.onclick=function () {
var userNmaeVal=$('#d1').val();
var passWordVal=$('#d2').val();
if (userNmaeVal.length ===0){
$('.errors').first().text('用户名不能为空')
}
if (passWordVal.length ===0){
$('.errors').last().text('密码不能为空')
}
}
var inputEleList =$('input');
for(let i=0;i<inputEleList.length;i++){
inputEleList[i].onfocus=function () {
$(this).next().text('')
}
}
</script>
<!--<div>div-->
<!--<p>div>p-->
<!--<span>div>p>span</span>-->
<!--<a href="">div>p>a</a>-->
<!--</p>-->
<!---->
<!--</div>-->
<!--<input type="text">-->
<!--<p>111</p>-->
<!--<div style="height:1000px;background-color: red"></div>-->
<!--<div style="height:1000px;background-color: green"></div>-->
<!--<div style="height:1000px;background-color: yellow"></div>-->
<!--<div>-->
<!--<p>111</p>-->
<!--<p>222</p>-->
<!--</div>-->
<!--<div class="c1 bg_green bg_red"></div>-->
<!--<span>最上面的span</span>-->
<!--<span>div上面的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>-->
<!--<span>div+span</span>-->
<!--<span>div~span</span>-->
<!--<form action="">-->
<!--username:<input type="text">-->
<!--password:<input type="password">-->
<!--<input type="file">-->
<!--<input type="button" value="按钮">-->
<!--<input type="radio">篮球-->
<!--<input type="radio">足球-->
<!--<input type="radio" checked>肉球-->
<!--<select name="" id="">-->
<!--<option value="">111</option>-->
<!--<option value="" selected>222</option>-->
<!--<option value="">333</option>-->
<!--</select>-->
<!--</form>-->
<!--<p username="jason"></p>-->
<!--<span username="echo"></span>-->
<!--<input type="text" username="oscer">-->
<!--<ul>-->
<!--<li>1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
<!--<li>6</li>-->
<!--<li>7</li>-->
<!--<li>8</li>-->
<!--<li>9</li>-->
<!--<li>10</li>-->
<!--</ul>-->
<!--<div>-->
<!--<span class="c1">span</span>-->
<!--<span>span</span>-->
<!--<span>span</span>-->
<!--</div>-->
<!--<div>-->
<!--<p id="p1">p</p>-->
<!--<p>p</p>-->
<!--<p>p</p>-->
<!--</div>-->
</body>
</html>
