jQuery 操作 HTML 元素和屬性的方法

2019-11-19 12:32:10

字體：大中小

供稿：網(wǎng)友

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('這是一個(gè)美好的日子');    alert($("#myDiv1").text());   });   //html() - 設(shè)置或返回所選元素的內(nèi)容（包括 HTML 標(biāo)記）   $("#btnHtml").click(function(){    alert($("#myDiv1").html());   });   $("#btnHtmlSet").click(function(){    $("#myDiv1").html('這是一個(gè)<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">這是一個(gè)神奇的 <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">這是一個(gè)神奇的 <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">這是一個(gè)神奇的 <b>世界</b>啊 </div> <div id="myDiv2" style="background-color:yellow">這是一個(gè)神奇的 <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() - 向被選元素添加一個(gè)或多個(gè)類   $("#btn_addClass").click(function(){    $("#myDiv1").addClass('blue');   });   //removeClass() - 從被選元素刪除一個(gè)或多個(gè)類   $("#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">這是一個(gè)神奇的 <b>世界</b>啊 </div></body></html>

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('myDiv1的背景顏色：'+$("#myDiv1").css("background-color"));   });   //設(shè)置指定的 CSS 屬性   $("#btn_css2").click(function(){    $("#myDiv1").css("background-color","green");   });   //設(shè)置多個(gè) 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è)置多個(gè)css屬性</button><br/> <div id="myDiv1" style="background-color:yellow">這是一個(gè)神奇的 <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>