jq追加html属性,jQuery 操作 HTML 元素和属性的方法

jQuery拥有操作 HTML 元素和属性的强大方法。

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

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

My Test JQuery

$(function(){

//text() - 设置或返回所选元素的文本内容

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

alert($("#myDiv1").text());

});

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

$("#myDiv1").text('这是一个美好的日子');

alert($("#myDiv1").text());

});

//html() - 设置或返回所选元素的内容(包括 HTML 标记)

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

alert($("#myDiv1").html());

});

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

$("#myDiv1").html('这是一个神奇的世界啊');

alert($("#myDiv1").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(){

$("#myDiv1").append(" 是的");

});

//prepend() 方法在被选元素的开头插入内容(仍然该元素的内部)

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

$("#myDiv1").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(){

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

});

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

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

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

});

});

remove()方法

empty()方法

这是一个神奇的 世界啊

这是一个神奇的 世界啊

4. 获取并设置 CSS 类：addClass() 方法，removeClass() 方法，toggleClass() 方法

My Test JQuery

$(function(){

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

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

$("#myDiv1").addClass('blue');

});

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

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

$("#myDiv1").removeClass('blue');

});

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

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

$("#myDiv1").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('myDiv1的背景颜色：'+$("#myDiv1").css("background-color"));

});

//设置指定的 CSS 属性

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

$("#myDiv1").css("background-color","green");

});

//设置多个 CSS 属性

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

$("#myDiv1").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(){

$("#myDiv2").html("width: "+$("#myDiv1").width());

$("#myDiv2").html($("#myDiv2").html()+"
height: "+$("#myDiv1").height());

$("#myDiv2").html($("#myDiv2").html()+"
innerWidth: "+$("#myDiv1").innerWidth());

$("#myDiv2").html($("#myDiv2").html()+"
innerHeight: "+$("#myDiv1").innerHeight());

$("#myDiv2").html($("#myDiv2").html()+"
outerWidth: "+$("#myDiv1").outerWidth());

$("#myDiv2").html($("#myDiv2").html()+"
outerHeight: "+$("#myDiv1").outerHeight());

});

});

获取css属性的值

Div区域

总结

以上所述是小编给大家介绍的jQuery 操作 HTML 元素和属性的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！