概要
DOM操作标签
事件绑定
jQuery框架/类库
类库内部封装了js代码 使得js代码编写更加简单方便
document.getElementById('d1') 可以简写为:$('#d1')内容
1、DOM操作标签（节点）
首先第一个学的是Dom可以凭空动态创建标签
1.动态创建一个a标签并添加到页面指定位置
"""我们在使用js编程起变量名的时候 如果该变量指向的是一个标签 那么我们建议使用 xxxEle(element 表示标签的意思)
比如: aEle/pEle/divEle/spanEle"""
第一步:动态创建一个a标签 空的a标签
var aEle = document.createElement('a')
第二步:如何给a标签添加文本内容和设置href属性
aEle.href = 'https://www.sogo.com/' # 设置属性
aEle.innerText = '点我去搜狗' # 在a标签内添加文本内容
第三步:因为需要添加到div标签内 所以先查找div标签 然后再div内部追加a标签
var divEle = document.getElementById('d1') # 查找div标签
divEle.append(aEle) # div内部追加a标签
ps:添加的这个a标签只能在网页上使用 不会在pycharm中文档内保存 不是一个持久化的过程 临时创建的过程
其中通过dom操作还可以删除节点（remove）、替换节点（replace） 这两种基本不会用到 感兴趣可以去学习一下
# 需要注意的是:
你在给标签设置属性的时候 需要注意标签有默认属性、也有自定义属性
标签默认属性(自带):比如id、class等 设置的时候可以直接通过点的方式
比如:divEle.id = 'd1'
标签自定义属性(外部添加):比如 username、password等 设置的时候需要使用setAttribute
添加方式:在div标签内添加一个username='jason'的属性 divEle.setAttribute('username','jason')
ps:在添加标签属性时的关键字setAttribute()既可以设置自定义属性也可以设置默认属性
其他:
divEle.getAttribute('age') 获取指定属性
divEle.removeAttribute('age') 移除指定属性
# 其中在标签内设置文本的时候 有俩个东西需要注意区分(innerText与innerHTML)
innerText与innerHTML
获取值的时候
innerText 只会获取标签内所有文本内容
innerHTML 会获取标签内的所有的文本与标签
设置值的时候
innerText 不识别标签语法
innerHTML 识别标签语法2、获取标签内值的操作
获取标签内的数据内容
input、option、textarea......
1.获取普通值数据 如果标签内只有普通数据
标签对象.value
2.获取文件数据 如果标签内含有文件数据
标签对象.value # 只能获取到文件所在的路径 不能获取到文件数据
标签对象.files # 如果是单个文件 则加索引0,即标签对象.files[0] 多个则可以不加索引
结果是一个数组 可以通过索引获取具体文件对象3、标签内class的属性操作
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
也可以利用js代码通过标签对样式进行操作 样式操作
标签对象.style.属性名
divEle.style.height = '800px'4、事件
事件是指:达到某个条件 自动触发的功能
eg:用户点击某个标签弹出警告框 双击某个标签提示信息等
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
# 如何给标签绑定事件 目的是为了让标签具备特定的功能 有两种方式
方式1: 标签通过单击(onclick)绑定警告框等功能
<p onclick="showMsg()">快来点我 点我 点我!!!</p>
<script>
function showMsg() {
alert('猴急猴急的干啥 一会儿让你好看!!!')
}
</script>
方式2:给标签绑定事件的方式 让标签具备特定的功能 方式2比方式1更灵活
<p>快来点我 点我 点我!!!</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert('我来了 准备好了吧')
}
</script>
ps:在触发标签事件操作的时候 这个函数function,其实这个函数有一个默认固定的参数this 这个this其实指代的触发当前事件操作的对象(this指代当前被操作对象本身)5、事件案例
# 1.数据校验
获取用户名和密码 校验是否符合 并暂时相应提示
'''给普通按钮绑定一个点击事件 触发校验动作'''
<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 === 'jason'){
// 给用户名下面的span标签设置文本内容
let userSpanEle = document.getElementById('username_error')
userSpanEle.innerText = '用户名不能是jason!!!'
}
if (passWordVal === '123'){
// 给密码下面的span标签设置文本内容
let userSpanEle = document.getElementById('password_error')
userSpanEle.innerText = '密码不能是123!!!'
}
}
</script>
# 2.搜索框案例
<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>
# 3.省市联动
<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>6、jQuery简介
类似于python中的模块 本身封装了一些功能 功能比python中的模块功能更多一些 是前端第三方的类库
基本介绍:
1.jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
前端遇到最大的一个问题就是浏览器兼容的问题
针对IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作 因为该浏览器比较有历史 有时候针对一些js代码无法响应 所以需要重新写一份代码
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
它的宗旨就是：“Write less, do more.
4.与Ajax交互
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程 学到django部分再学
jQuery内容:1.选择器 2.筛选器 3.样式操作 4.文本操作 5.属性操作 6.文档操作 7.事件 8.动画效果 9.插件 10.each、data、Ajax
jQuery版本
1.x: 兼容IE678 使用最为广泛的，官方只做BUG维护，功能不再新增
2.x:不兼容IE678 很少有人使用 功能不再新增
3.x：不兼容IE678 只支持最新的浏览器 学习直接使用最新版
下载使用
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句 在平时用的时候容易忘记)
jQuery本身就是一个js文件 里面写了一些js代码而已
jQuery的两种导入方式
1.本地jQuery文件
不会受到网络影响 但是每次使用前需要先将文件的路径打开
2.CDN加速服务:CDN加速就是把原服务器上数据复制到其他服务器上，用户访问时，那台服务器近访问到的就是那台服务器上的数据。CDN加速优点是成本低，速度快。适合访问量比较大的网站 比如:bootCDN
需要确保有互联网 比较方便、快捷
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')7、查找标签
'''基本选择器'''
$('#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
'''基本筛选器'''
$('ul li:first')
$('ul li:last')
$('ul li:eq(2)')
$('ul li:odd')
$('ul li:even')
$('ul li:gt(2)')
$('ul li:lt(2)')
$('ul li:not(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").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
# 查找父标签
$("#id").parent()
$("#id").parents()
$("#id").parentsUntil()
# 查找儿子和兄弟
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们(同级别上下所有标签)
"""
链式操作
$('#d1').parent().parent().parent()
$('#d1').parent().parent().next().parents()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
"""
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
