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>
  // 1. 标签选择器
  $('p').css('backgroundColor', 'pink')
  // 2. 类选择器
  $('.p').css('backgroundColor', 'skyblue')
  // 3. id选择器
  $('#p').css('backgroundColor', 'orange')
  // 4. 后代选择器
  $('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对象.事件名()
// trigger触发
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('<a href="#">hello</a>')
  $('.box2').text('<a href="#">world</a>')
  // 取值
  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类，进而影响背景色。

---