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插件
(一)瀑布流
(二)图片懒加载
(三)全屏滚动
第一个链接下载,第二个链接查看中文说明。
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>
里面。
链接里面有使用方法。