jQuery基础入门+购物车案例详解
jQuery是一个快速、简洁的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
一、jQuery对象
1.jQuery顶级对象： $ =jQuery
2.jQuery是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action();
注：区别于DOM对象
DOM对象：通过原生js获取 属性、方法
jQuery对象：只能用jQuery方法获取
二、jQuery选择器
1.选择器：$("selector")
如果selector里包含多个元素，会生成一个伪数组。【这里jQuery自带的“隐式迭代”会遍历伪数组，其中也自带了“排他性”】
2.设置css样式：$("selector").css("属性","值")
3.设置类
$("selector").addClass("类名")-----追加类名
$("selector").removeClass("类名")-----删除类名
$("selector").toggleClass("类名")-----切换类名
【jQuery选择器.效果/动作-----组合起来使用】
三、jQuery效果
1.显示/隐藏
.show()-----显示
.hidden()-----隐藏
toggle()-----切换
2.滑动
.slideDown()-----滑下来
.slideUp()-----滑上去
.slideToggle()-----上下滑动切换
3.淡入淡出
.fadeIn()-----淡入已隐藏的元素
.fadeOut()-----淡出可见的元素
.fadeToggle()-----在淡入淡出之间进行切换
.fadeTo()-----渐变为给定的不透明度（值介于 0 与 1 之间）
4.自定义动画
$(selector).animate({params},speed,callback);【stop()必须写在动画效果之前，结束上一次动画】
【
jQuery自带的“链式编程”让语句更简洁。
例如：
$(this).addClass("current").siblings().removeClass("current");
// 当前this添加类名current，this的其他所有兄弟移除类名current
】
四、获取属性值
1.获取系统自带属性值：.prop("属性名")
改变属性值：.prop("属性名","值")
2.获取自定义属性值：.attr("属性名")
改变属性值：.attr("属性名","值")
五、文本内容值
1.元素内容：.html()-----类似于原生js中的：.innerHTML()
2.文本内容：.text()-----类似于原生js中的：.innerText()
3.表单内容值：.val()-----类似于原生js中的：.value()
六、元素操作
1.遍历元素：.each(function(index,element){})
index：索引
element：遍历的每一个当前元素
2.创建元素
var 创建的元素变量名=$("元素")；
3.添加元素
3.1内部添加：$("父级元素").append/prepend(创建的元素变量名);
3.2外部添加：$("兄弟元素").after/before(创建的元素变量名);
4.删除元素
4.1删除本身：$("元素名").remove();
4.2删除所有孩子：$("元素名").empty();
4.3删除所有内容：$("元素名").html();
七、事件
1.事件注册
1.1单个事件注册：$("element").事件名();
1.2多个事件注册：$("element").on("事件","子元素",function(){});【可给 未来 动态创建的元素绑定】
2.事件对象【只要事件被触发，就有事件对象event产生】
$("element").on("事件",function(event){
event.stopPropagation(); // 停止冒泡事件
event.preventDefault(); // 阻止默认行为
return false；// 阻止默认行为
});
八、购物车案例详解
1.html
2.jQuery代码详解
<script> $(function() { // 全选【把全选按钮（checkall）的状态赋值给三个小按钮（j-checkbox）】【事件变化 change（）】 $(".checkall").change(function() { // 获取全选的状态属性 prop() // $(this).prop("checked"); //赋值 状态给小按钮+其他的全选按钮【并集选择器】 $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
//全选添加背景 if ($(this).prop("checked")) { $(".cart-item").addClass("check-cart-item"); } else { $(".cart-item").removeClass("check-cart-item"); } }) //小选择控制全选 $(".j-checkbox").change(function() { // jQuery自带的【：checked 选择器 可以自动识别复选框是否被选中】 // $(".j-checkbox").length【隐式迭代】 if ($(".j-checkbox:checked").length === $(".j-checkbox").length) { $(".checkall").prop("checked", true); } else { $(".checkall").prop("checked", false); } //当前选中添加背景 if ($(this).prop("checked")) { $(this).parents(".cart-item").addClass("check-cart-item"); } else { $(this).parents(".cart-item").removeClass("check-cart-item"); } })
// 点击商品增加 $(".increment").click(function() { // 获取【当前】兄弟（商品数量）的文本值 var n = $(this).siblings(".itxt").val(); // 商品数量增加 n++; // 将商品数量的文本值改变 $(this).siblings(".itxt").val(n); //小计模块【当前--this】 // 获取当前商品价格 p 【获取文本 html(), 获取任意祖先元素parents()】 var p = $(this).parents(".p-num").siblings(".p-price").html(); // 把获取的文本 p 的￥截取掉--得到价格数字 p = p.substr(1); //计算 // $(this).parent().parent().siblings(".p-sum").html("￥" + p * n); //toFixed(n) 保留n位小数 $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2)); getSum(); }) // 点击商品减少【商品数量不能小于1！】 $(".decrement").click(function() { var n = $(this).siblings(".itxt").val(); // 商品数量减少【判断】 // if (n > 1) { // n--; // } else { // return false; // } if (n == 1) { // 返回false会不再进行后面的代码 return false; } n--; $(this).siblings(".itxt").val(n); // 小计模块 var p = $(this).parents(".p-num").siblings(".p-price").html(); // 把获取的文本 p 的￥截取掉--得到价格数字 p = p.substr(1); //计算 $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2)); getSum(); }) //直接修改文本框内容---小计也要变【表单变化事件 change()】 $(".itxt").change(function() { // 获取 当前 文本框的值 var n = $(this).val(); // 获取单价 var p = $(this).parents(".p-num").siblings(".p-price").html(); p = p.substr(1); $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2)); getSum(); }) //总计模块【文本框值不同，遍历 each】---【封装函数】 getSum(); // 初始调用 function getSum() { var count = 0; // 计算总数 var money = 0; // 计算总额 // 遍历所有商品数量 $(".itxt").each(function(i, ele) { count += parseInt($(ele).val()); // ele=每一个的.itxt元素 }) // 修改总数的文本值【text()】 $(".amount-sum em").text(count); //遍历所有商品价格 $(".p-sum").each(function(i, ele) { money += parseFloat($(ele).text().substr(1)); }) $(".price-sum em").text("￥" + money.toFixed(2)); } // 删除模块 // 1.商品后的小删除---删除当前商品 $(".p-action a").click(function() { $(this).parents(".cart-item").remove(); getSum(); }) // 2.删除选中的商品 $(".remove-batch").click(function() { $(".j-checkbox:checked").parents(".cart-item").remove(); // 隐式迭代 getSum(); }) // 3. 删除全部 $(".clear-all").click(function() { $(".cart-item").remove(); getSum(); }) }); </script>
