jQuery——有关于jQuery操作 属性，元素，还有尺寸位置等
程序员文章站
2022-04-03 21:57:05
1.有关于属性的操作 所谓的属性操作就是操作一系列的元素的属性，value啦class啦 .......特别是有关于input的操作是非常重要的。 为了完成后续有关于框架的高级骚操作，我们现在先来学习一下，jQuery的常用属性操作的三种 prop(),attr(),data() （1）、元素固有的 ......
1.有关于属性的操作
所谓的属性操作就是操作一系列的元素的属性，value啦class啦 .......特别是有关于input的操作是非常重要的。
为了完成后续有关于框架的高级骚操作，我们现在先来学习一下，jquery的常用属性操作的三种 prop(),attr(),data()
（1）、元素固有的属性值prop()
- 所谓的固有的属性 ，比如a标签里面的href input里面的type等...
我们看一下如何获取，还有如何设置
- 获取:prpo('属性')
- 设置属性：prpo('属性','属性值')
- 非常的适合操作 表单的属性 比如 disabled/checked/selected
（2）、自定义属性值attr()
- 用于给元素添加自己定义的属性
- 获取：attr('属性');
- 设置：attr('属性','属性值')
注意： 类似于原生的dom>>>getattribute(),该操作 适用于h5自定义属性
（3）、数据相关data/非常重要！/
- 这个非常的重要！特别是到了后期操作数据渲染的时候，还有框架的时候，前端的三大框架里面都有用到类似的实现逻辑
- 附加（设置）数据的语法:data( 'name' ,'value')
- 获取数据的语法 data('name').
注意：这种方式也同样的适用于h5里面获取自定义的属性
代码举例：
<a href="http://www.baidu.com" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href"));
$("a").prop("title", "我们都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
2.有关于文本属性的操作
常见的文本操作主要有三种 html() / text()/ val();分别对应元素dom的innerhtml、innertext 、value的属性
这些操作并没有什么难度，详细请参见下面的代码实例
<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>
3.有关于元素的操作
有关于元素的操作主要是：标签的遍历，创建，添加，删除等操作（简单的理解就是对标签的 增 删 改 查）
（1）、遍历元素
- jquery隐式迭代是对同一类元素做了同样的操作。 如果想要给同一类元素做不同操作，就需要用到遍历。
- 语法有两种
语法1
注意：此方法用于遍历 jquery 对象中的每一项，回调函数中元素为 dom 对象，想要使用 jquery 方法需要转换。
语法2
注意：此方法用于遍历 jquery 对象中的每一项，回调函数中元素为 dom 对象，想要使用 jquery 方法需要转换。
- 代码实例：
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
var arr = ["red", "green", "blue"];
// 1. each() 方法遍历元素
$("div").each(function(i, domele) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(i);
// 回调函数第二个参数一定是 dom 元素对象，也是自己命名
// console.log(domele); // 使用jquery方法需要转换 $(domele)
$(domele).css("color", arr[i]);
sum += parseint($(domele).text());
})
console.log(sum);
// 2. $.each() 方法遍历元素 主要用于遍历数据，处理数据
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
})
</script>
</body>
（2）、创建 修改 添加
- 有关于它们的操作都是非常的简单 ，具体的详细的操作 请去查看官方的api
jquery方法操作元素的创建、添加、删除方法很多，则重点使用部分，如下：
语法总和
再啰嗦一下：以上只是元素的创建、添加、删除方法的常用方法，其他方法请参详api。
案例代码
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// 2.1 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// 2.2 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 删除元素
// $("ul").remove(); 可以删除匹配的元素 自杀
// $("ul").empty(); // 可以删除匹配的元素里面的子节点 孩子
$("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
})
</script>
</body>
4.有关于尺寸位置的操作
（1）、有关于元素（尺寸）的操作//嘿嘿嘿 开车了，尺寸
- 语法详解
注意：有了这套 api 我们将可以快速获取和子的宽高，至于其他属性想要获取和设置，还要使用 css() 等方法配合。
- 具体的实例代码：
<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>
（2）、有关于位置的操作
最主要的还是我们的三个操作：offset()/ position()/ scrolltop()/ scrollleft()/....当然了还要更多的骚操作
- 照例，我们先看一下语法
- 代码实例
<body>
<div class="father0">
<div class="son"></div>
</div>
<div class="back">返回顶部</div>
<div class="container"></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
// });
// 3. 被卷去的头部
$(document).scrolltop(100);
// 被卷去的头部 scrolltop() / 被卷去的左侧 scrollleft()
// 页面滚动事件
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元素做动画
})
})
</script>
</body>