标签：jQuery function console log 事件选择器 css

jQuery-day01

01-认识jQuery

一起认识一下什么是jQuery：

JavaScript 类库(js文件)

说的通俗一些就是一个js文件
封装了很多简单易用的方法 (浏览器兼容)

并且考虑了浏览器的兼容问题，我们只管用就好
绝大多数用来简化 DOM 操作

咱们这个阶段的学习重点就是这些方法，通过调用他们可以大大减少代码量，从而提升开发效率
提升开发效率

接下来咱们来具体的感受一下使用jQuery的方法对开发效率的提升

<ul>
  <li>西兰花</li>
  <li>西红柿</li>
  <li>西瓜</li>
  <li>西葫芦</li>
</ul>

测试的方法是：我们分别使用dom语法和jQuery的方法来实现一个相同的需求，看看代码量有什么差别.需求这样的:

为所有的li绑定点击事件 , 点击时修改背景色为粉色

首先测试dom语法，li标签个数较多，我们首先要获取所有，用document.querySelectorAll**,这个方法获取到的是所有的li标签，我们使用循环的方式为他们挨个绑定点击事件，在点击事件中通过this找到当前点击的dom元素，然后通过style属性点出backgroundColor

// 原生js
let liArr = document.querySelectorAll('li')
for (let i = 0; i < liArr.length; i++) {
  liArr[i].onclick = function () {
    this.style.backgroundColor = 'orange'
  }
}

用jquery方法实现：

// jQuery  
$('li').click(function () {
    $(this).css('backgroundColor', 'orange')
})

02-使用准备

下包:你得先把这个别人写好js文件下载到本地
导包:下载完毕之后需要导入到使用的页面中

另起一行script输出一下$,看看是否输出:

console.log($)

03-选择器

jQuery中也是一样的,先得找到要操纵的元素,然后再去操纵他们,所以先来学习选择器，学习如何通过jQuery的方式去获取元素,语法很简单:

// 基本用法
$('选择器')

直接调用$方法即可，选择器通过字符串的方式传递进去,基本上兼容所有css的选择器，比如标签选择器，类选择器，后代选择器等。

// 标签选择器
$('p').css('background', 'red');

// 类选择器
$('.p').css('background', 'blue');

// id 选择器
$('#p').css('background', 'green');

// 后代选择器
$('body p').css('color', 'white');

04-jQuery对象

jQuery 中利用选择器获取到的并非原生的 DOM 对象，而是 jQuery 对象，所以上一节我们在学习jQ选择器的时候，调用$方法获取到的返回值就是jQuery对象，jQuery提供的绝大多数方法都需要通过jQuery对象才可以访问，包括我们上一节用来测试的css方法。

// jQuery
$('p')

然后我们通过css方法把元素的背景色变成了粉色

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

类似的逻辑如果通过dom对象来实现,写法会略有不同:我们首先获取到dom对象，然后通过点语法访问style属性，接着为backgroundColor赋值.

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

两者之前的语法虽然有类似的部分，但是可不能混着写哦，比如：通过jQ对象点出style属性，然后为backgroundColor赋值，或者通过dom对象调用css方法.

$('选择器').style.backgroundColor = 'pink' //error
document.querySelector('选择器').css('backgroundColor', 'pink') //error

除了通过选择器以外，我们还可以把dom对象直接丢到$方法中，他返回的也是一个jQ对象，就可以使用jQuery提供的那些高级方法咯

$('选择器')
$(dom对象)

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

我们分别获取一下dom对象和jQuery对象然后打印看看他俩的区别:在保存jQuery对象的时候建议使用$开头，避免和普通的对象弄混

let li = document.querySelector('li')
let $li = $('li')
console.log('li:', li)
console.log('$li:', $li)

打印之后可以很明显的看到两者的区别，第一个是dom对象，就是页面上第一个li标签啦，第二个是jQuery对象，看起来有点复杂，我们点开看看，可以看到里面有所有符合选择器的dom元素，就是那3个li标签。

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

如果页面上有4个li标签可以吗，试试看嘛，我们加多一个li标签,保存以后注意看咯，amazing，继续加还是ok的呢.

<li>jQuery</li>

在我们调用jQuery对象的方法时生效的是所有在jQ对象内部的dom元素，或者说选择器命中的所有dom元素，无论是4个还是40个

我们再来测试一下混着使用，上面的变量li保存的是dom元素，我们直接用他来调用css方法，修改背景色为天蓝色，这段代码是否可以正常运行呢？对啦就是要坚决，他不可以。保存之后，怎么样是不是就报错啦！直接提示css 不是一个方法。大伙也要注意别混着用呢。

li.css('backgroundColor', 'skyblue') //error

最后测试一下把dom对象转jQ对象，我们调用$方法然后把变量li丢进去,然后调用css方法把背景色变成天蓝色，保存之后，nice是不是就变色了，也就是说可以通过$方法把dom对象转为jQ对象.

let $li2 = $(li)
$li2.css('backgroundColor', 'skyblue')

05-事件绑定

jQuery中如何进行快捷事件绑定?

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

语法是这样的：先通过选择器找到希望绑定的元素，然后然后调用对应的事件名方法，传入回调函数，逻辑直接写在回调函数里面即可。

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

事件名咋写呢？比如点击事件，直接写click就好

首先是一个类名叫做button的按钮，一会为他绑定点击事件，接下来是类名叫做text的输入框，一会为他绑定获取焦点和失去焦点事件。最后是一个类名叫做box的盒子，一会用它来测试鼠标的移入和移出事件。

<ul>
  <li>黑马程序员</li>
  <li>北京校区</li>
  <li>上海校区</li>
  <li>广州校区</li>
  <li>深圳校区</li>
</ul>
<br />
<input type="text" class="text" />
<div class="box"></div>

首先通过选择器找到按钮，接下来为他绑定点击事件，我这么写对不对? nice，这么写是错误的。也是把dom对象和jQuery对象弄混啦

$('li').click=function(){}

jQuery对象在绑定事件时直接调用方法即可，所以这里要改成调用click方法的形式，然后把回调函数传递进去，我们先输出一些内容,比如click.保存之后切换到浏览器，打开console界面，点点点，怎么样一直在打印内容，事件是不是就绑定上去啦！

$('li').click(function(){
	console.log('click')
})

接着来测试this，我们输出一下,保存之后再次切换到浏览器进行测试，点点点，看到了没，打印的就是点击的那个dom对象,可以这样来更改他的背景色吗?对啦，不可以哦，css是jQuery对象的方法，dom对象无法调用呢。

$('li').click(function(){
	console.log('click')
	console.log(this)
	this.css('backgroundColor','pink')
})

为了调用需要转为jQuery对象，调用$方法把this丢进去就好啦，我们在测试一下，点点点，是不是点谁谁就变粉啦

$('li').click(function(){
	console.log('click')
	console.log(this)
	$(this).css('backgroundColor','pink')
})

接下来测试一下其他的事件，通过选择器找到输入框，首先为他绑定获得焦点事件，事件名叫啥来着?nice,focus。然后传入回调函数，和之前一样先打印一些内容，保存之后去测试一下，鼠标点进去，打印啦。

$('.text').focus(function () {
  console.log('focus')
})

接下来为他绑定失去焦点事件，代码和上面类似，我们直接拷贝过来，把事件名换了就好，失去焦点叫什么来着？对啦，blur，我们把事件名和输出的内容都换成blur。保存之后去测试一下，点进去，获取焦点，点出来，失去焦点。我又点进去啦，我又点出来啦。。

$('.text').blur(function () {
  console.log('blur')
})

为了视觉效果给他添加一些样式吧，获得焦点让他变粉，失去焦点变回白色，代码和上面类似我直接拷贝过来，获取焦点设置为粉色，失去焦点设置为白色。保存之后测试一下，点进去变粉啦，点出来有还原啦。

// 2.为 .text 添加获得焦点事件
$('.text').focus(function () {
  console.log('focus')
  $(this).css('backgroundColor', 'pink')
})

// 3.为 .text 添加失去焦点事件
$('.text').blur(function () {
  console.log('blur')
  $(this).css('backgroundColor', 'white')
})

最后我们再测试一下鼠标的移入和移出事件，通过选择器找到那个盒子，鼠标移入事件叫什么来着？nice，mouseenter和之前一样我们输出一些内容，比如事件名，然后是鼠标移出事件，代码类似我们直接拷贝一份，然后调整内容，事件名咋写来着？对啦，叫做mouseleave

06-链式编程

链式编程的概念,及使用方法

链式编程并不是一个新的语法 .他指的是通过点把多个操作（方法）连续的写下去，这样形成的结构和链子一样，所以叫做链式编程。

咱们先来看一段代码

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

这段代码中为.text这个标签绑定了2个事件，上一节使用的就是这样的写法，功能可以实现，但是有重复的部分。这部分内容如果用链式编程怎么写呢？

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

我们在.focus方法的后面继续点.blur就可以再为他绑定失去焦点事件啦。还能这么写啊。为了让大伙看的更清楚一点，我们删除一部分代码,并且把它变成一行，怎么样有点意思了吧

$('.text').focus(回调函数).blur(回调函数)

如果后面再多点几次，看起来就更像链子啦！

$('.text').focus(回调函数).blur(回调函数).change(回调函数)

为什么可以这么写呢？（问号表情）通过jQuery对象调用的大部分方法返回的还是同一个jQuery对象，既然是同一个jQ对象，不就可以继续通过点语法调用他的其他方法了吗？

分开的写法如下：

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

接下来测试一下链式编程,我们把之前的代码拷贝一份然后注释掉，接下来稍作调整，链式编程的写法是在上一个方法后面继续用点语法写上其他的操作,我们直接把blur写在focus方法的后面

$('.text')
  .focus(function () {
    console.log('链式编程-获得焦点')
  })
  .blur(function () {
    console.log('链式编程-失去焦点')
  })

我们再绑一change事件

$('.text')
  .focus(function () {
    console.log('获得焦点')
  })
  .blur(function () {
    console.log('失去焦点')
  })
  .change(function(){
  	console.log('内容改变')
  })

最后再来测试一下返回的是不是同一个jQ对象

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

从结果来看，分开写和用链式编程来写是一样的，但是链式编程的代码更为简洁,大伙在编码的时候可以根据喜欢选择自己喜欢的方式.

07-内容操纵

首先通过选择器获取到希望操纵的元素,然后调用对应的方法即可.如果传递参数就是设置,不传递参数就是取值

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

页面中准备了两个用来测试的盒子分别叫做box1和box2,box1是黄绿色,box2是天蓝色

<div class="box1"></div>
<div class="box2"></div>

首先测试赋值,我们使用html方法为box1赋值,内容就设置为黑马程序员,接下来用text方法为box2赋值,内容也写成黑马程序员,保存之后大伙觉着结果是否相同?对啦,肯定是一样的,因为这一次设置的内容中并没有标签.

//  1. 设置普通文本
$('.box1').html('黑马程序员')
$('.box2').text('黑马程序员')

接下来测试设置标签,我们传入一个a标签的文本进去,

// 2. 设置标签
$('.box1').html(' <a href="#">黑马程序员</a>')
$('.box2').text(' <a href="#">黑马程序员</a>')

html方法获取到的内容中包含了标签,而text方法只能够获取到文本

首先获取jQ选择器的返回值,然后调用html方法赋值,并获取返回值.最后比较一下,哇塞,果然是true,说明$box1和$res是同一个jq对象,那么进行赋值操作的时候就可以调用其他的jq方法啦.

let $box1 = $('.box1')
let $res =  $box1.html('传智教育')
console.log($box1===$res) // true

我们为他再绑定一个点击事件,直接在html方法的后面点出click,在回调函数中输出一些内容,点击事件.保存之后去测试一下,页面上的内容改变啦,点点看,内容也输出啦,怎么样可以链式编程吧.

$box1.html('传智教育').click(function(){ console.log('点击事件') })

08-计数器

完成计数器案例

  <div class="input-num">
    <!-- 减号 -->
    <button> - </button>
    <!-- 内容 -->
    <span>0</span>
    <!-- 加号 -->
    <button> + </button>
  </div>

1. 绑定点击事件(**click,first-child,last-child**)

修改文本(text方法)
判断并提示用户(0到10)

  $('.input-num button:first-child').click(function(){
    console.log('递减')
  })
  $('.input-num button:last-child').click(function(){
    console.log('累加')
  })

  $('.input-num button:last-child').click(function () {
    console.log('累加')
    let num = $('.input-num span').text()
    console.log('num:', num)
    $('.input-num span').text(num)
  })

  $('.input-num button:last-child').click(function () {
    console.log('累加')
    let num = $('.input-num span').text()
    console.log('num:', num)
    if (num < 10) {
      num++
      $('.input-num span').text(num)
    } else {
      alert('哥们别点啦,到头啦!')
    }
  })

  $('.input-num button:first-child').click(function () {
    console.log('递减')
    let num = $('.input-num span').text()
    if (num > 0) {
      num--
      $('.input-num span').text(num)
    } else {
      alert('哥们,别点啦,到底啦!')
    }
  })

9-过滤方法

使用jQuery的过滤方法对找到的元素再次筛选

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

first方法和last方法筛选出来的分别是第几个元素?

first第一个,last最后一个
eq方法的索引是从几开始计算?

从0开始
这三个方法的返回值是什么对象?

jQ对象

10-样式操纵

使用jQuery提供的方法操纵元素样式

赋值的支持两种不同的方式,第一种是直接设置键值对,第一个参数是样式的名字,第二个参数是样的值,比如我们之前一直用来测试的修改背景色.如果要修改其他的样式直接修改对应参数的值即可.

.css('样式名','值')
.css('backgroundColor','pink')

比如文字颜色可以这样写,把样式名改成color,宽度的话两个参数都要改了,样式名改成width,值改成一个具体的值,比如100px,如果设置的是数值类的样式,属性的值可以不写单位,默认的单位是px

.css('样式名','值')
.css('backgroundColor','pink')
.css('color','red')
.css('width','200px')
.css('height',200)

如果要使用这种写法为同一个jQ对象设置多个样式,就需要写很多行,较为繁琐,这种时候就可以使用赋值的另外一种写法,传递对象,把这些个键值对设置到同一个对象中即可

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

刚刚演示的是赋值的写法,如果要取值我们只需要传递希望获取的样式名即可,比如获取宽度

.css('样式名')
.css('width')

案例

<!-- 操纵用的按钮 -->
<input type="button" class="kv" value="键值对设置" />
<input type="button" class="obj" value="对象方式设置" />
<input type="button" class="get" value="样式获取" />
<!-- 测试用的盒子 -->
<div class="box"></div>

首先我们来测试键值对的方式进行赋值

// 1. 键值对设置
$('.box').css('backgroundColor', 'skyblue')
$('.box').css('border', '10px solid orange')
$('.box').css('width', '250px')
$('.box').css('height', 250)

使用键值对的方式赋值代码量较多,接下来测试一下通过对象的方式进行赋值

  // 2. 对象方式设置
  $('.box').css({
    backgroundColor: 'pink',
    color: 'red',
    width: '200px',
    height: 200
  })

最后再来测试一下取值

  // 3. 样式获取
  let width = $('.box').css('width')
  console.log('width:', width)

11-属性操纵

使用jQuery提供的方法操纵元素的属性

<a href="https://www.baidu.com">黑马程序员</a>
<img src="logo.png" info="黑马程序员" />

方法有2个，分别是attr和removeAttr，其中attr方法可以用来设置或者读取属性，removeAttr的作用是删除属性

我们先来看看attr方法的用法

设置属性是通过attr方法传入两个参数，分别是属性名和设置的值
取值的话大伙觉着传入什么参数呢，提示一下可以类比上一节的css方法？nice，传入属性名就好，和css方法是一致的呢！

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

那么removeAttr方法呢？要不要传递参数呢？对啦，要传哦，你得告诉他删什么属性嘛！

// 删除属性
.removeAttr('属性名')

现在我们切换到了编辑器，页面中准备了2个用来测试的标签：一个是a标签一个是img标签一会就为他俩来设置原生属性和自定义属性

<a href="#">黑马程序员</a>
<img src="" />

首先来测试属性赋值，现在a标签的href是#号，点击之后并不会跳转页面，我们直接把黑马官网的地址设置给他，首先通过选择器找到页面上唯一一个a标签，attr**我们直接修改他的href属性为黑马官网，保存之后切换到浏览器跳转到黑马首页

接下来我们为img标签设置图片地址，属性名叫做src，我们直接把黑马的logo设置给他，对于自定义属性的支持怎么样呢?我们为他随意添加一个属性，比如info，设置的内容就叫做黑马程序员。保存之后在页面上看不到，我们需要通过审查元素的方式查看，打开之后我们可以到img标签上面就多了一个info属性

// 设置
$('a').attr('href', 'http://www.itheima.com/')
$('img').attr('src', 'http://www.itheima.com/images/logo.png')
$('img').attr('info','itheima')

刚测试完了属性赋值，接下来我们测试一下属性的取值，

自定义属性，通过选择器找到img标签，然后通过attr方法获取我们刚刚设置的info属性，然后把它打印出来，

// 设置
console.log($('a').attr('href'))
console.log($('img').attr('info'))

最后我们来测试一下删除属性

// 删除
$('a').removeAttr('href')
$('img').removeAttr('info')

attr方法赋值操作时需要传递几个参数？

2个，参数1是属性名，参数2是属性值
attr方法传递一个参数的作用是什么？

取值，要获取什么属性的值，传入对应的名字就ok啦！
删除属性的方法名叫什么？

removeAttr

12-图片切换

完成图片切换demo

箭头缩放

需求一共有2个：分别是箭头的缩放效果，图片切换效果，按钮的显示隐藏是和图片的切换效果一起的，咱们先来分析并完成第一个需求：箭头缩放！

逻辑的触发时机是鼠标移入和移出，mouseenter,mouseleave**。

鼠标移入时需要变大，移出时会还原为默认的状态，,transform，scale**设置为1就是默认大小，比1大就是放大，比1小就是缩小

  $('.center a')
    .mouseenter(function () {
      console.log('移入')
    })
    .mouseleave(function () {
      console.log('移出')
    })标签上有一个transition，所以我们在改变他样式的时候就会有动画啦！

  // 1. 按钮缩放
  $('.center a')
    .mouseenter(function () {
      console.log('移入')
      $(this).css('transform', 'scale(1.1)')
    })
    .mouseleave(function () {
      console.log('移出')
      $(this).css('transform', 'scale(1)')
    })

图片切换

$('.left').css('display','none')

接下来为右箭头绑定点击事件

  let index = 1
  $('.right').click(function () {
    index++
    $('.cover').attr('src', `/images/${index}.png`)
  })

  $('.right').click(function () {
    index++
    $('.cover').attr('src', `/images/${index}.png`)
    if (index === 5) {
      $(this).css('display', 'none')
    }
  })

唉，左箭头咋看不到呢？咱们默认把他隐藏起来之后，并没有通过任何的代码将他显示出来，逻辑上只要不是第一张，左箭头就需要显示出来哦。这个逻辑写哪里呢？默认是第一张，当我们点击了下一张之后，左箭头是不是就要显示出来了呀？那逻辑下一张的里面不就得啦，直接找到左箭头设置display为block。保存之后咱们去测试一下。点击下一张，左箭头是不是就出来啦！

  $('.right').click(function () {
    index++
    $('.cover').attr('src', `/images/${index}.png`)
    $('.left').css('display', 'block')
    if (index === 5) {
      $(this).css('display', 'none')
    }
  })

切换上一张的逻辑和下一张类似，我们直接拷贝一份，然后从上往下调整,选择器要不要改？要，改成left,累加要不要改？要，改成递减。修改图片地址的代码要不要改？这个不需要，left选择器改不改？改，上一张的逻辑里面，显示的应该是右箭头，判断要不要改？要，第一张索引为几啊？nice是1

  $('.left').click(function () {
    index--
    $('.cover').attr('src', `/images/${index}.png`)
    $('.right').css('display', 'block')
    if (index === 1) {
      $(this).css('display', 'none')
    }
  })

13-操纵value

使用jQuery提供的方法操纵表单元素的value值

这一节咱们来学习jQuery中如何去操纵表单元素的value值，

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

为了方便测试这里准备了一个input标签，就用它来取值和赋值吧。

$('input').val('黑马程序员')

进去啦。接下来继续测试取值，增加一些交互效果吧？

$('input').focus(function () {
  console.log($(this).val())
})

14-查找元素

使用jQuery提供的查找方法对元素再次检索

方法有4个，但是非常好理解：

parent方法用来获取父元素，

children方法用来获取子元素，

siblings用来获取兄弟元素，

find用来获取后代元素，考虑到后代元素种类比较多，所以find方法必须传入选择器

<div class="container">
  <h4>课程列表</h4>
  <ul class="course">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
  </ul>
  <h4>校区列表</h4>
  <ul class="campus">
    <li class="bj">北京校区</li>
    <li class="sh">上海校区</li>
    <li class="gz">广州校区</li>
    <li class="sz">深圳校区</li>
  </ul>
</div>

我们先来测试一下parent方法，就用第一个ul标签吧，他的类名叫做course我们通过css方法来想修改他的背景色，改成粉色

  $('.course')
    .parent()
    .css('backgroundColor', 'pink')

接下来我们测试一下children方法，c用course这个ul为例，他的子元素都是li标签，我们通过css方法来修改背景

children方法还支持传入选择器，我们传入选择器bj，把他的背景色改成粉色

  $('.course')
    .children()
    .css('backgroundColor', 'skyblue')
  $('.campus')
    .children('.bj')
    .css('backgroundColor', 'pink')

接下来测试一下兄弟元素，就用最后一个li，用siblings方法的时候获取到的是元素的兄弟，并不包含他自己哦

siblings方法还支持传入选择器

  $('.sz')
    .siblings()
    .css('color', 'red')
  $('.sz')
    .siblings('.gz')
    .css('backgroundColor', 'pink')

最后测试一下find方法

$('.container')
        .find('h4')
        .css('backgroundColor', 'yellowgreen')

$('.container')
    .find('li')
    .css('border', '10px solid orange')

parent方法是否需要传递参数？

不需要，父元素只有一个
获取子元素的方法是什么？

children方法
siblings方法一定要传入选择器吗？

不一定，不传入获取所有兄弟元素，不传入的话就是进行筛选啦
find方法是否可以获取到子元素?

可以，子元素也是后代元素的一种

15-操纵类名

使用jQuery提供的方法操纵元素的类名

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

然后是下面这一堆按钮分别对应到刚刚演示的4个方法，添加移除，判断和切换。

<!-- 操纵的盒子 -->
<div class="test"></div>
<hr />
<!-- 测试用按钮 -->
<button class="add">添加类名</button>
<button class="remove">移除类名</button>
<button class="has">判断类名</button>
<button class="toggle">切换类名</button>

这一节咱们测试的是操纵类名，所以还额外的准备了一些类:盒子默认的类名叫做test，有宽高和一个背景色,然后是然后active这个类名，设置了红色的背景和天蓝色的边框

  .test {
    width: 200px;
    height: 100px;
    background-color: green;
  }
  .active {
    background-color: red;
    border: 2px solid yellow;
  }

我们首先来测试添加类名，通过选择器找到add这个按钮，为他绑定点击事件

$('.add').click = function(){}
$('.add').click(function(){})

我们通过选择器找到test这个盒子，接下来调用添加类名

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

接下来是移除类名，找到第二个按钮为他绑定点击事件,在点击事件中找到test这个盒子，然后移除active这个类名

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

下一个方法是判断类名是否存在，true false

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

toggleClass会自动判断类名是否存在，存在就干掉他，不存在就添加上去

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

16-事件进阶

更为强大的事件绑定,还能解绑哦

咱们不是学过.click,.focus这些方法可以快捷的进行事件绑定吗。为啥还要学新的呢？

  // 绑定点击事件
  $('选择器').click(function () {})
  // 绑定获得焦点事件
  $('选择器').focus(function () {})

就知道你会这么想，直接使用事件方法进行绑定确实简便，但也正因为太简便了，带来了一些限制，比如：

对于没有提供的方法的事件无法绑定，比如input
对于绑定的事件如何移除

我们可以直接使用on方法，来注册所有的事件，他是要传递两个参数，第1个是事件名，比如点击事件写click就好，第2个是回调函数

如果要删除事件，可以使用off这个方法，想要删除什么事件，就传入什么事件名!

如果不传入事件名，会删除所有

最后一个是注册一次性事件，用法和on类似，方法名换成了one

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

使用on和one方法注册的事件时，回调函数中的this就是触发事件的dom元素，这点和之前是一样的

现在咱们切换到了编辑器，页面中准备了一些测试用的标签:首先是一个输入框，在他下面还有一个按钮

<!-- 测试标签 -->
<input type="text" class="onoff" />
<br />
<button class="one">支付</button>

我们首先来测试一下注册事件

  $('.onoff').on('focus', function () {
    console.log('获取焦点')
  })
  $('.onoff').on('blur', function () {
    console.log('失去焦点')
  })

事件的绑定没有问题，我们再来测试一下input事件，在回调函数中输出一些内容，咱们来看看他在什么时候触发。

input事件，和change有点类似，但是change的触发前提是失去焦点，input并不需要失去焦点，触发的频率更高。

  $('.onoff').on('input', function () {
    console.log('input事件')
  })

那么input事件可以直接通过方法绑定吗，我们来测试一下。直接写input方法，然后传入回调函数，保存之后切换到浏览器，额。。直接就报错，这个错误的意思是找到的input方法吗？nice 找不到。jQuery并没有对所有的事件提供方法，这个时候就只能通过on方法来绑定

  // $('.onoff').input(function () {
  //   console.log('input事件')
  // })

接下来测试一下移除事件，通过选择器找到输入框，然后调用off方法

$('.onoff').off('input')
$('.onoff').off()

最后测试一下一次性事件，用法和on基本一致

  $('.one').one('click', function () {
    alert('支付成功998元！')
  })

17-输入统计

完成输入统计案例。

需求1 - 初始状态

需求一个有4个，分别是：

初始状态
高亮效果
输入统计
启用禁用

首先来分析第一个需求设置初始状态，默认的文字个数为0，我们只需要找到span标签并修改他的内容用text方法**。

然后是按钮的默认状态为禁用，这个比较简单，只需要给他添加disabled

;(function () {
  // 1. 设置初始状态
  $('.words span').text(0)
  $('.publish_btn').addClass('disabled')
})()

然后是设置禁用状态，找到a标签，只需要为他添加禁用的类名即可，这个类叫什么来着？对啦 disabled，我们使用addClass方法加给他。123走你，默认的禁用状态就搞定啦

需求2-高亮效果

分析并完成第二个需求，高亮效果。

逻辑触发的时机是在获取焦点和失去焦点的时候

高亮效果并没有直接添加给文本域，而是添加给了父元素 parent方法**

添加高亮和移除高亮本质是操纵了一个类名actived**，添加和移除类名的方法分别是addClass和removeClass

首先获取到文本域，因为他并没有添加类名，咱们通过他的父元素找到他，事件绑定用on方法，如果是获取焦点第一个参数传什么呀？foc...对啦，focus，传入事件的名字即可。然后在回调函数中通过this的方式获取到他的父元素

this.parent()

parent方法是jQ对象才可以使用的。我们先通过$方法把this转为jQ对象

  $('.input-box textarea').on('focus', function () {
    $(this)
      .parent()
      .addClass('actived')
  })

移除高亮的逻辑和添加高亮基本一致，我们直接c+v然后来调整逻辑，事件名要不要改？

  $('.input-box textarea').on('blur', function () {
    $(this)
      .parent()
      .removeClass('actived')
  })

需求3 - 输入统计

这一节咱们来完成输入统计的第三个需求：字数统计。

在文本域里面输入内容的时候，无论是新增还是删除，只要改变了内容就出更新字数，叫做input事件**，但是这个事件只能通过on方法进行绑定。

val 方法，获取到value值之后，length属性可以获取到长度

  $('.input-box textarea').on('input', function () {
    console.log('input触发')
  })

接下来就是获取value值啦，这里要用到val方法，我们通过$方法把this转一下。然后调用val方法，获取value值要不要传递参数呢？对啦，不需要，赋值才需要，将他保存到变量中，然后输出一下！为了避免干扰，把之前的输入代码注释掉！

  $('.input-box textarea').on('input', function () {
    // console.log('input触发')
    let value = $(this).val()
    console.log('value:', value)
  })

然后我们来获取他的长度，直接通过length属性即可

  $('.input-box textarea').on('input', function () {
    // console.log('input触发')
    let value = $(this).val()
    // console.log('value:', value)
    let length = value.length
    // console.log('length:', length)
  })

最后就是把内容渲染到页面上啦，找到那个word里面的span，直接通过text方法把length设置进去就ok啦！

  $('.input-box textarea').on('input', function () {
    console.log('input触发')
    let value = $(this).val()
    console.log('value:', value)
    let length = value.length
    console.log('length:', length)
    $('.words span').text(length)
  })

功能确实搞定啦，但是代码有点冗余，我们做一些调整。首先把之前的代码拷贝一份，然后注释掉。

 $('.words span').text($(this).val().length)

需求4 - 启用禁用

最后就是切换启用禁用状态啦，其实就是切换一个类名而已。添加类名就是禁用状态，移除就是启用，用到的方法是addClass和removeClass

let length = $(this).val().length
// 优化
$('.words span').text(length)

接下来就是写判断

if (length === 0) {
  $('.publish_btn').addClass('disabled')
} else {
  $('.publish_btn').removeClass('disabled')
}

18-触发事件

用代码的方式触发注册的事件

这一节咱们学习的是触发事件，学习在jQuery中如何通过代码的方式去触发绑定的事件。

咱们来看一下输入统计案例中的两份代码：第一份代码是在案例启动的时候设置初始的数字和发布按钮的默认状态

  // 1. 初始状态
  $('.words span').text(0)
  $('.publish_btn').addClass('disabled')

第二份代码的作用是在文本域中内容改变的时候设置长度，并且设置发布按钮的启用禁用状态

  // 3. 字数统计
  $('.input-box textarea').on('input', function () {
    let length = $(this).val().length
    // 优化
    $('.words span').text(length)
    if (length === 0) {
      $('.publish_btn').addClass('disabled')
    } else {
      $('.publish_btn').removeClass('disabled')
    }
  })

项目默认启动的时候文本域中是没有内容的，如果我们可以把input事件中的执行一次，或者说触发一下input事件，第一段代码就可以不用写。

语法是这样的：

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

自定义事件是一种更为高阶的用法，咱们只需要了解基本的用法即可。

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

现在我们切换到了编辑器，页面中准备了一些用来测试的标签，首先是一个按钮，在他的下面有一个输入框

<!-- 测试用标签 -->
<button class="btn">按钮</button>
<br />
<input type="text" class="text" />

我们首先来测试一下直接触发，首先为按钮绑定点击事件，在点击事件中通过css方法去修改他的背景色为天蓝色。

接下来用代码去触发点击事件，要触发什么事件就调用什么方法，刚刚绑定的是点击事件，直接调用click方法即可，

  // 1. 直接触发
  $('.btn').click(function () {
    $(this).css('backgroundColor', 'skyblue')
  })

  $('.btn').click()

但并不是所有的事件都有对应的方法，input就没有，如果要触发他就只能通过trigger方法啦。

我们首先找到文本框，为他绑定input事件，回调函数中输出一点内容就好。保存之后咱们切换到浏览器，打开console窗口，鼠标点到输入框，输入内容，删除内容，反正只要内容改变就会触发事件。

下来我们用代码的方式去触发一下！通过选择器找到文本框，然后直接调用trigger方法

  $('.text').on('input', function () {
    console.log('input触发啦！')
  })
$('.text').trigger('input')

之前的click事件可以用trigger触发吗？咱们来试试看，首先把上面触发的代码注释掉，先保存一下，按钮变成了默认的外观。然后找到按钮，调用trigger方法然后传入click。因为触发了点击事件，按钮的背景色有改变啦。

// $('.btn').click()
$('.btn').trigger('click')

trigger方法可以触发所有的事件，但是他的强大之处可不仅于此哦。对于自定义的事件也是可以触发的

19-window事件绑定

如何为window对象绑定事件呢?

直接为window对象对应的事件赋值即可,比如滚动，比如点击

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

我们来看看,通过选择器获取window对象，然后调用对应的方法为他绑定事件。乍一看确实像那么一回事，但是这样是绑不上去的

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

代码里面并不缺什么，而是多了4个点。加了引号之后会把window当做选择器去找标签，但是window他不是标签，我们直接把这个对象丢进去就好啦！

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

首先来测试一下错误的写法！在$方法里面用选择器的方式传入window，然后为他绑定scroll滚动事件，看看能不能绑的上去，保存之后切换到浏览器，打开console界面，我滚，我滚。。。没用。这样写是绑不上去的！！

  //  1. 错误演示
  $('window').scroll(function () {
    console.log('scroll')
  })

正确的写法是删掉引号，我们再试一次。保存之后切换到浏览器，我滚，我滚。怎么样就可以正常触发了吧。

标签：jQuery,function,console,log,事件,选择器,css
From： https://www.cnblogs.com/guozhenqi/p/16983493.html

jQuery(一)