今日内容概要
1 > DOM操作标签
1.1 > 动态创建一个a 标签
动态创建一个a 标签并添加到页面指定位置操作如下：
第一步：创建一个a标签
let aEle = document.createElement('a')
第二步：设置href属性
aEle.href = 'http://www.4399.com/' # 讲a标签设置地址为搜狗首页
第三步：设置文本内容
aEle.innerText = '点我去玩小游戏' # 设置点击文本
第四步：指定a标签位置在某标签后面
var divEle = document.getElementById # 查找id为d1的div标签
divEle.append(aEle) # 在尾部追加a标签
操作效果如下图片：
1.2 > 默认与自定义属性
标签可以有默认的属性，例如id 、class 等我们在对这些属性设置的时候可以直接通过点的方式，进行设置。例如给div标签设置id值为d1可以写成这样。
divEle.id = 'd1'
标签除了默认属性还有可以有自定义属性。比如我们自己设置的像username、password等，在设置的时候就需要使用setAttribute的方法，操作如下：
divEle.setAttribute('username', 'jason')
setAttribute的方法不仅可以用来设置自定义属性也可以用来设置默认属性。
1.3 > getAttribute和removAttribute 方法
类似于setAttribute的方法还有 getAttribute、和removAttribute。
divEle.getAttribute("age") # 获取指定属性
'''
若标签存在该属性 返回属性的值
若标签不存在该标签 返回null
'''
divEle.removeAttribute("age") # 移除指定属性
'''
直接移除标签存在的该属性
'''
1.4 > innerText与innerHTML
在获取值的时候。
innerText 只会获取文本内容
innerHTML 获取文本和标签
在设置值的时候。
innerText不识别标签语法
innerHTML识别标签语法
2 > 获取值操作
一般网页需要获取用户输入内容的标签有几种，input、option、texttartea …
当用户输入完成那么我们怎么去获取到这些值呢？ 具体操作如下：
2.1 > 获取普通值数据
标签对象.value
2.2 > 获取文件数据
标签对象.value # 只能获取到文件路径
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
3 > 属性操作
3.1 > 类属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
3.2 > 样式操作
标签对象.style.属性名
divEle.style.height = '800px'
4 > 事件
所谓的事件其实就是达到某个条件自动触发的功能。例如：用户点击某个标签弹出警告框 双击某个标签提示信息。
给标签绑定的方式有两种。操作如下：
方式一：
<p onclick="showMsg()"> 点我有惊喜 </p>
点我有惊喜
<script>
function showMsg() {
alert('奖励如花公主给你')
}
</script>
</p>
方式二(推荐使用)：
<p> 点我有惊喜</p>
<script>
let pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function (){
alert('大爷 如花来了')
}
</script>
5 > 事件案例
5.1 > 数据校验
利用事件知识，获取用户名和密码时校验是否符号规定，并且有暂时相应的提示。
<body>
<p>
username: <input type="text" id="username">
<span style="color: red" id="username_error"></span>
</p>
<p>
password: <input type="text" id="password">
<span style="color: red" id="password_error"></span>
</p>
<input type="button" value="提交" id="btn">
<script>
// 1.查找按钮标签
let btnEle = document.getElementById('btn')
// 2.绑定点击事件
btnEle.onclick = function (){
// 3.获取用户名和密码
let userNameVal = document.getElementById('username').value;
let passWordVal = document.getElementById('password').value;
// 4.判断
if (userNameVal === 'bob'){
// 5.给用户名下面的span标签设置文本内容
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名不能是bob'
}
if (passWordVal === '123') {
// 6.给密码输入框下的span标签设置文本内容
let pwdSpanEle = document.getElementById('password_error')
pwdSpanEle.innerText = '密码不能是123'
}
}
</script>
</body>
5.2 > 搜索框案例
利用事件知识，编写当用户没点击搜索框的时候有默认搜索值，当用户点击搜索可以直接搜索想要搜索的关键字。
<input type="text" id="d1" value="默认搜索的内容">
<script>
// 1.查找input标签
let inpEle = document.getElementById('d1')
// 2.绑定聚焦事件
inpEle.onclick = function (){
// 3.清空value值
this.value = ''
}
// 4.绑定失焦事件
inpEle.onblur = function (){
// 5.添加一个全新的value值
this.value = '小霸王游戏机'
}
</script>
没有点击之前的样式
没有点击之后的样式
搜索完成之后的样式
5.3 > 省市联动
省市联动意思就是在一个页面当中当用户选择了某一个省份下面选择市的选框中的内容自动变成该省份下的市级城市集合。操作如下：
<body>
<p>
省份:
<select name="" id="sf_pro">
</select>
</p>
<p>
市区:
<select name="" id="city_pro">
</select>
</p>
<script>
// 1.查找省份和市区标签对象
let sf_proEle = document.getElementById('sf_pro')
let city_proEle = document.getElementById('city_pro')
// 2.自定义数据
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["合肥市", "芜湖市"],
"上海": ["静安", "黄埔"],
"深圳": ["龙湖", "罗湖"]
};
// 3.获取自定义对象中的所有key并添加至省份下的下拉框中
for (let proVal in data){
// 3.1 创建option标签
opEle = document.createElement('option');
// 3.2 给option标签添加文本（自定义对象中的所有key）
opEle.innerText = proVal
// 3.3 给option标签添加值 （自定义对象中的所有key）
opEle.value = proVal
// 3.4 添加至第一个下拉框中
sf_proEle.append(opEle)
}
// 4.文本域变化事件
sf_proEle.onchange = function (){
// 4.1 先清空市区下拉框的内容
city_proEle.innerHTML = '';
let currentPro = this.value;
let currentCityList = data[currentPro]
// 4.2 循环获取市区数据
for(let i=0;i<currentCityList.length;i++){
// 4.3 创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i];
// 4.4 添加至第二个下拉框中
city_proEle.append(opEle)
}
}
</script>
</body>
6 > jQuery简介
6.1 > 基本介绍
1 > jQuery兼容多浏览器，但是以前的版本对于IE浏览器很多时候都需要重新写一份代码操作。
2 > 封装了js代码。核心代码只有几十kb ，加载速度很快，将极大的提升编写效率。
3 > 宗旨：“Write less, do more.”
4 > Ajax交互。 异步提交，局部刷新。
6.2 > 版本区别
jQuery有3种版本分别是1.x 、2.x、3.x。
其中1.x 兼容IE678。
2.x:不兼容IE678
3.x:不兼容IE678
6.3 > 下载使用
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
6.4 > 导入方式
方式一：
在网络上下载好jQuery文件，直接导入文件
'''
该方式不会受到网络的影响，没网的时候也可以编写
'''
方式二：
使用CDN加速服务 （直接百度搜索这个网址，导入jQuery文件地址）
'''
该方式需要有互联网支持，
min.js 压缩之后的文件 容量小
.js 没有压缩的文件 容量稍大
'''
6.5 > 基本使用
将页面上的两个p标签文本内容一个变成红色 一个变成绿色，分别使用原生js代码和jQuery代码操作。
原生的js代码
// 先查找 p 标签
let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'
jQuery代码
$('#d1').css('color', 'red').next().css('color', 'green')
7 > jQuery查找标签
7.1 > 基本选择器
$('#d1') # id选择器
$('.c1') # class选择器
$('p') # 标签选择器
$('div#d1')
$('div,#d1,.c1')
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
7.2 > 基本筛选器
$('ul li:first') # 查找第一个li标签
$('ul li:last') # 查找最后一个li标签
$('ul li:eq(2)') # 查找从索引0开始到2结束的li标签
$('ul li:odd') # 查找奇数索引的li标签
$('ul li:even') # 查找偶数索引的li标签
$('ul li:gt(2)') # 查找大于索引2的li标签
$('ul li:lt(2)') # 查找小于索引2的li标签
$('ul li:not(li)') # 获取ul 当中不是li的标签
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签
7.2 > 属性选择器
$('[name]')
$('[name="jason"]')
$('div[name="jason"]')
7.3 > 表单筛选器
该筛选器是专门针对form表单内的标签。
$('input[type="text"]') 筛选器简化 $(':text')
'''
若查找的不是type当中的属性可能查找到的结果有些小偏差
例如：
$(':checked') 时会将option也找到
若查找的是自定义标签可能查找到的结果有些小偏差
例如：
$(':selected') 只会找到option标签
'''
7.4 > 筛选器方法
1 > 同级别往下查找
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") # 直到i2这个标签结束
2 > 同级别往上查找
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2") # 直到i2这个标签结束
3 > 查找父标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil() # 直到某个父标签结束
4 > 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)
6 > 链式操作
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心: 对象在调用完一个方法之后返回的还是一个对象
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
