Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧分析
本文實(shí)例講述了Jquery屬性的獲取/設(shè)置及樣式添加/刪除操作技巧。分享給大家供大家參考,具體如下:
Jquery屬性的獲取與設(shè)置
//找到第一個(gè)input,通過(guò)attr設(shè)置屬性value的值 $("input:first").attr('value','新設(shè)值'); //同時(shí)為多個(gè)屬性賦值 $("input:first").attr({'attr1':'v1','attr2':'v2'...}); //找到最后一個(gè)input,通過(guò)使用removeAttr刪除屬性 $("input:last").removeAttr('value'); //得到.first-div內(nèi)的文本,并以此來(lái)設(shè)置最后一個(gè)p內(nèi)的文本 $('p:last').text( $(".first-div").text() ) //.html() 不傳入值,就是獲取.first-div類(lèi)的HTML內(nèi)容,不僅僅是文本 //.html( htmlString ) 用之前得到的內(nèi)容來(lái)設(shè)置第一個(gè)p標(biāo)簽的html內(nèi)容 $('p:first').html( $(".first-div").html() ) ; //.val()獲取表單id為single元素的值 $("p").text( $("#single").val() ); //設(shè)置表單text字段內(nèi)的值 $("input[type='text']").val('修改表單的字段')
.html(),.text(),.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容;只不過(guò).html()是用來(lái)讀取元素的html內(nèi)容(包括html標(biāo)簽),.text()用來(lái)讀取元素的純文本內(nèi)容,包括其子元素,.val()是用來(lái)讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上;另外.html()方法使用在多個(gè)元素上時(shí),只讀取第一個(gè)元素;.val()方法和.html()相同,如果其應(yīng)用在多個(gè)元素上時(shí),只讀取第一個(gè)表單元素的"value"值,但是.text()和他們不一樣,如果.text()應(yīng)用在多個(gè)元素上時(shí),將會(huì)讀取所有選中元素的文本內(nèi)容。.html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容,如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí),那么將會(huì)替換所有選中元素的內(nèi)容。.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。
JQuery添加與刪除樣式
//為class=left下的div元素增加一個(gè)新樣式 $('.left div').addClass('newClass') //找到所有的div,然后通過(guò)addClass函數(shù)增加類(lèi)名 $("div").addClass(function(index,className) { //找到類(lèi)名中包含imooc的元素,為其添加類(lèi)名 if(-1 !== className.indexOf('imooc')){ $(this).addClass('imoocClass') //this指向匹配元素集合中的當(dāng)前元素 } }); //class=left下div元素刪除newClass樣式 $('.left div').removeClass('newClass'); //如果該元素存在該類(lèi)名就去除,否則就添加 $('.left div').toggleClass('newClass'); //獲取class=first的字體大小樣式值 $('p:eq(1)').text( $('.first').css("font-size")); //獲取一組屬性值并返回為一個(gè)對(duì)象 var value = $('.first').css(['width','height']); //通過(guò)對(duì)象訪問(wèn)到對(duì)應(yīng)的值 document.write( "widht:" + value.width + " height:" +value.height) ; //設(shè)置樣式屬性值 $('.fourth').css("background-color","red"); //設(shè)置多個(gè)屬性值 $('.seventh').css({ 'font-size' :"15px", "background-color" :"#40E0D0" });
addClass與css兩個(gè)方法均用于操作頁(yè)面樣式,兩者比較。
可維護(hù)性:.addClass()的本質(zhì)是通過(guò)定義個(gè)class類(lèi)的樣式規(guī)則,給元素添加一個(gè)或多個(gè)類(lèi)。css方法是通過(guò)JavaScript改變?cè)氐臉邮?。通過(guò).addClass()我們可以批量的給相同的元素設(shè)置統(tǒng)一規(guī)則,變動(dòng)起來(lái)比較方便,可以統(tǒng)一修改刪除。如果通過(guò).css()方法就需要指定每一個(gè)元素一一修改,比較麻煩。
靈活性:通過(guò).css()方式可以很容易動(dòng)態(tài)的去改變具體一個(gè)元素的屬性,不需要繁瑣的定義一個(gè)class類(lèi)的規(guī)則。一般來(lái)說(shuō)在不確定開(kāi)始布局規(guī)則,通過(guò)動(dòng)態(tài)生成的HTML代碼結(jié)構(gòu)中,都是通過(guò).css()方法處理的。
樣式值:.addClass()本質(zhì)只是針對(duì)class的類(lèi)的增加刪除,不能獲取到指定樣式的屬性的值,.css()可以獲取到指定的樣式值。
樣式的優(yōu)先級(jí):css的樣式是有優(yōu)先級(jí)的,當(dāng)外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同一樣式規(guī)則同時(shí)應(yīng)用于同一個(gè)元素的時(shí)候,優(yōu)先級(jí)如下:外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式。
.addClass()方法是通過(guò)增加class名的方式,那么這個(gè)樣式是在外部文件或者內(nèi)部樣式中先定義好的,等到需要的時(shí)候在附加到元素上,通過(guò).css()方法處理的是內(nèi)聯(lián)樣式,直接通過(guò)元素的style屬性附加到元素上的通過(guò).css方法設(shè)置的樣式屬性優(yōu)先級(jí)要高于.addClass()方法
總結(jié):
.addClass與.css方法各有利弊,一般若是靜態(tài)的結(jié)構(gòu),且確定了布局的規(guī)則,可以用addClass的方法,增加統(tǒng)一類(lèi)規(guī)則。如果是動(dòng)態(tài)的HTML結(jié)構(gòu),在不確定規(guī)則,或者經(jīng)常變化的情況下,一般多考慮.css()方式
更多關(guān)于jQuery相關(guān)內(nèi)容還可查看本站專(zhuān)題:《jQuery操作DOM節(jié)點(diǎn)方法總結(jié)》、《jQuery遍歷算法與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jquery選擇器用法總結(jié)》及《jQuery常用插件及用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
模擬jQuery ajax服務(wù)器端與客戶端通信的代碼
本案例通過(guò)jQuery和Servlet技術(shù)來(lái)判斷用戶名是否存在,讓讀者明白jQuery是怎么調(diào)用服務(wù)器后臺(tái)的。還給出了解決中文亂碼的方案和如何避免各種瀏覽器的緩存。2011-03-03分享2個(gè)jQuery插件--jquery.fileupload與artdialog
這篇文章主要介紹了分享2個(gè)jQuery插件--jquery.fileupload與artdialog的使用方法及示例,非常的實(shí)用,這里推薦給大家。2014-12-12獲取select的value、text值的簡(jiǎn)單示例(jquery與javascript)
本篇文章主要分享了獲取select的value、text值的簡(jiǎn)單示例代碼,代碼簡(jiǎn)潔明了,有需要的朋友可以參考下2016-12-12基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)Ajax驗(yàn)證用戶名是否可用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03jQuery EasyUI 菜單與按鈕之創(chuàng)建簡(jiǎn)單的菜單和鏈接按鈕
這篇文章主要介紹了jQuery EasyUI 菜單與按鈕之創(chuàng)建簡(jiǎn)單的菜單和鏈接按鈕,需要的朋友可以參考下2015-11-11jQuery頭像裁剪工具jcrop用法實(shí)例(附演示與demo源碼下載)
這篇文章主要介紹了jQuery頭像裁剪工具jcrop用法,結(jié)合實(shí)例形式分析了jQuery頭像裁剪工具jquery.jcrop.js具體使用技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01基于JSON格式數(shù)據(jù)的簡(jiǎn)單jQuery幻燈片插件(jquery-slider)
jquery-slider幻燈片插件通過(guò)json數(shù)據(jù)來(lái)提供圖片地址和描述信息,同時(shí)也可以更換json數(shù)據(jù)來(lái)動(dòng)態(tài)切換不同的圖片,對(duì)json數(shù)據(jù)jquery幻燈片插件相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-08-08