jQuery的属性操作
设置和获取元素固有的属性值 prop()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/jquery-3.5.1.js"></script>
</head>
<body>
<a href="#" title="你妹妹的">你妹妹的</a>
<input type="checkbox" checked/>
<script>
$(function(){
console.log($("a").prop("title"))
$("a").prop("title","你妈妈");
console.log($("a").prop("title"))
$("input").change(function(){
console.log($(this).prop("checked"));
})
})
</script>
</body>
</html>
设置和获取元素自定义属性值attr()
<a href="#" title="你妹妹的" index="1">你妹妹的</a>
console.log($("a").attr("index"))
$("a").attr("index","100")
console.log($("a").attr("index"))
数据缓存data()
data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
①附加数据语法
语法：data(“name”,“value”) 向被选元素附加数据
②获取数据语法
date(“name”) 向被选元素获取数据
<body>
<span>123</span>
<script>
$(function() {
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
购物车模块–全选
用.length获取元素个数
两个全选按钮的类是 checkall
购物车元素按钮是j-checkbox
<input type="checkbox" name="" id="" class="checkall"> 全选
<input type="checkbox" name="" id="" class="checkall"> 全选
<input type="checkbox" name="" id="" checked class="j-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
$(function(){
// $(".checkall").click(function(){
// $(".j-checkbox").prop("checked",$(this).prop("checked"));
// })
把状态值赋给他们即可 不用想赋true or false 简单点即可 同时 另一个全选按钮也要赋值
$(".checkall").change(function(){
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
})
如果商品都被选择了，那么两个全选按钮也要被选择
$(".j-checkbox").change(function(){
// console.log($(".j-checkbox"))
// console.log($(".j-checkbox:checked"))
if($(".j-checkbox").length==$(".j-checkbox:checked").length)
{
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
})
})
jQuery内容文本值
获取设置元素内容
$("div").html();
$("div").html("123");
结果： <span>123</span>
普通元素文本内容text()
$("div").text();
$("div").text("123");
// 123
// 获取过来的不带标签 123
获取设置表单值 val()
获取表单的的值：val()
设置表单的值：val(“内容”)
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html());
// $("div").html("123");
// 2. 获取设置元素文本内容 text()
console.log($("div").text());
$("div").text("123");
// 3. 获取设置表单值 val()
console.log($("input").val());
$("input").val("123");
</script>
</body>
购物车模块（实战）
增减商品数量
通过获取当前加减号的 兄弟 （input） 修改它的值
//加号
$(".increment").click(function(){
var num=$(this).siblings(".itxt").val();
num++;
$(this).siblings(".itxt").val(num);
})
//减号
$(".decrement").click(function(){
var num=$(this).siblings(".itxt").val();
if(num>1){
num--;
$(this).siblings(".itxt").val(num);
}
})
商品价格小计
substr(num) 表示将字符串的前num位 全部删除 num从1开始
//加号
$(".increment").click(function(){
var num=$(this).siblings(".itxt").val();
num++;
$(this).siblings(".itxt").val(num);
//获取指定单价 p-price是 加减号的爸爸的爸爸的兄弟
//获取那个字符串
var price=$(this).parent().parent().siblings(".p-price").text();
//剔除 ￥ 通过sbustr(1) 代表 剔除第几个元素之前的所有内容
price=price.substr(1);
//改变小计
var sum=price*num;
$(this).parent().parent().siblings(".p-sum").text('￥'+sum);
})
//减号
$(".decrement").click(function(){
var num=$(this).siblings(".itxt").val();
if(num>1){
num--;
$(this).siblings(".itxt").val(num);
}
var price=$(this).parent().parent().siblings(".p-price").text();
//剔除 ￥ 通过sbustr(1) 代表 剔除第几个元素之前的所有内容
price=price.substr(1);
//改变小计
var sum=price*num;
$(this).parent().parent().siblings(".p-sum").text('￥'+sum);
})
parents() 获取他所有父级元素 不用在一层一层的取值
上一个代码的 .parent().parent() 可以直接写成
$(this).parents(".p-num").siblings(".p-price").text();
商品价格小计（根据输入值的变化）
//----------------------下面是用户主动输入数量----------------------------
$(".itxt").change(function(){
var num=$(this).val();
var price=$(this).parents(".p-num").siblings(".p-price").html().substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("￥"+num*price);
})
jQuery元素操作
主要是遍历，创建，添加，删除元素操作
遍历 each方法
语法一：
$("div").each(function(index,domEle){xxx;})
each()方法遍历匹配的每一个元素。主要用DOM处理。
each每一个里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象
所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)
// 语法二
$.each(Object,function(index,element){xxx;})
$.each() 方法可用于遍历任何对象，主要用于数据处理,比如数组,对象
里面的函数有2个参数: index 是每个元素的索引号,element遍历内容
操作里面的元素记得要转化成jq对象
<ul>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
<script>
$(function(){
var color=["red","white","blue","purple","yellow"];
$("li").each(function(i,domEle){
$(domEle).css("color",color[i]);
})
})
</script>
第二种
<script>
$(function(){
var color=["red","white","blue","purple","yellow"];
$.each($("li"),function(i,domEle){
$(domEle).css("color",color[i]);
console.log(color[i]);
})
})
</script>
创建 添加 删除元素操作
创建元素
$("<li></li>");
动态创建一个li标签
var li = $("<li>我是后来创建的li</li>");
var div =$("<div>我是后来的div</div>")
添加元素
1.内部添加
把内容放入匹配元素内部最后面：element.append("内容")
把内容放入匹配元素内部最前面：element.prepend("内容")
// 1.内部添加
element.append("内容")
$("ul").append(li);
// 把内容放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容")
$("ul").prepend(li);
// 把内容放入匹配元素内部最前面
2.外部添加
外部添加把内容放到目标元素后面：element.after("内容")
外部添加把内容放到目标元素前面：element.before("内容")
// 2.外部添加
element.after("内容");
$(".test").after(div);
// 把内容放入目标元素后面
element.before("内容");
// 把内容放入目标元素前面
内部添加元素，生成之后，它们是父子关系
外部添加元素，生成之后，它们是兄弟关系
删除元素
删除匹配的元素(本身)：element.remove()
删除匹配的元素集合中所有的子节点：element.empty()
清空匹配的元素内容：element.html("")
1.element.remove() //删除匹配的元素(本身)
$("ul").remove();
2.element.empty() //删除匹配元素里面的子结点(孩子)
$("ul").empty();
3.element.html("") //删除匹配元素里面的子结点(孩子)
购物车模块（实战之商品数量价格总计）
计算被选的购物品的 价格数量
$(function(){
// $(".checkall").click(function(){
// $(".j-checkbox").prop("checked",$(this).prop("checked"));
// })
//把状态值赋给他们即可 不用想赋true or false 简单点即可 同时 另一个全选按钮也要赋值
$(".checkall").change(function(){
$(".j-checkbox,.checkall").prop("checked",$(this).prop("checked"));
})
//如果商品都被选择了，那么两个全选按钮也要被选择
$(".j-checkbox").change(function(){
// console.log($(".j-checkbox"))
// console.log($(".j-checkbox:checked"))
if($(".j-checkbox").length==$(".j-checkbox:checked").length)
{
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
})
//----------------------下面是数量加减号----------------------------
//加号
$(".increment").click(function(){
var num=$(this).siblings(".itxt").val();
num++;
$(this).siblings(".itxt").val(num);
//获取指定单价 p-price是 加减号的爸爸的爸爸的兄弟
//获取那个字符串
var price=$(this).parents(".p-num").siblings(".p-price").text();
//剔除 ￥ 通过sbustr(1) 代表 剔除第几个元素之前的所有内容
price=price.substr(1);
//改变小计
var sum=price*num;
$(this).parents(".p-num").siblings(".p-sum").text('￥'+sum);
// if($(this).parents(".p-num").siblings(".p-checkbox").val()
})
//减号
$(".decrement").click(function(){
var num=$(this).siblings(".itxt").val();
if(num>1){
num--;
$(this).siblings(".itxt").val(num);
}
var price=$(this).parents(".p-num").siblings(".p-price").text();
//剔除 ￥ 通过sbustr(1) 代表 剔除第几个元素之前的所有内容
price=price.substr(1);
//改变小计
var sum=price*num;
$(this).parents(".p-num").siblings(".p-sum").text('￥'+sum);
})
//----------------------用户主动输入数量----------------------------
$(".itxt").change(function(){
var num=$(this).val();
var price=$(this).parents(".p-num").siblings(".p-price").html().substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("￥"+num*price);
})
$(".j-checkbox,.itxt,.checkall,.decrement,.increment").on({
change:function(){getSumNumAndPrice()},
click:function(){getSumNumAndPrice()}
})
//计算所有的数量 和价格
function getSumNumAndPrice(){
var sumNum=0;
$.each($(".itxt"),function(i,domEle)
{
if($(domEle).parents(".p-num").siblings(".p-checkbox").find(".j-checkbox").prop("checked")==true)
sumNum+=parseInt($(domEle).val());
})
$(".amount-sum em").html(sumNum);
var sumPrice=0;
$.each($(".p-sum"),function(i,domEle){
if($(domEle).siblings(".p-checkbox").find(".j-checkbox").prop("checked")==true)
{
var p=parseFloat($(domEle).text().substr(1));
sumPrice+=p;
}
})
$(".price-sum em").html("￥"+sumPrice);
}
})
我写了一个on 绑定事件，每次改变checked的时候 或者数量改变的时候 就触发，其次每次只算被checked的元素
删除商品
//删除商品部分
//单个删除
$(".p-action>a").click(function(){
$(this).parents(".cart-item").remove();
getSumNumAndPrice()
})
//批量删除
$(".remove-batch").click(function(){
$(".j-checkbox:checked").parents(".cart-item").remove();getSumNumAndPrice()
})
//清理购物车
$(".clear-all").click(function(){
$(".cart-item").remove();getSumNumAndPrice();
})
$(".j-checkbox:checked") 代表被选中的 .j–checkbox
给选中的商品添加背景色
//判断是否被选中 然后改变背景颜色
if($(this).prop("checked")==true)
{
$(this).parents(".cart-item").addClass("check-cart-item");
}else{
$(this).parents(".cart-item").removeClass("check-cart-item");
}
小技巧：把两种状态封装到类中 需要时直接添加或者移除class即可
jQuery尺寸
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
</body>
jQuery位置
offset() 设置或获取元素偏移
offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
$(".son").offset();
$(".son").offset().top;
$(".son").offset({
top: 200,
left: 200
});
offset().top用于获取距离文档顶部的距离，
offset().left 用于获取距离文档左侧的距离
position()获取元素偏移
position() 方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
该方法有2个属性 left、top。
position().top 用于获取距离定位父级顶部的距离，
position().left 用于获取距离定位父级左侧的距离。
$(".son").position();
// 这个方法只能获取偏移，不能设置偏移
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 1. 获取设置距离文档的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 获取距离带有定位父级位置（偏移） position 如果没有带有定位的父级，则以文档为准
// 这个方法只能获取不能设置偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
})
</script>
</body>
scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。
// 页面滚动事件
$(window).scroll(function(){
$(document).scrollTop();
})
// 页面滚动事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
电梯导航栏案例（实战）
当页面到特定位置后 显示左侧的小工具 当用户点击后 页面到达指定的位置
同时颜色改变
$(function(){
//左侧的菜单栏
var top=$(".recommend").offset().top;
tool();
function tool(){
if($(document).scrollTop()>=top)
{
$(".fixedtool").fadeIn();
}else{
$(".fixedtool").fadeOut();
}
}
$(window).scroll(function(){
tool()
})
//点击菜单栏的指定模块 跳到指定模块
$(".fixedtool li").click(function(){
//获取集合元素 index
var current=$(".floor .w").eq($(this).index()).offset().top;
$("body,html").stop().animate({
scrollTop:current
});
//写法麻烦
// $(".fixedtool li").removeClass("current");
// $(this).addClass("current");
//简单写法
$(this).addClass("current").siblings().removeClass("current");
})
})
tool()方法必须要封装起来 执行两次 因为当你页面 位置到达后 你刷新页面重新加载 会不显示出来 因为没法触发那个事件
同时那个current类的 添加和删除
$(this).addClass(“current”).siblings().removeClass(“current”); 一举双的
这个一句解决！！！！
滑动页面导航自动添加current
一次判断 如果距离大于 就执行。
//判断 页面距离 从而 让菜单栏的指定模块颜色变化
function toolCurrent(){
$.each($(".floor .w"),function(i,ele){
if($(ele).offset().top<$(document).scrollTop())
{
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
}
})
}
完整代码
// $(function() {
// // 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
// // 节流阀 互斥锁
// var flag = true;
// // 1.显示隐藏电梯导航
// var toolTop = $(".recommend").offset().top;
// toggleTool();
// function toggleTool() {
// if ($(document).scrollTop() >= toolTop) {
// $(".fixedtool").fadeIn();
// } else {
// $(".fixedtool").fadeOut();
// };
// }
// $(window).scroll(function() {
// toggleTool();
// // 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
// if (flag) {
// $(".floor .w").each(function(i, ele) {
// if ($(document).scrollTop() >= $(ele).offset().top) {
// console.log(i);
// $(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
// }
// })
// }
// });
// // 2. 点击电梯导航页面可以滚动到相应内容区域
// $(".fixedtool li").click(function() {
// flag = false;
// console.log($(this).index());
// // 当我们每次点击小li 就需要计算出页面要去往的位置
// // 选出对应索引号的内容区的盒子 计算它的.offset().top
// 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();
// })
// })
$(function(){
//判断 页面距离从何决定是否让 菜单出来
function tool(){
if($(document).scrollTop()>=top)
{
$(".fixedtool").fadeIn();
}else{
$(".fixedtool").fadeOut();
}
}
//判断 页面距离 从而 让菜单栏的指定模块颜色变化
function toolCurrent(){
$.each($(".floor .w"),function(i,ele){
if($(ele).offset().top<$(document).scrollTop())
{
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
}
})
}
//左侧的菜单栏
var top=$(".recommend").offset().top;
tool();
toolCurrent();
$(window).scroll(function(){
tool();
toolCurrent()
})
//点击菜单栏的指定模块 跳到指定模块
$(".fixedtool li").click(function(){
//获取集合元素 index
var current=$(".floor .w").eq($(this).index()).offset().top;
$("body,html").stop().animate({
scrollTop:current
});
//写法麻烦
// $(".fixedtool li").removeClass("current");
// $(this).addClass("current");
//简单写法
$(this).addClass("current").siblings().removeClass("current");
})
})
9635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
