jQuery

最新推荐文章于 2024-05-12 11:31:09 发布

阿煜酱~

最新推荐文章于 2024-05-12 11:31:09 发布

阅读量3.2k

点赞数 1

分类专栏：前端文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/liuyu_719/article/details/126336450

版权

前端专栏收录该内容

9 篇文章 2 订阅

订阅专栏

jQuery笔记

jQuery
一、什么是jQuery
二、jQuery初识
- 2.1 基本选择器
- 2.2 组合选择器
- 2.3 层级选择器
- 2.4 基本筛选器
- 2.5 jQuery筛选方法
三、jQuery特点
- 3.1 隐式迭代
- 3.2 链式编程
四、CSS操作
五、属性值操作
- 5.1 获取选中的复选框
- 5.2 获取文本内容
六、元素操作
- 6.1 each遍历
- - 6.1.1 遍历元素
  - 6.1.2 遍历数组
- 6.2 创建与删除元素
七、jQuery尺寸及位置操作
- 7.1 尺寸
- 7.2 位置
- - 7.2.1 案例-返回顶部
八、jQuery其他方法
- 8.1 滑动动画
- - 8.1.1 自定义动画
  - 8.1.2 停止动画排队
- 8.2 补充-返回页面顶部
- 8.3 案例-导航条
九、事件
- 9.1 事件处理on
- - 9.1.1 事件委托
- 9.2 事件解绑off
- 9.3 事件只触发一次one
- 9.4 自动触发事件
- 9.5 事件对象
- 9.6 jQuery对象拷贝
十、其他
- 10.1、多库共存
- 10.2 jQuery插件
- - 10.2.1 图片懒加载
  - 10.2.2 全屏滚动
十一、本地存储
- 11.1 补充：JSON对象
- 10.2 jQuery插件
- - 10.2.1 图片懒加载
  - 10.2.2 全屏滚动
十一、本地存储
- 11.1 补充：JSON对象

jQuery

一、什么是jQuery

什么是jQuery：

内部对原生JS代码进行了封装，并且还额外添加了很多的功能，能够让开发者通过书写更少的代码来完成js操作。
兼容多个浏览器的，在使用jQuery的时候就不需要考虑浏览器兼容问题。
jQuery的宗旨：“write less do more”（用更少的代码完成更多的事情）

j 就是JavaScript，Query是查询的意思，jQuery意思就为查询js，把js中的DOM操作做了封装，可以快速的查询使用里面的功能。

使用jQuery的好处：

跨浏览器兼容。
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发
免费、开源
轻量级，不会影响页面加载速度。

如何使用：

1.下载文件，链接如下，随后在引入。
	https://jquery.com/download/

2.直接引入jQuery提供的CDN服务  	
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  	"""缺点，你的计算机必须要有网络"""

3.文件下载到了本地，如何解决多个文件反复书写引入语句的代码。
	可以借助于IDEA工具的自动初始化代码功能完成自动添加，实现每次新建HTML页面时自动补充引入代码。
  	配置--->编辑--->file and code template
    (下图以pycharm为例，webStorm也是一样的。)

二、jQuery初识

“$” 是jQuery的简称，也是顶级对象

jQuery对象与DOM对象需要区分开。

DOM对象

//原生JS DOM对象
let div = document.querySelector('div')

//转jQuery对象
$('div')

jQuery对象

//jQuery对象
$('div')

//jQuery转DOM对象
$('div')[0]

jQuery对象与DOM对象的方法不一样，所以不能混用

（仅做初次使用展示，后续章节会解释方法的使用）
如下：关于隐藏与显示元素

隐藏元素与显示元素

显示元素：
方法名： show
用法：
//让div标签内部亲儿子span标签，可以显现出来.style.display = 'block'
$('div').children('span').show();
可以利用jQuery对象封装好的方法，直接进行操作，以上仅为演示，后续有详细的介绍jQuery对象的方法

隐藏元素：

方法名：hide()

用法：

//让div标签内部亲儿子span标签，隐藏起来display:none
$('div').children('span').hide();

jQuery封装好的功能，如：

$('ul').children('li').click(function () {
 console.log($(this).index())
})
$(‘ul’) 表示获取ul标签，格式为jQuery对象
children(‘li’) 表示ul元素的子元素li，随后给li绑定事件。
最终效果为，点击li标签，控制台输出索引号（从0开始）

2.1 基本选择器

id选择器

let res = $('#d1')
	//拿到的为数组：S.fn.init [input#d1.form-control]  jQuery对象
res[0]
	//<input id="d1" type="file" class="form-control ">  标签对象

class选择器

$('.c1')
	//同上，jQuery对象

标签选择器

$('span')
	//同上，jQuery对象

2.2 组合选择器

取具有jumbotron属性的div标签的jQuery对象

$('div.jumbotron')
	//S.fn.init [div.jumbotron, prevObject: S.fn.init(1)]   jQuery对象

取id为d1的input标签的标签的对象

$('input#d1')[0]
   // 标签对象

取ul下的所有Li标签jquery对象

//下一章节的后代选择器
$('ul li')

全部，jQuery对象

$('*')

id为d1，或，class为btn的jQuery对象

$('#d1,.btn')
	// 可混用，括号内的关系为“or”，而非“and”

2.3 层级选择器

后代选择器

$('div span')  
	// w.fn.init(3) [span, span, span, prevObject: w.fn.init(1)]
	// 后代选择器：div标签内所有span标签（jQuery对象）

儿子选择器

$('div>span') 
	// w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
	// 儿子选择器：div内，第一级别下的span标签，如果里面再套有div，是取不到的，后代选择器可以
	// （jQuery对象）

毗邻选择器

$('div+span')  
	// w.fn.init [span, prevObject: w.fn.init(1)]
	// 毗邻选择器：div标签本身，与之同级别，紧挨着的下面的第一个的span标签（jQuery对象）

弟弟选择器

$('div~span')  
	// w.fn.init(2) [span, span, prevObject: w.fn.init(1)]
	// 弟弟选择器：div标签本身，与之同级别下面所有的span（jQuery对象）
	// 可以理解为毗邻选择器的升级版，毗邻只能一个，而弟弟可以取到所有。

2.4 基本筛选器

<ul>
    <li>第一</li>
    <li>第二</li>
    <li>第三</li>
</ul>

展示效果：
●第一
●第二
●第三

$('ul li')
	// 后代选择器，ul无序列表中的所有li标签。

$('ul li:first')
	// "大儿子",第一个li标签,jQuery对象
	// 加上[0],DOM标签对象。

$('ul li:last')  # 小儿子
	// "小儿子",最后一个li标签
              
$('ul li:eq(2)')
	// 索引为2的标签（从0开始）

$('ul li:even')  
	// 偶数索引的标签(0包含在内)
             
$('ul li:odd')  
	// 奇数索引的标签

$('ul li:gt(2)')  
	// 大于索引2的标签
           
$('ul li:lt(2)')  
	// 小于索引2的标签
             
$('ul li:not("#d1")')  
	// 选中，除了id="d1"的标签。（not括号内用双引）

$('div:has("p")')  
	// 选取出包含一个或多个标签在内的标签

2.5 jQuery筛选方法

汇总一览：

语法	用法	说明
parent()	$(‘li’).parent();	查找父级(最近的父级)
parents()	$(‘li’).parents();	返回祖宗元素
children(selector)	$(‘ul’).children(‘li’);	相当于$(‘ul>li’)，最近一级(亲儿子)，孙子不行。
find(selector)	$(‘ul’).find(‘li’)	相当于$(‘ul li’)，后代选择器
siblings(selector)	$(‘.first’).siblings(‘li’);	查找兄弟节点，不包括自己本身
nextAll([expr])	$(‘.first’).nextAll();	查找当前元素之后，所有的同辈元素
prevAll([expr])	$(‘.last’).prevAll();	查找当前元素之前，所有的同辈元素
haxCLass(class)	$(‘div’).hasClass(‘protected’);	检查元素是否含有某个类
eq(index)	$(‘ul’).eq(2);	相当于$(‘li:eq(2)’)，index从0开始

三、jQuery特点

3.1 隐式迭代

jQuery中，有一个很重要的概念：隐式迭代

什么是隐式迭代:

遍历内部DOM元素（伪数组形式存储）的过程，叫做隐式迭代、
简单来说就是，给匹配到的所有元素进行循环遍历，简化程序员操作。

示例代码如下：

（**注：**示例代码中用的.css方法，详情见4章节）

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>

<script>
    $('ul li').css('background-color','skyblue')
</script>

展示效果：

因为有隐式迭代这个机制，所以，所有的Li标签的背景色都为天蓝色。

3.2 链式编程

注：本章节案例中，使用.css方法修改元素样式，详情见4章节

思考：
当我们拿到一个元素对象之后，相对自己和父级的进行操作时，代码如何书写呢？
<div>father
    <div class="son">son</div>
</div>

<script>
    //将子元素的文本颜色变成红色
    $('.son').css('color','red')
    //将父元素的文本颜色变成蓝色
    $('.son').parent().css('color','blue')
</script>
这样会重复出现了两次 $(‘.son’)，链式编程，就是可以将一段一段的代码拼接到一起，如下：
$('.son').css('color','red').parent().css('color','blue')
//子                         父

四、CSS操作

汇总一览：

语法	作用
jqObj.css(【属性，值】\| 【obj】)	修改元素的属性和值
jqObj.addClass(‘css类’)	添加类
jqObj.removeClass(‘css类’)	移除类
jqObj.toggleClass(‘css类’)	切换类

修改元素的属性和值

格式：
jQuery对象.css(属性，值) 或者 .css(obj)
如：
$('div').css('background-color','pink')

$('div').css({
    width:300,
    heigth:300,
    backgroundColor:red
})
当只有一个参数时（属性），返回的是属性的值。
<div style="color: red">son</div>

<script>
    console.log($('div').css('color'))
    //控制台输出：
    	//rgb(255, 0, 0)
</script>
注：

当参数为对象时，属性不需要带引号，值为数字时也不需要带引号和单位。

当实参为两个时，属性参数必须带引号，值参数可以不带引号和单位。

添加、移除、切换类

添加类：

格式：
```
$('div').addClass('CSS类')
```

代码示例：

<style>
    .bgcRed {
        background-color: red;
    }
</style>

<div style="width: 100px;height: 100px;"></div>

<script>
    $('div').addClass('bgcRed')
</script>
<!--
最终效果：  div盒子的背景色为红色
-->

移除类：

格式：
```
$('div').removeClass('CSS类')
```

代码示例：

<style>
    .bgcRed {
        background-color: red;
    }
</style>

<div style="width: 100px;height: 100px;" class="bgcRed"></div>

<script>
    $('div').removeClass('bgcRed')
</script>
<!--
最终效果：  div盒子的背景色为白色
-->

切换类：

格式：

$('div').toggleClass('CSS类')
//切换： 有则删除，无则添加。

代码示例：

<style>
    .bgcRed {
        background-color: red;
    }
    div {
        width: 100px;
        height: 100px;
        background-color: skyblue;
    }
</style>

<div></div>

<script>
    $('div').click(function () {
        $(this).toggleClass('bgcRed')
    })
</script>
<!--
最终效果：  点击div盒子时，背景色会切换至红色，再次点击返回之前颜色。
-->

五、属性值操作

汇总一览：

语法	作用
prop(‘属性’，[‘值’])	获取非自定义属性的值，或者修改属性的值
attr(‘属性’，[‘值’])	获取任意属性的值，或者修改任意属性的值
html([‘值’])	获取或设置元素内容，相当于原生innerHTML
text([‘值’])	获取或设置元素内容，相当于原生innerText
val([‘值’])	获取或设置表单值，相当于原生value

获取并设置属性

一、prop

格式：

jQueryObj.prop('属性名')    //获取属性的值
jQueryObj.prop('属性名','值')  //设置属性的值

示例代码：

<a href="https://www.mmzztt.com" index="111">点我，有你好看呦~</a>
<script>

$(function () {
    console.log($('a').prop('href'))
    console.log($('a').prop('index'))
    //控制台输出：
    	//  https://www.mmzztt.com      
    	//  undefined
    
    
	console.log($('a').prop('href','https://www.baidu.com'))
    console.log($('a').prop('href'))
    //控制台输出：
    	//  w.fn.init [a, prevObject: w.fn.init(1)]      
    	//  https://www.baidu.com

})
</script>

prop只能获取非自定义的，要获取/设置自定义属性，需要使用attr

二、attr

格式：

jQueryObj.attr('属性名')    //获取属性的值
jQueryObj.attr('属性名','值')  //设置属性的值

示例代码：

console.log($('a').attr('href'))
console.log($('a').attr('index'))
console.log($('a').attr('href','https://www.qq.com'))
console.log($('a').attr('href'))
//控制台输出：
    	//  https://www.mmzztt.com   
    	//  111
    	//  w.fn.init [a, prevObject: w.fn.init(1)]      
    	//  https://www.qq.com

5.1 获取选中的复选框

如何知道用户在页面上勾选了那些按钮呢？

格式：

选择器后面跟上 “:checked” 即可
$('checkbox:checked')

//后面跟:checked
$('checkbox:checked').length
//获取用户在复选框内勾选的个数。

使用场景：

- 案例：清除购物车
- (该案例使用到6.2章节中的remove删除方法，详情见6.2)

需求，可以指定清除购物车中的物品，也可以全部清空。

<div class="shopCar">购物车:
 <p><input type="checkbox">休闲鞋</p>
 <p><input type="checkbox">运动鞋</p>
 <p><input type="checkbox">高跟鞋</p>
 <p><input type="checkbox">长筒靴</p>
 <p><input type="checkbox">衬衫</p>
 <p><input type="checkbox">短裙</p>
 <p><input type="checkbox">连衣裙</p>
 <div>
     <button class="clearnSelt">清空选中</button>
 </div>
 <div>
     <button class="clearnAll">清空购物车</button>
 </div>
</div>

//给选中清空按钮添加点击事件
$('.clearnSelt').click(function () {
 //input框被选中的父节点P标签，执行remove方法，删除P标签及其子标签input
 $('input:checked').parent().remove()
})

//给清空所有按钮添加点击事件
$('.clearnAll').click(function () {
 //删除所有的P标签，只留下两个button按钮
 $('.shopCar p').remove()
})

5.2 获取文本内容

获取和设置，标签内部文本

格式：

jQueryObject.html()   //获取
jQueryObject.html('值')  //设置文本

jQueryObject.text()   //获取
jQueryObject.text('值')  //设置文本

$('input').val()    //获取
$('input').val('值')  //设置文本

六、元素操作

主要是遍历、创建、添加、删除元素操作

本章节汇总一览：

语法	作用
each()	遍历元素或数据
append()	内部添加元素，添加到最后面（需要先创建）
prepend()	内部添加元素，添加到最前面（需要先创建）
after()	外部添加元素，添加到最后面（需要先创建）
before()	外部添加元素，添加到最前面（需要先创建）
remove()	删除匹配的元素
empty()	删除匹配元素的子节点
html(“”)	删除匹配元素的子节点

6.1 each遍历

jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，那么就需要用到遍历。

each，就是jQuery封装好的，用于遍历的方法

6.1.1 遍历元素

作用：

遍历元素
遍历数据（数组、对象）

格式：
$('div').each(function(index,domEle) {})
回调函数有两个参数

index是每个元素的索引号，可自定义索引号名称，如：i
domEle是每个DOM元素对象，因为不是jQuery对象，所以在调用方法时，注意转jQuery对象，$(domELe)

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>


<script>
let colorArr = ['green','pink','skyblue']
$('ul li').each(function (index,domEle) {
    console.log(index)
    console.log(domEle)
})
</script>
<!--
	控制台输出：
		0
			<li>1</li>
		1
			<li>2</li>
		2
			li>3</li>
-->

'''
	因为有each遍历，所以控制台会循环打印$('ul li')这个jQuery对象（伪数组）中的每一个元素（li），并打印当前元素所在数组的索引号，以及dom对象。
'''

案例-1，li标签颜色设置：

HTML

<ul>
<li>绿色</li>
<li>粉色</li>
<li>蓝色</li>
</ul>

let colorArr = ['green','pink','skyblue']
$('ul li').each(function (index,domEle) {
 //这里需要使用$()，将DOM对象转成jQuery对象，否则用不了css方法，需转为下列写法：
 //  domEle.style.color = colorArr[index]
 $(domEle).css('color',colorArr[index])
})

实现效果：

案例-2，计算价格：

<div>
 <p>价格：99.80</p>
 <p>价格：36.90</p>
 <p>价格：47.80</p>
</div>
let sum = 0
$('div p').each(function (index,domEle) {
  sum += parseFloat(parseFloat($(domEle).html().split('：')[1]).toFixed(2))
})
console.log(sum)
案例中使用的方法说明：

parseFloat，字符串类型转为数字类型（浮点）
html，获取元素内部文本
split，字符串内置方法，以…分割，返回数组
toFixed，取小数点后多少位，因为使用这个方法后，返回的数据类型为字符串，所有需要再套一层parseFloat。

6.1.2 遍历数组

作用：

遍历元素
遍历数据（数组、对象）

格式：
$.each(数据,function(index或key,value){})
两个形参，分别接收索引和值

非关键字，可自定义。

代码示例：

let arr = ['娃蛤蛤','雷碧','可楽','蜂蜜抽子','冰糖雪莉',]
$.each(arr,function (index,value) {
    console.log(index)
    console.log(value)
})
// 控制台输出：
// 	0
// 	娃蛤蛤
// 	1
// 	雷碧
// 	2
// 	可楽
// 	3
// 	蜂蜜抽子
// 	4
// 	冰糖雪莉

let arr = {'name':"liuyu",'age':'18'}
$.each(arr,function (key,value) {   //index为属性的值
    console.log(key)
    console.log(value)
})
//控制台输出：
// 		name     
// 	    liuyu
// 	    age
// 	    18

可以看到，利用each遍历方法，我们可以得到数组或对象中的索引、元素，以及key与value

6.2 创建与删除元素

一、创建元素

分为两步，第一步创建元素，第二步添加元素。

创建元素：

let li = $('<li>创建li标签</li>')
//或者
let li = '<li>创建li标签</li>'

添加元素：

//内部添加（父子级关系）
$('ul').append(li)   //内部添加并放到内容的最后面
$('ul').prepend(li)   //内部添加并放到内容的最前面
//外部添加（兄弟关系，同级别）
$('div').before(div)   //添加在jQuery对象之前
$('div').after(div)   //添加在之后

代码示例：

<!--
	内部添加
-->
<ul>
    <li>自带的li标签</li>
</ul>

<script>
    let li = $('<li>创建出来的li标签</li>')
    $('ul').append(li)   //内容尾部添加
</script>

<!--
	外部添加
-->
<div class="box2">盒子2</div>

<script>
    let div1 = $('<div>盒子1</div>')
    let div3 = $('<div>盒子3</div>')
    $('.box2').before(div1)
    $('.box2').after(div3)
</script>

二、删除元素

删除元素分为两种类型：

匹配到的元素，删除自身及其子节点
匹配到的元素，只删除子节点，自身不删除。

（1）全部删除

格式：
$('div').remove()
（2）只删除子节点。

格式：
$('div').empty()
//或者
$('div').html("")

案例：清空购物车

需求，可以指定清除购物车中的物品，也可以全部清空。

<div class="shopCar">购物车:
 <p><input type="checkbox">休闲鞋</p>
 <p><input type="checkbox">运动鞋</p>
 <p><input type="checkbox">高跟鞋</p>
 <p><input type="checkbox">长筒靴</p>
 <p><input type="checkbox">衬衫</p>
 <p><input type="checkbox">短裙</p>
 <p><input type="checkbox">连衣裙</p>
 <div>
     <button class="clearnSelt">清空选中</button>
 </div>
 <div>
     <button class="clearnAll">清空购物车</button>
 </div>
</div>

//给选中清空按钮添加点击事件
$('.clearnSelt').click(function () {
 //input框被选中的父节点P标签，执行remove方法，删除P标签及其子标签input
 $('input:checked').parent().remove()
})

//给清空所有按钮添加点击事件
$('.clearnAll').click(function () {
 //删除所有的P标签，只留下两个button按钮
 $('.shopCar p').remove()
})

七、jQuery尺寸及位置操作

汇总一览：

语法	作用
width()	取得匹配元素宽度，只算盒子内容的宽，内外边距和边框不算。
height()	取得匹配元素高度，只算盒子内容的高，内外边距和边框不算。
innerWidth()	取得匹配元素的宽度，包含内边距
innerHeight()	取得匹配元素的高度，包含内边距
outerWidth()	取得匹配元素宽度，包含内边距和边框
outerHeight()	取得匹配元素高度，包含内边距和边框
outerWidth(true)	取得匹配元素宽度，包含内外边距以及边框
outerHeight(true)	取得匹配元素高度，包含内外边距以及边框
offset()	设置和获取被选元素，相对于文档的偏移位置
position()	获取被选元素，相对于带定位父级的偏移位置
scrollTop()	获取被选元素，顶部滑动被卷入的高度
scrollLeft()	获取被选元素，左侧滑动被卷入的宽度

7.1 尺寸

width()与height()方法

作用：

查询和更改盒子内容区域的宽高。

特点：

width()与height()方法只能查看盒子内容区域的大小
- 内容区域大小 = 整个盒子宽高 - 内边距 - 盒子边框
设置宽高时，可以不带单位。

示例代码：

<style>
    div {
        margin: 30px;
        padding: 30px;
        width: 200px;
        height: 200px;
        border: 5px solid black;
    }
</style>

<div class="box"></div>

//查询当前盒子的宽高
	//200 - 30*2 - 5*2 = 130
console.log($('.box').width())
console.log($('.box').height())

//更改宽度，不需要加单位
$('.box').width(300)
//查询验证，结果为300
	//由于内容区域宽修改为了300，那么整个div盒子的宽将变成370
console.log($('.box').width())

innerWidth()与innerHeight()

作用：

获取盒子的宽高度，不包含边框

outerWidth()与outerHeight()

作用：

获取盒子的宽高度，边框和内边距都包含，不包含外边距。

outerWidth(true)与outerHeight(true)

作用：

获取盒子的宽高度，包括外边距

7.2 位置

offset()

属性名：

offset()

作用：

设置或返回被选元素，相对于文档的偏移坐标（相对于文档，与父级没关系）

使用方法：
<style>
    div {
        margin: 30px;
        width: 200px;
        height: 200px;
    }
</style>

<div class="box"></div>

<script>
	console.log($('.box').offset())
</script>

因为得知offset方法返回的是对象，所以可以通过".属性"的方式，获取到具体的值。
console.log($('.box').offset().left)
console.log($('.box').offset().top)
//也可以通过传入对象的方式，覆盖掉原来的值，实现修改偏移位置
console.log($('.box').offset({top:100,left:100}))

position()

属性名：

position()

作用：

获取被选元素，相对于带定位父级的偏移位置。
父级没有定位时，以文档为主。
不可更改偏移量，只能获取。

使用方法：
<style>
    div {
        position: relative;
        padding: 20px;
        width: 200px;
        height: 200px;
    }    
</style>

<div class="box">
    <div class="son"></div>
</div>

<script>
    console.log($('.son').position())
</script>

与offset一样，可以直接.top和.left查询。
console.log($('.box').offset().left)
console.log($('.box').offset().top)

scrollTop()与scrollLeft()

属性名：

scrollTop() scrollLeft()

作用：

获取被选元素，顶部或左侧滑动被卷入的高度或宽度

使用方法：

//BOM滚动事件，只要鼠标滚轮滚动就触发执行
$(window).scroll(function () {
    //鼠标往下滚动x像素，那么就代表着该页面有x像素被滑动到了最上面。
    //scrollTop获取的就是被划入上去的那x像素
    console.log($(document).scrollTop())
})
//最终效果： 鼠标往下滚动，打印的数值越来越大。

scrollTop() scrollLeft() 方法同时也可以进行设置，比如：

//当页面加载完毕之后，有100像素的页面内容被卷入上去。
$(function () {
    $(document).scrollTop(100)
})

7.2.1 案例-返回顶部

案例：页面滚动，header区域被划入上去之后，返回顶部按钮出现。

HTML

<header class="wrapper"></header>
<nav class="wrapper"></nav>
<div class="backTop">返回顶部</div>

CSS

.wrapper {
 margin: 0 auto;
}
header {
 width: 800px;
 height: 100px;
 background-color: pink;
}
nav {
 width: 800px;
 height: 1200px;
 background-color: skyblue;
}
.backTop {
 display: none;
 position: fixed;
 left: 1160px;
 top: 460px;
 width: 60px;
 height: 30px;
 background-color: red;
}

$(window).scroll(function () {
 //当文档顶部划入进去的高度，大于等于，头部标签盒子的高度时，对返回顶部标签进行展示
 if ($(document).scrollTop() >= $('header').outerHeight()) {
     //缓动动画，淡入
     $('.backTop').fadeIn()
 } else {
     //缓动动画，淡出
     $('.backTop').fadeOut()
 }
})

//返回顶部
$('.backTop').click(function () {
 // 瞬间返回，没有动画过渡，用户体验不好
 // $(document).scrollTop(0)

 //缓动动画（详情见8章节）
 //注意，这里不可以写$(document)，动画函数针对的不是文档，而是元素，所以是$('body')或者$('html')，由于Firefox、IE、Chrome之间的兼容性问题，所以建议写成$('body,html')
 // 先关闭其他动画， 执行动画函数
 $('body,html').stop().animate(
     //animate中，将scrollTop属性改为0即可。
     {scrollTop:0}
 );
})

注：

在本章节中出现的stop()与animate()方法，属8章节的内容，详情请跳转。

八、jQuery其他方法

汇总一览：

语法	作用
jqObj.show()	展示元素，相当于style.display=‘inline’
jqObj.hide()	隐藏元素，相当于style.display=‘none’
jqObj.toggle()	切换元素
jqObj.index()	获取元素在父元素中的索引
jqObj.slideDown()	下滑动
jqObj.slideUp()	上滑动
jqObj.hover(fn1,fn2）	事件切换
jqObj.fadeIn(动画时间)	淡入
jqObj.fadeOut(动画时间)	淡出
jqObj.fadeToggle(动画时间)	淡入淡出切换
jqObj.fadeTo(动画时间，透明度)	修改透明度，速度和透明度必须写

展示、隐藏、切换元素

语法格式：
$('div').show(speed,easing,fn)
$('div').hide(speed,easing,fn)
$('div').toggle(speed,easing,fn)
以上三个参数均为可选参数:

speed：值为slow、normal、fast时，表示三种预定速度。或者表示动画时长的毫秒数。
easing: 用来指定切换效果，默认是swing，可用参数linear
fn ：回调函数，在动画执行完毕之后执行一次。
'''
一般不填写参数，直接使用。
	另外，这个动画是从左上角，向右下角延伸的，上下缩放可使用slidedown和slideup
'''

获取索引

利用jQuery获取ul下的li标签时。
<ul>
 <li>1</li>
 <li>2</li>
 <li>3</li>
 <li>4</li>
</ul>
<script>
 console.log($('ul li'))
</script>

与原生JS的.children方法一样，得到的是个伪数组，数组内的每个元素，对应着每个li。

所以可利用jQuery封装好的index()方法，获取到Li的索引号，通常配合事件使用。

代码样例：
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    $('ul li').click(function () {
        console.log($(this).index())
    })
</script>
最终效果：浏览器中点击li标签，返回当前点击标签的索引号。

8.1 滑动动画

滑动动画

由于show和hide的滑动都是以左上角为起点，向右下角延伸的，通常情况下用的更多的，反而是上下滚动的。

而slideDown与slideUp，以及hover,，就是做上下滚动的。

格式：
jQueryObj.slideDown(speed,easing,fn)
jQueryObj.slideUp(speed,easing,fn)
与show的参数时一样的，不过一般只给一个参数，用来控制动画时长，如：
jQueryObj.slideUp(10)  //单位：毫秒

可实现的效果：

示例代码：

<div class="nav">
    <a href="">最新活动
        <ul>
            <li>活动1</li>
            <li>活动2</li>
            <li>活动3</li>
        </ul>
    </a>

    <a href="">产品
        <ul>
            <li>产品1</li>
            <li>产品2</li>
            <li>产品3</li>
        </ul>
    </a>
    <a href="">客户支持
        <ul>
            <li>客户支持1</li>
            <li>客户支持2</li>
            <li>客户支持3</li>
        </ul>
    </a>
    <a href="">合作与生态
        <ul>
            <li>合作与生态1</li>
            <li>合作与生态2</li>
            <li>合作与生态3</li>
        </ul>
    </a>
</div>

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav {
    background-color: pink;
}

.nav a {
    width: 100px;
    float: left;
    height: 50px;
    font-size: 18px;
    line-height: 50px;
    text-align: center;
    margin-right: 40px;
    text-decoration: none;
    color: black;

    position: relative;

}
.nav a:first-child {
    margin-left: 40px;
}
.nav a:last-child {
    margin-right: 0;
}
.nav ul {
    position: absolute;
    width: 100px;
    top: 50px;
    left: 0;
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    background-color: rgb(255,255,255);
    display: none;
}
.nav ul li {
    box-shadow:  1px 0  27px 0  rgb(241,241,241);

}

$('.nav a').mouseover(function () {
    $(this).children('ul').slideDown(10)
})

$('.nav a').mouseout(function () {
    $(this).children('ul').slideUp(10)
})

在上述案例中，我们写了两个事件，一个是鼠标进入事件，一个是鼠标离开事件

而在hover中，这两步可以合成一步。

$('.nav a').hover(function () {
    $(this).children('ul').slideDown(10)
},function () {
    $(this).children('ul').slideUp(10)
})

格式：
jqueryObj.hover(func1,func2);
两个参数均为函数，参数1表示鼠标进入时，执行的代码，参数2表示鼠标离开时，执行的代码。

当参数只有一个时，那么代表，鼠标进入和离开，都执行内部的代码。

淡入淡出，修改透明度

淡入：
格式：
jQuery对象.fadeIn(时间)   //单位毫秒
淡出：
格式：
jQuery对象.fadeOut(时间)
切换：
格式：
jQuery对象.fadeToggle(时间)
修改透明度：
格式：
jQuery对象.fadeTo(时间,透明度)

实现效果：

jq-常用方法-案例-3

代码：

<button class="btn btn-success">淡入</button>
<button class="btn btn-warning">淡出</button>
<button class="btn btn-danger">切换</button>
<button class="btn btn-success">修改透明度</button>
<div style="width: 100px;height: 100px;background-color: skyblue;display: none"></div>

$('button').eq(0).click(function () {
    $('div').fadeIn(500)
})
$('button').eq(1).click(function () {
    $('div').fadeOut(500)
})
$('button').eq(2).click(function () {
    $('div').fadeToggle(500)
})
$('button').eq(3).click(function () {
    $('div').fadeTo(500,0.3)
})

8.1.1 自定义动画

语法：
jQueryObj.animate(params,[speed],[easing],[fn])
参数：

params：想要更改的样式属性，以对象形式传递，必须写，属性名可以不带引号。
speed：动画速度，可写slow\normal\fast，或者数字，单位为毫秒。
easing：用来指定切换效果，默认是swing，可用参数linear。
fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

使用自定义动画函数，可实现以下效果：

代码如下：

/*一定要添加定位*/
div {
    position: relative;
}

<button class="btn btn-success">开始移动</button>
<div style="width: 100px;height: 100px;background-color: skyblue;"></div>

$('button').click(function () {
    $('div').animate({
        left : 100,   //向右移动
        top : 100,    //向下移动100px
        opacity : 0.3,   //透明度
    })
})

8.1.2 停止动画排队

动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行

如何停止排队

在动画或者效果的前面，添加上.stop()，如：
$(this).children('ul').stop().slideDown(10)
stop()一定要写到前面，相当于停止结束上一次的动画。

8.2 补充-返回页面顶部

在7.2.1章节中有提到

//返回顶部
$('.backTop').click(function () {
    // 瞬间返回，没有动画过渡，用户体验不好
    // $(document).scrollTop(0)

    //缓动动画
    //注意，这里不可以写$(document)，动画函数针对的不是文档，而是元素，所以是$('body')或者$('html')，由于Firefox、IE、Chrome之间的兼容性问题，所以建议写成$('body,html')
    // 先关闭其他动画， 执行动画函数
    $('body,html').stop().animate(
        //animate中，将scrollTop属性改为0即可。
        {scrollTop:0}
    );
})

8.3 案例-导航条

需求：实现以下图片中的效果。

jq-常用方法-案例-1

代码：

<!--引入jQuery-->
<script src="js/jquery.min.js"></script>

<!--CSS代码-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    ul {
        list-style: none;
        float: left;
    }
    ul li {
        width: 60px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 16px;
        background-color: plum;
        color: white;
    }
    a img {
        height: 160px;
        float: left;
        display: none;
    }
    .carousel {
        margin: 100px auto;
        width: 220px;
        height: 160px;
        overflow: hidden;
        box-sizing : border-box;
    }

</style>

<!--HTML代码-->
<div class="carousel">
    <!--左侧导航条-->
    <ul class="nav">
        <li>帆布鞋</li>
        <li>休闲鞋</li>
        <li>运动鞋</li>
        <li>高跟鞋</li>
    </ul>
	
    <!--右侧内容区域-->
    <div class="content">
        <a href=""><img src="https://gw.alicdn.com/tps/i1/1111259574/O1CN01ZPc0Qp2Kawfk1pD76_!!0-item_pic.jpg_Q75.jpg" alt="" style="display: block"></a>
        <a href=""><img src="https://gw.alicdn.com/tps/i4/3204880092/O1CN01sAMJvB1CYB98ppACB_!!3204880092.jpg_Q75.jpg" alt="" ></a>
        <a href=""><img src="https://gw.alicdn.com/tps/i4/1965362166/O1CN01oGfprj1Rs4UrR65Ga_!!1965362166-0-lubanu-s.jpg_Q75.jpg" alt="" ></a>
        <a href=""><img src="https://gw.alicdn.com/tps/i3/750399944/O1CN01TK2Wlj2NKP5nA5Q1K_!!750399944-0-lubanu-s.jpg_Q75.jpg" alt="" ></a>
    </div>
</div>

<!--JS代码-->
<script>
    $('.nav').children('li').click(function () {
        //去掉其他li的颜色
        $(this).siblings('li').css('background-color','')
        $(this).siblings('li').css('color','')
        //把点击的颜色换上
        $(this).css('background-color','white')
        $(this).css('color','lightgreen')
        //更换图片
		//先让所有图片都隐藏
        $('img').hide()
        //再让点击左侧导航对应的img标签显示
        $('img').eq($(this).index()).show()
        // $(this).index()

    })
    
</script>

九、事件

由于jQuery文章本身就是要搭配上原生JavaScript来食用的，所以事件相关的知识点，一开始直接拿来就用，不做过多介绍，本章呢做个详细说明。

9.1 事件处理on

使用on的好处：

一次绑定多个事件

传统绑定事件：
$('div').mouseenter(function () {
 $(this).css('background','skyblue')
})
$('div').mouseout(function () {
 $(this).css('background','')
})
如上所示，实现鼠标进入和离开盒子颜色变换的效果，需要绑定两个事件（暂时不考虑hover）

on()

利用on的事件绑定方法：

第一种方法

$('div').on({
 //鼠标进入事件
 mouseenter: function () {
     $(this).css('background','skyblue')
 },    //逗号隔开    
 
 //鼠标离开事件
 mouseout: function () {
     $(this).css('background','')
 },    //逗号隔开 
 
 //点击事件
 click: function () {
     $(this).css('background','red')
 },    //逗号隔开 
})

第二种方法

$('div').on('mouseenter mouseout',function () {
 $(this).toggleClass({
     background: skyblue
 })
})

9.1.1 事件委托

作用：

利用事件冒泡的原理，给父元素添加绑定事件，子元素作为触发对象，运行父元素的事件函数代码。

应用场景：

动态渲染出来的标签，无法直接绑定事件，需要给它父级绑定事件，然后委托给想要触发的那个元素。

代码测试：

$('ul').on('click','li',function () {
 console.log('111')
})
事件绑定到了ul身上，但是触发对象（委托、委派）给了Li标签。

最终效果：当点击li标签，控制台输出111

注意：

在使用事件委托之后，父元素，也就是案例中的ul元素，将无法直接执行事件函数代码。
```
$('ul').on('click',function () {
    console.log('111')
})
```
直接这么写也可以实现效果（冒泡），但是后续无法解除“委托”效果，li元素始终可以触发ul绑定的事件函数。另外ul元素也可以通过点击触发click事件，而使用了委托则不可以。

9.2 事件解绑off

语法	作用
$(‘div’).off()	解绑div元素所有的事件处理程序
$(‘div’).off(“click”)	解绑div元素上面的click事件
$(‘div’).off(“click”,“p”)	解绑委托给子元素p的事件

注意：

只有使用了on绑定事件的，才可以使用off解绑事件。
解绑委托任务时，需要注意绑定事件的方式。

9.3 事件只触发一次one

利用one来绑定的事件，最大的特点就是只触发一次。

$('div').one('click',function () {
    console.log('我只说一次：“我欢喜侬”')
})

9.4 自动触发事件

语法	作用
$(‘div’).事件()	自动触发事件，会触发元素的默认行为
$(‘div’).trigger(‘事件’)	自动触发事件，会触发元素的默认行为
$(‘div’).triggerHandler(‘事件’)	自动触发事件，不会触发元素的默认行为

$('input').on('focus',function () {
    $(this).val('请输入')
})
$('input').triggerHandler('focus')
/*
$('input').focus()
$('input').trigger('focus')
*/

最终效果：

打开页面，input标签内容变成"请输入"。
获得焦点后，表单的输入光标不存在，因为不触发默认行为。

9.5 事件对象

与原生JS的事件对象的格式与方法一致，

如： clientX、pageX、taget、preventDefault()、stopPropagation()

9.6 jQuery对象拷贝

格式：
$.extend([deep],target,object1,[objectN])
deep：如果设置为true，表示深拷贝。默认为false，表示浅拷贝。
target：需要拷贝过来的
object1：把数据拷贝走的（第一个对象）
objectN：把数据拷贝走的（第N个对象）
浅拷贝：

浅拷贝是把复杂数据类型中的地址（指向栈的地址），拷贝了过去，当栈内的数据被修改时，拷贝过去的数据会受到影响。

浅拷贝

创建两组对象
let data = {'name':"liuyu",'age':22,'addr':['上海市','徐汇区']}
let dataBack = {}
将data备份一下，新的一份名称叫做dataBack
$.extend(dataBack,data)
//打印查看
console.log(dataBack)
/*
{name: 'liuyu', age: 22, addr: Array(2)}
addr: (2) ['上海市', '徐汇区']
age: 22
name: "liuyu"
*/
可以看到，数据被拷贝了过来，接下来对原始数据进行更改，来查看备份过去的数据，是否发生了改变
data.name = '刘煜'
data.addr[1] = '闵行区'
console.log(data)
/*
{name: '刘煜', age: 22, addr: Array(2)}
addr: (2) ['上海市', '闵行区']
age: 22
name: "刘煜"
*/
更改完原始数据之后，查询备份数据，是否发生了改变
console.log(dataBack)
/*
{name: 'liuyu', age: 22, addr: Array(2)}
addr: (2) ['上海市', '闵行区']
age: 22
name: "liuyu"
*/
发现：

对原始数据的姓名和地址进行了更改，结果发现拷贝过去的数据，姓名没发生改变，而地址却改变了。

浅拷贝：

由于’addr’:[‘上海市’,‘徐汇区’]属于复杂数据类型，所以data在存储时，以及拷贝到dataBack中的是内存地址，如：

let data = {'name':"liuyu",'age':22,'addr':0x00004}
let dataBack = {'name':"liuyu",'age':22,'addr':0x00004}
//这个0x00004代表的就是内存地址，指向的就是['上海市','徐汇区']这个值

所以这两个对象都有指向同一内存地址的值，所以当该值发生了改变之后，拷贝过去的或者源数据，都会发生改变。

深拷贝

let data = {'name':"liuyu",'age':22,'addr':['上海市','徐汇区']}
let dataBack = {}
$.extend(true,dataBack,data)

data.name = '刘煜'
data.addr[1] = '闵行区'
console.log(data)
// {name: '刘煜', age: 22, addr: Array(2)}
// addr: (2) ['上海市', '闵行区']
// age: 22
// name: "刘煜"

console.log(dataBack)
// {name: 'liuyu', age: 22, addr: Array(2)}
// addr: (2) ['上海市', '徐汇区']
// age: 22
// name: "liuyu"

可以发现，深拷贝是将数据完完全全的复制过去的，两个独立存储的数据，相互没有影响。

十、其他

10.1、多库共存

问题概述：

jQuery使用 $作为标识符，随着 j Q u ery 的流行，其他 J S 库可能也会将$ 作为标识符，这样就会引起冲突，如下列代码：
```
//声明函数$()
function $(ele) {
 return document.querySelector(ele)
}
//调用
console.log($('div'))
//控制台打印div节点

$.extend()
	//报错，因为声明的函数$，没有extend方法
```
所以，我们需要一个解决方法，让jQuery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存。

解决办法：
第一种方法：如果$符号有冲突，那么我们就使用jQuery。
console.log(jQuery.extend())
第二种方法：让jQuery释放对$的控制权
let liu = jQuery.noConflict()
console.log(liu.extend())

10.2 jQuery插件

jQuery常用的瀑布流插件：

https://www.jq22.com/
http://www.htmleaf.com/

具体使用方法，与原生JS文档使用方法大同小异。

10.2.1 图片懒加载

什么是图片懒加载：

当页面滑动到可视区域以后，再显示图片

好处：

图片延迟加载，可提高网页的响应速度，也能减轻服务器的响应压力。

https://www.jq22.com/

可在该插件平台，搜索懒加载，下载压缩包，按照使用方法复制修改代码即可。

10.2.2 全屏滚动

gitHub: https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

十一、本地存储

本次存储分为两种，一种session存储，一种local存储。

sessionStorage存储的特点：

生命周期为关闭浏览器窗口
在同一个页面下，数据可以共享
存储方式为键值对的形式

localStorage存储的特点：

生命周期永久生效，除非手动删除，否则及时浏览器关闭，数据也会存在
可以多页面共享（同一浏览器可以共享）
以键值对的形式存储

sessionStorage方法汇总一览：

方法	说明
sessionStorage.setltem(k,v)	存储数据
sessionStorage.getltem(k)	获取数据
sessionStorage.removeltem(k)	删除数据
sessionStorage.clear()	删除所有数据

localStorage方法汇总一览：

语法	作用
localStorage.setltem(k,v)	存储数据
localStorage.getltem(k)	获取数据
localStorage.removeltem(k)	删除数据
localStorage.clear()	删除所有数据

11.1 补充：JSON对象

当value为对象或数组时，需要转换成JSON格式，否侧存入的数据为arr或者obj。

存入之后，后续使用时，如果要用到arr或者obj特有的方法语法时，需要将JSON格式转成数组或对象

JSON格式为string字符串。
数组转为JSON被称作序列化
JSON转成数组被称作反序列化

序列化：

//格式：
let arr = [1,2,3,]
let strArr = JSON.stringify(arr)
console.log(strArr,typeof strArr)
	//控制台输出：[1,2,3] string

反序列化：

//格式：
 let strArr = '[1,2,3]'
let arr = JSON.parse(strArr)
console.log(arr,typeof arr)
	//控制台输出：[1, 2, 3] 'object'

序列化： JSON.stringify(data)

反序列化： JSON.parse()

在冲突，可以同时存在，这就叫做多库共存。

解决办法：
第一种方法：如果$符号有冲突，那么我们就使用jQuery。
console.log(jQuery.extend())
第二种方法：让jQuery释放对$的控制权
let liu = jQuery.noConflict()
console.log(liu.extend())

10.2 jQuery插件

jQuery常用的瀑布流插件：

https://www.jq22.com/
http://www.htmleaf.com/

具体使用方法，与原生JS文档使用方法大同小异。

10.2.1 图片懒加载

什么是图片懒加载：

当页面滑动到可视区域以后，再显示图片

好处：

图片延迟加载，可提高网页的响应速度，也能减轻服务器的响应压力。

https://www.jq22.com/

可在该插件平台，搜索懒加载，下载压缩包，按照使用方法复制修改代码即可。

10.2.2 全屏滚动

gitHub: https://github.com/alvarotrigo/fullPage.js

中文翻译网站：http://www.dowebok.com/demo/2014/77/

十一、本地存储

本次存储分为两种，一种session存储，一种local存储。

sessionStorage存储的特点：

生命周期为关闭浏览器窗口
在同一个页面下，数据可以共享
存储方式为键值对的形式

localStorage存储的特点：

生命周期永久生效，除非手动删除，否则及时浏览器关闭，数据也会存在
可以多页面共享（同一浏览器可以共享）
以键值对的形式存储

sessionStorage方法汇总一览：

方法	说明
sessionStorage.setltem(k,v)	存储数据
sessionStorage.getltem(k)	获取数据
sessionStorage.removeltem(k)	删除数据
sessionStorage.clear()	删除所有数据

localStorage方法汇总一览：

语法	作用
localStorage.setltem(k,v)	存储数据
localStorage.getltem(k)	获取数据
localStorage.removeltem(k)	删除数据
localStorage.clear()	删除所有数据

11.1 补充：JSON对象

当value为对象或数组时，需要转换成JSON格式，否侧存入的数据为arr或者obj。

存入之后，后续使用时，如果要用到arr或者obj特有的方法语法时，需要将JSON格式转成数组或对象

JSON格式为string字符串。
数组转为JSON被称作序列化
JSON转成数组被称作反序列化

序列化：

//格式：
let arr = [1,2,3,]
let strArr = JSON.stringify(arr)
console.log(strArr,typeof strArr)
	//控制台输出：[1,2,3] string

反序列化：

//格式：
 let strArr = '[1,2,3]'
let arr = JSON.parse(strArr)
console.log(arr,typeof arr)
	//控制台输出：[1, 2, 3] 'object'

序列化： JSON.stringify(data)

反序列化： JSON.parse()

阿煜酱~

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery

什么是jQuery：内部对原生JS代码进行了封装，并且还额外添加了很多的功能，能够让开发者通过书写更少的代码来完成js操作。兼容多个浏览器的，在使用jQuery的时候就不需要考虑浏览器兼容问题。jQuery的宗旨：“write less do more”（用更少的代码完成更多的事情）使用jQuery的好处：跨浏览器兼容。链式编程、隐式迭代对事件、样式、动画支持，大大简化了DOM操作支持插件扩展开发免费、开源轻量级，不会影响页面加载速度。如何使用：二、jQuery初识jQuery对象与
复制链接

扫一扫