DOM文档对象模型
获取标签值操作
1.操作标签：input、select、textarea
2.语法结构：查找到的标签.value
3.实操
let iEli = document.getElementById("d1"); //查找标签(也可通过类 属性)
console.log(iELI.value); //获得标签值
VM171:2 秋天到啦！
JS类属性操作
1.className：获取所有标签下的类名(字符串)
2.classList.remove(cls)：删除指定的类
3.classList.add(cls)：添加类
4.classList.contains(cls)：存在返回true 不存在返回false
5.classList.toggle(cls)：存在就删除 否则添加
JS样式操作
1.对于CSS属性操作 使用style.属性名
注：对于属性名中存在-(中横杠)取掉中横杠并将第一个字母大写
let cEli = document.getElementsByClassName("c4")[0];
cEli.style.backgroundColor = "red";
'red'
事件
1.定义：可以理解为给html标签绑定一些额外的功能(能够触发JS代码运行)
2.分类：
| 名称 | 作用 |
|---|---|
| onclick | 单击某个对象时调用的事件句柄 |
| ondblcick | 双击某个对象时调用的事件句柄 |
| onfocus | 元素获得焦点 //输入框 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 某个键盘键被按下 |
| onkeypress | 某个键盘键按下松开 |
| onkeyup | 某个键盘架被松开 |
| onload | 一张页面或一副图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标移到某元素上 |
| onselect | 在文本框中的文本被选中时发生 |
| onsubmit | 确认按钮被点击 使用的对象是form |
3.绑定事件的方式
3.1 提前写函数 标签内部指定
<body>
<div>
<form action="">
<input type="button" value="点我" onclick = func()>
</form>
</div>
<script>
function func(){
alert("天气凉爽啦 🌏不爆炸")
}
</script>
</body>
3.2 先查找标签 然后批量绑定
<body>
<div>
<button id="d1">按我</button>
</div>
<script>
let dEli = document.getElementById("d1")
dEli.onclick = function(){
alert("锤爆他的狗头")
}
</script>
</body>
4.事件中的关键字this：当前被操作的标签对象
let dEli = document.getElementById("d1")
dEli.onclick = function(){
alert("锤爆他的狗头")
}
console.log(this)
5.JS事件案例
5.1 校验用户输入
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: firebrick;
}
</style>
</head>
<body>
<p>
<input id="username" type="text" name="username">
<span class="error"></span>
</p>
<p>
<input id="password" type="password" name="password">
<span class="error"></span>
</p>
<div>
<button id="d1">提交</button>
</div>
<script>
//获得提交标签
let dEle = document.getElementById("d1")
dEle.onclick = function func() {
//获得用户输入标签
let uEle = document.getElementById("username").value
let pEle = document.getElementById("password").value
if (uEle === "lili") {
// alert("用户名不能为lili")
//获得提示信息标签
let eEle = document.getElementsByClassName("error")[0]
//添加提示信息
eEle.innerText = "用户名不能为lili"
}
if(pEle.length === 0){
// alert("密码不能为空")
let eEle = document.getElementsByClassName("error")[1]
eEle.innerText = "密码不能为空"
}
}
</script>
</body>
注：eEle.innerText提示信息需要添加 id包class
5.2 省市联动
body>
<p>
省份：<select name="" id="province"></select>
城市：<select name="" id="city"></select>
</p>
<script>
let info={
"上海":["上海","浦东新区"],
"河南":["郑州","金水区"],
"甘肃":["兰州","城关区"],
"北京":["北京","西城区"]
}
//获得省份与城市的标签信息
let proEle = document.getElementById("province")
let citEle = document.getElementById("city")
for(let pro in info){
//创建option标签
let optBle = document.createElement("option")
optBle.innerText = pro //添加数据
//添加value属性
optBle.setAttribute("value",pro) //添加属性时后面要跟数据
//给select标签添加option属性
proEle.append(optBle)
}
//给省份创建联动
proEle.onchange = function func(){
//清空前一次的城市信息
citEle.innerText = ''
//获得用户选择的省份信息
let proInfo = this.value //this表示当前操作的对象
//根据省份数据获得城市信息
let citInfo = info[proInfo]
//给城市信息添加option标签
let opBle = document.createElement("option")
opBle.innerText = citInfo
//给option属性添加value值
opBle.setAttribute("value",citInfo)
//给城市select标签添加option属性
citEle.append(opBle)
}
</script>
</body>
jQuery类库
1.作用：兼容多浏览器的JavaScript库 极大的简化JavaScript编程
2.宗旨：write less， do more
3.导入方法：本地导入 提前下载文件并导入
网络CDN服务 只要计算机能够联网就可以直接导入 bootcdn
4.jQuery内容：选择器、筛选器、样式操作、文本操作、属性操作、文档处理、事件、动画效果、插件
5.jQuery版本：1.x、2.x、3.x
6.jQuery对象：通过jQuery包装DOM对象后产生的对象 jQuery对象是jQuery独有的
方法：例如$(“#i1”).html()
4.jQuery基本使用
4.1 JS与jQuery语法对比
1.查找标签
选择器：id选择器：$("#id")
标签选择器：$("tagName")
类(class)选择器：$(".className")
组合选择器： $("#id, .className, tagName")
属性选择器：x和y可以为任意选择器
$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y
jQuery选择器查找标签之后的结果与js有何区别
结果集都是数组但是功能有区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
2.实操
2.1 标签对象无法使用jQuery的方法
$('p')[0].css('color','red');
VM155:1 Uncaught TypeError: $(...)[0].css is not a function
at <anonymous>:1:11
$('p')[0].style.color = 'red';
'red'
2.2 jQuery对象可以调用jQuery提供的方法
$('p').css('color','red');
jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
$('p').first().css("color","green");
jQuery.fn.init [p, prevObject: jQuery.fn.init(3)]
$($('p')[0]).css("color","green");
jQuery.fn.init [p]
3.操作标签
样式操作：
addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加
位置操作：
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
尺寸操作：
height()
width()
innerHeight()
innerWidth()
outerHeight()
outerWidth()
文本操作：
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
6.表单筛选器
1.表单
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
2.表单对象属性
:enabled
:disabled
:checked
:selected
注：$(':checked')
$('input:checked')
作业
2.尝试编写JS时间案例
页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
思考如何解决
<body>
<p>
<input id="time" type="text" value="">
</p>
<p>
<button d1="start" name="开始" onclick="startClick()">开始</button>
<button class="end" onclick="endClick()">结束</button>
</p>
<script>
//获得input标签
let nowBle = document.getElementById('time')
let flush = false // 是否刷新时间
// 睡1s
function sleep1(ms, callback) {
setInterval(callback, ms)
}
// 刷新时间
function flushTime () {
if (flush) {
// 1. 把打开页面时的时间写入input
let now = new Date()
nowBle.value = now.toLocaleString()
}
}
// 加载后自动写入一次当前时间
let now = new Date()
nowBle.value = now.toLocaleString()
sleep1(1000, flushTime)
//2. 开始按钮的点击事件，刷新时间
function startClick () {
console.log("开始刷新")
flush = true
}
// 停止按钮的点击事件，停止刷新
function endClick () {
console.log("停止刷新")
flush = false
}
</script>
</body>
搜索框案例
input内有默认的文本值 用户一旦选择该input想做内容修改
就提前把内容清空
<body>
<p>
<input id="d1" type="text" value="瓜田里的猹蹦跶的很欢" onclick="clearinput()">
</p>
<script>
//获得文本框数据
let dEle = document.getElementById("d1")
function clearinput(){
document.getElementById("d1").value = ''
}
</script>
</body>
posted on
浙公网安备 33010602011771号