Jquery怎麼設定屬性和樣式

設定屬性的方法：使用attr()，語法「attr(屬性,值)」。設定樣式的方法：1、使用addClass()，語法「addClass(類別名稱)」；2、使用css()，語法「css("屬性名稱","樣式值")」。

本教學操作環境：windows7系統、jquery3.2.1版本，Dell G3電腦，此方法適用於所有品牌電腦。

Jquery設定屬性與樣式的方法：

#1、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()都可以使用回呼函數的傳回值來動態的改變多個元素的內容。

2、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()方法

相關免費學習推薦：javascript（影片）

#

以上是Jquery怎麼設定屬性和樣式的詳細內容。更多資訊請關注PHP中文網其他相關文章！