目录
JS
JS获取用户输入
普通数据（输入、选择）
标签对象.value
文件数据(上传)
标签对象.files
标签对象.files[0]
JS类属性操作
标签对象.classList # 查看类的列表
标签对象.classList.contains() # 判断是否有这个类，返回true或者false
标签对象.classList.add() # 添加类
标签对象.classList.remove() # 移除类
标签对象.classList.toggle() # 如果有查找到这个类，就删除；如果没有查找到就添加一个新的类
JS样式操作
了解即可，一般都用css操作样式，应该各司其职，不建议使用
格式：
标签对象.style.标签样式属性名
backgroundColor # 设置背景色，对应css的background-color
backgroundImage # 设置背景图片
事件
1.事件的含义
给标签添加一些额外的功能，使标签能够触发一段js代码的运行。
2.触发方式
| 方式 | 说明 |
|---|---|
| onclick | 单击某个对象时调用事件的句柄 |
| ondblclick | 双击某个对象时调用事件的句柄 |
| onfocus | 元素获得焦点 例如：输入框 |
| onblur | 元素失去焦点 应用场景：用于验证表单，用户离开某个输入框时，代表输入完成，我们可以对它进行验证。 |
| onchange | 域的内容被改变 应用场景：通常用于表单元素，当元素内容被改变时触发(select联动)。 |
| onkeydown | 某个键盘按键被按下 应用场景：用户在最后一个输入框按下回车键时，表单提交 |
| onkeypress | 某个键盘按键被按下并松开 |
| onkeyup | 某键盘按键被松开 |
| onload | 一张页面或一幅图像完成加载 |
| onmousedown | 鼠标按钮被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素上移开 |
| onmouseover | 鼠标移到某元素上 |
| onselect | 在文本框中的被选中时发生 |
| onsubmint | 确认按钮被点击，使用对象是form |
3.添加事件的两种方式
<script>
1.先定义一个function，在标签内部指定
let func1 = function(){
函数体代码
return 返回值
}
<input type="button" value="按钮名" onclick(触发条件)="func1()">
2.先查找标签，然后批量绑定
let btnEle = document.getElementById('d1')
btnEle.onclick = function(){
函数体代码
}
</script>
4.关键字this
this指代的是当前被操作的标签对象
5.window.onload
等待文档加载完毕之后再执行一些代码
window.onload = function(){
页面js代码
}
JS事件案例
jQuery
jQuery 类库
1.介绍
兼容多浏览器的JavaScript库
极大地简化JavaScript编程。它的宗旨就是：Write less,do more.
2.jQuery 导入
'''
注意：
使用jQuery必须要先导入
它的本质其实就是一个js文件
'''
1.本地导入
提前下载文件并导入
2.网络CDN服务
CDN：内容分发网络（收费）
只要计算机能够联网就可以直接导入
bootcdn:会提供一些免费的前端cdn服务
jQuery基本使用
1.基本语法
$(selector选择器).action动作()
2.js和jQuery的区别
1./*js代码操作*/
let p1Ele = document.getElementsByTagName('p')[0]
p1Ele.style.color = 'pink'
let p1Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
2./*jQuery代码操作*/
$('p').first().css('color','black')
// 改变一个p标签
$('p').first().css('color','orange').next().css('color','blue')
// 同时改变两个标签的样式
3.jQuery选择器
| 选择器 | 代码 |
|---|---|
| id选择器 | $("#id") |
| 标签选择器 | $("tagName") |
| class选择器 | $(".className") |
| 配合使用 | $("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
4.jQuery选择器查找到的标签和js有何区别
结果都是数组，但是功能有区别
1.如果使用索引取值，那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用$()
转换成jQuery对象的目的是为了使用jQuery提供的方法
$('p')[1].css('color','green')
VM967:1 Uncaught TypeError: $(...)[1].css is not a function
at <anonymous>:1:11
$('p')[1].style.color = 'green'
'green'
基本筛选器
:first # 第一个
:last # 最后一个
:eq(index) # 索引等于index的那个元素
:even # 匹配所有索引值为偶数的元素，从0开始计数
:odd # 匹配所有索引值为奇数的元素，从0开始计数
:gt(index) # 匹配所有索引值大于给定索引值的元素
:lt(index) # 匹配所有索引值小于给定索引值的元素
:not(元素选择器) # 排除所有满足not条件的标签
:has(元素选择器) # 选取所有后代元素包含一个或多个满足has条件的标签在内的标签
表单筛选器
可以看成是属性选择器优化而来
1.选择器
:text
:password
:file
:radio
:checkbox
:submit
:reset
:button
:enabled
:disabled
:checked
:selected
2.优化前优化后
1.$("input[type='password']")
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
0: input.c
length: 1
prevObject: jQuery.fn.init [document]
[[Prototype]]: Object(0)
2.$ (':text')
jQuery.fn.init [input.c, prevObject: jQuery.fn.init(1)]
0: input.c
length: 1
prevObject: jQuery.fn.init [document]
[[Prototype]]: Object(0)
3.表单对象属性
:enabled # 可用元素
：disabled # 不可用元素
：checked # 匹配所有被选中的元素
：selected # 匹配所有选中的 option 元素
'''
:checked 会把option也查找出来
input:checked 指定查找input标签中的checked标签
'''
