這篇文章主要介紹Jquery設(shè)置屬性和樣式的方法，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)于2013年開始，先為云陽等服務(wù)建站，云陽等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為云陽企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

Jquery設(shè)置屬性和樣式的方法：1、Jquery屬性的獲取與設(shè)置，代碼為【$("input:first").attr('value','新設(shè)值')】；2、JQuery添加與刪除樣式，代碼為【$('.left div').toggleC】。

Jquery設(shè)置屬性和樣式的方法：

1、Jquery屬性的獲取與設(shè)置

//找到第一個(gè)input，通過attr設(shè)置屬性value的值
$("input:first").attr('value','新設(shè)值');
//同時(shí)為多個(gè)屬性賦值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一個(gè)input，通過使用removeAttr刪除屬性
$("input:last").removeAttr('value');
//得到.first-div內(nèi)的文本，并以此來設(shè)置最后一個(gè)p內(nèi)的文本
$('p:last').text( $(".first-div").text() )
//.html() 不傳入值，就是獲取.first-div類的HTML內(nèi)容，不僅僅是文本
//.html( htmlString ) 用之前得到的內(nè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()三種方法都是用來讀取選定元素的內(nèi)容；只不過.html()是用來讀取元素的html內(nèi)容（包括html標(biāo)簽），.text()用來讀取元素的純文本內(nèi)容，包括其子元素，.val()是用來讀取表單元素的"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)三種方法都是用來替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容。.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容。

2、JQuery添加與刪除樣式

//為class=left下的div元素增加一個(gè)新樣式
$('.left div').addClass('newClass')
//找到所有的div，然后通過addClass函數(shù)增加類名
$("div").addClass(function(index,className) {
 //找到類名中包含imooc的元素，為其添加類名
 if(-1 !== className.indexOf('imooc')){    
  $(this).addClass('imoocClass') //this指向匹配元素集合中的當(dāng)前元素
 }
});
//class=left下div元素刪除newClass樣式
$('.left div').removeClass('newClass');
//如果該元素存在該類名就去除，否則就添加
$('.left div').toggleClass('newClass');
//獲取class=first的字體大小樣式值
$('p:eq(1)').text( $('.first').css("font-size"));
//獲取一組屬性值并返回為一個(gè)對(duì)象
var value = $('.first').css(['width','height']);
//通過對(duì)象訪問到對(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è)方法均用于操作頁面樣式，兩者比較?？删S護(hù)性：.addClass()的本質(zhì)是通過定義個(gè)class類的樣式規(guī)則，給元素添加一個(gè)或多個(gè)類。css方法是通過JavaScript改變?cè)氐臉邮?。通過.addClass()我們可以批量的給相同的元素設(shè)置統(tǒng)一規(guī)則，變動(dòng)起來比較方便，可以統(tǒng)一修改刪除。

如果通過.css()方法就需要指定每一個(gè)元素一一修改，比較麻煩。靈活性：通過.css()方式可以很容易動(dòng)態(tài)的去改變具體一個(gè)元素的屬性，不需要繁瑣的定義一個(gè)class類的規(guī)則。一般來說在不確定開始布局規(guī)則，通過動(dòng)態(tài)生成的HTML代碼結(jié)構(gòu)中，都是通過.css()方法處理的。樣式值：.addClass()本質(zhì)只是針對(duì)class的類的增加刪除，不能獲取到指定樣式的屬性的值，.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()方法是通過增加class名的方式，那么這個(gè)樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時(shí)候在附加到元素上，通過.css()方法處理的是內(nèi)聯(lián)樣式，直接通過元素的style屬性附加到元素上的通過.css方法設(shè)置的樣式屬性優(yōu)先級(jí)要高于.addClass()方法

以上是“Jquery設(shè)置屬性和樣式的方法”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

名稱欄目：Jquery設(shè)置屬性和樣式的方法
本文來源：http://aaarwkj.com/article40/jeggeo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、品牌網(wǎng)站制作、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)