這期內容當中小編將會給大家?guī)碛嘘P如何在JQuery中設置樣式與屬性,文章內容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)服務項目包括贛榆網(wǎng)站建設、贛榆網(wǎng)站制作、贛榆網(wǎng)頁制作以及贛榆網(wǎng)絡營銷策劃等。多年來,我們專注于互聯(lián)網(wǎng)行業(yè),利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等,向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案,贛榆網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前,我們服務的客戶以成都為中心已經(jīng)輻射到贛榆省份的部分城市,未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任!
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()都可以使用回調函數(shù)的返回值來動態(tài)的改變多個元素的內容。
JQuery添加與刪除樣式
//為class=left下的div元素增加一個新樣式 $('.left div').addClass('newClass') //找到所有的div,然后通過addClass函數(shù)增加類名 $("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兩個方法均用于操作頁面樣式,兩者比較??删S護性:.addClass()的本質是通過定義個class類的樣式規(guī)則,給元素添加一個或多個類。css方法是通過JavaScript改變元素的樣式。通過.addClass()我們可以批量的給相同的元素設置統(tǒng)一規(guī)則,變動起來比較方便,可以統(tǒng)一修改刪除。如果通過.css()方法就需要指定每一個元素一一修改,比較麻煩。靈活性:通過.css()方式可以很容易動態(tài)的去改變具體一個元素的屬性,不需要繁瑣的定義一個class類的規(guī)則。一般來說在不確定開始布局規(guī)則,通過動態(tài)生成的HTML代碼結構中,都是通過.css()方法處理的。樣式值:.addClass()本質只是針對class的類的增加刪除,不能獲取到指定樣式的屬性的值,.css()可以獲取到指定的樣式值。樣式的優(yōu)先級:css的樣式是有優(yōu)先級的,當外部樣式、內部樣式和內聯(lián)樣式同一樣式規(guī)則同時應用于同一個元素的時候,優(yōu)先級如下:外部樣式 < 內部樣式 < 內聯(lián)樣式。
.addClass()方法是通過增加class名的方式,那么這個樣式是在外部文件或者內部樣式中先定義好的,等到需要的時候在附加到元素上,通過.css()方法處理的是內聯(lián)樣式,直接通過元素的style屬性附加到元素上的通過.css方法設置的樣式屬性優(yōu)先級要高于.addClass()方法
jquery是一個簡潔而快速的JavaScript庫,它具有獨特的鏈式語法和短小清晰的多功能接口、高效靈活的css選擇器,并且可對CSS選擇器進行擴展、擁有便捷的插件擴展機制和豐富的插件,是繼Prototype之后又一個優(yōu)秀的JavaScript代碼庫,能夠用于簡化事件處理、HTML文檔遍歷、Ajax交互和動畫,以便快速開發(fā)網(wǎng)站。
上述就是小編為大家分享的如何在JQuery中設置樣式與屬性了,如果剛好有類似的疑惑,不妨參照上述分析進行理解。如果想知道更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。