jQuery 操作 HTML 元素和屬性的方法
更新時間：2018年11月12日 10:01:35 作者：在代碼的世界里游走
這篇文章主要介紹了jQuery 操作 HTML 元素和屬性的方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
jQuery擁有操作 HTML 元素和屬性的強(qiáng)大方法。
1. 獲取HTML 元素的內(nèi)容和屬性
(1) 獲得內(nèi)容: text()、html() 以及 val()方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//text() - 設(shè)置或返回所選元素的文本內(nèi)容
$("#btnText").click(function(){
alert($("#myDiv1").text());
});
$("#btnTextSet").click(function(){
$("#myDiv1").text('這是一個美好的日子');
alert($("#myDiv1").text());
});
//html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
$("#btnHtml").click(function(){
alert($("#myDiv1").html());
});
$("#btnHtmlSet").click(function(){
$("#myDiv1").html('這是一個<b>神奇</b>的世界啊');
alert($("#myDiv1").html());
});
//val() - 設(shè)置或返回表單字段的值
$("#btnVal").click(function(){
alert($("#myInput1").val());
});
$("#btnValSet").click(function(){
$("#myInput1").val('好好學(xué)習(xí)，天天向上');
alert($("#myInput1").val());
});
});
</script>
</head>
<body>
<button type="button" id="btnText">text()方法獲取內(nèi)容</button>
<button type="button" id="btnHtml">html()方法獲取內(nèi)容</button>
<button type="button" id="btnVal">val()方法獲取內(nèi)容</button><br/>
<button type="button" id="btnTextSet">text()方法設(shè)置內(nèi)容</button>
<button type="button" id="btnHtmlSet">html()方法設(shè)置內(nèi)容</button>
<button type="button" id="btnValSet">val()方法設(shè)置內(nèi)容</button>
<div id="myDiv1">這是一個神奇的 <b>世界</b>啊 </div>
<input type="text" id="myInput1" value="大家好"></p>
</body>
</html>
(2) 獲取屬性: attr()方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//attr() 方法用于獲取屬性值，也用于設(shè)置/改變屬性值。
$("#btn_attr1").click(function(){
alert($("#myHref").attr("href"));
});
$("#btn_attr2").click(function(){
$("#myHref").attr("href","https://www.cnblogs.com");
alert('超鏈接屬性設(shè)置為：'+$("#myHref").attr("href"));
});
});
</script>
</head>
<body>
<button type="button" id="btn_attr1">attr()方法獲取屬性</button><br/>
<button type="button" id="btn_attr2">attr()方法設(shè)置屬性</button>
<a id="myHref">超鏈接</a>
</body>
</html>
2. 添加元素：append() 和 prepend() 方法，after() 和 before() 方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//append() 方法在被選元素的結(jié)尾插入內(nèi)容（仍然該元素的內(nèi)部）
$("#btn_append").click(function(){
$("#myDiv1").append(" 是的");
});
//prepend() 方法在被選元素的開頭插入內(nèi)容（仍然該元素的內(nèi)部）
$("#btn_prepend").click(function(){
$("#myDiv1").prepend("我說 ");
});
//before() 方法在被選元素的開頭插入內(nèi)容
$("#btn_before").click(function(){
$("#myInput1").before("Hello ");
});
//after() 方法在被選元素的開頭插入內(nèi)容
$("#btn_after").click(function(){
$("#myInput1").after("World ");
});
//特別說明：
//append() 和 prepend() 方法能夠通過參數(shù)接收無限數(shù)量的新元素
//after() 和 before() 方法能夠通過參數(shù)接收無限數(shù)量的新元素。
//可以通過 text/HTML、jQuery 或者 JavaScript/DOM 來創(chuàng)建新元素。
//舉例如下：
/**
$("#btn_after").click(function(){
var txt1="<b>程序員</b>";
var txt2=$("<i></i>").text("是厲害的人");
var txt3=document.createElement("<h1>");
txt3.innerHTML="好用的jQuery!";
$("#myInput1").after(txt1,txt2,txt3);
});
**/
});
</script>
</head>
<body>
<button type="button" id="btn_append">append()方法</button>
<button type="button" id="btn_prepend">prepend()方法</button><br/>
<button type="button" id="btn_before">before()方法</button>
<button type="button" id="btn_after">after()方法</button>
<div id="myDiv1" style="background-color:green">這是一個神奇的 <b>世界</b>啊 </div>
<input type="text" id="myInput1" value="大家好"/>
</body>
</html>
3. 刪除元素：remove() 方法，empty() 方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//remove() 方法刪除被選元素及其子元素
$("#btn_remove").click(function(){
$("#myDiv1").remove();
});
//empty() 方法刪除被選元素的子元素。
$("#btn_empty").click(function(){
$("#myDiv2").empty();
});
});
</script>
</head>
<body>
<button type="button" id="btn_remove">remove()方法</button>
<button type="button" id="btn_empty">empty()方法</button><br/>
<div id="myDiv1" style="background-color:green">這是一個神奇的 <b>世界</b>啊 </div>
<div id="myDiv2" style="background-color:yellow">這是一個神奇的 <b>世界</b>啊 </div>
</body>
</html>
4. 獲取并設(shè)置 CSS 類：addClass() 方法，removeClass() 方法，toggleClass() 方法
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//addClass() - 向被選元素添加一個或多個類
$("#btn_addClass").click(function(){
$("#myDiv1").addClass('blue');
});
//removeClass() - 從被選元素刪除一個或多個類
$("#btn_removeClass").click(function(){
$("#myDiv1").removeClass('blue');
});
//toggleClass() - 對被選元素進(jìn)行添加/刪除類的切換操作
$("#btn_toggleClass").click(function(){
$("#myDiv1").toggleClass('blue');
});
});
</script>
</head>
<style type="text/css">
.blue
{
font-size:16px;
background-color:yellow;
}
</style>
<body>
<button type="button" id="btn_addClass">addClass()方法</button><br/>
<button type="button" id="btn_removeClass">removeClass()方法</button><br/>
<button type="button" id="btn_toggleClass">toggleClass()方法</button>
<div id="myDiv1">這是一個神奇的 <b>世界</b>啊 </div>
</body>
</html>
5. css() 方法：返回 CSS 屬性、設(shè)置 CSS 屬性、設(shè)置多個 CSS 屬性
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//返回指定的 CSS 屬性的值
$("#btn_css1").click(function(){
alert('myDiv1的背景顏色：'+$("#myDiv1").css("background-color"));
});
//設(shè)置指定的 CSS 屬性
$("#btn_css2").click(function(){
$("#myDiv1").css("background-color","green");
});
//設(shè)置多個 CSS 屬性
$("#btn_css3").click(function(){
$("#myDiv1").css({"background-color":"pink","font-size":"20px"});
});
});
</script>
</head>
<body>
<button type="button" id="btn_css1">獲取css屬性的值</button><br/>
<button type="button" id="btn_css2">設(shè)置css屬性</button><br/>
<button type="button" id="btn_css3">設(shè)置多個css屬性</button><br/>
<div id="myDiv1" style="background-color:yellow">這是一個神奇的 <b>世界</b>啊 </div>
</body>
</html>
6. 處理尺寸的重要方法：width() 和 height() 方法，innerWidth() 和 innerHeight() 方法，outerWidth() 和 outerHeight() 方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>My Test JQuery</title>
<script type="text/javascript" src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" >
$(function(){
//width() 方法設(shè)置或返回元素的寬度（不包括內(nèi)邊距、邊框或外邊距）。
//height() 方法設(shè)置或返回元素的高度（不包括內(nèi)邊距、邊框或外邊距）。
//innerWidth() 方法返回元素的寬度（包括內(nèi)邊距）。
//innerHeight() 方法返回元素的高度（包括內(nèi)邊距）。
//outerWidth() 方法返回元素的寬度（包括內(nèi)邊距和邊框）。
//outerHeight() 方法返回元素的高度（包括內(nèi)邊距和邊框）。
$("#btn_css1").click(function(){
$("#myDiv2").html("width: "+$("#myDiv1").width());
$("#myDiv2").html($("#myDiv2").html()+"<br/>height: "+$("#myDiv1").height());
$("#myDiv2").html($("#myDiv2").html()+"<br/>innerWidth: "+$("#myDiv1").innerWidth());
$("#myDiv2").html($("#myDiv2").html()+"<br/>innerHeight: "+$("#myDiv1").innerHeight());
$("#myDiv2").html($("#myDiv2").html()+"<br/>outerWidth: "+$("#myDiv1").outerWidth());
$("#myDiv2").html($("#myDiv2").html()+"<br/>outerHeight: "+$("#myDiv1").outerHeight());
});
});
</script>
</head>
<body>
<button type="button" id="btn_css1">獲取css屬性的值</button><br/>
<div id="myDiv1" style="background-color:yellow;padding:10px;margin:3px;border:1px solid blue;">Div區(qū)域</div>
<div id="myDiv2" ></div>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的jQuery 操作 HTML 元素和屬性的方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
Jquery ajax不能解析json對象，報(bào)Invalid JSON錯誤的原因和解決方法
我們知道Invalid JSON錯誤導(dǎo)致的json對象不能解析，一般都是服務(wù)器返回的json字符串的語法有錯誤。這種情況下，我們只需要仔細(xì)的檢查一下json就可以解決問題。2010-03-03
jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效
這篇文章主要介紹了jquery實(shí)現(xiàn)移動端點(diǎn)擊圖片查看大圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-11-11
純CSS打造的導(dǎo)航菜單(附j(luò)query版)
使用CSS 制作導(dǎo)航菜單，實(shí)際主要是利用了css的li a屬性，對于以后用css制作更絢麗的效果提高了很好的參考。2010-08-08
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單的圖片查看器的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
JQuery+div+css 無限級聯(lián)樹實(shí)現(xiàn)代碼
JQuery+div+css 無限級聯(lián)樹實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
基于jquery的彈出提示框始終處于窗口的居中位置（類似于alert彈出框的效果）
之前寫的代碼，都是在當(dāng)前窗口位于居中，可是一旦窗口縮小或者放大都不是位于居中的位置了，但是一直想寫的一個類似于alert彈出窗口的效果。2011-09-09
通過jquery 獲取URL參數(shù)并進(jìn)行轉(zhuǎn)碼
本節(jié)主要介紹了通過jquery 獲取URL參數(shù)并進(jìn)行轉(zhuǎn)碼,需要的朋友可以參考下2014-08-08
jQuery+Cookie實(shí)現(xiàn)切換皮膚功能【附源碼下載】
這篇文章主要介紹了jQuery+Cookie實(shí)現(xiàn)切換皮膚功能,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合cookie動態(tài)變換頁面元素樣式的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-03-03
jQuery中removeAttr()方法用法實(shí)例
這篇文章主要介紹了jQuery中removeAttr()方法用法,實(shí)例分析了removeAttr()方法的功能、定義及從匹配元素中移除相應(yīng)屬性的使用技巧,需要的朋友可以參考下2015-01-01
jquery實(shí)現(xiàn)簡單的二級導(dǎo)航下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)簡單的二級導(dǎo)航下拉菜單效果,涉及jquery鼠標(biāo)事件動態(tài)操作頁面元素樣式及Ajax調(diào)用的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09