jQuery

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>

展示效果:

image-20220715181523020

因为有隐式迭代这个机制,所以,所有的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>

JS

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

实现效果:

image-20220720021055722

案例-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>
    <!--
    	控制台输出: {top: 30, left: 30}
    -->
    
  • 因为得知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>
    <!--
    	控制台输出: {top: 20, left: 20}
    -->
    
  • 与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())
    })
    //最终效果: 鼠标往下滚动,打印的数值越来越大。
    

1

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;
}

JS

$(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>
<!--控制台输出:
	"w.fn.init(4) [li, li, li, li, prevObject: w.fn.init(1)]"
-->

与原生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)  //单位:毫秒
    

可实现的效果:

jq-常用方法-案例-2

示例代码:

<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:回调函数,在动画完成时执行的函数,每个元素执行一次。

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

jq-常用方法-案例-4

代码如下:

/*一定要添加定位*/
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 e r y 的流行,其他 J S 库可能也会将 作为标识符,随着jQuery的流行,其他JS库可能也会将 作为标识符,随着jQuery的流行,其他JS库可能也会将作为标识符,这样就会引起冲突,如下列代码:

    //声明函数$()
    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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿煜酱~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值