JQuery-01-基本入门

JQuery 入门

1. 认识JQuery

jQuery 是JavaScript类库，使用它封装的方法可以极大的提升开发效率

JavaScript 类库(js文件)

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

并且考虑了浏览器的兼容问题
绝大多数用来简化 DOM 操作
提升开发效率

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>认识JQuery</title>
</head>
<body>

<h2>02-认识jQuery</h2>
<p>
    jQuery 是一个专注于 DOM 操作的类库，通过一系列的封装，不仅简化了 DOM
    操作，还处理了不同浏览器之间的兼容，极大的提升了编码的效率，其口号是 Write
    Less Do More!
</p>
<ul>
    <li>西兰花</li>
    <li>西红柿</li>
    <li>西瓜</li>
    <li>西葫芦</li>
</ul>
<!-- 引入 jQuery -->
<script src="../../../common/jquery/jquery-3.5.1.js">

</script>

<script>
    // 需求:为所有的li绑定 点击事件 , 点击时修改背景色为 粉色
    // 1. DOM语法
    // let lis =  document.querySelectorAll('li');
    //
    //  for (let i = 0; i < lis.length ; i++) {
      
      
    //      console.log(lis[i])
    //      lis[i].onclick = function () {
      
      
    //          this.style.backgroundColor = 'pink'
    //      }
    //  }
    // 2 使用JQUery来实现
    $('li').click(function () {
      
      
        $(this).css('backgroundColor', 'red')
    })


</script>

</body>
</html>

使用jQuery的准备工作做好,步骤不多,就2步:

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

在这里插入图片描述
然后注意路径就可以了

英文官网： https://jquery.com/

扫描二维码关注公众号，回复： 17272934 查看本文章

在这里插入图片描述
查看： console.log($)

好啦，以上就是这一节的所有内容，小结一下

使用jQuery的准备工作是哪两步？

下包，导包
完整版本和压缩版本的jQuery功能上有区别吗？

没有
文件名中有mini的是压缩版本还是完整版本？

压缩版本

选择器

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

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

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

考虑到还没学习其他的方法，这里依旧通过修改元素的背景色来进行测试，咱们去测试一下是不是可以直接使用css的选择器.

（编辑器+浏览器）

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

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

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

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

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="../../../common/jquery/jquery-3.5.1.js"></script>
<body>

<p>
    jQuery 中的选择器是用来获取 DOM 节点的，其功能类似于原生的
    querySelectorAll 方法，jQuery 中所支持的选择器与 CSS 的选择器几乎一致。
</p>
<p>jQuery 封装了大量 DOM 操作的方法，极大的提升了开发效率！</p>
<p class="p_class">jQuery 的口号是 <span>Write Less Do More!</span></p>
<p id="p_id">jQuery 内部对浏览器之间的兼容也做了相关的处理。</p>
<!-- 导入 jQuery -->
<script>
    <!--    标签选则器 -->
    //    $("p").css('backgroundColor','pink')  // 所有p标签都渲染

    //类选择器
    $('.p_class').css('backgroundColor', 'pink')

    //id选择器
    $('#p_id').css('backgroundColor', 'orange')
    // 后代选择器
    $('body p').css('backgroundColor', 'pink')
</script>

</body>
</html>

jQuery对象

只有jQuery对象才可以使用那些高级的方法,他是什么呢？

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

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

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

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

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

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

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

jQ对象和dom对象是不一样的东西，他们各自有自己的语法，如果硬要混着写那就只能报错
除了通过选择器以外，我们还可以把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标签。

那我们上调用的css方法在哪里呢，现在展开的部分有没有？没有，咱们往下看这里有个proto，还记得是什么吗？**nice，原型。**原型里面的属性和方法会被所有的实例对象共享，找c开头，css方法就在这呢,而且还有很多其他的方法，这些都是可以调用的

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

多一个li标签,保存以后

<li>jQuery</li>

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

上面的变量li保存的是dom元素，我们直接用他来调用css方法，修改背景色为天蓝色，这段代码是否可以正常运行呢？对啦就是要坚决，他不可以。保存之后，报错！直接提示css 不是一个方法。

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

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

调用$方法传入选择器或dom元素获取到的是什么对象？

jQuery对象
jQuery对象的方法,比如css方法放在什么位置？

原型上

目前的代码都是保存之后立刻执行，可以通过事件来触发吗，比如点击事件？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="../../../common/jquery/jquery-3.5.1.js"></script>

<body>


    <h3>05-jQuery 对象</h3>
    <p>
        jQuery 中利用选择器获取到的并非原生的 DOM对象，而是 jQuery 对象
    </p>

    <h4>将原生 DOM 对象转换成 jQuery 对象后，便可以调用其实例中的方法了。</h4>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>javascript</li>
        <li>jQuery</li>
    </ul>
    <script>
        // 1. 打印dom和jQ对象的区别
    let li = document.querySelector('li')
    console.log('li:', li)
    let $li = $('li')
    console.log('$li:', $li)

    // 2. jQ对象的方法
    $li.css('backgroundColor', 'hotpink')

    // 3. 混着用(只是测试而已)
    // li.css('backgroundColor', 'skyblue')

    // 4. dom对象转jQ对象
    let $li2 = $(li)
    $li2.css('backgroundColor', 'skyblue')
</script>

</body>
</html>

06-事件绑定

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

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

事件名咋写呢？比如点击事件，直接写click就好，双击事件？**dblclick。**逻辑和之前一样直接写在回调函数里面就好。

不知道大伙发现了规律没，和之前dom阶段相比事件的名字就是少了一个on，之前咱们学过的所有事件都可以套用进来哦，同时不再是使用等号赋值了，而是直接调用方法,传入回调函数。如果要获取触发事件的dom元素咋办呢？直接在回调函数中通过this即可。

首先是一个类名叫做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')
})

接下来测试一下其他的事件，通过选择器找到输入框，首先为他绑定获得焦点事件，事件名叫啥来着?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')
})

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

(ppt)

这一节咱们学习的jQuery中的事件绑定。

为jQuery对象绑定事件时，方法名字中有没有on？

没有，$(‘选择器’).
传入的回调函数中，如何获取触发事件的dom元素?

this,可以调用$方法将他转为jQuery对象，从而使用jQuery对象强大的方法

这一节我们在为相同的元素绑定多个事件时，每次都要另起一行，可以更简单吗？可以

$('.text').focus(function(){
    
    })
$('.text').blur(function(){
    
    })

07-链式编程

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

$('.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对象

我们首先用分来的方式为他绑定获取和失去焦点事件：首先是获取焦点事件，focus，输出一些内容，失去焦点的写法类似blur,输出的内容也改成失去焦点。保存之后切换到浏览器，打开console界面，注意看咯，点进去，获取焦点，点出来，失去焦点，分开的写法没有任何问题。

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

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

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

我们再绑一个事件，让他看起来更像练字change事件，直接在失去焦点后面用点语法写上去，里面也输出一些内容，内容改变。保存之后切换到浏览器测试一下，？change事件的触发条件可不仅仅是失去焦点

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

最后再来测试一下返回的是不是同一个jQ对象,先把之前的代码注释掉。然后通过选择器获取输入框，为了方便对比直接把他保存到变量中，** $开头 * * 接下来我们通过这个保存的 J Q 对象绑定获取焦点事件并且把方法的返回值保存下来，用$ text2保存。最后用等号进行比较。保存之后去浏览器测试一下，打印的是true，也就意味着确实是同一个jQ对象，既然是同一个jQ对象，是不是就可以再后面继续点下去啦。

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

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

链式编程的含义是?

通过点把多个操作连续的写下去, 形成和链子一样的结构
有没有特殊情况?

有

虽然绝大多数jQ方法返回的都是同一个对象,但是也有特殊的情况

JQuery 入门

1. 认识JQuery

选择器

jQuery对象

06-事件绑定

07-链式编程

猜你喜欢