Day51——JavaScript事件绑定，jQuery类库

DOM操作(部分)

JavaScript获取值操作

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

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

   > let nameEle = document.getElementById('d1')
   < undefined
   > nameEle.value
   < 'jason'
   1
   2
   3
   4

2. 获取文件数据
   基本语法一：标签对象.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'
   1
   2
   3
   4
   5
   6
   7
   8

属性操作

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

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

  > 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>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 样式操作
  标签对象.style.属性名 = 设置

  标签对象.style.backgroundColor = 'red'
  1

强调：

JavaScript操作CSS属性的规律：

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

事件绑定

事件简介

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

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

• 如何给标签绑定事件

  • 在DOM元素中直接绑定
  • 在JavaScript中代码绑定
  • 绑定事件监听函数

详细讲解

1. 在DOM元素中直接绑定

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

   onXX = “JavaScript code”

   其中：

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

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

• 原生函数

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

• 自定义函数

  <button onclick='func()'>点击我</button>
  <script>
  	function func(){
  		alter('加油!')
  	}
  </script>
  1
  2
  3
  4
  5
  6

2. 在JavaScript代码中绑定

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

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

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

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

   • 匿名函数绑定

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

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

   • 函数绑定

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

3. 绑定事件监听函数

   绑定事件的另一种方法是用addEventListener() 或 attachEvent()来绑定事件监听函数。
   addEventListener()函数语法：

   标签对象.addEventListener(eventName, handle, useCapture);
   1

   参数说明：

   • 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元素中绑定函数外，其余两种绑定方法都是通过使用函数句柄或匿名函数进行绑定。使用函数句柄绑定事件函数时，如果函数返回值不是一个“函数对象”，那么函数名后面一定不要带有()，函数名后面跟上一对小括号表示执行该函数。

事件案例

数据校验

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

省市联动

省市:<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

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+等。

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

• jQuery框架代码实现

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

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

3. 结果集都是数组但是功能有区别
   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
  1
  2
  3
  4
  5
  6
  7
  8
  9

• 基本筛选器

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

  举例说明：

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

• 属性选择器

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

• 表单筛选器

  专门针对form表单内的标签

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

  表单对象属性：

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