DOM操作标签 jQuery介绍 jQuery基础语法
day43
如何起变量名 如果该变量指向的是一个标签
添加后缀名：Ele
创建a标签 就可以这样写：aEle
eg:
aEle\pEle\divEle\spanEle如何动态一个a标签并添加到页面指定位置
操作流程：
打开网站>>>右键检查>>>点击Console（控制台）
编写代码流程：
var aEle = document.createElement('a') # 创建a标签
aEle.href = 'http://www.baidu.com/' # 设置href属性
aEle.innerText = '点我找度娘' # 设置文本内容
var divEle = document.getElementById（'d1'） # 查找标签
divEle.append(aEle) # 内部追加标签标签属性
标签可以有默认属性
比如id class 等 设置的时候可以直接通过点的方式
divEle.id = 'd1'
标签还可以自定义属性
比如 username password 等 设置的时候需要使用setAttribute
setAttribute() # 既可以设置自定义属性也可以设置默认属性
divEle.setAttribute('username','anna')
divEle.getAttribute(''age'') # 获取制定属性
divEle.removeAttribute(''age''). # 移除制定属性
innerText与innerHTML 两者差别
获取值的时候
innerText 只会获取文本内容
innerHTML 可以获取文本和标签
设置值的时候
innerText 不会识别标签语法 比如输入一个<h1>文本内容</h1> 它就直接打印<h1>文本内容</h1>
innerHTXL 可以识别标签语法 将你输入的标题格式展示出来获取值操作
input、option、textarea...获取值
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 如果是单个文件则加[0] 多个则可以不加 结果是一个数组 可以通过索引获取具体文件对象
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加修改样式操作
标签对象.style.属性名
divEle.style.height = '800px' # 修改样式高度
HTML 4.0 的新特性之一是HTML 事件触发浏览器中的动作（action），比如用户点击某个HTML元素时启动一段 JS代码
达到某个条件 自动触发的功能
eg：
用户点击某个标签 弹出了一个警告框
双击某个标签 弹出了一个提示信息框
如何给标签绑定事件
单击p标签 弹出提示框
方式一
<body>
<p onclick="showMsg()">床说：快来睡我 睡我 睡我！！！</p>
<script>
function showMsg() {
alert('倒头就栽进温柔乡 谁也叫不醒我！！！')
}
</script>
</body>方式二 推荐这种
<body>
<p>床说：快来睡我 睡我 睡我！！！</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function(){
alert（this） # 事件函数中有一个固定的变量名 this 指代当前被操作对象本身（pEle）
alert('来了来了')
}
</script>
</body>事件 相关案例
'''给普通按钮绑定一个点击事件 触发校验动作'''
数据校验
获取用户名和密码 校验是否符合 并暂时相应提示
<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.查找按钮标签
var btnEle = document.getElementById('btn')
// 2.绑定点击事件
btnEle.onclick = function () {
// 3.获取用户名和密码
let userNameVal = document.getElementById('username').value;
let passWorrdval = document.getElementById('password').value;
// 4. 判断
if(userNameVal === 'anna'){
// 给用户名下面的span标签设置文本内容
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名不能是anna！！！'
}
if(passWorrdval === '123'){
// 给密码下面的span标签设置文本内容
let userSpanEle = document.getElementById('password_error')
userSpanEle.innerText ='密码不能是123！！！'
}
}
</script>搜索框 案例
<input type="text" id="d1" value="默认搜索的内容">
<script>
// 1.查找input标签对象
var inputEle = document.getElementById('d1')
// 2.绑定一个聚焦事件
inputEle.onfocus = function () {
// 3.清空value值
this.value = ''
}
// 4.绑定一个失焦事件
inputEle.onblur = function () {
// 5.添加一个全新的value值
this.value = '小霸王游戏机'
}
</script>省市联动
<p>省市:
<select name="" id="pro">
</select>
</p>
<p>市区:
<select name="" id="city">
</select>
</p>
<script>
let proEle = document.getElementById('pro');
let cityEle = document.getElementById('city');
// 1.自定义数据(以后有现成的组件实现)
let data = {
"河北": ["廊坊", "邯郸"],
"北京": ["朝阳区", "海淀区"],
"山东": ["威海市", "烟台市"],
"安徽": ["合肥市", "芜湖市"],
"上海": ["静安", "黄埔"],
"深圳": ["龙湖", "罗湖"]
};
// 2.获取自定义对象中所有的key并添加到省市下拉框中
for (let proVal in data) {
// 2.1.创建option标签
opEle = document.createElement('option');
opEle.innerText = proVal;
opEle.value = proVal
// 2.2.添加到第一个下拉框中
proEle.append(opEle)
}
// 3.文本域变化事件
proEle.onchange = function () {
// 3.0.先清空市区下拉框中的内容
cityEle.innerHTML = '';
let currentPro = this.value;
let currentCityList = data[currentPro];
// 3.1.循环获取市区数据
for (let i=0;i<currentCityList.length;i++){
// 3.2.创建option标签
opEle = document.createElement('option');
opEle.innerText = currentCityList[i];
opEle.value = currentCityList[i]
// 2.2.添加到第一个下拉框中
cityEle.append(opEle)
}
}
</script>
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。
jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。版本区别
兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
1.x:兼容IE678
2.x:不兼容IE678
3.x:不兼容IE678 学习直接使用最新版即可
如何下载
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已导入方式
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大基本使用
需求：将页面上的两个p标签文本内容一个变成红色 一个变成绿色
原生的js代码
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')jQuery基础语法
基本选择器：
id选择器：
$("#id")
标签选择器：
$("tagName")
class选择器：
$(".className")
配合使用：
$("div.c1") // 找到有c1 class类的div标签
层级选择器：
x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y基本筛选器：
$('ul li:first') # 查看ul标签中第一个li标签
$('ul li:last') # 查看ul标签最后一个li标签
$('ul li:eq(2)') # 查看ul标签中索引为2的li标签
$('ul li:odd') # 查看ul标签中索引为偶数的li标签
$('ul li:even') # 查看ul标签中索引为偶数的li标签
$('ul li:gt(2)') # 查看ul标签中索引大于2的li标签
$('ul li:lt(2)') # 查看ul标签中索引小于2的li标签
$('ul li:not(li)') # 查看ul标签中不是li的的li标签
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签属性选择器
$('[name]')
$('[name="jason"]')
$('div[name="jason"]')表单筛选器:专门针对form表单内的标签
$('input[type="text"]')
筛选器简化形式
$(':text')
$(':checked') # 会将option也找到
$(':selected') # 只会找到option标签筛选器方法
同级别往下查找
$("#id").next() # 找同级别下一标签
$("#id").nextAll() # 找同级别下所有标签
$("#id").nextUntil("#i2") # 同级别下找到id为i2的标签同级别往上查找
$("#id").prev() # 找同级别上一标签
$("#id").prevAll() # 找同级别上所有的标签
$("#id").prevUntil("#i2") # 找同级别上直到id为i2的标签查找父标签
$("#id").parent() # 查找父标签
$("#id").parents() # 查找所有的父标签
$("#id").parentsUntil() # 查找所有的父标签，直到遇到匹配的那个父标签为止。 查找儿子和兄弟
$("#id").children(); # 儿子们
$("#id").siblings(); # 兄弟们(同级别上下所有标签)链式操作
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
