本篇文章给大家带来的内容是介绍jquery如何操作html的元素和属性？（代码详解例），让大家了解jquery操作元素和属性的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
1. 获取HTML 元素的内容和属性
(1) 获得内容: text()、html() 以及 val()方法
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(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>神奇的世界啊');
alert($("#myp1").html());
}); //val() - 设置或返回表单字段的值
$("#btnVal").click(function() {
alert($("#myInput1").val());
});
$("#btnValSet").click(function() {
$("#myInput1").val('好好学习，天天向上');
alert($("#myInput1").val());
});
});
</script><button>text()方法获取内容</button>
<button>html()方法获取内容</button>
<button>val()方法获取内容</button><br><button>text()方法设置内容</button>
<button>html()方法设置内容</button>
<button>val()方法设置内容</button>
<p>这是一个神奇的 <b>世界</b>啊 </p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4"><img
src="https://img.php.cn/upload/manual/001/431/639/6a2161a23640e670.jpeg" alt="jQuery 1.12.4" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="overflowclass">jQuery 1.12.4</a>
<p class="overflowclass">jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。</p>
</div>
<a rel="nofollow" href="/xiazai/gongju/2331" title="jQuery 1.12.4" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<input>
(2) 获取属性: attr()方法
nbsp;html><meta><title>My Test JQuery</title>
<script></script>
<script>
$(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>
<button>attr()方法获取属性</button><br>
<button>attr()方法设置属性</button>
<a>超链接</a>
2. 添加元素：
append() 和 prepend() 方法，after() 和 before() 方法
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(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>程序员";
var txt2=$("<i>").text("是厉害的人");
var txt3=document.createElement("<h1>");
txt3.innerHTML="好用的jQuery!";
$("#myInput1").after(txt1,txt2,txt3);
});
**/
});
</script><button>append()方法</button>
<button>prepend()方法</button><br><button>before()方法</button>
<button>after()方法</button>
<p>这是一个神奇的 <b>世界</b>啊 </p>
<input>
3. 删除元素：
remove() 方法，empty() 方法
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(function() {
//remove() 方法删除被选元素及其子元素
$("#btn_remove").click(function() {
$("#myp1").remove();
}); //empty() 方法删除被选元素的子元素。
$("#btn_empty").click(function() {
$("#myp2").empty();
});
});
</script><button>remove()方法</button>
<button>empty()方法</button><br><p>这是一个神奇的 <b>世界</b>啊 </p>
<p>这是一个神奇的 <b>世界</b>啊 </p>
4. 获取并设置 CSS 类：
addClass() 方法，removeClass() 方法，toggleClass() 方法
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(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><style>
.blue {
font-size: 16px;
background-color: yellow;
}
</style><button>addClass()方法</button><br><button>removeClass()方法</button><br><button>toggleClass()方法</button>
<p>这是一个神奇的 <b>世界</b>啊 </p>
5. css() 方法：
返回 CSS 属性、设置 CSS 属性、设置多个 CSS 属性
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(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><button>获取css属性的值</button><br><button>设置css属性</button><br><button>设置多个css属性</button><br><p>这是一个神奇的 <b>世界</b>啊 </p>
6. 处理尺寸的重要方法：
width() 和 height() 方法，innerWidth() 和 innerHeight() 方法，outerWidth() 和 outerHeight() 方法
nbsp;html>
<meta><title>My Test JQuery</title><script></script><script>
$(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><button>获取css属性的值</button><br><p>p区域</p>
<p></p>
总结：以上就是本篇文章的全部内容，大家可以自己动手试试，加深理解；希望能对大家的学习有所帮助，相关视频教程推荐：jQuery教程！
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
