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

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

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

My Test JQuery

$(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()方法

My Test JQuery

$(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() 方法

My Test JQuery

$(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() 方法

My Test JQuery

$(function() {

//remove() 方法删除被选元素及其子元素

$("#btn_remove").click(function() {

$("#myp1").remove();

}); //empty() 方法删除被选元素的子元素。

$("#btn_empty").click(function() {

$("#myp2").empty();

});

});

remove()方法

empty()方法

这是一个神奇的 世界啊

这是一个神奇的 世界啊

4. 获取并设置 CSS 类：

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

My Test JQuery

$(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 属性

My Test JQuery

$(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() 方法

My Test JQuery

$(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教程！