jQuery学习第二天
1.jQuery属性操作
1.1 获取或者设置固有属性
- 获取固有属性
prpo("属性")
- 设置固有属性
prpo("属性","属性值")
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<a href="#"></a>
<input type="checkbox" checked index="1">
<script>
$(function() {
// 1.获取属性值
console.log($("a").prop("href"));
$('input').change(function() {
console.log($(this).prop("checked"));
})
// 不能获取自定义属性值
console.log($('input').prop("index"));
// 2.设置固有属性值
$("a").prop("href", "666");
console.log($("a").prop("href"));
})
</script>
</body>
</html>
- 效果图
1.2 获取和设置自定义属性值
- 获取自定义属性
attr("属性") //类似js的getAttribute
- 设置自定义属性
attr("属性","属性值") //类似js的setAttribute
- 可以获取h5自定义属性（data-开头的）
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div index="1" data-name="2" data-div="3"></div>
<script>
$(function() {
// 1.获取自定义属性
console.log($('div').attr("index"));
console.log($('div').attr("data-name"));
// 2.设置自定义属性
$('div').attr("data-div", "5");
console.log($('div').attr("data-div"));
})
</script>
</body>
</html>
- 效果图
1.3 数据缓存
-
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将移除
-
附加数据语法
data("uname","value")
- 获取数据语法
data("uname")
- 还可以获取h5的自定义属性，如data-index,返回值是数字型
data("index")
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div data-index="100"></div>
<script>
$(function() {
// 1.附加数据
var div = $('div');
div.data("uname", "bob");
div.data("age", "30")
// 2.获取数据
console.log(div.data("uname"));
console.log(div.data("age"));
// 2.获取h5属性
console.log(div.data("index"));
})
</script>
</body>
</html>
- 效果图
1.4 jQuery内容文本值
- 普通元素内容 html()(相当于inner HTML)
html() //获取元素的内容
html() // 设置元素的内容
- 普通元素文本内容（相当于innerText()）
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
- 表单的内容操作
val() //获取表单的值 相当于js中的value
val("内容") //设置表单的值
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="我是value">
<script>
$(function() {
// 1.html()获取元素内容
console.log($('div').html());
// 2.text()获取元素文本内容
console.log($('div').text());
// 修改文本内容
$('div').text("123");
console.log($('div').html());
// 修改元素内容
$('div').html("<a>111</a>");
console.log($('div').html());
// 获取表单内容
console.log($('input').val());
// 修改表单内容
$('input').val("修改后");
console.log($('input').val());
})
</script>
</body>
</html>
- 效果图
1.5 选取所有祖先元素
| 筛选器 | 说明 |
|---|---|
| parents(‘选择器’) | 取得一个包含着所有匹配元素的祖先元素的元素集合 |
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="one">
<div class="tree">
<div class="three">
<div class="four"></div>
</div>
</div>
</div>
<script>
// 从four选取到祖先one
console.log($(".four").parents(".one"));
</script>
</body>
</html>
- 效果图
1.6 保留两位小数
- js的toFixed(2)方法(不是jQuery的方法)返回一个保留两位小数的字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>123.5</div>
<script>
$(function() {
var val = parseFloat($('div').text());
console.log(val);
var result = val.toFixed(2);
console.log(result);
})
</script>
</body>
</html>
- 效果图
1.7 jQuery的遍历方法
- 语法
$("div").each(function(index,domEle){xxx})
注意点
- 第一个参数为索引号
- 第二个参数为DOM对象
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 1.each方法遍历，第一个参数index索引号，第二个参数dom对象
// 给三个div设置不同的颜色
var arr = ["red", "blue", "pink"];
$('div').each(function(index, Ele) {
console.log(index);
// dom对象，可以调用dom方法，也可以封装成jQuery对象，再用jQuery方法
// Ele.style.color = arr[index];
$(Ele).css({
color: arr[index]
})
})
})
</script>
</body>
</html>
- 效果图
第二种方法
- 语法
$.each(object,function(index,element){xxx})
注意点
- $.each()方法可以遍历任何对象，如数组，对象
- index代表索引号，element遍历内容
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 1.each方法遍历，第一个参数index索引号，第二个参数dom对象
// 给三个div设置不同的颜色
var arr = ["red", "blue", "pink"];
// $('div').each(function(index, Ele) {
// console.log(index);
// // dom对象，可以调用dom方法，也可以封装成jQuery对象，再用jQuery方法
// // Ele.style.color = arr[index];
// $(Ele).css({
// color: arr[index]
// })
// })
$.each(arr, function(index, ele) {
console.log(index);
console.log(ele);
})
$.each($('div'), function(index, ele) {
console.log(index);
console.log(ele);
})
})
</script>
</body>
</html>
- 效果图
2.jQuery元素操作
2.1 创建元素
- 语法
$("<li></li>") //动态的创建了一个li元素
2.2 添加元素
- 在元素内部添加（内部的最后）
var li=$("<li>内部后面的li</li>");
$("ul").append(li);
- 在元素内部添加（内部的前面）
var li=$("<li>内部前面的li</li>");
$("ul").prepend(li);
-
在元素外部添加
- 元素的后面
var div=$("后面div"); $(".test").after(div);- 元素的前面
var div=$("前面div"); $(".test").before(div);
2.3 删除元素
- 删除元素自身（包括内容）
$("ul").remove();
- 清空元素里面的内容
$("ul").emept();
- 等价于
$("ul").html("");
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>我是一个li</li>
</ul>
<div class="test"></div>
<div class="exist"> 我还在</div>
<div class="content">内容</div>
<div class="content2">内容</div>
<script>
$(function() {
// 1.创建元素
var li1 = $("<li>前面的li</li>");
var li2 = $("<li>后面的li</li>");
// 2.内部添加元素
// 前面添加
$("ul").append(li2);
// 后面添加
$("ul").prepend(li1);
// 3.外部添加元素
var div1 = $("<div>前面div</div>");
var div2 = $("<div>后面div</div>");
// 前面添加
$(".test").before(div1);
// 后面添加
$(".test").after(div2);
// 4.删除元素
$(".exist").remove();
// 清空内容
$(".content").empty();
// 等价于
$(".content2").html("");
})
</script>
</body>
</html>
- 效果图
购物车综合案例
-
js代码
$(function() {
// 1.实现购物车单选全选
// checkall 全选按钮
// j-checkbox 单选按钮
$('.checkall').change(function() {
console.log($(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");
}
})
// 2.实现单选影响全选框
$('.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");
}
})
// 3.实现点击加号加商品数量，减号减少商品数量
// 4.实现商品的小计跟随变化
$(".increment").click(function() {
// 数量变化
var cnt = $(this).siblings(".itxt").val();
cnt++;
// console.log(cnt);
$(this).siblings(".itxt").val(cnt);
// 小计变化
var p = $(this).parents(".p-num").siblings(".p-price").text();
p = p.substr(1);
p = (p * cnt).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").text("￥" + p);
getSum();
})
$(".decrement").click(function() {
// 数量变化
var cnt = $(this).siblings(".itxt").val();
if (cnt == 1) {
return false;
}
cnt--;
// console.log(cnt);
$(this).siblings(".itxt").val(cnt);
// 小计变化
var p = $(this).parents(".p-num").siblings(".p-price").text();
p = p.substr(1);
p = (p * cnt).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").text("￥" + p);
getSum();
})
// 实现用户直接输入修改小计
$(".itxt").change(function() {
var cnt = $(this).val();
// 小计变化
var p = $(this).parents(".p-num").siblings(".p-price").text();
p = p.substr(1);
p = (p * cnt).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").text("￥" + p);
getSum();
})
// 实现下方总计的变化，由于点击，直接修改都会发生，所以封装成一个函数
getSum();
function getSum() {
var cnt = 0;
var money = 0;
$('.itxt').each(function(i, ele) {
cnt += parseInt($(ele).val());
})
console.log(cnt);
$(".amount-sum em").text(cnt);
$('.p-sum').each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$(".price-sum em").text(money.toFixed(2));
}
// 实现清除购物车模块
// 后面删除按钮
$(".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() {
$(".cart-item").remove();
getSum();
})
})
- 单选多选效果图
- 左右加减按钮
- 删除所选商品和后面删除按钮
- 清空购物车
- 用户直接输入
3.jQuery尺寸、位置操作
3.1 jQuery尺寸
| 语法 | 说明 |
|---|---|
| width()/height() | 取得匹配元素的宽度和高度值，只计算width/height |
| innerWidth()/innerHeight() | 取得匹配元素的宽度和高度值，包含padding |
| outerWidth()/outerHeight() | 取得匹配元素的宽度和高度值，包含padding,border |
| outerWidth(true)/outerHeight(true) | 取得匹配元素的宽度和高度值，包含padding,border,margin |
注意点
- 参数为空，获取相应值，返回的是数字型
- 参数为数字，设置相应值
- 参数可以不带单位
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 10px solid #000;
margin: 20px;
}
</style>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>1</div>
<script>
$(function() {
// 1.获取宽度，只计算width
console.log($("div").width());
// 2.获取宽度，包含padding
console.log($("div").innerWidth());
// 3.获取宽度，包含padding border
console.log($("div").outerWidth());
// 4.获取宽度，包含padding，border，margin
console.log($("div").outerWidth(true));
// 参数为数字，修改相应的值
$("div").innerWidth(100)
console.log($("div").innerWidth());
})
</script>
</body>
</html>
- 效果图
3.2 jQuery位置
- offset()
- position()
- scrollTop()/scrollLeft()
3.2.1 offset()设置或者获取元素偏移
- offset()方法获取或者设置被选中的元素相当于文档的偏移坐标，与父级无关
- 返回值是一个对象，包含top、left属性，offset().top获取距离文档顶部距离，offset().left获取距离文档左侧距离
- 可以设置元素的偏移
offset({top:100,
left:100})
3.2.2 position()获取元素偏移
- 返回被选元素相当于有定位的父级的偏移坐标，如果父级都没有，则相当于文档
- position().left获取相当于有定位的父级左侧的距离，position().top获取相当于有定位的父级顶部的距离
- 该方法只能获取，不能设置
3.2.3 scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部
- 带参数时是设置被卷去的头部
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
position: relative;
}
.son {
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 1.获取相当于文档的偏移
console.log($(".son").offset());
console.log($(".son").offset().left);
console.log($(".son").offset().top);
// 2.设置相当于文档的偏移
$(".son").offset({
top: 200,
left: 200
})
console.log($(".son").offset());
// 3.获取相当于有定位的父元素的偏移
console.log($(".son").position());
console.log($(".son").position().left);
console.log($(".son").position().top);
})
</script>
</body>
</html>
- 效果图
回到顶部案例
- 注意点：回到顶部的动画
- 只能是元素做动画，所以要选中html,body
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.container {
width: 1200px;
height: 600px;
background-color: skyblue;
margin: 400px auto;
}
.back {
display: none;
width: 50px;
height: 50px;
background-color: pink;
position: fixed;
right: 40px;
bottom: 150px;
}
</style>
</head>
<body>
<div class="back">回到顶部</div>
<div class="container"></div>
<script>
$(function() {
$(window).scroll(function() {
var topX = 0;
topX = $(".container").offset().top;
if ($(document).scrollTop() >= topX) {
$(".back").fadeIn(200);
} else {
$(".back").fadeOut(200);
}
})
// $(".back").click(function() {
// // 不能是文档做动画
// $(document).animate({
// scrollTop: 0
// }, 600);
// })
// 只能是元素做动画
$(".back").click(function() {
$("body,html").animate({
scrollTop: 0
}, 600)
})
})
</script>
</body>
</html>
- 效果图
电梯导航案例
-
代码下载
-
index.js代码
$(function() {
// 互斥锁，防止点击造成的滚动影响滚动事件的代码
var flag = true;
// 判断页面被卷去的距离是否大于推荐模块的offsetTop值，大于显示电梯导航，小于隐藏
function toolToggle() {
if ($(document).scrollTop() >= $(".recommend").offset().top) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
}
}
// 页面刷新调用一次
toolToggle();
$(window).scroll(function() {
toolToggle();
if (flag) {
// 通过滚动的距离切换电梯导航
$('.floor .w').each(function(i, ele) {
// console.log($(document).scrollTop());
if ($(document).scrollTop() >= $(ele).offset().top) {
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass("current");
}
})
}
})
// 通过点击来跳转到指定内容
$(".fixedtool li").click(function() {
// 滚动事件不影响电梯导航
flag = false;
// 获取当前隐式迭代的索引号
var index = $(this).index();
// 页面滚动到指定距离
var top = $(".floor .w").eq(index).offset().top;
$("html,body").stop().animate({
//防止滚动动画完毕瞬间执行滚动检测，导致定位不准
scrollTop: top+1
}, 500, function() {
// 滚动往后在解锁
flag = true;
})
$(this).addClass("current").siblings().removeClass("current");
})
})
- 效果图
3150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
