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/
查看: 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对象,我们调用方法把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对象,先把之前的代码注释掉。然后通过选择器获取输入框,为了方便对比直接把他保存到变量中,**text2保存。最后用等号进行比较。保存之后去浏览器测试一下,打印的是true,也就意味着确实是同一个jQ对象,既然是同一个jQ对象,是不是就可以再后面继续点下去啦。
let $text = $('.text')
let $text2 = $text.focus(function () {
console.log('获得焦点')
})
console.log($text===$text2)
从结果来看,分开写和用链式编程来写是一样的,但是链式编程的代码更为简洁,大伙在编码的时候可以根据喜欢选择自己喜欢的方式.
- 链式编程的含义是?
通过 点 把多个操作连续的写下去, 形成和 链子 一样的结构 - 有没有特殊情况?
有
虽然绝大多数jQ方法返回的都是同一个对象,但是也有特殊的情况