jQuery 屬性與樣式

yibinnn 發(fā)布于2019-08-21 11:52 / 3374人閱讀

摘要：與中用方法來(lái)獲取和設(shè)置元素屬性是屬性的縮寫，在操作中會(huì)經(jīng)常用到有個(gè)表達(dá)式傳入屬性名獲取屬性的值屬性名屬性值設(shè)置屬性的值屬性名函數(shù)值設(shè)置屬性的函數(shù)值給指定元素設(shè)置多個(gè)屬性值，即屬性名一屬性值一屬性名二屬性值二刪除方法為匹配的元素集合中的每個(gè)元

.attr()與.removeAttr()

jQuery中用attr()方法來(lái)獲取和設(shè)置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會(huì)經(jīng)常用到attr()

attr()有4個(gè)表達(dá)式

attr(傳入屬性名)：獲取屬性的值

attr(屬性名, 屬性值)：設(shè)置屬性的值

attr(屬性名,函數(shù)值)：設(shè)置屬性的函數(shù)值

attr(attributes)：給指定元素設(shè)置多個(gè)屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

removeAttr()刪除方法
.removeAttr( attributeName ) : 為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）

注：
dom概念區(qū)分：Attribute和Property翻譯為“特性”和“屬性”:

Attribute就是dom節(jié)點(diǎn)自帶的屬性,如：html中常用的id、class、title、align等

Property是這個(gè)DOM元素作為對(duì)象，其附加的內(nèi)容，例如,tagName, nodeName, nodeType,defaultChecked, 和defaultSelected使用.prop()方法進(jìn)行取值或賦值等

獲取Attribute就需要用attr，獲取Property就需要用prop





    
    
    
    



    .attr()與.removeAttr()
    .attr

html()及.text()

.html()方法
獲取集合中第一個(gè)匹配元素的HTML內(nèi)容或設(shè)置每一個(gè)匹配元素的html內(nèi)容，具體有3種用法：

.html()不傳入值，就是獲取集合中第一個(gè)匹配元素的HTML內(nèi)容
.html( htmlString )設(shè)置每一個(gè)匹配元素的html內(nèi)容
.html( function(index, oldhtml) )用來(lái)返回設(shè)置HTML內(nèi)容的一個(gè)函數(shù)

注：
.html()方法內(nèi)部使用的是DOM的innerHTML屬性來(lái)處理的，所以在設(shè)置與獲取上需要注意的一個(gè)最重要的問(wèn)題，這個(gè)操作是針對(duì)整個(gè)HTML內(nèi)容（不僅僅只是文本內(nèi)容）

.text()方法
得到匹配元素集合中每個(gè)元素的文本內(nèi)容結(jié)合，包括他們的后代，或設(shè)置匹配元素集合中每個(gè)元素的文本內(nèi)容為指定的文本內(nèi)容,具體有3種用法：

.text()得到匹配元素集合中每個(gè)元素的合并文本，包括他們的后代
.text( textString )用于設(shè)置匹配元素內(nèi)容的文本
.text( function(index, text) )用來(lái)返回設(shè)置文本內(nèi)容的一個(gè)函數(shù)

注：
.text()結(jié)果返回一個(gè)字符串，包含所有匹配元素的合并文本

.html與.text的異同:

.html與.text的方法操作是一樣，只是在具體針對(duì)處理對(duì)象不同
.html處理的是元素內(nèi)容，.text處理的是文本內(nèi)容
.html只能使用在HTML文檔中，.text在XML和HTML文檔中都能使用
如果處理的對(duì)象只有一個(gè)子文本節(jié)點(diǎn)，那么html處理的結(jié)果與text是一樣的
火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個(gè)屬性的支持，所以可以兼容所有瀏覽器





    
    
    
    



    .html()與.text()
    
        
            :first-child
            第二個(gè)元素
            :last-child
          
        
            :first-child
            第二個(gè)元素
            :last-child
        
    
    
    顯示通過(guò)html方法獲取到的內(nèi)容
    

    顯示通過(guò)text方法獲取到的內(nèi)容

.val()

.val()方法主要是用于處理表單元素的值，比如 input, select 和 textarea

.val()方法

.val()：無(wú)參數(shù)，獲取匹配的元素集合中第一個(gè)元素的當(dāng)前值
.val( value )：設(shè)置匹配的元素集合中每個(gè)元素的值
.val( function )：一個(gè)用來(lái)返回設(shè)置值的函數(shù)

注意事項(xiàng)
通過(guò).val()處理select元素，當(dāng)沒(méi)有選擇項(xiàng)被選中，它返回null
.val()方法多用來(lái)設(shè)置表單的字段的值
如果select元素有multiple（多選）屬性，并且至少一個(gè)選擇項(xiàng)被選中，.val()方法返回一個(gè)數(shù)組，這個(gè)數(shù)組包含每個(gè)選中選擇項(xiàng)的值

.html(),.text()和.val()的差異總結(jié)

.html(),.text(),.val()三種方法都是用來(lái)讀取選定元素的內(nèi)容；

.html()是用來(lái)讀取元素的html內(nèi)容（包括html標(biāo)簽）

.text()用來(lái)讀取元素的純文本內(nèi)容，包括其后代元素

.val()是用來(lái)讀取表單元素的"value"值

其中.html()和.text()方法不能使用在表單元素上,而.val()只能使用在表單元素上；
.html()方法使用在多個(gè)元素上時(shí)，只讀取第一個(gè)元素；.val()方法和.html()相同，如果其應(yīng)用在多個(gè)元素上時(shí)，只能讀取第一個(gè)表單元素的"value"值，但是.text()和他們不一樣，如果.text()應(yīng)用在多個(gè)元素上時(shí)，將會(huì)讀取所有選中元素的文本內(nèi)容；
.html(htmlString),.text(textString)和.val(value)三種方法都是用來(lái)替換選中元素的內(nèi)容，如果三個(gè)方法同時(shí)運(yùn)用在多個(gè)元素上時(shí)，那么將會(huì)替換所有選中元素的內(nèi)容；
.html(),.text(),.val()都可以使用回調(diào)函數(shù)的返回值來(lái)動(dòng)態(tài)的改變多個(gè)元素的內(nèi)容、

.val()

增加樣式.addClass()

通過(guò)動(dòng)態(tài)改變類名（class），可以讓其修改元素呈現(xiàn)出不同的效果。在HTML結(jié)構(gòu)中里，多個(gè)class以空格分隔，當(dāng)一個(gè)節(jié)點(diǎn)（或稱為一個(gè)標(biāo)簽）含有多個(gè)class時(shí)，DOM元素響應(yīng)的className屬性獲取的不是class名稱的數(shù)組，而是一個(gè)含有空格的字符串，這就使得多class操作變得很麻煩

.addClass( className )方法

.addClass( className ) : 為每個(gè)匹配元素所要增加的一個(gè)或多個(gè)樣式名
.addClass( function(index, currentClass) ) : 這個(gè)函數(shù)返回一個(gè)或更多用空格隔開(kāi)的要增加的樣式名

注意事項(xiàng)

.addClass()方法不會(huì)替換一個(gè)樣式類名。它只是簡(jiǎn)單的添加一個(gè)樣式類名到元素上，簡(jiǎn)單的描述下：在p元素增加一個(gè)newClass的樣式


$("p").addClass("newClass")

p元素的class實(shí)際上是 class="orgClass newClass"樣式只會(huì)在原本的類上繼續(xù)增加，通過(guò)空格分隔





    
    
    
    



    .addClss()方法
    
        
            newClass
        
        
            newClass
        
    
    
        
            
                LebBornClass
            
        
        
            
                LebBornClass

刪除樣式.removeClass()

jQuery通過(guò).addClass()方法可以很便捷的增加樣式。如果需要樣式之間的切換，同樣jQuery提供了一個(gè)很方便的.removeClass()，它的作用是從匹配的元素中刪除全部或者指定的class

.removeClass( )方法

.removeClass( [className ] )：每個(gè)匹配元素移除的一個(gè)或多個(gè)用空格隔開(kāi)的樣式名
.removeClass( function(index, class) ) ： 一個(gè)函數(shù)，返回一個(gè)或多個(gè)將要被移除的樣式名

注意事項(xiàng)

如果一個(gè)樣式類名作為一個(gè)參數(shù),只有這樣式類會(huì)被從匹配的元素集合中刪除。如果沒(méi)有樣式名作為參數(shù)，那么所有的樣式類將被移除





    
    
    
    



    .removeClass()方法
    
        
            newClass
        
        
            newClass
        
    
    
        
            
                LebBornClass
            
        
        
            
                LebBornClass

切換樣式.toggleClass()

在做某些效果的時(shí)候，可能會(huì)針對(duì)同一節(jié)點(diǎn)的某一個(gè)樣式不斷的切換，也就是addClass與removeClass的互斥切換，比如隔行換色效果

jQuery提供一個(gè)toggleClass方法用于簡(jiǎn)化這種互斥的邏輯，通過(guò)toggleClass方法動(dòng)態(tài)添加刪除Class，一次執(zhí)行相當(dāng)于addClass，再次執(zhí)行相當(dāng)于removeClass

.toggleClass( )方法
在匹配的元素集合中的每個(gè)元素上添加或刪除一個(gè)或多個(gè)樣式類,取決于這個(gè)樣式類是否存在或值切換屬性。即：如果存在（不存在）就刪除（添加）一個(gè)類

.toggleClass( className )：在匹配的元素集合中的每個(gè)元素上用來(lái)切換的一個(gè)或多個(gè)（用空格隔開(kāi)）樣式類名
.toggleClass( className, switch )：一個(gè)布爾值，用于判斷樣式是否應(yīng)該被添加或移除
.toggleClass( [switch ] )：一個(gè)用來(lái)判斷樣式類添加還是移除的 布爾值
.toggleClass( function(index, class, switch) [, switch ] )：用來(lái)返回在匹配的元素集合中的每個(gè)元素上用來(lái)切換的樣式類名的一個(gè)函數(shù)。接收元素的索引位置和元素舊的樣式類作為參數(shù)

注意事項(xiàng)：

toggleClass是一個(gè)互斥的邏輯，也就是通過(guò)判斷對(duì)應(yīng)的元素上是否存在指定的Class名，如果有就刪除，如果沒(méi)有就增加
toggleClass會(huì)保留原有的Class名后新增，通過(guò)空格隔開(kāi)





    
    隔行換色
    
    



    .toggleClass(className)和.toggleClass(className,switch)
    
        
            jQuery入門
            jQuery入門
        
        
            jQuery入門
            jQuery入門
        
        
            jQuery入門
            jQuery入門
        
        
            jQuery入門
            jQuery入門
        
        
            jQuery入門
            jQuery入門

樣式操作.css()

.css() 方法：獲取元素樣式屬性的計(jì)算值或者設(shè)置元素的CSS屬性

獲取

.css( propertyName ) ：獲取匹配元素集合中的第一個(gè)元素的樣式屬性的計(jì)算值
.css( propertyNames )：傳遞一組數(shù)組，返回一個(gè)對(duì)象結(jié)果

設(shè)置

.css( propertyName, value )：設(shè)置CSS
.css( propertyName, function )：可以傳入一個(gè)回調(diào)函數(shù)，返回取到對(duì)應(yīng)的值進(jìn)行處理
.css( properties )：可以傳一個(gè)對(duì)象，同時(shí)設(shè)置多個(gè)樣式

注意事項(xiàng)
瀏覽器屬性獲取方式不同，在獲取某些值的時(shí)候都jQuery采用統(tǒng)一的處理，比如顏色采用RBG，尺寸采用px
.css()方法支持駝峰寫法與大小寫混搭的寫法，內(nèi)部做了容錯(cuò)的處理
當(dāng)一個(gè)數(shù)只被作為值（value）的時(shí)候，jQuery會(huì)將其轉(zhuǎn)換為一個(gè)字符串，并添在字符串的結(jié)尾處添加px，例如 .css("width",50}) 與 .css("width","50px"})一樣




    
    
    


    
    獲取css屬性
    獲取顏色
    
    獲取文字尺寸
    
    獲取寬高尺寸
    

    

    

    


    設(shè)置css屬性
    設(shè)置顏色設(shè)置文字尺寸
    設(shè)置顏色設(shè)置文字尺寸
    通過(guò)回調(diào)設(shè)置新的值
    同時(shí)設(shè)置多少個(gè)樣式

.css()與.addClass()設(shè)置樣式的區(qū)別

可維護(hù)性
.addClass()的本質(zhì)是通過(guò)定義個(gè)class類的樣式規(guī)則，給元素添加一個(gè)或多個(gè)類。css方法是通過(guò)JavaScript大量代碼進(jìn)行改變?cè)氐臉邮?/p>

通過(guò).addClass()我們可以批量的給相同的元素設(shè)置統(tǒng)一規(guī)則，變動(dòng)起來(lái)比較方便，可以統(tǒng)一修改刪除。如果通過(guò).css()方法就需要指定每一個(gè)元素是一一的修改，日后維護(hù)也要一一的修改，比較麻煩

靈活性
通過(guò).css()方式可以很容易動(dòng)態(tài)的去改變一個(gè)樣式的屬性，不需要在去繁瑣的定義個(gè)class類的規(guī)則。一般來(lái)說(shuō)在不確定開(kāi)始布局規(guī)則，通過(guò)動(dòng)態(tài)生成的HTML代碼結(jié)構(gòu)中，都是通過(guò).css()方法處理的

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

樣式的優(yōu)先級(jí)

css的樣式是有優(yōu)先級(jí)的，當(dāng)外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同一樣式規(guī)則同時(shí)應(yīng)用于同一個(gè)元素的時(shí)候，優(yōu)先級(jí)如下

外部樣式 < 內(nèi)部樣式 < 內(nèi)聯(lián)樣式

.addClass()方法是通過(guò)增加class名的方式，那么這個(gè)樣式是在外部文件或者內(nèi)部樣式中先定義好的，等到需要的時(shí)候在附加到元素上

通過(guò).css()方法處理的是內(nèi)聯(lián)樣式，直接通過(guò)元素的style屬性附加到元素上的

通過(guò).css方法設(shè)置的樣式屬性優(yōu)先級(jí)要高于.addClass方法

總結(jié)：

.addClass與.css方法各有利弊，一般是靜態(tài)的結(jié)構(gòu)，都確定了布局的規(guī)則，可以用addClass的方法，增加統(tǒng)一的類規(guī)則
如果是動(dòng)態(tài)的HTML結(jié)構(gòu)，在不確定規(guī)則，或者經(jīng)常變化的情況下，一般多考慮.css()方式





    
    
    
    



    .addClss()與.css()方法區(qū)別
    
        
            css優(yōu)先級(jí)高于addClass
            1：第一次addClss背景色
            2：第二次css修改背景色
        
    
    
        
            
                imoocClass

元素的數(shù)據(jù)存儲(chǔ)

html5 dataset是新的HTML5標(biāo)準(zhǔn)，允許在普通的元素標(biāo)簽里嵌入類似data-*的屬性，來(lái)實(shí)現(xiàn)一些簡(jiǎn)單數(shù)據(jù)的存取。它的數(shù)量不受限制，并且也能由JavaScript動(dòng)態(tài)修改，也支持CSS選擇器進(jìn)行樣式設(shè)置。使得data屬性特別靈活，也非常強(qiáng)大。有了這樣的屬性我們能夠更加有序直觀的進(jìn)行數(shù)據(jù)預(yù)設(shè)或存儲(chǔ)。那么在不支持HTML5標(biāo)準(zhǔn)的瀏覽器中，我們?nèi)绾螌?shí)現(xiàn)數(shù)據(jù)存取?jQuery就提供了一個(gè).data()的方法來(lái)處理這個(gè)問(wèn)題

jQuery提供的存儲(chǔ)接口

jQuery.data( element, key, value )        //靜態(tài)接口,存數(shù)據(jù)
jQuery.data( element, key )               //靜態(tài)接口,取數(shù)據(jù)
.data( key, value )                       //實(shí)例接口,存數(shù)據(jù)
.data( key )                              //實(shí)例接口,取數(shù)據(jù)

2個(gè)方法在使用上存取都是通一個(gè)接口，傳遞元素，鍵值數(shù)據(jù)。在jQuery的官方文檔中，建議用.data()方法來(lái)代替

我們把DOM可以看作一個(gè)對(duì)象，那么我們往對(duì)象上是可以存在基本類型，引用類型的數(shù)據(jù)的，但是這里會(huì)引發(fā)一個(gè)問(wèn)題，可能會(huì)存在循環(huán)引用的內(nèi)存泄漏風(fēng)險(xiǎn)。通過(guò)jQuery提供的數(shù)據(jù)接口，就很好的處理了這個(gè)問(wèn)題了，我們不需要關(guān)心它底層是如何實(shí)現(xiàn)，只需要按照對(duì)應(yīng)的data方法使用就行了

2個(gè)對(duì)應(yīng)的刪除接口，使用上與data方法其實(shí)是一致的，只不過(guò)是一個(gè)是增加一個(gè)是刪除罷了

jQuery.removeData( element [, name ] )
.removeData( [name ] )





    
    
    
    



    jQuery.data()靜態(tài)方法
    
        
            點(diǎn)擊看結(jié)果
            jQuery.data
        
        
    
    .data()實(shí)例方法
    
        
            點(diǎn)擊看結(jié)果
            .data

云服務(wù)器 GPU云服務(wù)器樣式表屬性 html背景樣式屬性 jQuery表單樣式 jQuery搜索框樣式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87207.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yibinnn

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Java學(xué)習(xí)之java單元測(cè)試小技巧，減輕測(cè)試負(fù)擔(dān)

閱讀 2859·2021-11-24 09:39
甲骨文oracle封賬號(hào)和試用期到期的區(qū)別！

閱讀 4232·2021-10-27 14:19
#八月優(yōu)惠#PIGYun：香港BGP線路60M大帶寬僅19，美西GIA混AS9929僅15元

閱讀 2077·2021-08-12 13:25
vuex狀態(tài)管理

閱讀 2364·2019-08-29 17:07
前端工程師,這些你都會(huì)么?

閱讀 1141·2019-08-29 13:44
React入門0x001: 環(huán)境配置和 helloworld

閱讀 1093·2019-08-26 12:17
前端小知識(shí)10點(diǎn)（2019.5.2）

閱讀 488·2019-08-23 17:16
淺談ReactFiber

閱讀 2075·2019-08-23 16:46

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jQuery 屬性與樣式

.attr()與.removeAttr()

.attr

.html()與.text()

顯示通過(guò)html方法獲取到的內(nèi)容

顯示通過(guò)text方法獲取到的內(nèi)容

.val()

.addClss()方法

.removeClass()方法

.toggleClass(className)和.toggleClass(className,switch)

獲取css屬性

設(shè)置css屬性

.addClss()與.css()方法區(qū)別

jQuery.data()靜態(tài)方法

.data()實(shí)例方法

相關(guān)文章

JQuery基礎(chǔ)修煉-樣式篇

JQuery基礎(chǔ)修煉-樣式篇

jQuery基礎(chǔ)(一) ：樣式篇

Dom詳解

jQuery筆記總結(jié)篇

發(fā)表評(píng)論

0條評(píng)論

yibinnn

男|高級(jí)講師

TA的文章

Java學(xué)習(xí)之java單元測(cè)試小技巧，減輕測(cè)試負(fù)擔(dān)

甲骨文oracle封賬號(hào)和試用期到期的區(qū)別！

#八月優(yōu)惠#PIGYun：香港BGP線路60M大帶寬僅19，美西GIA混AS9929僅15元

vuex狀態(tài)管理

前端工程師,這些你都會(huì)么?

React入門0x001: 環(huán)境配置和 helloworld

前端小知識(shí)10點(diǎn)（2019.5.2）

淺談ReactFiber

最新活動(dòng)

jQuery入門	jQuery入門
jQuery入門	jQuery入門
jQuery入門	jQuery入門
jQuery入門	jQuery入門
jQuery入門	jQuery入門

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

jQuery 屬性與樣式

.attr()與.removeAttr()

.attr

.html()與.text()

顯示通過(guò)html方法獲取到的內(nèi)容

顯示通過(guò)text方法獲取到的內(nèi)容

.val()

.addClss()方法

.removeClass()方法

.toggleClass(className)和.toggleClass(className,switch)

獲取css屬性

設(shè)置css屬性

.addClss()與.css()方法區(qū)別

jQuery.data()靜態(tài)方法

.data()實(shí)例方法

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！