jQuery

jQueryjQuery 是一个DOM 操作的类库，通过一系列的封装，简化了 DOM操作，极大的提升了编码的效率。

使用准备

1. 首先把这个别人写好js文件下载到本地

2. 将下载完毕之后的js文件导入到需要使用的页面中去

   例如：<script src="./jquery/jquery-3.5.1.js"></script>

jQuery对象

jQuery提供的绝大多数方法都需要通过jQuery对象才可以访问，在使用时我们可以调用$方法，此时获取到的返回值就是jQuery对象。

例：使用jQuery的css方法将p标签背景色改为粉色

$('p').css('backgroundColor','pink')

此操作通过DOM对象来实现，代码如下：

document.querySelector('p').style.backgroundColor = 'pink'

在书写代码时，DOM对象和jQuery对象是不可以混用的，例如不能写

$('p').style.backgroundColor = 'pink'/*这是错误的写法*/

但是可以通过把DOM对象放到$方法中，此时返回的就是jQuery对象，就可以使用jQuery提供的方法了

//$(dom对象)
let li = document.querySelector('li')
$li = $(li)
//此外在保存对象时，我们一般建议使用$开头来命名jQuery的对象

jQuery对象的方法

<ul>
  <li>html</li>
  <li>css</li>
  <li>javascript</li>
</ul>

<script>
let li = document.querySelector('li')
let $li = $('li')
console.log('li:', li)
console.log('$li:', $li)
</script>

我们可以使用测试代码，分别打印使用DOM获取的li和使用jQuery获取的li

观察控制台，我们会发现jQuery获取的对象里面有一个叫Prototype的属性，点开我们发现，原来jQuery对象的方法全在这里，也就是说jQuery的对象是存放在原型对象内的。

事件绑定

jQuery中以原生事件类型的名称为依据，封装了相对应的事件处理方法。

语法规则：通过选择器找到需要绑定事件的元素，然后调用事件方法，逻辑写在回调函数里面

$('选择器').事件名(function () {
    //逻辑
})

//例：给li绑定点击事件
$('li').cilck(function () {
    console.log('绑定点击事件')
})

我们给li标签绑定了点击事件，假如我们有很多的li我们想点哪个li就让哪个li变色，在DOM中我们可以使用this，但是jQuery中我们不能直接使用this，因为jQuery对象和DOM对象不能混用，所以我们需要将此时的this转换为jQuery对象。我们需要调用$方法将this包起来。‘$(this)`

//参考点击事件，假如有一个类名为text的文本框，为其设置获得焦点和失去焦点的事件
$('.text').focus(function () {
    console.log('获得焦点')
})
$('.text').blur(function () {
    console.log('失去焦点')
})

链式编程

链式编程指的是通过点把多个操作（方法）连续的写下去，这样形成的结构和链子一样，所以叫做链式编程。例如以下代码中.text标签绑定了两个事件，有一些重复部分，因为通过jQuery对象调用的方法返回的是同一个jQuery对象，所以可以使用链式编程连接。

$('.text').focus(function () {
    console.log('获得焦点')
})
$('.text').blur(function () {
    console.log('失去焦点')
})

以上代码通过链式编程重写后，可以写成以下形式

$('.text')
  .focus(function () {
    console.log('获得焦点')
  })
  .blur(function () {
    console.log('失去焦点')
    //再加一个change事件，使形式看起来更像一个'链子'
  .change(function(){
  	console.log('内容改变')
  })

通过以下代码我们可以测试一下，返回的对象是不是同一个jQuery对象

let $text = $('.text')
let $text2 = $text.focus(function () {
  console.log('获得焦点')
})
console.log($text===$text2)

这里控制台打印输出的是一个布尔值true，所以说明返回的是同一个对象。

内容操纵

内容操纵是用来对元素内容进行设置和取值的。jQuery封装了2个方法来操纵内容，根据是否传参，来决定是设置还是取值。传递参数就是设置，不传递参数就是取值。

// 设置
$('选择器').html('内容')
$('选择器').text('内容')
// 取值
$('选择器').html()
$('选择器').text()

html方法和text方法相比，html方法会解析标签，而text方法只是文本。因此，希望获取和设置标签时，需要使用的是html方法。

另外设置方法同样也适用链式编程

过滤方法

jQuery中的过滤方法，作用是对jQuery对象中的DOM元素再次进行筛选,让我们更精确的定位到希望操纵的元素。

方法一共有3个,分别是first,last,和eq,其中first和last不需要传递参数,作用分别是获取到第一个和最后一个元素,eq方法需要传递索引作为参数,索引从0开始.这三个方法返回的都是jQuery对象,这就意味着我们可以直接用点语法调用方法,比如绑定事件,修改内容等等

//例：有三个li标签，需要将第一个li颜色改为粉色，最后一个颜色改为黄绿色，第二个颜色改为天蓝色，代码如下
      // 1. first方法
      $('li')
        .first()
        .css('backgroundColor', 'pink')

      // 2. last方法
      $('li')
        .last()
        .css('backgroundColor', 'yellowgreen')

      // 3. eq方法
      $('li')
        .eq(1)
        .css('backgroundColor', 'skyblue')

样式操纵

jQuery中操纵样式使用的方法，名字是css。根据传递参数的不同有两种用法,一种是赋值一种是取值。使用语法为：

//赋值
$('选择器').css('样式名','值')
//取值
$('选择器').css('样式名')

例如修改背景色为粉色，字体颜色为红色，宽度为200px，高度为200px可以写成：

$('选择器').css('backgroundColor','pink')
$('选择器').css('color','red')
$('选择器').css('width','200px')
$('选择器').css('height',200)//单位默认为px，因此可以不写单位
//上述写法表示需要为同一个对象设置多个样式，此时需要写很多行，较为繁琐，可以使用赋值的另一种写法：将键值对设置到同一个对象中
 $('选择器').css({
    backgroundColor:'pink',
    color:'red',
    width:'200px',
    height:200
  })

使用css方法设置的样式是行内样式

属性操纵

使用attr和removeAttr可以操纵属性，其中attr方法可以用来设置或者读取属性，removeAttr的作用是删除属性，语法规则是：

// 赋值
.attr('属性名','值')
// 取值
.attr('属性名')
// 删除属性
.removeAttr('属性名')

用这两种方法，可以操纵属性，无论是诸如href和src等这些内置属性，还是自定义的属性，都可以操纵。

操纵value

jQuery中可以通过.val方法来操纵表单元素的value值，同样val也有取值和赋值的两种方法。

// 取值
$('选择器').val()
// 赋值
$('选择器').val('值')

查找方法

开发中标签可能会有较为复杂的嵌套关系。为了能更好的去检索元素，jQuery提供了一些查找元素的方法，通过这些方法可以通过元素去查找他的父元素，兄弟元素，子元素和后代元素。

方法有4个：parent方法用来获取父元素，children方法用来获取子元素，siblings用来获取兄弟元素，find用来获取后代元素，考虑到后代元素种类比较多，所以find方法必须传入选择器

//语法规则
  $('选择器')
    .parent()
  $('选择器')
    .children()
  $('选择器')
    .siblins()
  $('选择器')
    .find('元素')

parent方法不用传入参数，因为一个元素只有一个父元素；

children方法可以传入参数，找到相对应的子元素；

siblings用来查找兄弟元素，不传参时，代表除了自己以外的所以兄弟元素，传参则是特定的兄弟元素；

find是用来查找后代元素的，因此需要传递参数

操纵类名

​ jQuery中可以通过操纵类名达到切换样式的目的。

• addClass就是添加类名
• removeClass就是移除类名
• hasClass是判断类名是否存在，返回的是布尔值
• toggleClass可以对类名进行切换，有就移除，没有就添加。

实例代码

     // 1.  添加类名
      $('.add').click(function () {
        $('.test').addClass('active')
      })

      // 2. 移除类名
      $('.remove').click(function () {
        $('.test').removeClass('active')
      })

      // 3. 判断类名
      $('.has').click(function () {
        let res = $('.test').hasClass('active')
        console.log('res:', res)
      })

      // 4. 切换类名
      $('.toggle').click(function () {
        $('.test').toggleClass('active')
      })

注意：在写类名时，不用加.直接写类名即可。

事件进阶

jQuery的事件进阶，学习更为灵活更为方便的事件操纵方法。

jQuery中对于没有提供的方法的事件无法绑定，比如input，因此需要更为灵活和方便的事件操纵方法，而且此方法还可以进行绑定的事件的移除和绑定一次性事件。

// 1. 注册事件
$('选择器').on('事件名', function(){})
// 2. 移除指定事件
$('选择器').off('事件名')
// 3. 移除所有事件
$('选择器').off()
// 4. 注册一次性事件
$('选择器').one('事件名', function(){})

触发事件

在jQuery中可以通过代码的方式去触发绑定的事件。

语法：

• 直接调用对应的事件方法即可，不需要传入任何参数就是触发，比如点击事件，调用click方法即可
• 但并不是所有事件都有对应的方法，比如input事件，这个时候就可以通过trigger的方式来触发，直接传入希望触发的事件名就好啦
• trigger方法可以触发任意的事件，包括自定义的事件，什么叫做自定义事件呢？顾名思义就是事件名是咱们自己想的，写什么都可以
• 自定义事件必须通过on的方式来注册，把第一个参数换成自定义的事件名就好啦，同时他也只能通过代码的方式来触发

// 1. 直接触发
.事件名()
// 2. trigger触发
.trigger('事件名')
// 3. 触发自定义事件
.trigger('自定义事件')
// 4. 注册自定义事件
.on('自定义事件',function(){})

window事件绑定

​ window对象有点不太一样，在代码里面直接通过window就可以获取到他了，不需要写任何的选择器，所以用原生的方式为他绑定事件是这样的：直接为window对象对应的事件赋值即可,比如滚动，比如点击

  // 滚动
  window.onscroll = function () {}
  //  点
  window.onclick = function () {}

​ jQuery里面把window这个对象放进去就可以了

  // 滚动
  $(window).scroll(function () {})
  //  点击
  $(window).click(function () {})