JavaScript事件绑定，jQuery类库

李智强@

已于 2022-12-16 15:48:50 修改

阅读量370

点赞数

分类专栏：前端开发文章标签： javascript jquery 前端

于 2022-08-26 21:59:31 首次发布

本文链接：https://blog.csdn.net/lzq78998/article/details/126549223

版权

前端开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

DOM操作(部分)
- JavaScript获取值操作
- 属性操作
事件绑定
jQuery框架

DOM操作(部分)

JavaScript获取值操作

获取值主要是去在前端方面做一些简单的数据显示与判断，通常都是使用input、option、textarea等标签。

获取普通值数据
基本语法：标签对象.value

> let nameEle = document.getElementById('d1')
< undefined
> nameEle.value
< 'jason'

获取文件数据
基本语法一：标签对象.value (只能获取到文件路径没啥用)
基本语法二：标签对象.files (结果是一个数组可以通过索引获取具体文件对象)

> let nameEle = document.getElementById('d3')
< undefined
> nameEle.files
< FileList {0: File, length: 1}
> nameEle.files[0]
< File {name: '01 前端简介.mp4', lastModified: 1659779888878, lastModifiedDate: Sat Aug 06 2022 17:58:08 GMT+0800 (中国标准时间), webkitRelativePath: '', size: 122815290, …}
> nameEle.files[0]['name']
< '01 前端简介.mp4'

属性操作

类属性操作
先let 变量名 = document.getElementById(标签名)设置标签对象(多个标签的时候需要使用索引)

标签对象.ClassName —— 获取到所有的样式类名(字符串)
标签对象.ClassList —— 查看所有的类属性(列表的形式返回)
标签对象.ClassList.contains() —— 判断类属性是否存在，返回true或false
标签对象.ClassList.add()  —— 添加类属性
标签对象.ClassList.remove() —— 移除类属性
标签对象.ClassList.toggle() —— 如果类属性存在就删除，如果类属性不存在就添加

> let divEle = document.getElementsByClassName('c1')
< undefined
> let divEle = divEle[0]
< undefined
> divEle
<  <div class="c1 c2 c3"></div>
> divEle.classList.add('c4')
< undefined
> divEle
<  <div class="c1 c2 c3 c4"></div>

样式操作
标签对象.style.属性名 = 设置
```
标签对象.style.backgroundColor = 'red'
```

强调：

JavaScript操作CSS属性的规律：

对于没有中横线的CSS属性一般直接使用style.属性名即可
对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可

事件绑定

事件简介

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义

我们也可以理解为是给html标签绑定了一些额外的功能，当达到某个条件的时候自动触发的功能

如何给标签绑定事件
- 在DOM元素中直接绑定
- 在JavaScript中代码绑定
- 绑定事件监听函数

详细讲解

在DOM元素中直接绑定

这里的DOM元素可以理解为HTML标签。JavaScript支持在HTML标签中直接绑定事件，语法如下：

onXX = “JavaScript code”

其中：

onXX为事件名称。例如：鼠标单击事件onclick、鼠标双击事件ondouble等。

JavaScript Code为处理事件的JavaScript代码，一般是函数。
例如，单击一个按钮，弹出一个警告框的代码有如下两种写法

原生函数

<button onclick='alter('加油!')' >点击我</button>

自定义函数

<button onclick='func()'>点击我</button>
<script>
	function func(){
		alter('加油!')
	}
</script>

在JavaScript代码中绑定

在JavaScript代码中（即< script>标签或js文件内）绑定事件可以使JavaScript代码与HTML分离、文档结构清晰、便于管理和开发。

在JavaScript代码中绑定事件，语法如下：

标签对象.onXX = function () {
	事件处理代码
}

例如，为一个id="demo"的按钮绑定一个onclick事件，显示它的name属性

匿名函数绑定

<button id='demo' name='加油!'>点击我，弹出name属性</button>
<script>
	let demoEle = document.getElementById('demo')
	demoEle.onclick = function(){
		alert(this.name)
	}
</script>

注意：this指代的是当前被操作的标签对象

函数绑定

<button id='demo' name='加油!'>点击我，弹出name属性</button>
<script>
let demoEle = document.getElementById('demo')
function funct(){
	alert(demoEle.name)
}
demoEle.onclick = func  // 注意这里不要加括号,showName指向一个函数对象（一个函数句柄），与匿名函数（一个匿名函数即一个匿名函数对象）绑定效果相同。
</script>

绑定事件监听函数

绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
addEventListener()函数语法：
```
标签对象.addEventListener(eventName, handle, useCapture);
```
参数说明：
- eventName
  事件名称（注意：这里的事件名称没有on，如鼠标点击事件click）。
- handle
  事件句柄函数，即用来处理事件的函数。
- useCapture
  Boolean类型，是否使用捕获，一般用false，与事件流相关。
attachEvent()函数语法：

标签对象.attachEvent(eventName, handle);

参数说明
- eventName
  事件名称（注意：这里的事件名称有on，如鼠标点击事件onclick）。
- handle
  函数名(不带小括号)，即用来处理事件的函数。

注意：

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、Firefox、Opera、Safari、IE9及其以上版本都支持该函数；但是，IE8及其以下版本不支持改函数，它使用attacheEvent()来绑定事件监听函数。所以，这种绑定方法，必须要处理浏览器兼容问题。

总结：

除了直接第一种直接在DOM元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。

事件函数	作用
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onfocus	元素获得焦点。
onblur	元素失去焦点。应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange	域的内容被改变。应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown	某个键盘按键被按下。应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onselect	在文本框中的文本被选中时发生。
onsubmit	确认按钮被点击，使用的对象是form。

事件案例

数据校验

<p>username:
  <input type="text" id="username">
    <span style="color: red" id="username_error"></span>  <!--提示内容颜色-->
</p>
<p>password:
    <input type="text" id="password">
    <span style="color: red" id="password_error"></span>  <!--提示内容颜色-->
</p>
<input type="button" value="提交" id="btn">
<script>
  let btnEle = document.getElementById('btn')
  btnEle.onclick = function () {
    let usernameEle = document.getElementById('username')
    let password = document.getElementById('password')
    if (usernameEle.value === 'jason'){
      let usereEle = document.getElementById('username_error')
      usereEle.innerText = '不能为Jason'
    }
    if (password.value === ''){
      let passeEle = document.getElementById('password_error')
      passeEle.innerText = '不能为空'
    }

  }

</script>

省市联动

省市:<select name="" id="province">

</select>

市区:<select name="" id="city">

</select>

<script>
    let proEle = document.getElementById('province')
    let cityEle = document.getElementById('city')

    let data = {
        "四川":["成都","资阳","绵阳","德阳"],
        "北京":["朝阳区","海淀区","丰台区","大兴区"],
        "上海":["浦东新区","青浦区","虹口区","闵行区"],
    }
    // 先来市区的
    for (let pro in data){  // pro就是单个省份
        let everyoneEle = document.createElement('option')
        everyoneEle.innerText = pro
        everyoneEle.value = pro
        proEle.append(everyoneEle)
    }
    proEle.onchange = function (){
        cityEle.innerHTML = ''
        let cinfoEle = this.value  // 拿到点击的省份名
        let cnameEle = data[cinfoEle]
        for (let i=0;i<cnameEle.length;i++){  // pro就是单个省份
            let everyoneEle = document.createElement('option')
            everyoneEle.innerText = cnameEle[i]
            everyoneEle.setAttribute('value', cnameEle[i])
            cityEle.append(everyoneEle)
        }
    }

</script>

jQuery框架

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

核心特征：

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的CSS选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

兼容多浏览器
IE浏览器:很多时候针对IE浏览器前端需要重新写一份代码操作
封装了js代码
核心代码也就几十KB 加载速度快极大的提升编写效率
宗旨
“Write less, do more.”
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 没有压缩的文件容量稍大

基本使用举例：

jQuery框架与基础JS语法比较

eg：将页面上的两个p标签文本内容一个变成红色一个变成绿色

JavaScript代码实现

let p1Ele = document.getElementsByTagName('p')[0]
let p2Ele = document.getElementsByTagName('p')[1]
p1Ele.style.color = 'red'
p2Ele.style.color = 'green'

jQuery框架代码实现

$('p').css('color','red').next().css('color','green')

jQuery选择器查找标签之后的结果与js有何区别

结果集都是数组但是功能有区别
1.如果使用索引取值那么都是标签对象
标签对象是无法调用jQuery提供的方法的
2.标签对象如果想转换成jQuery对象需要使用 $()
转换成jQuery对象的目的是为了使用jQuery提供的更多方法

查找标签

基本选择器

$('#d1')  # id选择器  
$('.c1')  # class选择器  
$('p')  # 标签选择器
$('div #d1')
$('div,#d1,.c1')
$("x y")		// x的所有后代y（子子孙孙）
$("x > y")	// x的所有儿子y（儿子）
$("x + y")	// 找到所有紧挨在x后面的y
$("x ~ y")	// x之后所有的兄弟y

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

举例说明：

$('ul li:first')
$('ul li:last')
$('ul li:not(.c)')  # 查找所有不包含c标签的li标签
$('ul:has(#d1)')  # 查看内部含有id是d1的ul标签

属性选择器

$('[name]')
$('[name="jason"]')
$('div[name="jason"]')  # 查找div标签中name属性为jason的

表单筛选器

专门针对form表单内的标签

$('input[type="text"]')	 筛选器简化	$(':text')
$(':checked') 会将option也找到
$(':selected')  只会找到option标签

表单对象属性：

:enabled
:disabled  # 让输入框固定为一个数据，让用户只能看，不能写
:checked  # 注意：查找的时候，也会将option中的找到
:selected