本文全面介绍了jQuery，包括其作为JavaScript工具库的特点、不同版本及适用场景。对比了jQuery入口函数与onload，讲解了顶级对象$、元素查找、样式操作、对象转换、事件绑定等知识。还通过开关灯、隔行变色等多个案例，展示了jQuery的实际应用和性能优化方法。
目录
jQuery介绍
-
jQuery 是一套 JavaScript 工具库
-
工具库：相当于一个工具箱里面有各种各样的工具，要实现什么功能就用什么工具
-
对应代码中，就相当于封装好的一堆函数和方法，我们调用对应的方法就能实现对应的功能
-
就像我们之前封装的
animate.js
-
-
-
jQuery不叫框架，叫库
-
框架：指的是它底层提供了一套驱动的引擎，并且需要我们根据它创造的语法来写对应的代码，它内部的引擎会把这些创造的语法再解析为原生的一些代码
-
例如：BootStrap 就是一套布局框架， 后面要学的 Vue 也是框架
-
-
jQuery特点：
-
写的少，做的多
-
写的少是指程序员写的少，做的多是指它内部封装的功能帮你做的多
-
jQuery版本介绍
-
3.x：
-
最新版，jQuery也在提供维护和更新
-
删除一些已经废弃的方法添加少量方法，和改变了内部的一些源码实现（相当于就是优化库内部代码）
-
不兼容老版本浏览器
-
-
2.x：
-
已经停止更新和维护了
-
不兼容老版本浏览器
-
-
1.x：
-
已经停止更新和维护了
-
兼容老版本浏览器
-
最新的1.x是 1.12.4
-
-
3.x或者1.x都可以用，就看你要不要兼容老版本浏览器，要兼容就用1.x，不兼容用3.x
-
1.x和3.x的代码都是一样的
-
学习推荐用1.x，兼容老版本IE
-
-
生产环境版本
-
production
-
生产环境指的是：项目正式上线的环境
-
这个版本的jQuery，其实相当于是带min的版本文件，也就是说压缩的版本
-
项目上线一定要用这个版本，因为体积小，打开速度就快
-
-
开发环境版本
-
development
-
开发环境版本：开发阶段的环境
-
这个版本的jQuery没有被压缩过，因为方便程序员在开发阶段查阅源文件，甚至修改源文件
-
jQuery初体验
目的：体验jQuery写的少，做的多
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<li>隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<script>
// 原生做隔行变色-------------------------------
// let lis = document.querySelectorAll('li')
// for (let i = 0; i < lis.length; i++) {
// if (i % 2 == 0) {
// lis[i].style.backgroundColor = 'orange'
// }else {
// lis[i].style.backgroundColor = 'yellowgreen'
// }
// }
</script>
<script src="./jquery-3.5.1.min.js"></script>
<script>
// jQuery做隔行变色
$('li:even').css('backgroundColor', 'orange')
$('li:odd').css('backgroundColor', 'yellowgreen')
</script>
</body>
</html>
jQuery的入口函数与onload对比
- 有些程序员会把``window.onload``这种事件称之为入口函数
- jQuery也提供了默认的入口函数
// 他要等DOM加载完毕就调用,不会等图片
$(document).ready(function(){
})
// 简写形式
$().ready(function(){
})
// 更简写的形式
$(function(){
})
- 跟window.onload区别:
- onload会等页面所有资源加载完毕调用
- 而jQuery的入口函数等DOM加载完毕就调用
jQuery顶级对象——$
- $是jQuery里的顶级对象,我们以后开发也都围绕着$有关
- $的本质其实是一个函数,所以以后用jQuery大部分的使用
-
$(参数)
- 因为源码里有下面这句话
window.jQuery = window.$ = jQuery;- 就意味着$就相当于是一个全局变量,所以任何地方都可以访问
- 并且用$的地方,可以把$替换成jQuery,他们都是同一个
- 但是建议用$,写起来方便
使用$查找元素
- 语法:
-
$(选择器)可以传任意的CSS选择器
-
选择器能找到多少个,它就能找到多少个
-
-
用jQuery找到的元素,建议变量名前加$,这是规范,因为只是规范,不遵守也不会报错,但是建议遵守,因为这样就能一眼区分什么时候jQuery的数据,什么是原生的数据
-
它返回的数据是一个jQuery独有的伪数组,虽然没有真数组的方法,但是有jQuery帮我们封装的独有方法
-
那么请问,我用document.querySelectorAll找到的伪数组,有没有jQuery提供的方法?
-
没有,因为不是同一个伪数组
-
-
也就意味着用jQuery封装好的方法,必须用$来找元素
-
-
jQuery独有的伪数组,我们也称之为jQuery对象
获取与设置样式的方法
- 获取
-
jQuery对象.css('样式名') - 获取元素的最终样式
-
- 设置
- 两种方法:
-
//方法一 jQuery对象.css('样式名','样式值') //方法二 jQuery对象.css( { 样式名: 样式值 }) // 多个之间逗号隔开
jQuery对象与DOM对象
- jQuery对象: 就是通过$查找到的元素,本质是一个jQuery独有的伪数组
- DOM对象: 就是通过原生方法查找到的元素(document.qureySelector)
- DOM对象不能用jQuery里的方法,jQuery也不能用DOM对象的属性和方法
- 原生DOM对象,打印时直接打印标签,jQuery对象打印成一个伪数组
- 原生DOM对象如何转jQuery对象?
-
$(原生DOM) -
jQuery对象如何转原生DOM对象？
-
取下标
jQuery对象[下标] jquery对象.get(下标) -
-
因为后面jQuery学的多了，可能会跟原生搞混淆，给大家一个细节便于辨认
-
jQuery里的东西一般都是方法的调用，原生里的东西一般都是属性的赋值
-
jQuery绑定事件与this
-
语法
jQuery对象.事件名( function () { } ) // 例如： jQuery对象.click( function () { alert('123') } ) -
事件里的this
-
还是谁绑定这个事件，this就是谁，但是这个this是DOM对象
-
用不了jQuery的方法，要用jQuery的方法还要把DOM转成jQuery对象，给它$来转
-
-
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button id="btn">点我啊</button> <script src="./jquery-3.5.1.min.js"></script> <script> $('#btn').click(function () { // alert(123) // this还是dom对象，跟以前原生是一样的 // console.log(this) // 实现点击把宽度变大 // 事件里的this还是dom对象，所以要用jQuery方法，就把它先转成jQuery对象 // 也就是给他$ $(this).css('width', '200px') }) // $('#btn').mouseenter(function () { // alert('移入了') // }) // $('#btn').mouseleave(function () { // alert('移出了') // }) </script> </body> </html>
案例：开关灯
jQuery小小性能优化
-
$() 每次都会创建出新的jq对象
-
所以如果某个对象要频繁使用，最好先把它存到一个变量里，然后再操作变量
案例：隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>隔壁老王1</li>
<li>隔壁老王2</li>
<li>隔壁老王3</li>
<li>隔壁老王4</li>
<li>隔壁老王5</li>
<li>隔壁老王6</li>
<li>隔壁老王7</li>
<li>隔壁老王8</li>
<li>隔壁老王9</li>
<li>隔壁老王10</li>
</ul>
<script src="./jquery-1.12.4.min.js"></script>
<script>
// 找到所有的li
let $lis = $('li')
// 遍历每个li
for (let i = 0; i < $lis.length; i++) {
// 对jQuery对象取下标就变DOM对象了，所以没这个方法
// console.log($lis[i])
if ( i % 2 == 0)
$($lis[i]).css('backgroundColor', 'orange')
else
$($lis[i]).css('backgroundColor', 'yellowgreen')
}
</script>
</body>
</html>注意：不管如何，你只要是对jq对象取下标，都是得到DOM对象，所以尤其要注意在遍历时的对象问题
jQuery自带的过滤选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| :eq(index) | $('li:eq(2)').css('color', 'red'); | 获取到的li元素中，选择下标为2的元素，下标index从0开始。 |
| :odd | $('li:odd').css('color', 'red'); | 获取到的li元素中，选择下标为奇数的元素 |
| :even | $('li:even').css('color', 'red'); | 获取到的li元素中，选择下标为偶数的元素 |
-
注意：上面这三个选择器，是jq自己的选择器，所以不能写在样式里，只能写在jQuery里
text与html方法
-
text
-
相当于原生的innerText
-
如果直接 text() 那么就是取值，如果 text('文字') 那么就是赋值
-
-
html
-
相当于原生的innerHTML
-
如果直接 html() 就是取值，如果 html('内容') 那么就是赋值
-
jQuery里的筛选方法
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') | 相当于$('ul-li')，子类选择器 |
| find(selector) | $('ul').find('li'); | 相当于$('ul li'),后代选择器 |
| siblings(selector) | $('#first').siblings('li'); | 查找兄弟节点，不包括自己本身。 |
| parent() | $('#first').parent(); | 查找父亲 |
| parents(selector) | $('li').parents() | 不传查找到li的所有父级元素，传了选择器就找到父级里面符合这个选择器的元素 |
| eq(index) | $('li').eq(2); | 相当于$('li:eq(2)'),index从0开始 |
| next() | $('li').next() | 找下一个兄弟 |
| prev() | $('li').prev() | 找上一次兄弟 |
-
这些方法得到的是jq对象
案例：下拉菜单
-
知识点：
-
show() 显示
-
hide() 隐藏
-
children() 找子元素，小括号里可以传入选择器做进一步筛选
-
案例：突出显示
-
链式编程：可以把多个操作写在同一句话
案例：手风琴
案例：淘宝服饰精品展示
-
知识点：
-
index()
-
获取某个元素的下标
-
默认拿到的是它在自己父元素中的下标
-
它可以传入一个选择器，那么拿到的就是这个元素在这个选择器能找到的元素里的下标
-
-
扫一扫
350
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
