JS事件绑定

JS获取用户输入值

1.数据输入

        获取普通数据： 标签对象.value

        获取文件数据： 标签对象.files （当有多个文件的时候可以用索引的方式取值）

2.JS类属性操作

className                        //获取所有样式类名(字符串)
classList.remove(cls)            //删除指定类
classList.add(cls)               //添加类
classLIst.contains(cls)          //判断类是否存在
classList.toggle(cls)            //类存在就删除，否则就添加

3.指定CSS操作

标签对象.style.标签样式属性名
 
# margin
# width
# left
# backgroundColor
# backgroundImage

JS事件绑定

1.什么是事件

        给html标签绑定一些功能，当发生了指定的操作时触发JS代码的额外功能

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onclick：                当用户点击某个对象时调用

 ∙" role="presentation" style="position: relative;">∙$\bullet$  ondblclick：           当用户双击某个对象时调用

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onfocus：               元素获得焦点触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onblur：                  元素失去焦点触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onchange：            域的内容被改变时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onkeydown：          设置某个按键被按下时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onkeypress：          某个键盘按键被按下并松开时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onkeyup：               某个键盘按键被松开时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onload：                  页面或图像完成加载触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onmousedown：      鼠标按钮被按下触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onmousemove：      鼠标移动时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onmouseout：          鼠标从某个元素移开时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onmouseover：        鼠标移动到某个元素上时触发

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onselect：                在文本框中的文本被选中时发生

 ∙" role="presentation" style="position: relative;">∙$\bullet$  onsubmit ：               确认按钮被点击时

// 点击按钮改变颜色
"d1" onclick="changeColor(this);">点击我
<script>
  function changeColor(ths) {
    ths.style.backgroundColor="green";
  }
script>

ps：this表示触发事件的当前元素，定义函数过程中this为形参。

2.onload事件

        调用标签查询标签等操作必须要先创建好标签后才可以进行，所有我们一开始必须将这些代码放在body的最下面现在通过onload事件就可以将操作写不用必须写在body最下面。

        window.onload事件在文件加载过程结束时触发，这时候文档中的所有对象都位于DOM中并且所有图像、脚本、链接和子框架都已经完成加载。

window.onload = function (){
    页面js代码
}

3.关键字this

        面向对象语言中 this 表示当前对象的一个引用，但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变，在方法中，this 表示该方法所属的对象

let btnEle = document.getElementById('d1')
    btnEle.onclick = function (){
        alert(321)
        console.log(this)
    }
//this指代的是当前被操作的标签对象

JQuery类库

1.什么是JQuery库

        jQuery是一个快速、简洁的JavaScript框架，于2006年1月由John Resig发布。JQuery设计的宗旨是"write Less,Do More"。JQuery核心特性可以总结为是一款轻量级的JS框架，具有高效灵活的DOM选择器。

2.目前JQuery的三大版本

∙" role="presentation" style="position: relative;">∙$\bullet$  1.x：兼容ie678使用最广泛，官方只做BUG维护不再更新功能，最终版本：1.12.4（2016年5月20日）

∙" role="presentation" style="position: relative;">∙$\bullet$  2.x：不兼容ie678，很少有人使用，官方只做BUG维护不在更新功能，最终版本：2.2.4（2016年5月20日）

∙" role="presentation" style="position: relative;">∙$\bullet$  3.x：不兼容ie678，只支持最新的浏览器除非特殊要求一般不会使用3.x版本很多老的JQuery插件不支持这个版本，目前官方主要更新维护的版本 目前最新版本：3.5.1

3.基本使用

        JQuery对象就是通过JQuery包装DOM对象后产生的对象，JQuery对象是JQuery独有的，JQuery对象可以使用JQuery里的方法但无法使用DOM对象的任何方法，同理DOM对象也不能使用JQuery里的方法。

        我们在声明一个JQuery对象变量的时候在变量名前面加上 $ 符号：

ps：标签对象无法调用JQuery提供的方法，如果想用得先转换成JQuery对象需要用到 $()

// 查找标签
$("#id")
$(".className")

4.选择器

        jQuery选择器和CSS选择器的写法十分类似，通常把css选择器用$("")包起来就成了一个jQuery选择器：

选择器	CSS选择器	JQuery选择器
ID选择器	#id	$("#id")
类选择器	.className	$(".className")
标签选择器	p	$("p")

5.表单筛选器：

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :input                匹配所有input标签元素

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :text                  匹配所有文本输入框

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :password         匹配所有的密码输入框

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :radio                匹配所有的单选框

        ∙" role="presentation" style="position: relative;">∙$\bullet$. :checkbox         匹配所有的复选框

        ∙" role="presentation" style="position: relative;">∙$\bullet$. :submit              匹配所有的提交按钮

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :image               匹配所有的img标签

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :reset                 匹配所有重置按钮

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :button               匹配所有button按钮

        ∙" role="presentation" style="position: relative;">∙$\bullet$  :file                     匹配所有文件域

$(":input")      //匹配所有 input, textarea, select 和 button 元素
$(":text")       //所有的单行文本框推荐使用 $("input:text")效率更高
$(":password")   //所有密码框
$(":radio")      //所有单选按钮
$(":checkbox")   //所有复选框
$(":submit")     //所有提交按钮
$(":image") 	 //所有带有 type="image" 的 input 元素
$(":reset")      //所有重置按钮
$(":button")     //所有button按钮
$(":file")       //所有文件域