jQuery属性操作、内容文本值、元素操作、尺寸和位置操作

最新推荐文章于 2024-06-19 19:53:31 发布

phoebemeng

最新推荐文章于 2024-06-19 19:53:31 发布

阅读量132

点赞数

分类专栏： jquery 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/phoebemeng/article/details/125997586

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

jQuery属性操作

获取元素固有属性值 prop（）
固有属性就是元素本身自带的属性，比如里面的href，里面的type。
获取属性语法
prop（“属性”）
设置属性值语法
prop（“属性”,“属性值”）

获取元素自定义属性值 attr（）
用户自己给元素添加的属性，称为自定义属性值
获取属性语法
attr（“属性”）
设置属性值语法
attr（“属性”,“属性值”）

这个方法也适用于H5自定义属性。

数据缓存data（）
data（）方法可以在指定的元素上存储数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。
附加数据语句：
data（“name”,“value”）
//向被选元素附加数据
获取数据语法：
data(“name”)
//向被选元素获取数据
还可以读取H5自定义属性data-index，得到的是数字型，获取元素是不用写data-

jQuery内容文本值

1.普通元素的内容
html（）相当于原生的innerHTML
html（） //获取元素的内容
html（“内容”） //设置元素的内容
text（） //获取元素里面的文本内容，不包含标签
val（） //获取表单值
val（“内容”） //设置表单值

jQuery元素操作

1.遍历元素
jQuery隐式迭代是对同一类元素做同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历。
语法一：
each（）方法遍历元素
each（function（index，domEle）{ }）
回调函数第一个参数一定是索引号，可以自己指定索引号名称，第二个参数是dom元素对象，也是自己命名。

使用方法：

<body>
		<div>1</div>
		<div>2</div>
		<div>3</div>
		<script>
			$(function() {
				//给div盒子里的文字设置不同的颜色
				var arr=['red','green','blue'];
				$('div').each(function(index,domEle){
					// console.log(index);
					$(domEle).css('color',arr[index]);
				})
			})
		</script>
	</body>

语法二：
$.each(object,function(index,element ) { } )
$.each()方法可用于遍历任何对象，主要用于数据处理，比如数组，对象
里面函数有两个参数：index是每个元素的索引号；element是遍历内容。

2.创建元素
语法:
$(“

”);
动态的创建了一个
3.添加元素
(1)内部添加
element.append(“内容”)
把内容放入匹配元素内部的最后面,类似于原生的appendChild.
element.preappend(“内容”)
把内容放入匹配元素内部的最前面

例如,将创建的li添加到ul中的最后面
$(“ul”).append(li);
将创建的li添加到ul中的最前面
$(“ul”).preappend(li);

(2)外部添加
element.before(“内容”)
把创建的内容放到目标元素的前面
element.after(“内容”)
把创建的内容放到目标元素的后面

内部添加元素,生成之后,它们是父子关系
外部添加元素,生成之后,他们是兄弟关系
4.删除元素
(1)element.remove(); //删除匹配元素
(2)element.empty.(); //删除匹配元素的子节点
(3)element.html(" "); //删除匹配元素的子节点

jQuery尺寸、位置操作

jQuery尺寸

方法	说明
width、height	获得元素的宽度和高度，只是width和height
innerWidth（）、innerHeight（）	获取元素宽度和高度包含padding
outWidth（）、outHeight（）	获取元素宽度和高度，包含padding、border
outWidth（true）、outHeight（true）	获取元素宽度和高度，包含padding、border、margin

以上参数为空，则是获取相应的值，返回的数值型。
如果参数为数字，则是修改相应的值。
参数可以不用带单位。

jQuery位置
位置主要有三个：offset（）、position（）、scrollTop（）/scrollLeft（）

（1）offset（）
获取(设置)被选元素距离文档的位置（偏移），属性有top和left，跟父级没有关系。
修改位置利用对象的方式：

$("div").offset({
	top:200,
	left:200
});

（2）position（）
获取(设置)被选元素距离带有定位的父元素的位置（偏移），如果没有带有定位的父级，以文档为准。
只能获取不能设置偏移

（3）scrollTop（）/scrollLeft（）
scrollTop（）获取(设置)被选元素被卷去的头部位置
scrollLeft（）获取(设置)被选元素被卷去的左侧位置

返回顶部：

<body>
		<div class="back">返回顶部</div>
		<div class="container">内容</div>
		<script>
			$(function() {
				var posi = $(".container").offset().top;
				// 当页面滚动时,到container的位置后,back模块显示,否则隐藏
				$(document).scroll(function(){
					if($(document).scrollTop()>= posi){
						$(".back").fadeIn();
					}
					else{
						$(".back").fadeOut();
					}
				})
				//返回顶部
				$(".back").click(function(){
					//用animate动画做,但是是元素返回顶部,不能是页面
					$("html,body").stop().animate({
						scrollTop : 0
					})
				})
			})
		</script>
	</body>