前端开发(六)
前端开发(六)
DOM操作标签
'''
在起变量名的时候 如果该变量指向的是一个标签 那么建议使用
xxxEle
eg:aEle\pEle\divEle\spanEle
'''
"""
标签可以有默认属性
比如 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识别标签语法
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<div id="d1">我是div</div>
<body>
<script>
var aEle = document.createElement('a') /*创建一个a标签*/
aEle.href = 'https://www.baidu.com/' /*绑定链接地址*/
aEle.innerText = '点我跳转百度' /*绑定文本*/
var divEle = document.getElementById('d1') /*绑定查找标签*/
divEle.append(aEle) /*尾部追加文本*/
</script>
</body>
</html>
获取值操作
input、option、textarea...
1.获取普通值数据
标签对象.value
2.获取文件数据
标签对象.value # 只能获取到文件路径 没啥用
标签对象.files # 结果是一个数组 可以通过索引获取具体文件对象
效果展示
属性操作
'''类属性操作'''
标签对象.classList # 查看所有的类属性
标签对象.classList.add() # 添加类属性
标签对象.classList.remove() # 移除类属性
标签对象.classList.contains() # 判断是否含有某个类属性
标签对象.classList.toggle() # 有则移除 无则添加
'''样式操作'''
标签对象.style.属性名
divEle.style.height = '800px'
效果展示
事件
"""
达到某个条件 自动触发的功能
eg:用户点击某个标签弹出警告框 双击某个标签提示信息
"""
# 如何给标签绑定事件
<!--方式一:标签内添加属性-->
<div id="d1" onclick="Click()">点我试试</div>
<div id="d2">点我试试</div>
<script>
function Click(){
alert('div1点击事件触发')
}
/*方式二:DOM操作标签*/
var divEle = document.getElementById('d2')
divEle.onclick = function (){
alert('div2点击事件触发')
}
'''
补充:事件函数中有一个固定的关键字 this指代当前被操作对象本身
'''
事件案例
1.数据校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<div>请输入用户名:
<input type="text" name="username" id="username">
</div>
<div>请输入密码:
<input type="password" name="pwd" id="pwd">
</div>
<input type="button" value="注册" id="btn"">
<script>
/*定义点击事件*/
/*查找按钮标签*/
var btnEle = document.getElementById('btn')
/*绑定事件*/
btnEle.onclick = function Click(pwd){
/*获取密码值*/
var pwd = document.getElementById('pwd').value
if (pwd.length>8){
alert('注册成功！')
}else {
alert('密码太短了')
}
}
</script>
</div>
</body>
</html>
效果展示
2.搜索框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="在此输入搜索内容">
<script>
/*获取标签*/
var iEle = document.getElementById('search')
/*绑定焦点事件*/
iEle.onfocus = function (){
this.value = '' /*this指代iEle本身*/
}
/*绑定失焦事件*/
iEle.onblur = function (){
this.value = '在此输入搜索内容' /*this指代iEle本身*/
}
</script>
</body>
</html>
效果展示
3.省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>省市:
<select name="" id="pro">
</select>
</p>
<p>市区:
<select name="" id="city">
</select>
</p>
<script>
/*查找标签*/
var proEle = document.getElementById('pro')
var cityEle = document.getElementById('city')
/*准备数据*/
var data = {
'安徽':['合肥','芜湖'],
'江苏':['南京','苏州'],
'山东':['济南','青岛'],
'浙江':['宁波','杭州'],
}
/*创建下拉框，把遍历的数据塞进去*/
for (var i in data){
opEle = document.createElement('option')
opEle.innerText = i
opEle.value = i
proEle.append(opEle)
}
/*文本域变化事件，改变市区*/
proEle.onchange = function (){
// 先清空市区下拉框中的内容
cityEle.innerHTML = '';
//获取当前省框的文本
var pro = this.value
for (var i in data[pro]){
opEle = document.createElement('option')
opEle.innerText = data[pro][i]
opEle.value = data[pro][i]
cityEle.append(opEle)
}
}
</script>
</body>
</html>
效果展示
jQuery简介
'''基本介绍'''
1.兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
2.封装了js代码
核心代码也就几十KB 加载速度快 极大的提升编写效率
3.宗旨
"Write less, do more."
4.Ajax交互
异步提交 局部刷新(django部分再学)
'''版本区别'''
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')
查找标签
'''基本选择器'''
$('#d1') # id选择器
$('.c1') # class选择器
$('p') # 标签选择器
$('div#d1') # 查找div下面的id为d1的标签
$('div,#d1,.c1') # 查找所有div，id=d1，class=c1的标签
$("x y") // x的所有后代y（子子孙孙）
$("x > y") // x的所有儿子y（儿子）
$("x + y") // 找到所有紧挨在x后面的y
$("x ~ y") // x之后所有的兄弟y
'''基本筛选器'''
$('ul li:first') # 查找第一个li
$('ul li:last') # 查找最后一个li
$('ul li:eq(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: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()
一个对象操作完毕之后还可以继续点击相同或不同的方法操作其他标签
核心:
对象在调用完一个方法之后返回的还是一个对象
"""
作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<input type="text" value="00:00:00" id="time">
<input type="button" value="开始计时" id="start" onclick="start(1)">
<input type="button" value="暂停计时" id="stop" onclick="start(2)">
<script>
/*开始计时点击事件*/
var time = 0
var timeEle = document.getElementById('time')
function start(type){
if (type == 1){
s = setInterval(data
,1000)
}else{
clearInterval(s)
}
}
function data() {
console.log(timeEle)
time++
var sec = time%60 //秒
var min = parseInt((time/60)%60) //分
var hour = parseInt((time/3600)) //时
//拼接时间
sec_str = str(sec)
min_str = str(min)
hour_str = str(hour)
date = hour_str+':'+min_str+':'+sec_str
timeEle.value = date
}
//时间转换函数
function str(num){
if (num<10){
return '0'+String(num)
}else{
return String(num)
}
}
</script>
</div>
</body>
</html>
效果展示
浙公网安备 33010602011771号