jQuery：元素控制 & 事件

jQuery：元素控制 & 事件

• • 元素选择
  • • 选择器
    • 过滤方法
    • 查找方法
  • 事件
  • • 事件绑定
    • 事件触发
    • 事件参数
    • 事件委托
  • 内容与属性
  • • 样式操控
    • 属性控制
    • 修改内容
    • value 控制
    • 类名控制

---

元素选择

选择器

在学习 css 的时候为了给元素设置样式，首先要通过选择器找到元素。或者说在原生的 DOM 中，也是要通过 queryselector 锁定选择器。

jQuery中也是一样，想要操控某个元素，就要先找到要这个元素。所以使用 jQuery 的基础，就是要先会使用选择器。

语法：

$('选择器')

示例：

h3>hello span> world/span>/h3>
p>aaaa/p>
p class="p">bbbb span> ccc /span>/p>
p id="p"> ddddd /p>
script>
  
  $('p').css('backgroundColor', 'pink')
  
  $('.p').css('backgroundColor', 'skyblue')
  
  $('#p').css('backgroundColor', 'orange')
  
  $('p span').css('backgroundColor', 'green')
/script>

拿到选择器后，可以通过 .css 方法控制其 CSS 样式。

输出结果：

要注意的是，此处通过 $() 拿到的对象，是一个 jQuery 对象，而不是一个 DOM 对象，不能使用原生的 DOM 方法来修改 CSS 样式。

测试一下原生 DOM 对象和 jQuery 对象的区别：

ul>
  li>html/li>
  li>css/li>
  li>javascript/li>
  li>jQuery/li>
/ul>
script>
  let li = document.querySelector('li')
  console.log('li:', li)
  let $li = $('li')
  console.log('$li:', $li)
/script>

输出结果：

可以看到，原生的 DOM 对象，只选中了第一个 li。而jQuery 对象选中了所有的 li 标签。如果对于原生的 DOM 想要修改所有的 li 对象，那就需要 queryselectall 拿到一个数组，然后遍历整个数组。

但是对于 jQuery，默认就是选中所有符合条件的标签，直接.css 就可以修改所有的样式。

对于 jQuery 对象，可以看到其方法都在 [prototype]，也就是原型里面，这里面就包含了.css 方法，可以修改样式。

另外的，原生 DOM 对象可以转化为 jQuery 对象：

$(DOM对象)

示例：

ul>
  li>html/li>
  li>css/li>
  li>javascript/li>
  li>jQuery/li>
/ul>
script>
  let li = document.querySelector('li')
  let $li1 = $('li')
  let $li2 = $(li)

  $li1.css('backgroundColor', 'pink')
  $li2.css('backgroundColor', 'skyblue')
/script>

此处 $li1 这个对象，是通过选择器选中 "li" 标签，拿到的对象。而 li2 则是通过元素的 DOM 对象 li 转化而来。

输出结果：

由于原生的 DOM 对象只选中一个标签，所以最后只有第一个 li 被覆盖为了蓝色。

如果想要拿到 window 的jQuery对象，由于 window 本身就是一个 DOM 对象，所以可以直接转化：

$(window)

要注意这里没有引号，window表示一个对象。

---

过滤方法

在 CSS 中，可以通过伪类元素来选择一些符合要求的元素，比如 first-child、last-child 等。

想要在 jQuery 中进行类似的筛选，当然可以在 $(选择器) 内部使用伪类选择器，但是 jQuery 提供了更方便的方法：

jQuery 对象.first()

jQuery 对象.last()

jQuery 对象 .eq( 索引)

示例：

ul>
  li>html/li>
  li>css/li>
  li>javascript/li>
  li>jQuery/li>
  li>java/li>
/ul>
script>
  $('li').first().css('backgroundColor', 'pink')
  $('li').last().css('backgroundColor', 'gold')
  $('li').eq(1).css('backgroundColor', 'skyblue')
/script>

输出结果：

这样就完成了选中第一个元素，最后一个元素，以及下标为 1 的元素。

---

查找方法

html的标签嵌套往往会非常复杂，简单的 $("选择器") 未必可以处理好元素的选择，为此 jQuery 提供了更加全面的方法，来完成元素的查找。

jQuery 对象.parent()

jQuery 对象.children()
jQuery 对象.children("选择器")

jQuery 对象.siblings()
jQuery 对象.siblings("选择器")

jQuery 对象.find("选择器")

对于一个标签，它可能会存在很多的兄弟元素和子元素，如果不传选择器，那么就会拿到所有的子元素或兄弟元素。

最后一个 find 用于查找后代元素，注意后代元素与子元素的区别，后代元素范围比子元素广很多。因此查找后代元素必须传入选择器，不支持一次性拿到所有后代元素。

示例：

div class="container">
  h4>list_A/h4>
  ul class="A">
    li>html/li>
    li>css/li>
    li>javascript/li>
  /ul>
  h4>list_B/h4>
  ul class="B">
    li class="11">11/li>
    li class="22">22/li>
    li class="33">33/li>
    li class="44">44/li>
  /ul>
/div>

现有如上标签嵌套结构。

$('.A').parent().css('backgroundColor', 'skyblue')

这句代码就是拿到 A 的父元素，也就是container，将其背景改为蓝色：

$('.A').children().css('backgroundColor', 'skyblue')
$('.B').children('.22').css('backgroundColor', 'pink')

以上代码则是拿到 A 的所有子元素，修饰为蓝色，而 B 的类名为 .22 子元素修饰为粉色：

A的三个子元素 li 都被修饰为了蓝色背景，可以看出不传参数的 children 是一次性拿到所有子元素的。

$('.22').siblings().css('backgroundColor', 'skyblue')

以上代码则是把 22 的所有兄弟元素，背景修饰为蓝色：

要注意的是，22本身不属于自己的兄弟。

---

事件

事件绑定

原生的 DOM 支持事件绑定，jQuery自然也支持事件绑定。

语法：

jQuery 对象 . 事件名(function () {
  
})

常见事件名如下：

1. click：点击
2. focus：获得焦点
3. blur：失去焦点
4. mouseenter：鼠标移入
5. mouseleave：鼠标移出
6. change：内容改变

当事件触发后，回调函数内部的 this 就是触发事件的 DOM 元素。

示例：

ul>
  li>aaaa/li>
  li>bbbb/li>
  li>cccc/li>
  li>dddd/li>
/ul>
script>
  $('li').click(function () {
    let $this = $(this)
    $this.css('backgroundColor', 'skyblue')
  })
/script>

此处注意，回调函数内部是 DOM 的原生 this，想要调用jQuery 的方法，必须使用 $(this) 把它转化为 jQuery 对象，以上代码常会缩写为$(this).css('backgroundColor', 'skyblue')。

输出结果：

这就完成了事件绑定，点击哪一个li，其就会变成蓝色背景色。

除去以上的基本的事件绑定，jQuery还提供了更加灵活的事件绑定接口。

语法：

jQuery 对象.on('事件名', function () {})

jQuery 对象.off('事件名')

jQuery 对象.off()

jQuery 对象.one('事件名', function () {})

在 off 中，如果传入参数，那么移除指定的事件名，如果不传入参数，那么该元素的所有事件都会被移除。

另外的，one方法支持一次性事件，当事件触发一次后就不会再触发。

对于 on 方法，它其实比直接 . 事件名() 用途更广泛。比如说 input 输入事件，它是没有对应的函数的，$('选择器').input(function(){})是会报错的。此时就必须使用：

$('选择器').on('input', function(){})

另外的，on方法还支持定义 自定义事件，也就是事件名可以由用户自己指定，比如：

$('选择器').on('abcdef', function(){})

这就定义了一个名为 abcdef 的事件。那么这种自定义事件要如何触发？这就是接下来讨论的问题。

---

事件触发

事件不仅仅只有用户可以触发，也可以通过代码来触发。

语法：

jQuery 对象 . 事件名()

jQuery 对象.trigger('事件名')

对于 click，mouseenter 等事件，它们支持直接定义，也就可以通过 . 事件名() 直接触发。但是比如刚才的 input 事件，它不能通过 .input(function(){}) 触发，此时就必须通过 trigger 方法来触发。

另外的，自定义事件也可以通过 trigger 触发，也只能通过 trigger 触发。

示例：

$('.text').on('myfunc', function () {
  console.log('自定义事件！')
})
for (let i = 0; i  10; i++)
  $('.text').trigger('myfunc')

以上代码定义了一个自定义事件myfunc，随后通过循环连续触发十次该事件。

输出结果：

---

事件参数

原生 DOM 支持在触发事件时，传入一个时间参数 event，jQuery 也支持这样的事件参数。

语法：

jquery 对象 . 事件(function(event){})

此处这个事件参数用法和原生的 DOM 完全一致，比如：

1. event.stopPropagation：阻止冒泡
2. event.preventDefault：阻止默认行为
3. event.keyCode：获取触发事件的案件

---

事件委托

jQuery简化了事件委托的触发方式，在传统的 DOM 中，如果想要进行事件委托，那么父节点在收到来自子元素的事件冒泡时，要判断事件来源于哪一个子元素，进而做出响应。

语法：

祖先.on('事件', '后代选择器', function(){})

在 on 方法绑定事件时，可以在第二个参数指定一个后代选择器，此时该事件只要由指定后代触发，就会被委托给祖先元素。这个过程无需用户手动判断事件冒泡来自哪个后代，非常方便。

示例：

div class="parent">
  li class="A">A/li>
  li class="B">B/li>
  li class="C">C/li>
/div>
script>
  $('.parent').on('click', '.A', function () {
    console.log("A 事件委托 parent")
  })

  $('.parent').on('click', 'li', function () {
    console.log("li 事件委托 parent")
  })
/script>

以上代码中，父元素 parent 内有三子子元素 li。随后通过事件委托对parent 委托了两个事件，一个是来自 A 的事件委托，此时选择器填入.A。另一个是所有子元素的事件委托，选择器填入li。

依次点击CBA，输出结果：

C和 B 触发了 li 的事件委托，而 A 同时触发了这两个事件委托。这说明 jQuery 确实完成了自动识别元素的功能。

---

内容与属性

样式操控

之前用到的 .css 方法，就是在 jQuery 中对元素进行样式操控的方法。

语法：

jQuery 对象.css('样式名', '值')
jQuery 对象 .css( 对象)

对于第一种写法，在第一个参数中填入 CSS 的样式名，第二个参数填入取值：

.css('backgroundColor','pink')
.css('color','red')
.css('width','200px')
.css('height',200)

但是如果 CSS 样式比较多，以上写法就就比较麻烦。所以也可以把所有的键值对放到一个对象中，再把对象传进去：

.css({
  backgroundColor:'pink',
  color:'red',
  width:'200px',
  height:200
})

如果想要获取某个元素的样式取值，只传一个参数即可：

jQuery 对象.css('样式名')

---

属性控制

a href="https://www.baidu.com">百度/a>
img src="logo.png" info="baidu" />

在以上标签中，herf、src、info都是标签的属性，jQuery提供了方法直接操控标签的属性。

语法：

jQuery 对象.attr('属性名','值')

jQuery 对象.attr('属性名')

与之前相同，如果传入两个参数，就是设置指定值，如果只传一个参数，就是获取属性值。

删除属性：

jQuery 对象.removeAttr('属性名')

---

修改内容

在 jQuery 中，也支持通过代码修改元素内部的内容。

语法：

jQuery 对象.html('内容')
jQuery 对象.text('内容')

jQuery 对象.html()
jQuery 对象.text()

与原生的 DOM 一样，html会对标签进行解析，而 text 只把标签当作普通文本处理。此处如果对 html 或text方法传参，那么对应的元素的内容就会被设置为指定值。如果不传参，那么方法返回当前元素内部的值。

示例：

div class="box1">/div>
div class="box2">world/div>
script>
  
  $('.box1').html('hello')
  $('.box2').text('world')
  
  let box1Html = $('.box1').html()
  let box1Text = $('.box1').text()
  console.log('box1Html:', box1Html)
  console.log('box1Text:', box1Text)
/script>

输出结果：

此处左侧为浏览器，右侧为控制台。可以看出，成功通过 text 和html方法把内容填入了盒子中，并且 html 方法填入的内容被解析为了一个链接。

而第二次 $('.box1').html() 不带任何参数，此时就得到了盒子的内容，并输出到控制台。

---

value 控制

jQuery提供了接口，可以从表单中收集信息。

语法：

jQuery 对象.val()

jQuery 对象.val('值')

示例：

input class="text" type="text" />
script>
  $('.text').val('hello world')

  $('.text').blur(function () {
    let value = $(this).val()
    console.log('value:', value)
  })
/script>

示例中，定义了一个文本框，通过 val('hello world') 将文本框的初始值设为helloworld。

随后给文本框绑定了失去焦点 blur 事件，也就是说如果用户输入完数据，把鼠标焦点移开，此时就会触发回调函数，输出用户输入的值。

输出结果：

首先，页面一打开就是 helloworld 默认值。

输入新的内容到文本框后，jQuery读取了新的内容，并输出到控制台。

---

类名控制

jQuery允许用户动态的为元素添加和去除类名。

语法：

jQuery 对象.addClass('类名')

jQuery 对象.removeClass('类名')

jQuery 对象.toggleClass('类名')

jQuery 对象.hasClass('类名')

此处的 hasClass 返回一个布尔值，判断元素是否有指定的类名。而 toggle 用于切换状态，如果原先没有类名，那么会添加类名，相反的如果原先有类名，则会去除类名。

示例：

/style>
	.test {
	  width: 200px;
	  height: 100px;
	  background-color: pink;
	}
	.active {
	  background-color: skyblue;
	}
/style>
body>
	div class="test">/div>
	script>
		$('.test').click(function () {
		  $('.test').toggleClass('active')
		})
	/script>
/body>

以上代码创建了一个盒子，并通过 .test 类对其修饰宽高和背景色。随后通过 click 为其绑定事件，每当点击，触发 toggleClass('active')，就会增加或去除active 类，进而影响背景色。

---