JS获取用户输入
普通数据(输入、选择)：
elementNode.value
适用于以下标签：
input select textarea
eg:var iEle = document.getElementById("i1")
console.log(iEle.value)
文件数据(上传文件)：
elementNode.files
elementNode.files[0]
适用于用户上传file
JS类属性操作
标签对象.classList
classList.remove(cls) 删除指定类
classList.add(cls) 添加类
classList.contains(cls) 存在返回true，否则返回false
classList.toggle(cls) 存在就删除，否则添加
JS样式操作
语法：obj.style.属性名
eg:
obj.style.margin
obj.style.maginTop // 对于中间含横线的属性(magin-top),去掉横线，并将横线后第一个字母换成大写
事件
1.概念：事件可以理解为给html绑定了一些额外的功能，例如点击某个HTML元素之后触发某一段js代码的运行。 2.常用事件
| 事件 | 描述 |
|---|---|
| onclick | 当用户单击某个对象时调用 |
| ondbclick | 双击某个对象 |
| onfocus | 元素获得焦点 |
| onblur | 元素失去焦点 |
| onchange | 域的内容被改变 |
| onkeydown | 某个按键按键被按下 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某个键盘按键被松开 |
| onload | 一张页面或图片完成加载 |
| onmousemove | 鼠标移动 |
| onmousedown | 鼠标按钮按下 |
| onmouseover | 鼠标移到某个元素之上 |
| onselect | 文本框的文本被选中 |
| onsubmit | 确认按钮被点击，仅作用域form |
3.绑定事件的两种方式
<input type="button" value="点我" ondblclick="func1()">
<button id="d1">按我</button>
<script>
// 第一种：提前写好函数 标签内部指定
function func1(){
alert(123)
}
// 第二种：先查找标签再批量指定
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){
alert(123)
}
</script>
4.事件中的关键字this
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){
alert(123)
console.log(this)
// this指代的是当前被操作的对象 类似于面向对象self
}
5.等待HTML文档加载完毕之后再执行一些代码
window.onload = function(){
页面js代码
// 此方法可以让script标签写在head标签内，而且后于html代码渲染。
}
JS事件案例（定时器）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="i1">
<button id="b1">开始</button>
<button id="b2">结束</button>
<script>
var t;
function showTime() {
var i1Ele = document.getElementById('i1');
var time = new Date();
i1Ele.value = time.toLocaleString();
}
showTime();
var b1Ele = document.getElementById('b1');
b1Ele.onclick = function (ev) {
if (!t){
t = setInterval(showTime,1000)
}
};
var b2Ele = document.getElementById('b2');
b2Ele.onclick = function (ev) {
clearInterval(t);
t = undefined
};
</script>
</body>
</html>
jQuery类库
概念：兼容多浏览器的JavaScript库(本质是一份js文件)
极大地简化了js编程。
注意使用JQuery必须先导入
1.在项目文件夹中复制一份JQuery文件
2.或者在head标签中导入JQuery文件的CDN链接(bootcdn)
https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
jQuery基本使用
$() 本质是 jQuery()
1.jQuery对象：
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
$("#i1").html() 的意思是：获取id为i1的元素的html代码，其中.html()是jQuery里的方法。等同于js里的：
document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
我们在声明一个jQuery对象变量的时候在前面加上"$"
2.基础语法
$(selector).action()
3.选择器
id选择器
$("#id")
标签选择器
$("tagname")
类选择器
$(".className")
配合使用
$("div.c1") // 找到有cl class类的div标签
组合选择器
$("#id, .className, tagName")
层级选择器
x和y可以是任何选择器
$("x y") //x的所有后代y
$("x > y") //x的所有儿子y
$("x + y") //找到所有紧挨在x后面的y
$("x ~ y") //x之后所有的兄弟y
4.jQuery选择器查找标签之后的结果与js有何区别
1.如果使用索引取值 那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法
基本选择器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
eg：
$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
表单选择器
可以看成是属性选择器优化而来
注意:$(':checked')
$('input:checked')
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled
:checked
:selected
eg：$(":checkbox") // 找到所有的checkbox
定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
思考如何解决
<script>
//获取三个对象
let i1Ele = document.getElementById('i1')
let b1Ele = document.getElementById('b1')
let b2Ele = document.getElementById('b2')
//将存储循环定时任务的变量定义为全局变量
let t = null;
//将展示时间的代码封装成函数
function showTime() {
//获取当前时间
let currentTimeObj = new Date()
//转换成格式化时间
//将格式化时间展示到input框中
i1Ele.value = currentTimeObj.toLocaleTimeString()
}
//绑定点击事件
b1Ele.onclick = function () {
//循环任务:每隔一秒获取一次当前时间
if(!t){
t = setInterval(showTime, 1000)
}
}
b2Ele.onclick = function () {
//结束循环任务
clearInterval(t)
t = null
}
</script>
筛选器方法
下一个元素：
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
上一个元素：
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
父亲元素：
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
儿子和兄弟元素：
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们
'链式操作的顶层原理：对象每次调用方法之后都会返回一个对象，这个对象也可以调用原来对象拥有的功能'
操作标签
jQuery操作 js操作 效果
addClass() classList.add() 添加指定的css类名
removeClass() classList.remove() 移除类名
hasClass() classList.contains() 判断样式存不存在
toggleClass() classList.toggle() css类名有就移除没有添加
.css('样式名','值') style.样式名='值' 操作css样式
text() innerText() 文本操作
html() innerHTML() 文本操作
val() value value值
[0].files files 文件操作
attr() setAttrbute() 静态属性
getAttrbute()
prop() 动态变换(checked)
append() append()
prepend()
after()
before()
remove() 移除标签
empty() 清空标签
jQuery绑定事件
JS绑定事件
标签对象.on事件名 = function(){事件代码}
例如：btnEle.onclick = function(){alert(123)}
jQuery绑定事件
方式1：jQuery对象.事件名(function(){事件代码})
例如：$btnEle.click(function(){alert(123)})
方式2：jQuery对象.on('事件名',function(){事件代码})
例如：$btnEle.on('click',function(){alert(123)})
有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
阻止事件后续
能够触发form表单提交数据动作的标签有两个
<input type='submit'>
<button></button>
这两个标签自带点击提交事件
给已经有事件的标签绑定事件，会优先执行绑定的事件，再去执行自带的事件
我们也可以让标签自带的事件不执行：
return false 或者
e.preventDefault()
$(':submit').click(function(e)){
alert('111222333')
// return false 方式1
e.preventDefault() //方式2
}
事件冒炮
如果子元素有的事件 父元素也有 那么子元素事件执行的时候，会一次向上反馈并执行父元素的相同事件。
阻止事件冒炮：
$("span").click(function(e)){
alert("span");
// return false; 方式1
e.stopPropagation() // 方式2
}
事件委托
创建标签的两种方式：
JS： document.createElement()
jQuery: $('<标签名>')
事件绑定默认情况下是不会对动态创建的标签生效的，如果想生效需要事件委托
$('div').on('click','button',function () {
alert('123123123')
})
上述方式可以解决动态标签事件的执行问题(注意事件委托指的是标签内部的标签)
