本篇文章给大家带来的内容是介绍jquery如何操作html的元素和属性？（代码详解例），让大家了解jquery操作元素和属性的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

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

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

$(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('这是一个神奇的世界啊');alert($("#myp1").html());}); //val() - 设置或返回表单字段的值            $("#btnVal").click(function() {alert($("#myInput1").val());});$("#btnValSet").click(function() {$("#myInput1").val('好好学习，天天向上');alert($("#myInput1").val());});});text()方法获取内容html()方法获取内容val()方法获取内容
text()方法设置内容html()方法设置内容val()方法设置内容
这是一个神奇的 世界啊 

登录后复制

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

                    $(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"));            });        });        attr()方法获取属性
    attr()方法设置属性    超链接

登录后复制

2. 添加元素：

立即学习“前端免费学习笔记（深入）”；

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

$(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="程序员";                        var txt2=$("").text("是厉害的人");         var txt3=document.createElement("
");      txt3.innerHTML="好用的jQuery!";             $("#myInput1").after(txt1,txt2,txt3);});**/});append()方法prepend()方法
before()方法after()方法
这是一个神奇的 世界啊 

登录后复制

 3. 删除元素：

remove() 方法，empty() 方法

$(function() {//remove() 方法删除被选元素及其子元素            $("#btn_remove").click(function() {$("#myp1").remove();}); //empty() 方法删除被选元素的子元素。            $("#btn_empty").click(function() {$("#myp2").empty();});});remove()方法empty()方法
这是一个神奇的 世界啊 
这是一个神奇的 世界啊 

登录后复制

 4. 获取并设置 CSS 类：

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

$(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');});});.blue {font-size: 16px;background-color: yellow;}addClass()方法
removeClass()方法
toggleClass()方法
这是一个神奇的 世界啊 

登录后复制

5. css() 方法：

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

$(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"});});});获取css属性的值
设置css属性
设置多个css属性
这是一个神奇的 世界啊 

登录后复制

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

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

$(function() {//width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。//height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。//innerWidth() 方法返回元素的宽度（包括内边距）。//innerHeight() 方法返回元素的高度（包括内边距）。//outerWidth() 方法返回元素的宽度（包括内边距和边框）。//outerHeight() 方法返回元素的高度（包括内边距和边框）。            $("#btn_css1").click(function() {$("#myp2").html("width: " + $("#myp1").width());$("#myp2").html($("#myp2").html() + "
height: " + $("#myp1").height());$("#myp2").html($("#myp2").html() + "
innerWidth: " + $("#myp1").innerWidth());$("#myp2").html($("#myp2").html() + "
innerHeight: " + $("#myp1").innerHeight());$("#myp2").html($("#myp2").html() + "
outerWidth: " + $("#myp1").outerWidth());$("#myp2").html($("#myp2").html() + "
outerHeight: " + $("#myp1").outerHeight());});});获取css属性的值
p区域

登录后复制

总结：以上就是本篇文章的全部内容，大家可以自己动手试试，加深理解；希望能对大家的学习有所帮助，相关视频教程推荐：jQuery教程！

以上就是jQuery如何操作HTML的元素和属性？（代码详解例）的详细内容，更多请关注【创想鸟】其它相关文章！