文章目录
- 1. jQuery 样式操作
- 1.1 操作 css 方法
- 1.2 设置类样式方法
- *案例--tab栏切换
- 1.3 类操作和className 区别
- 2. jQuery 效果
- 2.1 显示隐藏效果
- 2.2 滑动效果
- 事件切换
- 动画队列及其停止排队方法
- 3.3 淡入淡出效果
- 利用渐进方式调整透明度
- *案例--高亮突出显示
- 3.4 自定义动画 animate
- *案例--王者荣耀手风琴
- 3. jQuery 属性操作
- 3.1 设置或获取元素固有属性值 prop()
- 3.2 设置或获取元素自定义属性值 attr()
- 3.3 补充知识: 数据缓存 data()
- *案例--购物车模块-全选全不选
- 4. jQuery 文本属性值
- 4.1 普通元素内容 html()
- 4.2 普通元素文本内容 text()
- 4.3 获取表单值 val()
- *案例--购物车模块-增减商品数量 以及计算小计
- 补充知识：寻找父级元素 parents()
- 补充知识：最后结果保留两位小数 toFixed(2)
- 5. jQuery 元素操作
- 5.1 遍历元素
- *案例--购物车模块-计算总计和总额
- 5.2 创建元素
- 5.3 添加元素
- 5.4 删除元素
- *案例--购物车模块-清理购物车
- *案例--购物车模块-选中商品添加背景
- 6. jQuery 尺寸、位置操作
- 6.1 jQuery 尺寸
- 6.2 jQuery 位置
- 案例--带有动画的返回顶部
- *案例--品优购电梯导航
- 电梯导航案例节流阀(互斥锁)
1. jQuery 样式操作
1.1 操作 css 方法
- 会返回值+单位；
- 属性值如果是数字可以不加单位和引号
- 属性和值（数字）可以不用加引号；复合属性需要采用驼峰命名法；值非数字一定要加引号！
1.2 设置类样式方法
-
添加类 addClass()
-
删除类 removeClass()
-
切换类 toggleClass()
*案例–tab栏切换
1.3 类操作和className 区别
2. jQuery 效果
2.1 显示隐藏效果
show() 、hide() 、toggle()三种函数形参定义一样！
2.2 滑动效果
以下三种函数形参定义与前面显示隐藏效果函数一样！
- slideUp()
- slideToggle()
这种函数可以应用于tab 栏切换！
事件切换
简单写法：
更简单写法：
动画队列及其停止排队方法
stop() 函数必须写在动画前面！
写在后面时，动画效果刚要实现就被停止
3.3 淡入淡出效果
以下三种函数形参定义与前面显示隐藏效果函数一样！
- fadeIn()
- fadeOut()
- fadeToggle()
利用渐进方式调整透明度
以上效果函数中speed 参数必须写；而渐进函数fadeTo() 中必须写speed 参数和opacity 参数！
*案例–高亮突出显示
<body>
<div class="wrap">
<ul>
<li><img src="../../../imageForTest/img1.jpg" alt=""></li>
<li><img src="../../../imageForTest/img2.jpg" alt=""></li>
<li><img src="../../../imageForTest/img3.jpg" alt=""></li>
</ul>
</div>
<script src="../jQuery.min.js"></script>
<script>
$(function () {
//鼠标进入
$('.wrap li').hover(function () {
$(this).siblings().stop().fadeTo(0, 0.5);
},function () {
$(this).siblings().stop().fadeTo(0, 1);
})
});
</script>
</body>
3.4 自定义动画 animate
params 参数定义：
*案例–王者荣耀手风琴
手风琴效果css 样式：
3. jQuery 属性操作
3.1 设置或获取元素固有属性值 prop()
- 获取属性值 prop(“属性”)；
- 设置属性语法 prop(“属性”，“属性值”)。
元素属性改变事件 change
3.2 设置或获取元素自定义属性值 attr()
3.3 补充知识: 数据缓存 data()
data() 是设置或获取元素自定义属性值的另一种方法！
该方法获取h5 新增自定义属性值 不需要写data-，而且返回的是数字型。
*案例–购物车模块-全选全不选
补充知识：
jQuery 中 :checked选择器可以选出 checked 属性为true 的元素
$(function () {
// 1. 全选 全不选功能
$(".checkall").change(function () {
$('.j-checkbox, .checkall').prop('checked', $(this).prop('checked'));
});
// 2. 小复选框被选中的个数为3 就应该把全选按钮选上，否则全选按钮不选
$(".j-checkbox").change(function () {
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
});
})
4. jQuery 文本属性值
4.1 普通元素内容 html()
4.2 普通元素文本内容 text()
4.3 获取表单值 val()
获取表单value 值
*案例–购物车模块-增减商品数量 以及计算小计
注意：寻找元素的兄弟时需要一层一层的找 直接使用类名寻找会将所有的元素找出来！
$(".increment").click(function () {
// 得到当前兄弟文本框的 value 值
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 4.小计跟随商品数量变换
// 要注意寻找元素的兄弟时需要一层一层的找 直接使用类名寻找会将所有的元素找出来
// var p = $("this").parent().parent().siblings(".p-price").html();
var p = $("this").parents("p-num").siblings(".p-price").html();
p = p.substr(1);
$("this").parents("p-num").siblings(".p-price").html("￥" + p * n.toFixed(2));
});
$(".decrement").click(function () {
// 得到当前兄弟文本框的 value 值
var n = $(this).siblings(".itxt").val();
if (n === 1) {
return false;
} else {
n--;
$(this).siblings(".itxt").val(n);
var p = $("this").parents("p-num").siblings(".p-price").html();
p = p.substr(1);
$("this").parents("p-num").siblings(".p-price").html("￥" + p * n.toFixed(2));
}
})
// 5. 用户直接修改文本框值 计算 小计模块
$(".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-price").html("￥" + p * n.toFixed(2));
})
补充知识：寻找父级元素 parents()
<div class="one">
<div class="two">
<div class="three">I
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
</script>
之前我们想要找寻子元素的某个父级盒子，需要通过parent() 一级一级的寻找；但是我们现在可以通过parents(‘选择器’) 返回指定祖先元素。
<script>
console.log($(".four").parents('one'));
</script>
补充知识：最后结果保留两位小数 toFixed(2)
5. jQuery 元素操作
5.1 遍历元素
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。
- $(“选择器”).each(function(index, domEle){xxx; })
- $.each(obj, function(index, element){xxx; }) 主要用于遍历数据 – 遍历数组、对象
如果要遍历DOM 对象，可以使用前者；如果遍历数据，后者更为合适。
*案例–购物车模块-计算总计和总额
注意：在商品数量变化时需要调用下面的函数！
// 6.计算总计和总额模块
function getSum() {
var count = 0;// 总件数
var money = 0;// 总金额
$(".itxt").each(function (i, ele) {
count += parseInt($(ele).val());
});
$(".amount-sum em").text(count);
$(".p-sum").each(function (i, ele) {
money += parseFloat($(ele).text().substr(1)).toFixed(2);
});
$(".price-sum em").text("￥" + money);
}
5.2 创建元素
5.3 添加元素
-
内部添加
element.append() – 添加到元素的后面；
element.prepend() – 添加到元素的前面。
-
外部添加
element.after(“内容”) – 把内容放到目标元素后面；
element.before(“内容”) – 把内容放到目标元素前面。
5.4 删除元素
- element.emove()-- 删除某个元素
- element.empty()-- 删除匹配元素的所有子节点
- element.html(“”)-- 删除匹配元素的内容
*案例–购物车模块-清理购物车
// 7. 删除商品模块
// (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 () {
$(".j-checkbox").parents(".cart-item").remove();
getSum();
});
*案例–购物车模块-选中商品添加背景
// 1. 全选 全不选功能
$(".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");
}
});
// 2. 小复选框被选中的个数为3 就应该把全选按钮选上，否则全选按钮不选
$(".j-checkbox").change(function () {
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");
}
});
6. jQuery 尺寸、位置操作
6.1 jQuery 尺寸
6.2 jQuery 位置
- offset()
- position()
注意position() 只能获取不能设置值！
- scrollTop()/scrollLeft
该方法可以获取值也可以设置值！
补充知识：页面滚动事件scroll
案例–带有动画的返回顶部
注意：annimate 函数只能是元素才能做动画！
*案例–品优购电梯导航
核心算法：导航模块和内容区域是一一对应的
$(function () {
// 1. 页面中今日推荐模块滚动到页面最上方时 电梯导航模块显示出来
var toolTop = $(".recommend").offset().top;
toggleTool();
// 节流阀
var flag = true;
// 3. 封装起来toggleTool() 当页面加载完毕后进行判断
function toggleTool() {
if ($("document").scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
}
}
$(window).scroll(function () {
// 该部分代码是在页面滚动之后才进行 但如果此时页面仍停在此处 且此时刷新页面
// 不滚动的话电梯导航就不会出现 所以需要将以下代码封装起来toggleTool() 当页面加载完毕后进行判断
// if ($("document").scrollTop() >= toolTop) {
// $(".fixedtool").fadeIn();
// } else {
// $(".fixedtool").fadeOut();
// }
toggleTool();
// 5. 电梯导航自动设置current 类
if (flag) {
$(".floor .w").each(function (i, ele) {
if ($(document).scrollTop >= $(ele).offset().top) {
$(".fixedtool li").eq(i).addClass(".current").siblings().removeClass();
}
});
}
});
// 2. 点击电梯导航页面可以滚动到相应内容区域 导航模块和内容区域是一一对应的
$(".fixedtool li").click(function () {
flag = false;
console.log($(this).index());
var current = $(".floor .w").eq($(this).index()).offset().top;
$("body, html").stop().animate({
scrollTop: current
}, function () {
flag = true;
});
// 4. 点击之后给当前小li 添加current 类名 姐妹移除current 类名
$(this).addClass("current").siblings().removeClass();
});
})
电梯导航案例节流阀(互斥锁)
想要的效果：点击某个小li 时就直接选择当前小li ，而不是一个一个的选择知道选择到当前小li 。
![[flask]flask的路由](https://img-blog.csdnimg.cn/direct/dd07fed1a33e4978b668a5091bd6213d.png)
