首頁 > web前端 > js教程 > Jquery怎麼設定屬性和樣式

Jquery怎麼設定屬性和樣式

coldplay.xixi
發布: 2023-01-04 09:36:29
原創
2732 人瀏覽過

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

Jquery怎麼設定屬性和樣式

本教學操作環境: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"
});
登入後複製

#addClasscss兩個方法都用於操作頁面樣式,兩者比較。可維護性:.addClass()的本質是透過定義個class類別的樣式規則,為元素增加一個或多個類別。 css方法是透過JavaScript改變元素的樣式。透過.addClass()我們可以批次的給相同的元素設定統一規則,變動起來比較方便,可以統一修改刪除。

如果通過.css()方法就需要指定每一個元素一一修改,比較麻煩。靈活性:透過.css()方式可以輕易動態的去改變具體一個元素的屬性,不需要繁瑣的定義一個class類別的規則。一般來說在不確定開始佈局規則,透過動態產生的HTML程式碼結構中,都是透過.css()方法處理的。樣式值:.addClass()本質只是針對class的類別的增加刪除,不能取得到指定樣式的屬性的值,.css()可以取得到指定的樣式值。樣式的優先權:css的樣式是有優先權的,當外部樣式、內部樣式和內聯樣式同一樣式規則同時套用於同一個元素的時候,優先權如下:外部樣式< 內部樣式< 內聯樣式。

.addClass()方法是透過增加class名稱的方式,那麼這個樣式是在外部檔案或內部樣式中先定義好的,等到需要的時候在附加到元素上,透過.css()方法處理的是內聯樣式,直接透過元素的style屬性附加到元素上的透過.css方法設定的樣式屬性優先權要高於.addClass()方法

相關免費學習推薦:javascript(影片)

#

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板