1. 内容文本
<div>
<span>我是span</span>
</div>
<input type="text" value="我是表单">
<script>
//1.设置元素内容 html()
$("div").html();
//2.获取设置元素文本内容text()
$("div").text();
//3.获取设置表单值 val()
$("input").val();
</script>
2.返回指定祖先元素
$("div").parents(".yeye")//返回div的祖先 类为yeye
淘宝购物车案例
只放js代码
$(function(){
//1.全选 全不选模块
//就是把全选按钮(checkall)状态赋值给三个小的按钮(j-checkbox)就可以了
$(".checkall").change(function(){
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
});
//2.如果小复选框被选中的个数等于3,就应该把全选按钮选上 否则全选按钮不选
$(".j-checkbox").change(function(){
// :checked 被选中的复选框 返回true 和false
if($(".j-checkbox:checked").length===$(".j-checkbox").length){
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
});
//3.增减商品数量模块 先声明一个变量 点击加号(increment) 后这个变量就++ 然后赋值给文本框
$(".increment").click(function(){
//得到当前兄弟文本框的值
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
//计算小计模块 根据文本框的值 乘以 当前商品的价格 就是商品小计
//难点是准确找到目标 当前小li爸爸的爸爸的兄弟 不能直接就选择p-price这个类不然会选择所有的这个类元素
//(1)当前商品价格 p
// var p = $(this).parent().parent().siblings(".p-price").html();
var p = $(this).parents(".p-num").siblings(".p-price").html();
//去掉前面的¥符号 substr()截取字符串
p =p.substr(1);
//(2)小计模块
//结果保留两位小数
var price = (p*n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("¥"+price);
//(3)直接修改表单里面的值 商品小计也要改
});
$(".decrement").click(function(){
var n=$(this).siblings(".itxt").val();
if(n==1){
return false;
}
n--;
$(this).siblings(".itxt").val(n);
//计算小计模块 根据文本框的值 乘以 当前商品的价格 就是商品小计
//(1)当前商品价格 p
var p = $(this).parents(".p-num").siblings(".p-price").html();
//去掉前面的¥符号
p =p.substr(1);
//(2)小计模块
var price = (p*n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("¥"+price);
});
//用户修改文本框的值 计算 小计模块
$(".itxt").change(function(){
//先得到文本框里面的值 乘以 当前商品的单价
var n=$(this).val();
//当前商品单价
var p = $(this).parents(".p-num").siblings(".p-price").html();
p = psubstr(1);
$(this).parents(".p-num").siblings(".p-sum").html("¥"+(p*n).toFixed(2));
})
})
3.jq元素操作
遍历、创建、添加、删除元素操作
(1)遍历
jq隐式迭代是对同一类元素做了同样的操作,如果想给同一类元素做不同操作 就需要遍历
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function(){
//对同一类元素做不同操作 需要遍历
var sum =0;
var arr=["red","pink","blue"];
//1. each()方法遍历元素
$("div").each(function(index,domEle){
//回调函数 第一个index一定是索引号 domEle是dom对象
//将上面那几个div根据arr设置成不同的颜色
$(domEle).css("color",arr[index]);
sum+=parseInt($(domEle).text());//parseIn()转换成数值型
});
console.log(sum);
//2.$.each() 更有利于处理数据
$.each(arr,function(index,ele){
console.log(index);
console.log(ele);
})
})
</script>
</body>
(2)创建元素$("<li></li>")
添加、 删除元素
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function(){
//1.创建元素
var li = $("<li>我是后来创建的li</li>");
//2.添加元素
//(1)内部添加
// $("ul").append(li); //把内容放到原来内容的最后面
$("ul").prepend(li);//把内容放到原来内容的最前面
//(2)外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div); //把内容放在目标元素后面
$(".test").before(div);//把内容放在目标元素前面
//3.删除元素
$("ul").remove();//可以删除匹配的元素
$("ul").empty();//删除匹配元素的子节点 孩子 本身元素不删除
$("ul").html("");
})
</script>
4.尺寸操作
<div></div>
<script>
//1.width() height()获取元素width 和height大小
console.log($("div").width());
$("div").width(300);
//2. innerWidth() innerHeight() 获取设置元素width 和height+padding大小
console.log($("div").innerWidth());
//3.outerWidth() 获取设置元素 width+padding+border大小
console.log($("div").outerWidth());
//4.outerWidth(true)获取设置width+padding+border+margin大小
console.log($("div").outerWidth(true));
</script>
5.位置操作
$(function(){
//1.获取设置距离文档的位置(偏移)offset
console.log($(".son").offset());
console.log($(".son").offset().top);
//2.获取距离带有定位父级位置(偏移)position 如果没有带有定位的父级 则以文档为准
//这个方法只能获取 不能设置
console.log($(".son").position());
//3. scrollTop()/scrollLeft()设置/获取元素被卷去的头部和左侧
$(window).scroll(function(){
$(document).scrollTop();
});
//返回顶部
$(".back").click(function(){
$(document).scrollTop(0);//可以直接返回顶部
//设置带有动画效果的返回顶部 注意 animate 只能对元素做动画
$("body,html").stop().animate({
scroll:0
});
})
})