JQuery基础知识（2）

最新推荐文章于 2022-08-25 23:22:41 发布

晚风yY

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量51

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/m0_55689351/article/details/115180905

版权

JQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQuery HTML

jQuery获取/设置文本元素的值

1.jQuery获取元素的值 text()、html() 以及 val()

2.text()---返回所选元素的文本内容----设置所选元素的文本内容[不解释html标记]

3.html()--返回所选元素的内容（包括 HTML 标记）----设置所选元素的内容[解释html标记]

4.val()----返回表单字段的值---设置表单字段的值

添加元素

append() - 在被选中元素中插入内容（从上往下）

prepend() -在被选中的元素中插入内容（从下往上）

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

jQuery - 删除元素

remove() - 删除被选元素（及其子元素）

empty() - 从被选元素中删除子元素

jquery的CSS 操作

1.为元素添加不存在的样式

css(样式属性名称，属性值) 设置被选元素的具有这个样式。

css({样式属性名称:属性值,样式属性名称:属性值}) 设置被选元素具有一组样式。

2.为元素添加已经存在的样式

addClass() - 向被选元素添加一个或多个样式类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

jQuery 事件

jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ // 动作触发后执行的代码!! });

常用的 jQuery 事件方法

$(document).ready(function) 文档完全加载完后执行函数
click(function) 方法是当按钮点击事件被触发时会调用一个函数
dblclick(function)双击元素时，会发生 dblclick 事件。
mouseenter(function)当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave(function)当鼠标指针离开元素时，会发生 mouseleave 事件。
hover(function)方法用于模拟光标悬停事件。
focus(function)当元素获得焦点时，发生 focus 事件。
blur(function)当元素失去焦点时，发生 blur 事件。

元素的隐藏和显示动画【就是元素的隐藏和显示】

hide([毫秒数],[success-function]) 隐藏元素

show([毫秒数],[success-function]) 显示元素

fadeIn([毫秒数],[success-function]) 显示元素。

fadeOut([毫秒数],[success-function]) 隐藏元素。

slideDown([毫秒数],[success-function]) 显示元素

slideUp([毫秒数],[success-function]) 隐藏元素

jQuery 效果- 动画

jQuery animate() 方法允许您创建自定义的动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性.
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

jQuery 停止动画

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

HTML DOM 遍历和修改

jQuery each() 方法

语法

$(selector).each(function(index,element){ })

each函数中的function的

参数1-index--被遍历出的每一个元素在数组中的位置[下标]

参数2-element--被遍历出的每一个元素具体元素【DOM对象】

each函数中的function中没有element时，可以被this代替

例如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>遍历元素</title>
		<!-- 导入jquery的函数库 -->
		<script src="js/jquery-3.6.0.js"></script>
		<script>
			$(function(){
				var parray=$("p");
				//$(selector).each(function(index,element){  });
				//each函数中的function的
				//参数1-index--被遍历出的每一个元素在数组中的位置[下标]
				//参数2-element--被遍历出的每一个元素具体元素【DOM对象】
				//each函数中的function中没有element时，可以被this代替
				/*
				parray.each(function(index,element){
					alert(element);
				});
				*/
			   parray.each(function(index){
				   var size=index*10+20;
				   $(this).css("font-size",size+"px");
			   });
			});
		</script>
	</head>
	<body>
		<p>测试用的p元素1</p>
		<p>测试用的p元素2</p>
		<p>测试用的p元素3</p>
		<p>测试用的p元素4</p>
	</body>
</html>

晚风yY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery基础知识（2）

jQuery HTMLjQuery获取/设置文本元素的值1.jQuery获取元素的值 text()、html() 以及 val()2.text()---返回所选元素的文本内容----设置所选元素的文本内容[不解释html标记]3.html()--返回所选元素的内容（包括 HTML 标记）----设置所选元素的内容[解释html标记]4.val()----返回表单字段的值---设置表单字段的值添加元素append() - 在被选中元素中插入内容（从上往下）prepend() .
复制链接

扫一扫

专栏目录