jQuery學習之旅 Item3 屬性操作與樣式操作 · 你不知道的jQuery

本節將Dom元素的操作:屬性操作、樣式操作、設置和獲取HTML,文本和值、Css-Dom操作。 ### 1、屬性操作 ~~~ <input type=”text” name=”username” value=”jack” class=”apple”> ~~~ **方法：attr() attribute屬性** 使用： - 1、 attr(名稱); 獲得元素節點對應的屬性信息 ~~~ $(“input”).attr(‘class’); //apple $(“input”).attr(‘type’); //text ~~~ - 2、 attr(名稱，值) 設置元素節點的屬性信息 ~~~ $(“input”).attr(‘name’,’useremail’); $(“input”).attr(‘value’,’tom’); ~~~ - 3、 attr(json對象) 同時可以修改多個屬性信息 ~~~ var jn = {name:’userqq’, value:’123987’, class:’pear’}; $(“input”).attr(jn); ~~~ - 4、 attr(key,function(){}) 通過函數返回值，設置屬性信息 ~~~ $("#usernm").attr('value',function(){ //相關程序 return "linken"; }); ~~~ - 5、 removeAttr(name) 刪除指定的屬性（type屬性特殊一般不允許刪除） ~~~ $("#usernm").removeAttr('class'); $("#usernm").removeAttr('value'); ~~~ 具體實例： ~~~ <script> function f1(){ //獲得元素節點對應的屬性信息 console.log($("#usernm").attr('type')); //text console.log($("#usernm").attr('name')); //username console.log($("#usernm").attr('class')); //apple //修改元素的屬性信息attr(name,value) $("#usernm").attr('name','useremail'); $("#usernm").attr('id','user');//本身可以修改，但是后邊的選擇器就失效了 $("#usernm").attr('value','tom'); $("#usernm").attr('class','orange'); //console.log($("#usernm").attr('value')); //同時修改多個屬性信息 var jn = {name:'userqq',value:'987345',class:'pear'}; $("#usernm").attr(jn); //通過函數返回值設置屬性信息 $("#usernm").attr('value',function(){ //相關程序 return "linken"; }); //修改type屬性(低版本火狐允許修改type屬性) //$("#usernm").attr('type','radio'); //刪除指定屬性 $("#usernm").removeAttr('class'); $("#usernm").removeAttr('value'); $("#usernm").removeAttr('name'); //$("#usernm").removeAttr('type'); $("#usernm").removeAttr('id'); } </script> <body> <h2>屬性操作</h2> <input id="usernm" type="text" name="username" value="jack" class="apple" /> <input type="button" value="觸發" onclick="f1()"> </body> ~~~ ### 2、class類別快捷操作方法可以用上面的方法來修改class屬性： ~~~ <div class=”apple”> $(“div”).attr(“class”); //apple 獲得屬性信息 $(“div”).attr(“class”,’pear’) //修改屬性信息 ~~~ 另外也有單獨操作class 屬性的方法： - 1、 **addClass()**——給元素設置class屬性信息 - 2、 **removeClass()**——把元素對應的class指定屬性值給刪除 , - 3、 **toggleClass(class)**——開關class設置屬性，有就給刪除，沒有就給添加上 - 4、**hasClass()**——檢查匹配的元素是否含有某個特定的類和attr 和removeAttr(class)有區別，這里只能全部修改，而addClass 和removeClass可以操作多個class中的一個。 ~~~ <sccript> function f1(){ //$("div").attr('class','apple'); //添加class屬性 //addClass() $("div").addClass('pear'); } function f2(){ //刪除class屬性 $("div").removeClass("banana"); //刪除指定的class屬性值 //$("div").removeAttr("class"); //$("div").attr("class","banana"); } function f3(){ //開關效果 $("div").toggleClass('apple'); } </script> <body> <h2>class快捷操作方法</h2> <div class="banana">this is computer</div> <input type="button" value="添加class" onclick="f1()"> <input type="button" value="刪除class" onclick="f2()"> <input type="button" value="開關class" onclick="f3()"> </body> ~~~ **PS:**addClass()和attr()方法設置樣式的不同，attr方法把元素的屬性名對應的屬性值設為方法中的參數值，addClass()則把屬性值添加到屬性名對應的屬性值中。例：已有元素`<p class='class1'>元素樣式</p>`,使用attr()和addClass()分別添加新樣式。 ~~~ $("p").attr("class","another").結果是<p class='another'>元素樣式</p> $("p").addClass("class","another")結果是<p class='class1 another'>元素樣式</p> ~~~ ### 3、html()獲取或設置一個元素包含的內容 ~~~ <div id=”one”>hello</div> document.getElementById(‘one’).innerHTML; //可以獲得元素標簽包含的內容：hello ~~~ innerHTML不是w3c標準的內容，在有的地方改屬性不起作用例如操作 xml - 1、 html() 獲取元素包含的內容 - 2、 html(參數) 設置元素包含的內容特點： ① 可以設置元素包含的文本內容 ② 也可以設置元素包含的html標簽內容 ~~~ <script> function f1(){ console.log($("div").html()); //<span>this</span> is <a>computer</a> } function f2(){ //可以同時設置元素包含的“文本”和“html”標簽內容 $("div").html("<a href='http://www.baidu.com'>hello world</a>"); } </script> <body> <h2>html快捷操作方法</h2> <div class="banana"><span>this</span> is <a>computer</a></div> <input type="button" value="獲得元素包含的內容" onclick="f1()"> <input type="button" value="設置元素包含的內容" onclick="f2()"> </body> ~~~ **PS：**該方法可以用于XHTML文檔，不能用于XML文檔。 ### 4、text()方法獲取或設置元素包含的內容 text ——-針對文本發生作用 ~~~ <div><a>hello world</a>milk</div> ~~~ 1. 獲取內容： - html() 獲取 : [hello world]()milk - text() 獲取 : hello worldmilk 1. 設置內容 - 內容1：百度 ~~~ html(內容): <div>百度</div> text(內容): <div>百度</div> ~~~ - 內容2：[http://www.baidu.com](http://www.baidu.com)’>百度 ~~~ html(內容): <div><a href=’http://www.baidu.com’>百度</a></div> text(內容): <div><a href=’http://www.baidu.com’>百度</a></div> // text(參數)作用參數html標簽會被轉化為符號實體 ~~~ **text和html方法區別** - 獲取內容：text:獲取內容只關心文本內容，不理會html標簽; html:獲取內容html和文本內容都起作用 - 設置內容：text:設置內容，html標簽內容轉化為符號實體內容；html: html標簽和普通文本內容都可以設置 ~~~ <script> function f1(){ //文本和元素標簽內容都可以獲得<span>this</span> is <a>computer</a> //console.log($("div").html()); //獲取純文本內容this is computer //console.log($("div").text()); $("div").html($("div").html()+'abc'); } function f2(){ //可以同時設置元素包含的“文本”和“html”標簽內容 //$("div").html("<a href='http://www.baidu.com'>hello world</a>"); //$("div").text("<span>百度</span>"); //<span>百度</span> } </script> <body> <h2>text快捷操作方法</h2> <div class="banana"><span>this</span> is <a>computer</a></div> <input type="button" value="獲得元素包含的內容" onclick="f1()"> <input type="button" value="設置元素包含的內容" onclick="f2()"> </body> ~~~ 　**PS:**該方法對html和XML文檔都適用。 ### 5、操作value屬性快捷方法val() 1. val() 獲得指定元素的value信息 1. val(參數) 設置指定元素的value信息 attr() form表單會經常操作value屬性：密碼框、下拉列表、復選框、單選按鈕、文本域、隱藏域 ~~~ function f1(){ //textarea與普通input框一樣可以使用value屬性 //$("#username").attr('value'); //console.log($("#username").val()); //獲得value屬性信息 console.log($("#introduce").val()); //獲得textarea的value值 } function f2(){ //修改value屬性信息 //$("#username").val('tom'); $("#introduce").val('very good'); //設置textarea的value值 } <body> <h2>val快捷操作方法</h2> <input type="text" name="username" id="username" value="linken" />  <textarea id="introduce">I am linken</textarea> <input type="button" value="獲得" onclick="f1()"> <input type="button" value="設置" onclick="f2()"> </body> ~~~ ### 6、CSS-Dom操作css()操作樣式屬性信息 1. css(name) 獲取樣式信息 1. css(name,value) 設置樣式屬性信息 1. css(json對象) 同時設置多個樣式屬性信息 ~~~ <script> function f1(){ //獲取樣式信息 console.log($("div").css("width")); console.log($("div").css("background-color")); } function f2(){ //$("div").css('width',"200px"); //$("div").css('height',"100px"); //$("div").css('background-color',"pink"); //利用json對象同時設置多個樣式信息 var jn = {width:"300px",height:"200px;",fontSize:"30px","background-color":"lightgreen"}; $("div").css(jn); } </script> <body> <h2>css快捷操作方法</h2> <div>this is computer</div> <input type="button" value="獲得" onclick="f1()"> <input type="button" value="設置" onclick="f2()"> </body> ~~~ **另附：offset()、position()、scrollTop()和scrollLeft()** - **offset()方法**——用于獲取元素相對當前窗體的偏移量，其返回對象包括兩個屬性：top和left。方法如下：`$(selector).offset()` ~~~ \\該示例用于獲得元素p的偏移量。 var offset= $("p").offset(); var left=offset.left; var top=offset.top; ~~~ **PS:**offset()只對可見元素有效。 - **position()方法**——用于獲取元素于最近的個position樣式屬性設置為relative或者absolute的祖交節點的相對偏移量。方法如下：`$(selector).position();` ~~~ \\該示例用于獲得元素p的位置。 var postion = $("p").positon(); var left=positon.left; var top=positon.top; ~~~ - scrollTop()和scrollLeft()方法用于獲取元素的滾動條距頂端的距離和距左側的距離。方法如下:`$(selector).scrollTop();$(selector).scrollLeft();`例： ~~~ \\該示例用于獲得元素的滾動條的位置。 var scrollTop=$("p").scrollTop(); var scrollLeft=$("p").scrollLeft(); ~~~ 也可以添加參數將元素滾動到指定的位置。例： ~~~ $("textarea").scrollTop(300); $("textarea").scrollLeft(300); ~~~