JQuery知识总结
JQuery概述
-
JavaScript库
仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
JQuery就是为了快速方便的操作DOM,里面基本都是函数(方法)。
对原生JavaScript的封装,内部都是用JavaScript 实现的,我们主要学习的是JQuery。
-
JQuery的概念
JQuery 是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less , Do More”,即倡导写更少的代码,做更多的事情。
j就是JavaScript;Query查询;意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
JQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。学习JQuery本质:就是学习调用这些函数(方法)。
JQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
-
JQuery的优点
轻量级、免费、开源。核心文件才几十kb,不会影响页面加载速度
跨浏览器兼容。基本兼容了现在主流的浏览器
链式编程、隐式迭代
对事件、样式、动画支持,人大简化了DOM操作
支持插件扩展开发。有着丰富的第三方的插件,例收︰树形菜单、日期控件、轮播图等
JQuery基本使用
JQuery使用时要写入口函数
$(function() { // 入口函数
JS内容
})
-
JQuery 的下载
官网地址: https://JQuery.com/
版本︰
1x:兼容IE678等低版本浏览器,官网不再更新
2x∶不兼容IE 678等低版本浏览器,官网不再更新
3x:不兼容E678等低版本浏览器,是官方主要更新维护的版本
各个版本的下载:https://code.JQuery.com/
-
JQuery的顶级对象$
是 J Q u e r y 的别称,在代码中可以使用 J Q u e r y 代替 是JQuery的别称,在代码中可以使用JQuery代替 是JQuery的别称,在代码中可以使用JQuery代替,但一般为了方便,通常都直接使用$。 JQuery() === $()
是 J Q u e r y 的顶级对象,相当于原生 J a v a S c r i p t 中的 w i n d o w 。把元素利用 是JQuery的顶级对象,相当于原生JavaScript中的window。把元素利用 是JQuery的顶级对象,相当于原生JavaScript中的window。把元素利用包装成JQuery对象,就可以调用JQuery的方法。
JQuery对象和DOM对象
用原生JS获取来的对象就是 DOM对象
JQuery方法获取的元素就是JQuery对象
JQuery对象本质是:利用$对DOM对象包装后产生的对象(伪数组形式存储)
JQuery 对象只能使用 JQuery 方法,DOM 对象则使用原生的 JavaScirpt 属性和方法
DOM对象与JQuery对象之间是可以相互转换的。
因为原生js比JQuery更大,原生的一些属性和方法JQuery没有给我们封装.要想使用这些属性和方法需要把JQuery对象转换为DOM对象才能使用。
DOM对象转换为JQuery对象
( D O M 对象 ) : (DOM对象): (DOM对象):(‘div’)
JQuery对象转换为DOM对象(两种方式)
$(div’) [index] index是索引号
$('div ').get(index) index是索引号
JQuery常用API
JQuery选择器
原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此JQuery给我们做了封装,使获取元素统一标准。
$(“选择器”) //里面选择器直接写CSS选择器即可,但是要加引号
$(this) // 获取当前元素
$(this).index() // 获取当前元素的索引值
JQuery基本选择器
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”) | 获取指定ID的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“Ii.current”) | 交集元素 |
JQuery层级选择器
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”) | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”) | 使用空格,代表后代选择器,获取ul下的所有li元素,包括孙子等 |
JQuery设置样式
$(‘div’).css("属性,值)
隐式迭代
遍历内部 DOM元素(伪数组形式存储)的过程就叫做隐式迭代。
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们再进行循环,简化我们的操作,方便我们调用。
JQuery筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $(“li:first”) | 获取第一个li元素 |
:last | $(“li:last”) | 获取最后一个li元素 |
:eq(index) | $(“li:eq(2)”) | 获取到的li元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $(“li:odd”) | 获取到的li元素中,选择索引号为奇数的元素 |
:even | $(“li:even”) | 获取到的li元素中,选择索引号为偶数的元素 |
JQuery筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $(“li”).parent(); | 查找父级 |
children(selector) | $(“ul”).chiidren(“li”); | 相当于$(“u1>li”),最近一级(亲儿子) |
find(selector) | $(“ul”).find(“li”); | 相当于$("“ul li”),后代选择器 |
siblings(selector) | $(“.first”).siblings(“li”); | 查找兄弟节点,不包括自己本身 |
nextAll( [expr]) | $(“.first”).nextAll() | 查找当前元素之后所有的同辈元素 |
prevtAll( [expr]) | $(“.last”").prevAll() | 查找当前元素之前所有的同辈元素 |
hasClass(class) | $ ( " div ’ ).hasClass( “protected”) | 检查当前的元素是否含有某个特定的类,如果有,则返回true |
eq(index) | $(“li” ).eq(2); | 相当于$("“li:eq(2)” ),index从0开始 |
父 parent():返回的是 最近一级的父级元素 亲爸爸
亲儿子 children():类似子代选择器 ul>li
后代find():可以选里面所有的孩子 包括儿子和孙子 ,类似于后代选择器
兄弟元素siblings():除了自身元素之外的所有亲兄弟
选择元素eq():利用选择方法的方式选择索引为n的元素
重点记住: parent():children() find() siblings() eq()
JQuery里面的排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
:checked选择器 :checked查找被选中的表单元素
链式编程
链式编程是为了节省代码量,看起来更优雅。
$(this).css('color , ‘red’).sibling().css(‘color’, “”); // 自己变色,兄弟为空
$(this).siblings().css(‘color’, ‘red’); // 兄弟变色,自己不变
$(this).siblings().parent().css(‘color’, ‘blue’); // 兄弟的爸爸变色
JQuery选择器拓展案例
鼠标经过当前元素,后代子元素显示,鼠标移开,后代子元素隐藏
$(function () {
// 鼠标经过
$(".nav>li").mouseover(function () {
// $(this) JQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
})
})
排它思想:按钮变色
点击按钮当前元素变色,其他元素回复正常
通过隐式迭代和siblings兄弟元素,变化自己,清除其他
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
淘宝服饰精品案例分析
核心原理∶鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。
需要得到当前小li的索引号,就可以显示对应索引号的图片
JQuery得到当前元素索引号$(this).index()
中间对应的图片,可以通过eq(index)方法去选择
显示元素show()隐藏元素hide()
$(function () {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function () {
// 2. 得到当前小li 的索引号
var index = $(this).index();
console.log(index);
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
// $("#content div").eq(index).show();
// 4. 让其余的图片(就是其他的兄弟)隐藏起来
// $("#content div").eq(index).siblings().hide();
// 链式编程
$("#content div").eq(index).show().siblings().hide();
})
})
JQuery样式操作
操作css方法
JQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
(1) 参数只写属性名,则是返回属性值
$(this).css(“color”);
(2) 参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
$(this).css(“color”,“red”); // 属性名属性值加引号,中间逗号隔开
(3) 参数可以是对象形式,方便设置多组样式。属性名和属性值用冒号隔开,属性可以不用加引号,
$(this).css(“color”:“white” ,“font-size”:" 20px"):
$(“div”).css(width: 400,height: 400,backgroundColor: “red” })
注意: 如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号
设置class类方法
作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
$(“div” ).addClass(“current”); // 添加类
$( “div” ).removeClass(“current”); // 移除类
$(“div” ).toggleClass(“current”); // 切换类(没有则添加,有则删除)
类操作与className区别
原生JS中 className会覆盖元素原先里面的类名。
JQuery里面类操作只是对指定类进行操作,不影响原先的类名。
JQuery样式切换拓展案例
tab栏切换
点击上部的li,当前li添加current类,其余兄弟移除类。
点击的同时,得到当前li的索引号
让下部里面相应索引号的item显示,其余的item隐藏
$(function () {
// 1.点击上部的li,当前li 添加current类,其余兄弟移除类
$(".tab_list li").click(function () {
// 链式编程操作,当前元素赋予current类,其余兄弟消除current类
$(this).addClass("current").siblings().removeClass("current");
// 2.点击的同时,得到当前li 的索引号
var index = $(this).index();
console.log(index);
// 3.让下部里面相应索引号的item显示,其余的item隐藏
$(".tab_con .item").eq(index).show().siblings().hide();
});
})
JQuery效果
JQuery给我们封装了很多动画效果,最为常见的如下:
效果 方法
方法 | 描述 |
---|---|
show(),hide(),toggle() | 显示隐藏 |
slideDown(),slideUp(),slideToggle() | 滑动 |
fadeln(),fadeOut(),fadeToggle(),fadeTo() | 淡入淡出 |
animate() | 自定义动画 |
语法规范:参数为 执行时间,匀速/快/慢,回调函数
用法 | 描述 |
---|---|
show ( [speed,[easing] , [fn] ]) | 显示 |
hide ( [speed,[easing] , [ fn]]) | 隐式 |
toggle ( [ speed, [easing] , [fn]]) | 显隐式切换 |
slideDown ( [speed, [easing] , [fn]]) | 下滑 |
slideUp( [speed,[easing] , [fn]]) | 上滑 |
slideToggle( [speed , [easing] ,[fn]]) | 上下滑动切换 |
fadeIn ( [speed, [easing] , [fn]]) | 淡入 |
fadeout ( [speed, [easing],[fn] ]) | 淡出 |
fadeToggle( [speed, [easing] , [fn]]) | 淡入淡出切换 |
fadeTo([speed,transparency], [fn]]) | 透明度(速度,透明效果,回调函数) |
animate(params , [ speed] , [easing] ,[fn]) | 自定义动画(样式对象,执行时间,匀速/快/慢,回调函数) |
animate自定义动画
animate(params , [ speed] , [easing] , [fn])
-
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
-
speed : 三种预定速度之一的字符串(“slow”, “nomal”,or“fast”)或表示动画时长的毫秒数值(如:1000)。
-
easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
-
fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
(1) 参数都可以省略,无动画直接显示。
(2) speed :三种预定速度之一的字符串(“slow”,“normal”,or“fast”)或表示动画时长的毫秒数值(如:∶1000)。
(3) easing : (Optional)用来指定切换效果,默认是“swing”,可用参数“linear”.
(4) fn:回调函数,在动画完成时执行的函数,每个元素执行一次。
(5) transparency:透明效果在 [0-1] 区间内设置透明度,0为原效果,1为无透明
(6) params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法borderLeft。其除参数都可以省略。
一般情况下,我们都不加参数直接显示隐藏
事件切换
hover([over,]out)
over:鼠标移到元素上要触发的函数(相当于mouseenter )
out:鼠标移出元素要触发的函数(相当于mouseleave )
如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
动画队列及其停止排队方法
动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
停止排队
stop()
(1) stop()方法用于停止动画或效果。
(2) 注意: stop()写到动画或者效果的前面,相当于停止结束上一次的动画。
JQuery效果拓展案例
鼠标移入图片,其他图片透明度降低,移除复原
$(function () {
//鼠标进入的时候,其他的li标签透明度:0.5
$(".wrap li").hover(function () {
$(this).siblings().stop().fadeTo(400, 0.5);
}, function () {
// 鼠标离开,其他li 透明度改为 1
$(this).siblings().stop().fadeTo(400, 1);
})
});
点击按钮,使当前盒子变化下移500px,右移300px,宽改变为500ox,透明度0.5、
$(function() {
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: 0.4,
width: 500
}, 500);
})
})
手风琴效果
鼠标经过某个小li有两步操作:
当前小li宽度变为224px,同时里面的小图片淡出,大图片淡入
其余兄弟小li宽度变为69px ,小图片淡入,大图片淡出
$(function () {
// 鼠标经过某个小li 有两步操作:
$(".king li").mouseenter(function () {
// 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
$(this).stop().animate({
width: 224
}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
// 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出
$(this).siblings("li").stop().animate({
width: 69
}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
})
});
JQuery属性操作
设置或获取元素固有属性值prop()
所谓元素固有属性就是元素本身自带的属性,比如元素里面的 href,比如元素里面的type
prop获取固有属性
-
prop(“属性”") // 获取属性语法
-
prop(“属性”;“属性值”") // 设置属性语法
设置或获取元素自定义属性attr()
用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index = “1”。
attr()获取自定义属性
-
attr("属性”) // 类似原生getAttribute() 获取属性语法
-
attr(““属性”,“属性值””) //类似原生setAttribute() 设置属性语法
数据缓存data()
data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构。一旦页面刷新,之前存放的数据都将被移除。
-
data(“name” ,“value”) //向被选元素附加数据 附加数据语法
-
date(“name”) //向被选元素获取数据 获取数据语法
同时,还可以读取HTML5自定义属性data-index,得到的是数字型
注意:这个方法获取data-index h5自定义属性,属性不用写data- 而且返回的是数字型
attr(“data-index”) === data(“index”) // 获取data-index属性
JQuery属性操作拓展案例
购物车案例模块-全选分析
全选思路∶里面3个小的复选框按钮( j-checkbox )选中状态( checked )跟着全选按钮 ( checkall )走。
因为checked是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
把全选按钮状态赋值给3小复选框就可以了
当我们每次点击小的复选框按钮,就来判断:
如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选。
:checked选择器:checked查找被选中的表单元素。
$(function () {
// 1. 全选 全不选功能模块
// 就是把全选按钮(checkall)的状态赋值给三个小的按钮(j-checkbox)就可以了
// 改变事件 change
$(".checkall").change(function () {
$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
})
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。
// 通过被选中复选框的值改变全选框按钮
// $(".j-checkbox").length 这个是所有的小复选框的个数
$(".j-checkbox").change(function () {
// .j-checkbox:checked选中状态的复选框
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
})
JQuery文本属性值
主要针对元素的内容还有表单的值操作。
普通元素内容html)(相当于原生inner HTML)
-
html() // 获取元素的内容
-
html(“内容”) //设置元素的内容
普通元素文本内容text)(相当与原生innerText)
-
text() //获取元素的文本内容
-
text("“文本内容”) //设置元素的文本内容
表单的值val((相当于原生value)
-
val() // 获取元素的value值
-
val(“内容”) // 设置元素的value值
toFixed(n) // 保留小数n位
JQuery文本属性拓展案例
购物车案例模块-增减商品数量分析
核心思路∶首先声明一个变量,当我们点击+号( increment ),就让这个值++,然后赋值给文本框。
注意1:只能增加本商品的数量,就是当前+号的兄弟文本框( itxt )的值。
修改表单的值是val()方法
注意2∶这个变量初始值应该是这个文本框的值,在这个值的基础上++。要获取表单的值
减号(decrement )思路同理,但是如果文本框的值是1,就不能再减了。
增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
$(".increment").click(function () { // 加号
// 得到兄弟文本框的值
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
})
$(".decrement").click(function () { // 减号
var n = $(this).siblings(".itxt").val();
if (n == 1) {
return false; // 商品数量为1 退出点击事件
}
n--;
$(this).siblings(".itxt").val(n);
})
购物车案例模块-修改商品小计分析
核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格就是商品的小计
注意1:只能增加本商品的小计,就是当前商品的小计模块( p-sum )
修改普通元素的内容是text0方法
当前商品的价格,要把¥符号去掉再相乘截取字符串substr(1)
最后计算的结果如果想要保留2位小数通过toFixed(2)方法
parents(‘选择器’)可以返回指定祖先元素
用户也可以直接修改表单里面的值,同样要计算小计。
用表单change事件用最新的表单内的值乘以单价即可但是还是当前商品小计
增减商品数量模块 首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框。
$(".increment").click(function () { // 加号
// 得到兄弟文本框的值
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 3.1 计算小计模块 根据文本框的值 乘以 当前商品的价格 就是 商品的小计
// var p = $(this).parent().parent().siblings(".p-price").html();
// parents(‘选择器’)可以返回指定祖先元素 toFixed(n) 保留小数n位
var p = $(this).parents(".p-num").siblings(".p-price").html(); // 单价
price = (n * p.substr(1)).toFixed(2);
$(this).parent().parent().siblings(".p-sum").html("¥" + price);
})
// 4. 用户修改文本框的值 计算 小计模块
$(".itxt").change(function () {
var n = $(this).val(); // 获取修改后的值
var p = $(this).parents(".p-num").siblings(".p-price").html();
price = (n * p.substr(1));
$(this).parent().parent().siblings(".p-sum").html("¥" + price.toFixed(2));
})
JQuery元素操作
主要是遍历、创建、添加、删除元素操作。
遍历元素
JQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法1:
$( “div”" ).each (function (index,domEle){ xXx; })
each0方法遍历匹配的每一个元素。主要用DOM处理。each每一个
里面的回调函数有2个参数:index是每个元素的索引号; demEle是每个DOM元素对象,不是JQuery对象
所以要想使用JQuery方法,需要给这个dom元素转换为JQuery对象$(domEle)
语法2∶
$.each (object , function (index, element) { xxx; })
$.each(方法可用于遍历任何对象。主要用于数据处理,比如数组,对象
里面的函数有2个参数: index是每个元素的索引号; element遍历内容
主要用于遍历数据,处理数据
var arr = ["red", "green", "blue"];
$.each(arr, function(i, ele) {
console.log(i); // 0,1,2
console.log(ele); // red,green,blue
})
$.each({
name: "andy",
age: 18
}, function (i, ele) {
console.log(i); // i输出的是 name age 属性名
console.log(ele); // ele 输出的是 andy 18 属性值
})
创建元素
$("<li></li>");
// 动态的创建了一个
-
添加元素
内部添加
element.append(“内容”) // 内部添加append(); 并且放到内容的最后面
element.prepend(“内容”); // 内部添加prepend(); 并且放到内容的最前面
外部添加
element.after(“内容”); //把内容放入目标元素后面
element.before(“内容”); //把内容放入目标元素前面
内部添加元素,生成之后,它们是父子关系。
外部添加元素,生成之后,他们是兄弟关系。
$(“ul”).append(li); // ul内部最后面添加li元素
$(“div”).after(span); // 在div后面添加span元素
删除元素
element.remove() //删除匹配的元素(〔本身)
element.empty() //删除匹配的元素集合中所有的子节点
element.htmI(“”) //清空匹配的元素内容 可以删除匹配的元素里面的子节点
元素操作拓展案例
遍历盒子变色
遍历三个盒子的设置不同的颜色,并把三个盒子的值相加
$(function() { // $("div").css("color", "red"); // 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大) var sum = 0; // 1. each() 方法遍历元素 var arr = ["red", "green", "blue"]; $("div").each(function(i, domEle) { // 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 // 回调函数第二个参数一定是 dom元素对象 也是自己命名 // domEle.css("color"); dom对象没有css方法 $(domEle).css("color", arr[i]); // 遍历设置颜色 sum += parseInt($(domEle).text()); // 计算和 }) })
购物车案例模块-计算总计和总额
核心思路:把所有文本框里面的值相加就是总计数量。总额同理
文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个变量,相加即可
点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额
因此可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可。
注意1:总计是文本框里面的值相加用val()总额是普通元素的内容用text()
注意2:普通元素里面的内容要去掉¥并且转换为数字型才能相加
// 5. 计算总计和总额模块
function getSum() { var count = 0; // 计算总件数 var money = 0; // 计算总价钱 $(".itxt").each(function (i, ele) { // i索引号 ele元素 count += parseInt($(ele).val()); }); $(".amount-sum em").text(count); $(".p-sum").each(function (i, ele) { money += parseFloat($(ele).text().substr(1)); // 取值,去除¥符号 }); $(".price-sum em").text("¥" + money.toFixed(2)) // 保留两位小数 };
购物车案例模块-删除商品模块
核心思路:把商品remove)删除元素即可
有三个地方需要删除:1.商品后面的删除按钮⒉删除选中的商品3.清理购物车
商品后面的删除按钮:一定是删除当前的商品,所以从$(this)出发
删除选中的商品:先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品
// 6. 删除商品模块
$(".p-action a").click(function () { // 商品后面的删除按钮 $(this).parents(".cart-item").remove(); getSum() // 计算总计 }); $(".remove-batch").click(function () { // 删除选中的商品 // .j-checkbox:checked选中状态的复选框 $(".j-checkbox:checked").parents(".cart-item").remove(); getSum() // 计算总计 }); $(".clear-all").click(function () { // 清空购物车 删除全部商品 $(".cart-item").remove(); getSum() // 计算总计 });
购物车案例模块-选中商品添加背景
核心思路:选中的商品添加背景,不选中移除背景即可
全选按钮点击∶如果全选是选中的,则所有的商品添加背景,否则移除背景
小的复选框点击︰如果是选中状态,则当前商品添加背景,否则移除背景
这个背景,可以通过类名修改,添加类和删除类
if ($(this).prop("checked")) { // 选中添加check-cart-item类 $(".cart-item").addClass("check-cart-item"); } else { // 没选中移除check-cart-item类 $(".cart-item").removeClass("check-cart-item"); }
JQuery尺寸、位置操作
JQuery尺寸
用法 描述 width() / height() 取得匹配元素宽度和高度值只算width / height innerWidth() / innerHieght() 取得匹配元素宽度和高度值包含 padding outerWidth() / outerHeight() 取得四配元素宽度和高度值包含padding . border outerWidth(true) / outerHeight(true) 取得匹配元素宽度和高度值包含 padding . borde、margin 以上参数为空,则是获取相应值,返回的是数字型。
如果参数为数字,则是修改相应值。
参数可以不必写单位。
JQuery位置
位置主要有三个: offset(). position(). scrollTop()/scrollLeft()
offset()设置或获取元素偏移
(1) offset()方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
(2) 该方法有2个属性left、top。offset().top用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离。
(3) 可以设置元素的偏移: offset(f top: 10, left: 30 };
$(".son").offset({ top: 200, // 设置头部偏移200像素 left: 200 // 设置左偏移200像素 });
Position()获取元素偏移
(1) position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
(2) 该方法有2个属性left、top。position().top用于获取距离最近相对定位的父级元素头部的距离,position().left用于获取距离最近相对定位的父级元素左侧的距离。
(3) 这个方法只能获取不能设置偏移
$(".son").position({ top: 200, // 无效 left: 200 // 无效 });
scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部距离。
scrollLeft()方法设置或返回被选元素被卷去的左侧距离。
JQuery位置操作拓展案例
带有动画的返回顶部
页面向下滚动到返回顶部盒子距离时,出现返回顶部,点击后慢慢返回顶部
核心原理:使用animate动画返回顶部(animate(obj, target, callback))。
但是是元素做动画,因此$(“body,html" ).animate([scrollTop: 0))
animate函数封装obj目标对象 target 目标位置 callback回调函数
animate动画函数里面有个scrollTop属性,可以设置位置
$(function () { var boxTop = $(".container").offset().top; // 返回顶部盒子高度 $(window).scroll(function () { // 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft() // 可以设置和获取 if ($(window).scrollTop() >= boxTop) { // console.log("已到达"); $(".back").fadeIn(); // 返回顶部淡入 } else { $(".back").fadeOut(); // 返回顶部淡出 } }); $(".back").click(function () { // animate(obj, target, callback) // animate函数封装obj目标对象 target 目标位置 callback回调函数 // 但是是元素做动画,因此$(“body, html" ).animate([scrollTop: 0)) $("body,html").animate({ scrollTop: 0 }); }) })
品优购电梯导航
当我们滚动到今日推荐模块,就让电梯导航显示出来
点击电梯导航页面可以滚动到相应内容区域
核心算法:因为电梯导航模块和内容区模块——对应的
当我们点击电梯导航某个小模块,就可以拿到当前小模块的索引号
就可以把animate要移动的距离求出来∶当前索引号内容区模块它的offset().top
然后执行动画即可
当我们点击电梯导航某个小li,当前小li添加current类,兄弟移除类名
当我们页面滚动到内容区域某个模块,左侧电梯导航,相对应的小i模块,也会添加current类,兄弟移除current类。
触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
需要用到each,遍历内容区域大模块。each里面能拿到内容区域每一个模块元素和索引号
判断的条件:被卷去的头部大于等于内容区域里面每个模块的offset().top
就利用这个索引号找到相应的电梯导航小li添加类。
$(function () { // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current,通过节流阀判定互斥 // 1. 显示隐藏电梯导航 var toolTop = $(".recommend").offset().top; // 推荐服务盒子高度 var flag = true; // 节流阀 互斥锁 toggleTool(); function toggleTool() { // 封装电梯导航展示效果 if ($(document).scrollTop() >= toolTop) { $(".fixedtool").fadeIn(); } else { $(".fixedtool").fadeOut(); }; } $(window).scroll(function () { toggleTool(); // 调用函数 // 3. 页面滚动到某个内容区域,左侧电梯导航小li相应添加和删除current类名 // 通过each遍历四个大模块 $(".floor .w").each(function (i, ele) { if ($(document).scrollTop() >= $(ele).offset().Top) { // 判断已到达大模块位置 $(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current"); } }) if (flag) { // 节流阀,避免点击时页面跳动 $(".floor .w").each(function (i, ele) { if ($(document).scrollTop() >= $(ele).offset().top) { $(".fixedtool li").eq(i).addClass("current").siblings().removeClass(); } }) } }) // 2. 点击电梯导航页面可以滚动到相应内容区域 $(".fixedtool li").click(function () { flag = false; // 节流阀,点击时不执行页面滚动判断 // var index = $(this).index(); 获取点击元素索引值 var current = $(".floor .w").eq($(this).index()).offset().top; // 页面动画滚动效果 $("body,html").stop().animate({ scrollTop: current }, function () { flag = true; // 节流阀,点击跳转动画执行完毕时执行页面滚动判断 }); // 点击之后,让当前的小li 添加current 类名 ,姐妹移除current类名 $(this).addClass("current").siblings().removeClass("current"); }) })