Jquery屬性中獲取與設置的示例分析

這篇文章給大家分享的是有關Jquery屬性中獲取與設置的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

jquery是什么

jquery是一個簡潔而快速的JavaScript庫，它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器，并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件，是繼Prototype之后又一個優秀的JavaScript代碼庫，能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫，以便快速開發網站。

Jquery屬性的獲取與設置

//找到第一個input，通過attr設置屬性value的值
$("input:first").attr('value','新設值');
//同時為多個屬性賦值
$("input:first").attr({'attr1':'v1','attr2':'v2'...});
//找到最后一個input，通過使用removeAttr刪除屬性
$("input:last").removeAttr('value');

//得到.first-div內的文本，并以此來設置最后一個p內的文本
$('p:last').text( $(".first-div").text() )
//.html() 不傳入值，就是獲取.first-div類的HTML內容，不僅僅是文本
//.html( htmlString ) 用之前得到的內容來設置第一個p標簽的html內容
$('p:first').html( $(".first-div").html() ) ;

//.val()獲取表單id為single元素的值
$("p").text( $("#single").val() );
//設置表單text字段內的值
$("input[type='text']").val('修改表單的字段')

.html(),.text(),.val()三種方法都是用來讀取選定元素的內容；只不過.html()是用來讀取元素的html內容（包括html標簽），.text()用來讀取元素的純文本內容，包括其子元素，.val()是用來讀取表單元素的"value"值。其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；另外.html()方法使用在多個元素上時，只讀取第一個元素；.val()方法和.html()相同，如果其應用在多個元素上時，只讀取第一個表單元素的"value"值，但是.text()和他們不一樣，如果.text()應用在多個元素上時，將會讀取所有選中元素的文本內容。.html(htmlString),.text(textString)和.val(value)三種方法都是用來替換選中元素的內容，如果三個方法同時運用在多個元素上時，那么將會替換所有選中元素的內容。.html(),.text(),.val()都可以使用回調函數的返回值來動態的改變多個元素的內容。

JQuery添加與刪除樣式

//為class=left下的div元素增加一個新樣式
$('.left div').addClass('newClass')

//找到所有的div，然后通過addClass函數增加類名
$("div").addClass(function(index,className) {
 //找到類名中包含imooc的元素，為其添加類名
 if(-1 !== className.indexOf('imooc')){
  $(this).addClass('imoocClass') //this指向匹配元素集合中的當前元素
 }
});

//class=left下div元素刪除newClass樣式
$('.left div').removeClass('newClass');

//如果該元素存在該類名就去除，否則就添加
$('.left div').toggleClass('newClass');

//獲取class=first的字體大小樣式值
$('p:eq(1)').text( $('.first').css("font-size"));
//獲取一組屬性值并返回為一個對象
var value = $('.first').css(['width','height']);
//通過對象訪問到對應的值
document.write( "widht:" + value.width + " height:" +value.height) ;
//設置樣式屬性值
$('.fourth').css("background-color","red");
//設置多個屬性值
$('.seventh').css({
 'font-size'  :"15px",
 "background-color" :"#40E0D0"
});

addClass與css兩個方法均用于操作頁面樣式，兩者比較。

可維護性：.addClass()的本質是通過定義個class類的樣式規則，給元素添加一個或多個類。css方法是通過JavaScript改變元素的樣式。通過.addClass()我們可以批量的給相同的元素設置統一規則，變動起來比較方便，可以統一修改刪除。如果通過.css()方法就需要指定每一個元素一一修改，比較麻煩。

靈活性：通過.css()方式可以很容易動態的去改變具體一個元素的屬性，不需要繁瑣的定義一個class類的規則。一般來說在不確定開始布局規則，通過動態生成的HTML代碼結構中，都是通過.css()方法處理的。

樣式值：.addClass()本質只是針對class的類的增加刪除，不能獲取到指定樣式的屬性的值，.css()可以獲取到指定的樣式值。

樣式的優先級：css的樣式是有優先級的，當外部樣式、內部樣式和內聯樣式同一樣式規則同時應用于同一個元素的時候，優先級如下：外部樣式 < 內部樣式 < 內聯樣式。

.addClass()方法是通過增加class名的方式，那么這個樣式是在外部文件或者內部樣式中先定義好的，等到需要的時候在附加到元素上，通過.css()方法處理的是內聯樣式，直接通過元素的style屬性附加到元素上的通過.css方法設置的樣式屬性優先級要高于.addClass()方法

總結：

.addClass與.css方法各有利弊，一般若是靜態的結構，且確定了布局的規則，可以用addClass的方法，增加統一類規則。如果是動態的HTML結構，在不確定規則，或者經常變化的情況下，一般多考慮.css()方式

感謝各位的閱讀！關于“Jquery屬性中獲取與設置的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！