jQuery操作HTML元素和屬性的方法
這篇文章主要介紹jQuery操作HTML元素和屬性的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
成都創(chuàng)新互聯(lián)公司專注于常山企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),商城建設(shè)。常山網(wǎng)站建設(shè)公司,為常山等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
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($("#myp1").text());
});
$("#btnTextSet").click(function() {
$("#myp1").text('這是一個(gè)美好的日子');
alert($("#myp1").text());
}); //html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）
$("#btnHtml").click(function() {
alert($("#myp1").html());
});
$("#btnHtmlSet").click(function() {
$("#myp1").html('這是一個(gè)<b>神奇</b>的世界啊');
alert($("#myp1").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>
<p id="myp1">這是一個(gè)神奇的 <b>世界</b>啊 </p>
<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 href="https://www.baidu.com" 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() {
$("#myp1").append(" 是的");
}); //prepend() 方法在被選元素的開(kāi)頭插入內(nèi)容（仍然該元素的內(nèi)部）
$("#btn_prepend").click(function() {
$("#myp1").prepend("我說(shuō) ");
}); //before() 方法在被選元素的開(kāi)頭插入內(nèi)容
$("#btn_before").click(function() {
$("#myInput1").before("Hello ");
}); //after() 方法在被選元素的開(kāi)頭插入內(nèi)容
$("#btn_after").click(function() {
$("#myInput1").after("World ");
});
//特別說(shuō)明：
//append() 和 prepend() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素
//after() 和 before() 方法能夠通過(guò)參數(shù)接收無(wú)限數(shù)量的新元素。
//可以通過(guò) text/HTML、jQuery 或者 JavaScript/DOM 來(lái)創(chuàng)建新元素。
//舉例如下：
/**
$("#btn_after").click(function(){
var txt1="<b>程序員</b>";
var txt2=$("<i></i>").text("是厲害的人");
var txt3=document.createElement("<h2>");
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>
<p id="myp1" style="background-color:green">這是一個(gè)神奇的 <b>世界</b>啊 </p>
<input type="text" id="myInput1" value="大家好" /></body>
</html>
.jpg)
.jpg)
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() {
$("#myp1").remove();
}); //empty() 方法刪除被選元素的子元素。
$("#btn_empty").click(function() {
$("#myp2").empty();
});
});
</script>
</head>
<body>
<button type="button" id="btn_remove">remove()方法</button>
<button type="button" id="btn_empty">empty()方法</button><br/>
<p id="myp1" style="background-color:green">這是一個(gè)神奇的 <b>世界</b>啊 </p>
<p id="myp2" style="background-color:yellow">這是一個(gè)神奇的 <b>世界</b>啊 </p>
</body>
</html>
.jpg)
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() - 向被選元素添加一個(gè)或多個(gè)類
$("#btn_addClass").click(function() {
$("#myp1").addClass('blue');
}); //removeClass() - 從被選元素刪除一個(gè)或多個(gè)類
$("#btn_removeClass").click(function() {
$("#myp1").removeClass('blue');
}); //toggleClass() - 對(duì)被選元素進(jìn)行添加/刪除類的切換操作
$("#btn_toggleClass").click(function() {
$("#myp1").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>
<p id="myp1">這是一個(gè)神奇的 <b>世界</b>啊 </p>
</body>
</html>
.jpg)
.jpg)
5. css() 方法：
返回 CSS 屬性、設(shè)置 CSS 屬性、設(shè)置多個(gè) 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('myp1的背景顏色：' + $("#myp1").css("background-color"));
}); //設(shè)置指定的 CSS 屬性
$("#btn_css2").click(function() {
$("#myp1").css("background-color", "green");
}); //設(shè)置多個(gè) CSS 屬性
$("#btn_css3").click(function() {
$("#myp1").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è)置多個(gè)css屬性</button><br/>
<p id="myp1" style="background-color:yellow">這是一個(gè)神奇的 <b>世界</b>啊 </p>
</body>
</html>
.jpg)
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() {
$("#myp2").html("width: " + $("#myp1").width());
$("#myp2").html($("#myp2").html() + "<br/>height: " + $("#myp1").height());
$("#myp2").html($("#myp2").html() + "<br/>innerWidth: " + $("#myp1").innerWidth());
$("#myp2").html($("#myp2").html() + "<br/>innerHeight: " + $("#myp1").innerHeight());
$("#myp2").html($("#myp2").html() + "<br/>outerWidth: " + $("#myp1").outerWidth());
$("#myp2").html($("#myp2").html() + "<br/>outerHeight: " + $("#myp1").outerHeight());
});
});
</script>
</head>
<body>
<button type="button" id="btn_css1">獲取css屬性的值</button><br/>
<p id="myp1" style="background-color:yellow;padding:10px;margin:3px;border:1px solid blue;">p區(qū)域</p>
<p id="myp2"></p>
</body>
</html>.jpg)
以上是jQuery操作HTML元素和屬性的方法的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前標(biāo)題：jQuery操作HTML元素和屬性的方法
文章來(lái)源：http://muchs.cn/article22/ghhhjc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供靜態(tài)網(wǎng)站、虛擬主機(jī)、搜索引擎優(yōu)化、ChatGPT、品牌網(wǎng)站建設(shè)、網(wǎng)站排名
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 網(wǎng)站能否改版？網(wǎng)站改版還是重新建設(shè)網(wǎng)站好？ 2016-11-10
- 什么樣的網(wǎng)站制作公司是值得選擇的 2021-11-21
- 網(wǎng)站制作計(jì)劃要如何制定才能符合要求？ 2022-07-17
- 上海網(wǎng)站制作如何提升用戶閱讀效率 2020-12-27
- 制作手機(jī)網(wǎng)站時(shí)候需要注意的6個(gè)問(wèn)題 2013-07-06
- 網(wǎng)站建設(shè)_網(wǎng)頁(yè)設(shè)計(jì)如何找靠譜的網(wǎng)站制作公司？ 2021-01-07
- 成都網(wǎng)站制作建設(shè)公司如何集成支付網(wǎng)關(guān) 2016-08-27
- 成都網(wǎng)站制作建設(shè)公司哪家好 2016-09-05
- 影響成都網(wǎng)站制作排名的核心因素有哪些？ 2013-10-15
- 手機(jī)網(wǎng)站制作做好這幾點(diǎn)可宣傳效果好和競(jìng)爭(zhēng)力上 2021-12-18
- 機(jī)械網(wǎng)站制作價(jià)格費(fèi)是多少？seo網(wǎng)站建設(shè)方案? 2022-08-05
- 網(wǎng)站制作域名的相關(guān)基礎(chǔ)知識(shí) 2016-08-20