jQuery学习-02
day02 - jQuery
学习目标：
能够操作 jQuery 属性
能够操作 jQuery 元素
能够操作 jQuery 元素尺寸、位置
1.1. jQuery 属性操作
jQuery 常用属性操作有三种：prop() / attr() / data() ;
1.1.1 元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性，比如 元素里面的 href ，比如 元素里面的 type。
语法
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TCkJuhpv-1631340327361)(images/prop.png)]
注意：prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
1.1.2 元素自定义属性值 attr()
用户自己给元素添加的属性，我们称为自定义属性。 比如给 div 添加 index =“1”。
语法
注意：attr() 除了普通属性操作，更适合操作自定义属性。（该方法也可以获取 H5 自定义属性）
1.1.3 数据缓存 data()
data() 方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除。
语法
注意：同时，还可以读取 HTML5 自定义属性 data-index ，得到的是数字型。
演示代码
<div id="mydiv" title="天气真好">我的div</div>
<!-- data-*** 表示 h5标签的自定义属性，使用时data- 不需要写 -->
<p index="5" data-in="8">我是一个p</p>
<li>我是一个li</li>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//1.prop 获取固有属性值
console.log($("#mydiv").prop("title"));
//设置属性值
$("#mydiv").prop("class", "test");
//2.attr自定义属性 的获取和设置
console.log($("p").attr("index"));
$("p").attr("abc", "我是新属性");
//3.data 数据缓存
$("li").data("username", "天天");
console.log($("li").data("username"));
console.log($("p").data("in"));
})
</script>
1.1.4 案例：购物车全选功能 ***
1.全选思路：里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走。
2.因为checked 是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
3.把全选按钮状态赋值给3小复选框就可以了。
4.当我们每次点击小的复选框按钮，就来判断：
5.如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
6.:checked 选择器 :checked 查找被选中的表单元素。
代码实现略。(详情参考源代码)
<div class="cart">
<input type="checkbox">苹果<br /><input type="checkbox">香蕉 <br /> <input type="checkbox"> 橘子<br />
</div>
<input type="checkbox" class="checkall" />全选
<script src="./js/jquery.js"></script>
<script>
//需求：a.点击全选按钮时，上面的三个input 框都设置为选中状态
//b.上面的所有 input都选中时，我们的全选按钮也设置为选中状态
$(function () {
//a.点击全选按钮时，上面的三个input 框都设置为选中状态
//change 事件 用在 checkbox radio select
$(".checkall").change(function () {
//2.获取全选按钮的 checked 属性
$('.cart input').prop('checked', $(this).prop('checked'));
})
//b.上面的所有 input都选中时，我们的全选按钮也设置为选中状态
$(".cart input").change(function () {
//2.判断所有的input都选中
console.log($(".cart input:checked").length);
if ($(".cart input:checked").length == $(".cart input").length) {//全选中了
//3.更改 全选input的状态
$(".checkall").prop("checked", true);
} else {//没有全选中
$(".checkall").prop("checked", false);
}
})
})
</script>
1.2. jQuery 文本属性值
jQuery的文本属性值常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性。
1.2.1 jQuery内容文本值
常见操作有三种：html() / text() / val() ; 分别对应JS中的 innerHTML 、innerText 和 value 属性，主要针对元素的内容还有表单的值操作。
语法
注意：html() 可识别标签，text() 不识别标签。
演示代码
//1.html 设置和获取数据 ,注意 ：html可以获取或设置html标签
console.log($("#d1").html());
console.log($("#d2").html());
//设置新值时，会将原来的值替换掉
$("#d1").html("<li>我是新内容</li>");
//2. text 只能获取文本内容，标签不能获取到
console.log($("#d1").text());
console.log($("#d2").text());
$("#d1").text("wenzi")
//3.val 一般使用于 input框 text password textarea
$("#aa").val("花儿");
1.2.2 案例：留言板实例
css
.wrapper {
width: 600px;
}
.title {
border-bottom: 1px solid #ccc;
font-size: 20px;
height: 50px;
line-height: 50px;
font-weight: bold;
margin-bottom: 10px;
}
.con {
width: 100%;
border: 1px solid lightgreen;
min-height: 100px;
margin-bottom: 10px;
}
.txt {
width: 100%;
height: 300px;
margin-bottom: 10px;
}
button {
width: 100%;
font-size: 20px;
height: 50px;
}
p {
border-bottom: 1px dotted #ccc;
padding: 5px;
}
<div class="wrapper">
<div class="title">留言内容：</div>
<div id="con" class="con"></div>
<textarea class="txt"></textarea>
<button>发表留言</button>
</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
var floor = 0;//代表楼层
//1.绑定事件
$("button").click(function () {
floor++;
//2.获取textarea的内容
var txt = $(".txt").val();
console.log(txt);
//3.将 txt内容显示到 con中
//append 追加效果，将数据追加到原数据的后面
$(".con").append('<p> ' + floor + '楼：' + txt + '</p>');
//4.清空 text框的数据
$(".txt").val('');
//5.设定光标
$(".txt").focus();
})
})
</script>
1.2.3 parent 获取到本级元素的祖先节点
//parent 父亲
console.log($("p").parent());
//parents s所有父辈节点
console.log($("p").parents());
1.3 jQuery 元素操作 ***
jQuery 元素操作主要讲的是用jQuery方法，操作标签的遍历、创建、添加、删除等操作。
1.3.1 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
语法1
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
语法2
注意：此方法用于遍历 jQuery 对象中的每一项，回调函数中元素为 DOM 对象，想要使用 jQuery 方法需要转换。
演示代码
<div>1</div>
<div>2</div>
<div>3</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
var color = ["red", "green", "yellow"];
//计算div中的数据的和
var sum = 0;
// 下标，domjs对象
// $("div").each(function (index, dom) {
// console.log(index, dom);
// //设置背景
// $(dom).css("background", color[index]);
// //将字符串转 数字类型
// //sum += parseInt($(dom).text());
// //数据前写一个加号，隐式的将字符串数据转为了数值型数据
// sum += +$(dom).text();
// })
$.each($('div'), function (index, dom) {
console.log(index, dom);
//设置背景
$(dom).css("background", color[index]);
//将字符串转 数字类型
//sum += parseInt($(dom).text());
//数据前写一个加号，隐式的将字符串数据转为了数值型数据
sum += +$(dom).text();
})
console.log(sum);
//$.each 一般用于处理 数组和 对象
$.each({ name: "大春", age: 18 }, function (i, ele) {
console.log(i, ele);
})
})
</script>
1.3.2 案例：隔行变色
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<script src="./js/jquery.js"></script>
<script>
$(function () {
$("li").each(function (i, ele) {
if (i % 2 == 0) {//偶数
$(ele).css("background", "red");
} else {//奇数
$(ele).css("background", "blue");
}
})
})
</script>
1.3.3 创建、添加、删除 ***
jQuery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
append 追加其他元素 ****
语法总和
注意：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详API。
案例代码
<ul>
<li>原来的li</li>
</ul>
<div id="dd">我是原来的div</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//1.创建元素
var newLi = $("<li>新li</li>");
//2.将新建的元素添加到ul
//append 是追加在 原来的li的后面
// $("ul").append(newLi);
//3.prepend 是追加在 原来的li的前面的
$("ul").prepend(newLi);
var newDiv = $("<div>新div</div>");
//4. after
// $("#dd").after(newDiv);
//5.before
$("#dd").before(newDiv);
//6.remove 删除
//$("ul").remove();//把ul和他里面的所有内容都删除
//7.empty
//$("ul").empty();//只删除了 ul里面的内容 ，ul还存在
// 8.html("")
$("ul").html("");//只删除了 ul里面的内容 ，ul还存在
})
</script>
1.3.4 案例：简易省市二级联动效果
<select name="" id="pro">
<option value="0">广东省</option>
<option value="1">山东省</option>
<option value="2">内蒙古</option>
</select>
<!-- 市的内容动态添加 -->
<select name="" id="city">
</select>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//省市的数组
var province = [
{ "name": "广东省", "citys": ["深圳市", "广州市", "东莞市"] },
{ "name": "山东省", "citys": ["济南市", "青岛市", "潍坊市"] },
{ "name": "内蒙古自治区", "citys": ["呼和浩特市", "包头", "科尔沁右翼前旗"] }
]
//填写默认数据
createOption(0);
//3.给 省 绑定 change 事件
$("#pro").change(function () {
//6.清除原有的市里面的option
$("#city").html("");
//4.获取到 省下面的option的下标
console.log($(this).val());
var num = $(this).val();
//5.调用函数，传递参数
createOption(num);
})
//将重复的内容 封装
function createOption(num) {
for (var i in province[num].citys) {
//1.创建 options
var $option = $("<option>" + province[num].citys[i] + "</option>");
//2.将 创建的option添加到 select
$("#city").append($option);
}
}
})
</script>
1.4. jQuery 尺寸、位置操作
jQuery中分别为我们提供了两套快速获取和设置元素尺寸和位置的API，方便易用，内容如下。
1.4.1. jQuery 尺寸操作
jQuery 尺寸操作包括元素宽高的获取和设置，且不一样的API对应不一样的盒子模型。
语法
代码演示
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
padding: 20px;
border: 5px solid red;
background: lightgreen;
}
</style>
<div>div</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//1.width
console.log($("div").width());//width 100
//2.innerWidth
console.log($("div").innerWidth());// width+padding*2 140
//3.outerWidth
console.log($("div").outerWidth());// width+padding*2+border*2 150
//4.outerWidth(true)
console.log($("div").outerWidth(true));//width+padding*2+border*2+margin*2 170
})
</script>
注意：有了这套 API 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
1.4.2. jQuery 位置操作 ***
jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:
语法
代码演示
css
.father {
width: 400px;
height: 400px;
background: lightgreen;
margin: 10px;
position: absolute;
top: 100px;
left: 100px;
}
.son {
width: 100px;
height: 100px;
background: pink;
position: absolute;
top: 50px;
left: 50px;
}
html
<div class="father">
<div class="son">子级节点</div>
</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//1.offset 获取偏移位置
/*
注意：父级节点没有定位，子级获取的left 和 top 值是 相对于父的偏移量
父级节点有 position: relative; 子级节点 获取的相对于 document 文档的定位
父级节点有 position:absolute 的定位， 子级节点获取的是 父级+子级的定位的和
*/
console.log($(".son").offset());
// console.log($(".son").offset().top);
// console.log($(".son").offset().left);
//2.position
//获取的相对于父级节点的定位信息
console.log($(".son").position());
})
</script>
1.4.3 案例：带有动画的返回顶部
1.核心原理： 使用animate动画返回顶部。
2.animate动画函数里面有个scrollTop 属性，可以设置位置
3.但是是元素做动画，因此 $(“body,html”).animate({scrollTop: 0})
css
body {
height: 3000px;
}
#goup {
width: 50px;
height: 50px;
border: 1px solid green;
border-radius: 50%;
background: lightyellow;
line-height: 50px;
text-align: center;
position: fixed;
bottom: 50px;
right: 50px;
display: none;
}
js
<div id="goup">↑</div>
<script src="./js/jquery.js"></script>
<script>
$(function () {
//需求： 返回顶部功能
/*
1. 页面滚动 离顶部 300px时，显示 返回顶部的小按钮
2.点击小按钮，返回到顶部
*/
//1.给文档绑定滚动事件
$(window).scroll(function () {
// console.log($(document).scrollTop());
var top = $(document).scrollTop();
if (top >= 300) {
//显示小图标
$("#goup").show();
} else {
$("#goup").hide();
}
})
//2.绑定点击事件
$("#goup").click(function () {
//$(document).scrollTop(0);
//写 document 会报错，所以更改为 $("body,html")
$("body,html").stop().animate({ scrollTop: 0 })
})
})
</script>
944
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
