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","");
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 元素和属性的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
