- jQuery入门
- 目标:
- 能够说出什么是jQuery
- 能够说出jQuery的优点
- 能够简单使用jQuery
- 能够说出DOM对象和jQuery对象的区别
- 目标:
- jQuery概述
- JavaScript库:
- 仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了
- JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。
- 简单理解:就是一个js文件,里面对我们原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了。
- 比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。
- 常见的JavaScript库:
- jQuery
- prototype
- YUI
- Dojo
- Ext JS
- 移动端的zepto
- 这些库都是对原生JavaScript的封装,内部都是用JavaScript实现的,我们主要学习的是jQuery
- JavaScript库:
- jQuery的概念:
- jQuery是一个快速、简洁的JavaScript库,其设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。
- j就是JavaScript;Query查询;意思就是查询js,把js中的DOM操作做了封装,我们可以快速的查询使用里面的功能。
- jQuery封装了JavaScript常用的功能代码,优化了DOM操作、事件处理、动画设计和Ajax交互。
- 学习jQuery本质:就是学习调用这些函数(方法)。
- jQuery出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。
- jQuery的优点:
- 轻量级。核心文件才几十kb,不会影响页面加载速度
- 跨浏览器兼容。基本兼容了现在主流的浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 支持插件扩展开发。有者丰富的第三方的插件,例如树形菜单、日期控件、轮播图等
- 免费、开源
- jQuery的基本使用:
- jQuery的下载
- 官方网址:https://jquery.com/
- 版本:
- 1x:兼容IE678等低版本浏览器,官网不再更新
- 2x:不兼容IE678等低版本浏览器,官网不再更新
- 3x:不兼容IE678等低版本浏览器,是官方主要更新维护的版本
- jQuery的下载
- jQuery的使用步骤:
- 引入jQuery文件
- jQuery的入口函数:
- 法一:
$(function(){
...//此处是页面DOM加载完成的入口
});
- 法二:
$(document).ready(function(){
...//此处是页面DOM加载完成的入口
})
- 等着DOM结构渲染完毕即可执行内部代码,不必等到所有外部资源加载完成,jQuery帮我们完成了封装。
- 相当于原生js中的DOMContentLoaded
- 不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码。
- 更推荐使用第一种方式
- jQuery的顶级对象$
- $是jQuery的别称,在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$
- $是jQuery的顶级对象,相当于原生JavaScript中的window。把元素利用$包装成jQuery对象,就可以调用jQuery的方法
- jQuery对象和DOM对象
- 用原生js获取过来的对象就是DOM对象
- jQuery对象:用jquery方式获取过来的对象是jQuery对象。本质:通过$把DOM元素进行了包装【利用$对DOM对象包装后的对象(伪数组形式存储)】
- jQuery对象只能使用jQuery方法。DOM对象则使用原生的JavaScript属性和方法。
- jQuery对象不能使用原生js的属性和方法
- DOM对象不能使用jQuery的属性和方法
- DOM对象与jQuery对象之间是可以相互转换的
- 因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- jQuery没有视频播放方法play(),需要将jQuery对象转换为DOM对象,然后调用play()方法让视频自动播放。
- DOM对象转换为jQuery对象:
- 获取DOM对象
- $(DOM对象)
- jQuery对象转换为DOM对象(两种方式)
- 语法一:$(选择器)[index]
- index是索引号
- 语法二:$(选择器).get(index)
- index是索引号
- 语法一:$(选择器)[index]
- 因为原生js比jQuery更大,原生的一些属性和方法jQuery没有给我们封装,要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- jQuery常用API
- 目标:
- 能够写出常用的jQuery选择器
- 能够操作jQuery样式
- 能够写出常用的jQuery动画
- 能够操作jQuery属性
- 能够操作jQuery元素
- 能够操作jQuery元素尺寸、位置
- 目标:
- jQuery基础选择器
- 原生JS获取元素方式很多,很杂,而且兼容性情况不一致,因此jQuery给我们做了封装,使获取元素统一标准。
- 语法:
- $(‘选择器’)
- 里面直接写CSS选择器即可,但要加引号
- $(‘选择器’)
名称 | 用法 | 描述 |
ID选择器 | $(“#id”) | 获取指定id的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类class的元素 |
标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
- jQuery层级选择器
名称 | 用法 | 描述 |
子代选择器 | $(“ul>li”); | 使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”); | 使用空格,代表后代选择器,获取ul下所有li元素,包括孙子等 |
- jQuery设置样式:
- 语法:$(‘选择器’).css(“css属性”,”css属性值”)
- 将所有选中元素的css样式做处理
- 语法:$(‘选择器’).css(“css属性”,”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(); | 查找父级 |
parents(‘选择器’) | $(“li”).parents(“.list”); | 查找指定祖先元素,没有选择器会返回所有的祖先元素 |
children(selector) | $(“ul”).children(“li”) | 相当于$(“ul>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() chidren() find() siblings eq()
- jquery元素对象.show()
- 显示jQuery元素对象
- Jquery元素对象.hide()
- 隐藏jQuery元素对象
- jQuery元素对象是伪数组集合,js元素对象可以是单个的元素对象,也可以是伪数组集合存的元素对象
- 伪数组集合加索引号即可得到单个元素对象
- jQuery里面的当前元素:$(this)
- jquery里面的事件:
- 鼠标经过事件:
$(function () {
Jquery元素对象.mouseover(function () {
})
})
- 鼠标离开事件
$(function () {
Jquery元素对象.mouseout(function () {
})
})
- 鼠标点击事件
$(function () {
Jquery元素对象.click(function () {
})
})
- Jquery里面的排他思想
- 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
- 语法:
$(function () {
Jquery元素对象.click(function () {
$(this).css('background-color', 'pink')
$(this).siblings('button').css('background-color','')
})
})
- 淘宝服饰精品案例分析
- 核心原理:鼠标经过左侧盒子某个小li,就让内容区盒子相对应图片显示,其余的图片隐藏。
- 需要得到当前小li的索引号,就可以显示对应索引号的图片
- Jquery得到当前元素索引号$(this).index()
- 中间对应的图片,可以通过eq(index)方法去选择
- 显示元素show() 隐藏元素hide()
- Jquery样式操作
- 操作css的方法
- jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
- 参数只写属性名,则是返回属性值
- $(this).css(‘color’)
- 参数是属性名, 属性值 逗号分隔符,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号
- $(this).css(“color”,”red”)
- $(this).css(“width”,100)
- 参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性可以不用加引号(当属性为单个单词时可以不加引号,当属性为多个单词用-连接时可以去掉-用驼峰命名法,也可以不去-加引号)
- $(this).css({color:”white”, “font-size”: “20px”})
- 参数只写属性名,则是返回属性值
- 设置类样式方法
- 作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
- 添加类
- 作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
- jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式。
- 操作css的方法
语法:Jquery元素对象.addClass(“类名”);
相当于追加类名
- 删除类:
语法:jquery元素对象.removeClass(“类名”);
- 切换类
语法:jquery元素对象.toggleClass(“类名”);
有这个类名就去掉,没有就加上
- Jquery元素对象可以使用链式编程选出来的同时做一些操作
- Tab栏切换分析:
- 点击上部的li,当前li添加current类,其余兄弟移除类
- 点击的同时得到当前li的索引号
- 让下部里面相应索引号的item显示,其余的item隐藏
- 代码实现:
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item">商品介绍模块内容</div>
<div class="item">规格与包装模块内容</div>
<div class="item">售后保障模块内容</div>
<div class="item">商品评价模块内容</div>
<div class="item">手机社区模块内容</div>
</div>
</div>
<script>
$(function () {
$('.tab_list li').click(function () {
//链式编程,当前元素加上current类名,并且其兄弟元素去掉current类
var now = $(this).addClass('current').siblings().removeClass('current')
var index = $(this).index();
//链式编程,对应的模块显示,其他兄弟元素隐藏
$('.tab_con .item').eq(index).show().siblings().hide()
})
})
</script>
- 类操作与class Name区别
- 原生JS中className会覆盖元素原先里面的类名
- 原先的所有类名都会被删除,变为设置的类名
- jQuery里面类操作只是对指定类进行操作,不影响原先的类名
- 保留其他类名,只修改当前设置的类
- 原生JS中className会覆盖元素原先里面的类名
- Jquery效果
- jQuery给我们封装了很多动画效果,最为常见的如下:
- 显示隐藏:
- show()
- 显示语法规范:show([speed,[easing],[fn]])
- 显示参数:
- show()
- 显示隐藏:
- jQuery给我们封装了很多动画效果,最为常见的如下:
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- hide()
- 隐藏语法规范:hide([speed,[easing],[fn]])
- hide()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- toggle()
- 显示隐藏效果语法规范toggle([speed,[easing],[fn]])
- toggle()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- 一般情况下,我们都不加参数直接显示隐藏就可以了
- 滑动
- Jquery元素对象.slideDown()
- 下拉滑动效果出现:事件触发后,该元素下拉出现
- 语法规范:slideDown([speed,[easing],[fn]])
- Jquery元素对象.slideDown()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- slideUp()
- 上拉滑动效果消失
- 语法规范:Jquery元素对象.slideUp([speed,[easing],[fn]])
- slideUp()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
先有下拉滑动出现,上拉滑动消失才会有效果
- slideToggle()
- 切换滑动
- 语法规范:Jquery元素对象.slideToggle([speed,[easing],[fn]])
- slideToggle()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- hover([over],out)
- 事件切换
- 此事件为鼠标经过和离开的复合写法
- 语法规范:jquery元素.hover([over],out)
- over:鼠标移到元素上要触发的函数(相当于mouseenter)
- out:鼠标移开元素要触发的函数(相当于mouseleave)
- 如果hover后面的小括号里面只有一个函数,则,鼠标经过和离开都会触发该函数。
- 案例:
- hover([over],out)
$('.menu-hd').hover(function () {
$(this).children().slideDown(2000).css('display', 'block')
}, function () {
$(this).children().slideUp(2000)
})
- 淡入淡出
- fadeIn()
- 淡入效果语法规则:Jquery元素对象.fadeIn([speed,[easing],[fn]])
- fadeIn()
- 淡入淡出
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- fadeOut()
- 淡出效果语法规则:Jquery元素对象.fadeOut([speed,[easing],[fn]])
- fadeOut()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- fadeToggle()
- 淡入淡出效果切换语法规则:Jquery元素对象.fadeToggle([speed,[easing],[fn]])
- fadeToggle()
参数都可以省略,无动画直接显示
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- fadeTo()
- 渐进方式调整到指定的不透明度
- 语法规则:fadeTo(speed,opacity,[easing],[fn])
- fadeTo()
效果参数:
opacity透明度必须写,取值0~1之间。
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).。必须写
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- 自定义动画
- animate()
- 语法:animate(params,[speed],[easing],[fn])
- animate()
- 自定义动画
参数:
params:想要更改的样式属性,以对象形式传递,必须写。属性名可以不用带引号,如果是复合属性则需要采用驼峰命名法borderLeft。其余参数都可以省略
speed:三种预定速度之一的字符串(“slow”,”normal”,or “fast”)或表示动画时长的毫秒数值(如:1000).。
easing:(Optional)用来指定切换效果,默认是“swing”,可用参数“linear”。
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- 22
- 动画队列及其停止排队方法
- 动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
- 停止排队
- stop()
- stop()方法用于停止动画或效果【必须写在动画的前面:slideDown()、slideUp()、slideToggle()】。
- 注意:stop()写到动画或者效果的前面,相当于停止结束上一次的动画。
- 案例:
- stop()
$(this).children().stop().slideDown(2000)
- 王者荣耀手风琴案例:
<script type="text/javascript">
$(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();
})
});
</script>
<div class="king">
<ul>
<li class="current">
<a href="#">
<img src="images/m1.jpg" alt="" class="small">
<img src="images/m.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/l1.jpg" alt="" class="small">
<img src="images/l.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/c1.jpg" alt="" class="small">
<img src="images/c.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/w1.jpg" alt="" class="small">
<img src="images/w.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/z1.jpg" alt="" class="small">
<img src="images/z.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/h1.jpg" alt="" class="small">
<img src="images/h.png" alt="" class="big">
</a>
</li>
<li>
<a href="#">
<img src="images/t1.jpg" alt="" class="small">
<img src="images/t.png" alt="" class="big">
</a>
</li>
</ul>
</div>
- jQuery属性操作
- 设置或获取元素固有属性值prop()
- 所谓元素固有属性就是元素本身自带的属性,比如<a>元素里面的href,比如<input>元素里面的type。
- 获取固有属性属性属性值语法:jQuery元素对象.prop(“元素属性名”)
- 设置固有属性语法:jQuery元素对象.prop(“属性名”,”属性值”)
- 设置或获取元素自定义属性值attr()
- 用户自己给元素添加的属性,我们称为自定义属性。比如给div添加index=’1’
- 获取自定义属性语法:jQuery元素对象.attr(“属性名”)
- 类似原生getAttribute()
- 设置自定义属性语法:jQuery元素对象.attr(“属性名”,”属性值”)
- 类似原生setAttribute()
- 设置或获取元素固有属性值prop()
- 数据缓存data()
- data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除。
- 数据缓存data()这个里面的数据是存放在元素的内存里面
- 附加数据语法规范:jQuery元素对象.data(“属性”,”属性值”)
- 获取数据语法规范:jQuery元素对象.data(“属性”)
- 获取数据缓存中的属性值
- 同时,还可以读取HTML5自定义属性data-index,得到的是数字型
- data()方法可以在指定的元素上存取数据,并不会修改DOM元素结构,一旦页面刷新,之前存放的数据都将被移除。
- 购物车案例模块-全选分析
- 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走
- 因为checked是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
- 把全选按钮状态赋值给3个小复选框就可以了。
- 当我们每次点击小的复选框按钮,就来判断:
- 如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选。
- :checked选择器,:checked查找被选中的表单元素。
- 语法规范:$(“选择器:checked”).length
- 被勾选的表单个数
- 语法规范:$(“选择器:checked”).length
- jQuery内容文本值
- 主要针对元素的内容还有表单的值操作。
- 普通元素的内容html()(相当于原生innerHTML)
- 语法一:html()
- 没有内容为获取元素的内容
- 语法二:html(“内容”)
- 有内容为设置元素的内容
- 语法一:html()
- 普通元素文本内容text()(相当于原生innerText)
- 表单的值val()(相当于原生value)
- 购物车案例模块-增减商品数量分析
- 核心思路:首先声明一个变量,当我们点击+号(increment),就让这个值++,然后赋值给文本框
- 注意1:只能增加本商品的数量,就是当前+号的兄弟文本框(itxt)的值
- 修改表单的值是val()方法
- 注意2:这个变量初始值应该是这个文本框的值,在这个值的基础上++,要获取表单的值
- 减号(decrement)思路同理,但是如果文本框的值是1,就不能再减了。
- 购物车案例模块-修改商品
- 核心思路:每次点击+号或者-号,根据文本框的值乘以当前商品的价格 就是 商品的小计
- 注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)
- 修改普通元素的内容是text()方法
- 注意2:当前商品的价格,要把¥符号去掉,再相乘 截取字符串substr(1)
- 最后计算的结果如果想要保留2位小数,通过toFixed(2)方法
- jQuery元素操作
- 主要是遍历、创建、添加、删除元素操作。
- 遍历元素
- jQuery隐式迭代是对同一类元素做同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
- 语法1:$(“选择器”).each(function ( index, domEle){ xxx; })
- each()方法遍历匹配的每一个元素,主要用DOM处理。each每一个
- 里面的回调函数有两个参数:index是每个元素的索引号[变量名可以自己设置,会自动返回索引号值];demEle是每个DOM元素对象【变量名也可自己设置】,不是jQuery对象。
- 所以要想使用jQuery方法,需要给这个dom元素转换为jQuery对象$(domEle)
- 语法2:$.each(object,function(index , element){ xxx; })
- $.each()方法可用于遍历任何对象,主要用于数据处理,比如数组,对象
- 里面的函数有两个参数:index是每个元素的索引号;element遍历内容
- 遍历对象,用语法1,遍历数据,用语法2
- 购物车案例模块-计算总计和总额
- 核心思路:把所有文本框里面的值相加就是总计数量。总额同理
- 文本框里面的值不相同,如果想要相加需要用到each遍历。声明一个遍历,相加即可。
- 点击+号-号,会改变总计和总额,如果用户修改了文本框里面的值同样会改变总计和总额
- 因此可以封装一个函数求总计和总额的,以上2各操作调用这个函数即可。
- 注意1:总计是文本框里面的值相加用val() 总额是普通元素内容用text()
- 要注意普通元素里面的内容要去掉¥并且转换为数字型才能相加
- 购物车案例模块-修改商品小计分析
- 核心思路:每次点击+号或则-号,根据文本框的值乘以当前商品的价格 就是 商品的小计
- 注意1:只能增加本商品的小计,就是当前商品的小计模块(p-sum)
- 修改普通元素的内容是text()方法
- 注意2:当前商品的价格,要把¥符号去掉再相乘 截取字符串substr(1)
- parent(“选择器”)可以返回指定祖先元素
- 最后计算的结果如果想要保留2位小数 通过toFixed(2)方法
- 用户也可以直接修改表单里面的值,同样要计算小计。用表单change事件
- jQuery操作元素
- 创建元素
- 语法:$(“标签”);
- 案例:$(“<li></li>”);
- 语法:$(“标签”);
- 添加元素:
- 内部添加:
- element.append(“内容”)
- 把内容放入匹配元素内部最后面,类似原生appendChild.
- element.prepend(“内容”)
- 把内容放入匹配元素内部最前面,类似原生appendChild
- element.append(“内容”)
- 外部添加:
- element.after(“内容”)
- 把内容放入目标元素后面
- element.before(“内容”)
- 把内容放入目标元素前面
- element.after(“内容”)
- 内部添加元素,生成之后,它们是父子关系。
- 外部添加元素,生成之后,他们是兄弟关系。
- 内部添加:
- 删除元素
- 语法一:
- element.remove()
- 删除匹配的元素(本身)
- element.remove()
- 语法二:
- element.empty()
- 删除匹配的元素集合中所有的子节点
- element.empty()
- 语法三:
- element.html(“”)
- 清空匹配元素的内容
- element.html(“”)
- 语法一:
- 创建元素
- 购物车案例模块-删除商品模块
- 核心思路:把商品remove()删除元素即可
- 有三个地方需要删除:
- 商品后面的删除按钮
- 删除选中的商品
- 清理购物车
- 商品后面的删除按钮:一定是删除当前的商品,所以从$(this)出发
- 删除选中的商品:先判断小的复选框按钮是否选中状态,如果是选中,则删除对应的商品
- 购物车案例模块-选中商品添加背景
- 核心思路:选中的商品添加背景,不选中移除背景即可
- 全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景
- 小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景
- 这个背景,可以通过类名修改,添加类和删除类
- 和黑