行业资讯

jQuery操作HTML元素和属性的方法

发布时间：2020-08-29 14:54:05 作者：小新
来源：亿速云 阅读：135

这篇文章主要介绍jQuery操作HTML元素和属性的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1. 获取HTML 元素的内容和属性

(1) 获得内容:  text()、html() 以及 val()方法

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//text() - 设置或返回所选元素的文本内容            
				$("#btnText").click(function() {
					alert($("#myp1").text());
				});
				$("#btnTextSet").click(function() {
					$("#myp1").text('这是一个美好的日子');
					alert($("#myp1").text());
				}); //html() - 设置或返回所选元素的内容（包括 HTML 标记）            
				$("#btnHtml").click(function() {
					alert($("#myp1").html());
				});
				$("#btnHtmlSet").click(function() {
					$("#myp1").html('这是一个<b>神奇</b>的世界啊');
					alert($("#myp1").html());
				}); //val() - 设置或返回表单字段的值            
				$("#btnVal").click(function() {
					alert($("#myInput1").val());
				});
				$("#btnValSet").click(function() {
					$("#myInput1").val('好好学习，天天向上');
					alert($("#myInput1").val());
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btnText">text()方法获取内容</button>
		<button type="button" id="btnHtml">html()方法获取内容</button>
		<button type="button" id="btnVal">val()方法获取内容</button><br/>
		<button type="button" id="btnTextSet">text()方法设置内容</button>
		<button type="button" id="btnHtmlSet">html()方法设置内容</button>
		<button type="button" id="btnValSet">val()方法设置内容</button>
		<p id="myp1">这是一个神奇的 <b>世界</b>啊 </p>
		<input type="text" id="myInput1" value="大家好"></p>
	</body>

</html>

jQuery操作HTML元素和属性的方法 jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

(2) 获取属性:  attr()方法

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>My Test JQuery</title>
    <script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" >    
        $(function(){  
            //attr() 方法用于获取属性值，也用于设置/改变属性值。            $("#btn_attr1").click(function(){
                alert($("#myHref").attr("href"));
            });
            $("#btn_attr2").click(function(){
                $("#myHref").attr("href","https://www.cnblogs.com");
                alert('超链接属性设置为：'+$("#myHref").attr("href"));
            });
        });    </script></head><body>
    <button type="button" id="btn_attr1">attr()方法获取属性</button><br/>
    <button type="button" id="btn_attr2">attr()方法设置属性</button>
    <a href="https://www.baidu.com" id="myHref">超链接</a></body></html>

jQuery操作HTML元素和属性的方法　　jQuery操作HTML元素和属性的方法

2. 添加元素：

append() 和 prepend() 方法，after() 和 before() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//append() 方法在被选元素的结尾插入内容（仍然该元素的内部）            
				$("#btn_append").click(function() {
					$("#myp1").append(" 是的");
				}); //prepend() 方法在被选元素的开头插入内容（仍然该元素的内部）            
				$("#btn_prepend").click(function() {
					$("#myp1").prepend("我说 ");
				}); //before() 方法在被选元素的开头插入内容            
				$("#btn_before").click(function() {
					$("#myInput1").before("Hello ");
				}); //after() 方法在被选元素的开头插入内容            
				$("#btn_after").click(function() {
					$("#myInput1").after("World ");
				});
				//特别说明：
				//append() 和 prepend() 方法能够通过参数接收无限数量的新元素
				//after() 和 before() 方法能够通过参数接收无限数量的新元素。
				//可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。
				//举例如下：
				/**
				$("#btn_after").click(function(){
				    var txt1="<b>程序员</b>";                    
				    var txt2=$("<i></i>").text("是厉害的人");     
				    var txt3=document.createElement("<h2>");  
				    txt3.innerHTML="好用的jQuery!";         
				    $("#myInput1").after(txt1,txt2,txt3);
				});
				**/
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_append">append()方法</button>
		<button type="button" id="btn_prepend">prepend()方法</button><br/>
		<button type="button" id="btn_before">before()方法</button>
		<button type="button" id="btn_after">after()方法</button>
		<p id="myp1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </p>
		<input type="text" id="myInput1" value="大家好" /></body>

</html>

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

3. 删除元素：

remove() 方法，empty() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//remove() 方法删除被选元素及其子元素            
				$("#btn_remove").click(function() {
					$("#myp1").remove();
				}); //empty() 方法删除被选元素的子元素。            
				$("#btn_empty").click(function() {
					$("#myp2").empty();
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_remove">remove()方法</button>
		<button type="button" id="btn_empty">empty()方法</button><br/>
		<p id="myp1" style="background-color:green">这是一个神奇的 <b>世界</b>啊 </p>
		<p id="myp2" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </p>
	</body>

</html>

jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法

4. 获取并设置 CSS 类：

addClass() 方法，removeClass() 方法，toggleClass() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//addClass() - 向被选元素添加一个或多个类           
				$("#btn_addClass").click(function() {
					$("#myp1").addClass('blue');
				}); //removeClass() - 从被选元素删除一个或多个类            
				$("#btn_removeClass").click(function() {
					$("#myp1").removeClass('blue');
				}); //toggleClass() - 对被选元素进行添加/删除类的切换操作            
				$("#btn_toggleClass").click(function() {
					$("#myp1").toggleClass('blue');
				});
			});
		</script>
	</head>
	<style type="text/css">
		.blue {
			font-size: 16px;
			background-color: yellow;
		}
	</style>

	<body>
		<button type="button" id="btn_addClass">addClass()方法</button><br/>
		<button type="button" id="btn_removeClass">removeClass()方法</button><br/>
		<button type="button" id="btn_toggleClass">toggleClass()方法</button>
		<p id="myp1">这是一个神奇的 <b>世界</b>啊 </p>
	</body>

</html>

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

5. css() 方法：

返回 CSS 属性、设置 CSS 属性、设置多个 CSS 属性

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//返回指定的 CSS 属性的值            
				$("#btn_css1").click(function() {
					alert('myp1的背景颜色：' + $("#myp1").css("background-color"));
				}); //设置指定的 CSS 属性            
				$("#btn_css2").click(function() {
					$("#myp1").css("background-color", "green");
				}); //设置多个 CSS 属性            
				$("#btn_css3").click(function() {
					$("#myp1").css({
						"background-color": "pink",
						"font-size": "20px"
					});
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_css1">获取css属性的值</button><br/>
		<button type="button" id="btn_css2">设置css属性</button><br/>
		<button type="button" id="btn_css3">设置多个css属性</button><br/>
		<p id="myp1" style="background-color:yellow">这是一个神奇的 <b>世界</b>啊 </p>
	</body>

</html>

jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法jQuery操作HTML元素和属性的方法

6. 处理尺寸的重要方法：

width() 和 height() 方法，innerWidth() 和 innerHeight() 方法，outerWidth() 和 outerHeight() 方法

<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Test JQuery</title>
		<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
				//height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
				//innerWidth() 方法返回元素的宽度（包括内边距）。
				//innerHeight() 方法返回元素的高度（包括内边距）。
				//outerWidth() 方法返回元素的宽度（包括内边距和边框）。
				//outerHeight() 方法返回元素的高度（包括内边距和边框）。            
				$("#btn_css1").click(function() {
					$("#myp2").html("width: " + $("#myp1").width());
					$("#myp2").html($("#myp2").html() + "<br/>height: " + $("#myp1").height());
					$("#myp2").html($("#myp2").html() + "<br/>innerWidth: " + $("#myp1").innerWidth());
					$("#myp2").html($("#myp2").html() + "<br/>innerHeight: " + $("#myp1").innerHeight());
					$("#myp2").html($("#myp2").html() + "<br/>outerWidth: " + $("#myp1").outerWidth());
					$("#myp2").html($("#myp2").html() + "<br/>outerHeight: " + $("#myp1").outerHeight());
				});
			});
		</script>
	</head>

	<body>
		<button type="button" id="btn_css1">获取css属性的值</button><br/>
		<p id="myp1" style="background-color:yellow;padding:10px;margin:3px;border:1px solid blue;">p区域</p>
		<p id="myp2"></p>
	</body>

</html>

jQuery操作HTML元素和属性的方法

以上是jQuery操作HTML元素和属性的方法的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！

推荐阅读：
  1. JQuery元素属性和样式操作、以及设置元素和内容
  2. jQuery操作元素方法总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

jquery ue

上一篇：html5设置字符编码的方法

下一篇：java链表应用--基于链表实现队列详解（尾指针操作）

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号