HTML基础（5）
DOM操作标签
# DOM操作标签概念
一个web页面的展示，是由html标签组合成的一个页面，dom对象实际就是将html标签转换成了一个文档对象。可以通过dom对象中js提供的方法，找到html的各个标签。通过找到标签就可以操作标签使页面动起来，让页面动起来
'''
在起变量名的时候 如果该变量指向的是一个标签 那么推荐使用
xxxEle
eg:aEle\pEle\divEle\spanEle
'''
# 动态创建一个a标签并添加到页面指定位置
var aEle = document.createElement('a') # 创建a标签
aEle.href = 'www.baidu.com/' # 设置href属性
aEle.innerText = '跳转到百度' # 设置文本内容
var divEle = document.getElementById('d1') # 查找标签
divEle.append(aEle) # 内部追加标签
# 标签可以有默认属性
比如 id class 等 设置的时候可以直接通过点的方式
divEle.id = 'd2'
# 也可以有自定义属性
比如 username password 等 设置的时候需要使用setAttribute
divEle.setAttribute('username','jason')
setAttribute()既可以设置自定义属性也可以设置默认属性
divEle.getAttribute("username") # 获取指定属性 jason
divEle.removeAttribute("usernama") # 移除指定属性
# innerText与innerHTML
获取值的时候
innerText只会获取文本内容
innerHTML获取文本和标签
设置值的时候
innerText不识别标签语法
innerHTML识别标签语法
获取值的操作
# 获取普通值数据
标签对象.value
<p>username: <input type="text" id="username"></p>
username.value 'dadadad'
# 获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
<p>文件: <input type="file" id="file"></p>
file.value # 'C:\\fakepath\\p1.webp'
file.files
'''
FileList {0: File, length: 1}
0: File {name: 'p1.webp', lastModified: 1625897288872, lastModifiedDate: Sat Jul 10 2021 14:08:08 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 16014, …}
length: 1
[[Prototype]]: FileList
'''
属性操作
'''类属性操作'''
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
# divEle.classList
DOMTokenList(3) ['c1', 'red', 'green', value: 'c1 red green']
# divEle.classList.remove('green')
DOMTokenList(2) ['c1', 'red', value: 'c1 red']
# divEle.classList.add('green')
DOMTokenList(3) ['c1', 'red', 'green', value: 'c1 red green']
# divEle.classList.contains('red')
true
'''样式操作'''
标签对象.style.属性名
divEle.style.height = '200px'
事件
# 事件的概念
事件：触发-响应机制。
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。
# 事件三要素
事件源:触发(被)事件的元素
事件名称: click 点击事件
事件处理程序:事件触发后要执行的代码(函数形式)
# 事件的基本使用
var box = document.getElementById('box');
box.onclick = function() {
console.log('代码会在box被点击后执行');
};
# 给标签绑定事件的方式一
<p onclick="showMsg()">点击触发相应事件!</p>
<script>
function showMsg() {
alert('点击后触发要执行的代码')
}
</script>
# 给标签绑定事件的方式二
<p>点击触发相应事件</p>
<script>
var pEle = document.getElementsByTagName('p')[0];
pEle.onclick = function () {
alert(this)
'''// 事件函数中有一个固定的变量名 this 指代当前被操作对象本身'''
alert('点击后触发要执行的代码')
}
</script>
事件案例分析
数据校验
获取用户名和密码 校验是否符合 并暂时相应提示
'''给普通按钮绑定一个点击事件 触发校验动作'''
<p>username:
<input type="text" id="username">
<span style="color: red" id="user_error"></span>
</p>
<p>password:
<input type="password" id="password">
<span style="color: red" id="pwd_error"></span>
</p>
<input type="button" value="提交" id="btn">
<script>
let btnEle = document.getElementById('btn')
btnEle.onclick = function (){
let usernameVal = document.getElementById('username').value;
let passwordVal = document.getElementById('password').value;
if (usernameVal === 'jason'){
let usernameEle = document.getElementById('user_error')
usernameEle.innerText = '用户名不能为jason'
}
if (passwordVal ==='123'){
let passwordEle = document.getElementById('pwd_error')
passwordEle.innerText = '密码不能是123'
}
else{
alert("提交成功！")
}
}
</script>
搜索框案例
# focus() 方法用于为元素设置焦点（如果可以设置）
# 使用 blur() 方法来移除元素焦点
<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简介
# jQuery简介
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码（js框架）
JQuery封装了JavaScript常用的功能代码，优化了HTML文档操作、事件处理、动画设计
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新(django部分再学)
# 版本区别
(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！
一般的项目使用1.x版本
2.x版本很少人使用
3.x 学习直接使用最新版即可
'''
jquer-xxx.js是开发版本
jquer-xxx.min.js是生产版本（去掉了换行，文件更小，但严重影响阅读
'''
# 下载方式
下载地址:https://jquery.com/
jQuery必须先导入才可以使用(html页面上得写导入语句>>>:容易忘)
jQuery本身就是一个js文件 里面写了一些js代码而已
# 导入方式
1.本地jQuery文件
不会收到网络影响
2.CDN加速服务
需要确保有互联网
min.js 压缩之后的文件 容量更小
.js 没有压缩的文件 容量稍大
JQuery对象和JavaScript对象的区别
<div></div>
<div></div>
<script>
# // JS
var divs = document.getElementsByTagName("div");
console.log("JS:" + divs);
# // JQ
var jq_divs = $("div");
console.log("JQ:" + jq_divs);
jq_divs.text("JQ对象操作更方便");
# // JS对象→JQ对象(加$)
var jq_js2jq = $(divs);
console.log(jq_js2jq);
jq_js2jq.text("JS对象转JQ对象");
</script>
JQuery查找标签
基本选择器
# id选择器
$("#id")
#class选择器
$(".className")
#标签选择器
$("tagName")
#配合使用
$("div.c1") // 找到有c1 class类的div标签
#组合选择器：
$("#id, .className, tagName")
层级选择器
# x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
基本筛选器
# 基本方法
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
# 代码示例：
$('ul:has(#d1)') # 查看内部含有id是d1的ul标签
$("div:has(h1)")// # 找到div标签中含有h1的标签
属性选择器
[attribute=value]// 属性等于
[attribute!=value]// 属性不等于
$('[name]')
$('[name="jason"]')
$('div[name="jason"]') # 查找name = jason的div标签
表单筛选器
'''专门针对form表单内的标签'''
#基本方法：
:text
:password:file:radio
:checkbox
:submit
:reset
:button
# 代码示例：
$('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()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
'''在python中需要返回一个对象即可实现链式操作的方法'''
浙公网安备 33010602011771号