-
DOM操作标签
-
事件绑定
-
jQuery框架/类库
内部封装了js代码 是的编写更加简单方便
document.getElementById('d1') $('#d1')
DOM操作标签
'''
在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
xxxEle
eg:aEle\pEle\divEle\spanEle
'''
# 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a') # 创建a标签
aEle.href = 'https://www.sogo.com/' # 设置href属性
aEle.innerText = '点我去搜狗' # 设置文本内容
var divEle = document.getElementById('d1') # 查找标签
divEle.append(aEle) # 内部追加标签
"""
标签可以有默认属性
比如 id class 等 设置的时候可以直接通过点的方式
divEle.id = 'd1'
也可以有自定义属性
比如 username password 等 设置的时候需要使用setAttribute
divEle.setAttribute('username','jason')
setAttribute()既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("age") 获取指定属性
divEle.removeAttribute("age") 移除指定属性
"""
# innerText与innerHTML
获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法
获取值操作
input、option、textarea...
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
'''类属性操作'''
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
'''样式操作'''
标签对象.style.属性名
divEle.style.height = '800px'
事件
"""
达到某个条件 自动触发的功能
eg:用户点击某个标签弹出警告框 双击某个标签提示信息
"""
# 如何给标签绑定事件
方式1:
<p onclick="showMsg()">快来点我 点我 点我!!!</p>
<script>
function showMsg() {
alert('猴急猴急的干啥 一会儿让你好看!!!')
}
</script>
方式2:
<p>快来点我 点我 点我!!!</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert('我来了 准备好了吧')
}
</script>
'''
补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身
'''
事件案例
# 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">