jQuery基本操作之二

jQuery2
jQuery属性操作：
prop获取元素固定的属性值：
1.获取属性值语法：
prop(“属性”)
$(“a”).prop(“href”)
2.设置属性语法：
prop(“属性”,“属性值”)
$(“a”).prop(“title”,“我们都很好”)
KaTeX parse error: Expected '}', got 'EOF' at end of input: …){ console.log((this).prop(“checked”));
})

设置或获取元素自定义属性attr()
1.获取属性语法：
attr(“属性”)//类似原生getAttribute（）
2.设置属性语法
attr（“属性”,“属性值”）
data-index
数据缓存：data()
data（）方法可以在指定元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除

$("span").data("uname","andy");console.log($(“span”).data(“uname”));
可以获取H5自带的属性data-index，不用写data开头的，得到的是数字型
1.附加数据语法
data(“name”,“value”)//向被选元素附加数据
2.获取数据语法
data(“name”)//像被选元素获取数据
console.log($("div").data("index"));购物车全选案例：:checked选择器，:checked查找被选中的表单元素//$(".j-checkbox").length所有的小复选框的个数
全选按钮：checkall
商品前面的按钮j-checkbox
$(function(){
$(".checkall").change(function(){
$(".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”);
}
KaTeX parse error: Expected '}', got 'EOF' at end of input: …function(){ if((".j-checkbox:checked").length===$(".j-checkbox").length){
$(".checkall").prop(“checked”,true);
}else{
KaTeX parse error: Expected 'EOF', got '}' at position 38: …ecked",false); }̲ if((this).prop(“checked”)){
$(this).parents(".cart-item").addClass(“check-cart-item”);
}else{
$(this).parents(".cart-item").removeClass(“check-cart-item”);
}
})
})
jQuery内容文本值：
1.普通元素内容：html()
2.获取设置元素文本内容text（）
3.获取设置表单值val（）
购物车增减商品数量案例：
核心思路：
1）首先声明一个变量，当我们点击+号（increment），就让这个值++，然后付给文本框
2）注意1：只能增加商品的数量，就是当前+号的兄弟文本框（itxt）的值
3）修改表单的值是val（）方法
4）注意2：这个变量的初始值应该是这个文本框的值，在这个值的基础上++，要获取表单的值
5）减号（decrement）思路同理，但是如果文本框的值是1，就不能再减了
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ var n=(“this”).siblings(".itxt").val();
n++;
$("this").siblings(".itxt").val(n);//varp=$(“this”).parent().parent().siblings(“p-price”).html();
p=p.substr(1);
//$("this").parent().parent("p-sum").siblings("p-price").html("￥"+p\ast n);varp=$(“this”).parents(".p-num").siblings(“p-price”).html();
p=p.substr(1);
var price=(pn).toFixed(2);
$(“this”).parents(“p-num”).siblings(“p-sum”).html(“￥”+price);
getSum();
})
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ var n=(“this”).siblings(".itxt").val();
if(n==1){
return false;
}
n–;
$("this").siblings(".itxt").val(n);//varp=$(“this”).parent().parent().siblings(“p-price”).html();
p=p.substr(1);
//$("this").parent().parent("p-sum").siblings("p-price").html("￥"+p\ast n);varp=$(“this”).parents(".p-num").siblings(“p-price”).html();
p=p.substr(1);
var price=(pn).toFixed(2);
$(“this”).parents(“p-num”).siblings(“p-sum”).html(“￥”+price);
getSum();
}
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ var n=(this).val();
var p=$(“this”).parents(".p-num").siblings(“p-price”).html();
p=p.substr(1);
KaTeX parse error: Expected 'EOF', got '}' at position 72: …ce); getSum(); }̲) }) 修改商品小计模块： …(".four").parents(".one"));
6）最后计算的结果如果想要保留2位小数通过toFixed（2）方法
7)用户也可以直接修改表单里面的值，同样要计算小计。用表单change事件
8）用最新的表单内的值乘以单价即可，但是还是当前商品小计
jQuery元素操作：
jquery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同的操作，就需要用到遍历
语法1：
$("div").each(function(index,domEle)xxx;)1.each()方法遍历匹配的每一个元素，主要用DOM处理，each每一个2.里面的回调函数有2个参数：index是每个元素的索引号，demEle是每个DOM元素对象，不是jQuery对象3.所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象$(domEle)
//回调函数第一个参数一定是索引号，可以自己指定索引号名称
var sum=0;
var arr=[“red”,“green”,“blue”];
$(function(){
$(“div”).each(function(i,domEle){
console.log(i);
console.log(domEle);
//回调函数第二个参数一定是DOM元素对象
domEle.css(“color”);//错误，这是一个DOM对象，DOM对象是没有css方法的，不能使用jquery方法
$(domEle).css("color",arr[i]);sum+=parseInt($(domEle).text());
})
console.log(sum);
})
语法2：
$.each(object,function(index,element)xxx;)1.$.each方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
2.里面的函数有2个参数：index是每个元素的索引号；element遍历内容
$.each($(“div”),function(i,ele){
console.log(i);
console.log(ele);
})
$.each(arr,function(i,ele){
console.log(i);
console.log(ele);
})
$.each({name:“andy”,
age:18
},function(i,ele){
console.log(i);//输出的是name、age属性名
console.log(ele);//输出属性值
})
购物车总计和总和模块：
核心思路：
1）把文本框里面的值相加就是总价数量，总额同理
2）文本框里面的值不相同，如果想要相加需要用到each遍历，声明一个变量相加即可
3）点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
4）因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可
5）注意1：总计是文本框里面的内容相加用val(),总额是普通元素的内容用test()
6）要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
getSum();
function getSum(){
var count=0;//计算总件数
var money=0;//计算总价钱
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ount+=parseInt((ele).val());
})
$(".amount-sum em").text(count);
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ey+=parseFloat((ele).text().substr(1));
});
$(".price-sum em").text(“￥”+money.toFixed(2));
}
创建添加删除元素：
KaTeX parse error: Expected '}', got 'EOF' at end of input: … 1.创建元素 var li=(“

• 我是后来创建的li
• ”)
  2.添加元素
  （1）内部添加
  //$(“ul”).append(li);//内部添加并且放到元素的最后面
  $("ul").prepend(li);//内部添加并且放到元素的最前面（2）外部添加vardiv=$(“
  我是后妈生的
  ”);
  //$(".test").after(div);
  $(".test").before(div);
  3.删除元素//element.remove()删除匹配的元素
  //element.empty()//删除匹配的元素集合中所有的子节点
  element.html("")//清除匹配的元素内容

  })
  删除商品模块：
  核心思路：
  1）把商品remove（）删除元素即可
  2）有三个地方需要删除：1.商品后面的删除按钮，2.删除选中的商品3.清理购物车
  3）商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发
  4）删除选中的商品：先判断小的复选框是否选中状态，如果是选中，则删除对应的商品
  $(".p-action a").click(function(){
  $(this).parents(".cart-item").remove();
  getSum();
  })
  $("".remove-batch).click(function(){
  $(".j-checkbox:checked").parents(".cart-item").remove();
  getSum();
  })
  $(".clear-all").click(function(){
  KaTeX parse error: Expected 'EOF', got '}' at position 36: …e(); getSum(); }̲) 购物车选中商品添加背景： …(this).prop(“checked”)){
  $(".cart-item").addClass(“check-cart-item”);
  }else{
  $(".cart-item").removeClass(“check-cart-item”);
  }