設定屬性的方法:使用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中文網其他相關文章!