jQuery

1.概述

下载:官网链接
点击download,选择以下两个中的一个,production是经过压缩的,development是未经过压缩的,选择前者,因为更小。
在这里插入图片描述
点开,全选,复制,到vscode创建一个js文件,粘贴并保存。
使用:
将创建的js文件添加到项目中并引入,使用方式如下
在这里插入图片描述
入口函数:
在这里插入图片描述

2.$是jQuery的别称

3.jQuery对象和DOM对象

在这里插入图片描述

在这里插入图片描述

相互转换

已经获取的DOM对象转换为jQuery对象
$(DOM对象),不用加引号
在这里插入图片描述
案例,谷歌浏览器默认不播放视频,案例中添加了muted静音,就能播放
在这里插入图片描述

4.jQuery常用API

(一)选择器

单双引号都可以。与css选择器类似。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

parents()返回所有父级及祖先元素

在这里插入图片描述
在这里插入图片描述

toFixed(n)保留n位小数

转换为了字符串类型。
在这里插入图片描述

案例:下拉菜单显示和隐藏

在这里插入图片描述

在这里插入图片描述

案例:按钮点击变色(排他思想)

在这里插入图片描述
在这里插入图片描述

(二)index()获得当前元素索引号
案例:淘宝服饰精品案例

鼠标经过不同按钮显示不同图片。
在这里插入图片描述
结构:
在这里插入图片描述
在这里插入图片描述

(三)链式编程

在这里插入图片描述

在这里插入图片描述

5.jQuery操作css方法

在这里插入图片描述

(一)增删改类

在这里插入图片描述
第三种toggleClass方法调用一次添加current类,再调用一次删除current类,循环往复。
在这里插入图片描述

案例:tab栏切换

效果:
在这里插入图片描述
结构:
在这里插入图片描述

在这里插入图片描述

6.隐式迭代

在这里插入图片描述
在这里插入图片描述

7.jQuery效果

在这里插入图片描述

(一)显示和隐藏:show(),hide()

在这里插入图片描述
因为动画太丑,easing一般不设置
在这里插入图片描述
在这里插入图片描述

(二)下拉和上滑(卷帘门一样的)slideDown

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

(三)hover事件切换

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

(四)动画队列及停止排队stop()

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

(五)淡入淡出效果fadeIn,fadeOut

在这里插入图片描述
案例:
在这里插入图片描述

修改透明度。
在这里插入图片描述

(六)自定义动画animate

在这里插入图片描述
在这里插入图片描述

案例:王者荣耀手风琴效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8.jQuery属性操作

(一)固有属性

在这里插入图片描述

(二)自定义属性

在这里插入图片描述
案例:
在这里插入图片描述

(三)数据缓存

在这里插入图片描述
在这里插入图片描述

案例:全选不全选

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

9.获取元素文本内容

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

案例:购物车案例

在这里插入图片描述

商品数量增减

在这里插入图片描述
在这里插入图片描述

商品价格小计

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

修改文本框,重新计算小计

在这里插入图片描述
在这里插入图片描述

10.jQuery元素操作

(一)遍历DOM元素

在这里插入图片描述
在这里插入图片描述
购物车计算总价:
在这里插入图片描述

(二)遍历jQuery对象each()

在这里插入图片描述
在这里插入图片描述

案例:购物车总计和总额

在这里插入图片描述

在这里插入图片描述

(三)创建添加删除元素

在这里插入图片描述

案例:购物车删除商品

在这里插入图片描述
在这里插入图片描述

案例:选中商品添加背景

在这里插入图片描述
添加修改背景色的类。
在这里插入图片描述
在这里插入图片描述

11.jQuery尺寸、位置操作

(一)尺寸

在这里插入图片描述

(二)位置

在这里插入图片描述
在这里插入图片描述

使用方法:
在这里插入图片描述

(三)滚动

在这里插入图片描述
在这里插入图片描述

案例:滚动到位置显示返回顶部

在这里插入图片描述
点击返回顶部:
在这里插入图片描述

案例:品优购电梯导航

在品优购项目里面
在这里插入图片描述

12.jQuery事件

(一)on()一个元素绑定多个事件

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

on()事件委托

在这里插入图片描述

在这里插入图片描述

on()给动态创建的li绑定事件

在这里插入图片描述
在这里插入图片描述

案例:微博发布

在这里插入图片描述
结构:
在这里插入图片描述
在这里插入图片描述

(二)off()解绑事件
one()一次性事件

在这里插入图片描述
在这里插入图片描述

(三)自动触发事件trigger()

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

元素的默认行为,例如input里的光标闪烁。

(四)jQuery事件对象

在这里插入图片描述

13.jQuery对象拷贝extend()

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

14.jQuery多库共存

在这里插入图片描述
在这里插入图片描述

15.jQuery插件

jQuery插件库
jQuery之家
在这里插入图片描述

(一)瀑布流
(二)图片懒加载

在这里插入图片描述

(三)全屏滚动

第一个链接下载,第二个链接查看中文说明。
https://github.com/alvarotrigo/fullPage.js
https://www.dowebok.com/demo/2014/77/
在这里插入图片描述
在这里插入图片描述

(四)bootstrap组件和插件

bootstrap组件
使用需要引入 bootstrap.min.css 、 jquery.min.js 和 bootstrap.min.js
需要使用组件,应将组件包含在<div class="container"> </div>里面。
链接里面有使用方法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值