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

資訊專欄INFORMATION COLUMN

JQuery干貨篇之處理元素

weij / 3084人閱讀

摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實(shí)例設(shè)置字體大小使用相對(duì)值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時(shí)設(shè)置多個(gè)屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。

JQuery干貨篇之處理元素

注意這里用的還是我前兩篇用的例子,詳情請(qǐng)看我的博客

attr

attr() 方法設(shè)置或返回被選元素的屬性值。

語(yǔ)法:

$(selector).attr(attribute) 返回被選元素的屬性值。

$(selector).attr(attribute,value) 設(shè)置被選元素的屬性和值

$(selector).attr(attribute,function(index,oldvalue)) 設(shè)置被選元素的屬性和值。

參數(shù) 描述
attribute 規(guī)定屬性的名稱。
function(index,oldvalue) 規(guī)定返回屬性值的數(shù)。該函數(shù)可接收并使用選擇器的 index 值和當(dāng)前屬性值。

實(shí)例:

    $("img").filter(":first").attr("src");   //得到屬性

$("img").each(function (index,elem) {    
        if(index%2==0)
            $(elem).attr("src","lily.png");      //設(shè)置屬性
        console.log($(elem).attr("src"));
        })
        
        
        $("img").attr("src",function (index,oldValue) {  //這里的oldValue表示原來(lái)屬性的值,index是索引
        if(oldValue=="rose.png")
            return "lily.png";
        else
            return "astor.png";
    })
    
    
    attrs={       //使用映射對(duì)象一次設(shè)置多個(gè)值
        src:"lily.png",
        style: "border: thick double red"
    };
    $("img:eq(1)").attr(attrs);
removeAttr

removeAttr() 方法從被選元素中移除屬性。

語(yǔ)法:

$(selector).removeAttr(attribute) 這里的attribute是屬性的名字

實(shí)例:

$("img:first").removeAttr("src");  //刪除屬性src
addClass

addClass() 方法向被選元素添加一個(gè)或多個(gè)類

語(yǔ)法:

$(selector).addClass(class) 這里的class是類名如果需要添加多個(gè)類,中間用空格隔開(kāi)

$(selector).addClass(function(index,oldclass)) 這里的index是索引,oldClass是原來(lái)就有的類名,都是可選參數(shù)。這個(gè)函數(shù)的返回的就是要添加的類名

實(shí)例:

$("img:even").addClass("redBar");  //向偶數(shù)的img添加類redBar

$("img").addClass(function (index,currentClass) {    //這里的currentClass就是原來(lái)有的類名,可選
        if(index==1)
            return "blueBar";   //第二個(gè)img應(yīng)用blueBar這個(gè)類
        else
            return "redBar";      //這里需要注意的是,對(duì)同一個(gè)img應(yīng)用類的時(shí)候,因?yàn)檫@個(gè)類的定義有優(yōu)先級(jí),上面定義會(huì)被后面定義的覆蓋,所以要注意類定義的位置
    })
    
    
    $("img").filter(":odd").addClass("redBar").end().filter(":even").addClass("blueBar");  //鏈?zhǔn)秸{(diào)用
    
    $("img").addClass("blueBar redBar");   //添加兩個(gè)類
    
hasClass

hasClass() 方法檢查被選元素是否包含指定的class

語(yǔ)法:

$(selector).hasClass(class) //返回值是false和true

實(shí)例:

console.log($("img:odd").hasClass("redBar"));     
toggleClass

toggleClass() 對(duì)設(shè)置或移除被選元素的一個(gè)或多個(gè)類進(jìn)行切換。該方法檢查每個(gè)元素中指定的類。如果不存在則添加類,如果已設(shè)置則刪除之。這就是所謂的切換效果

語(yǔ)法:

$(selector).toggleClass(class,switch) class必需的,用來(lái)規(guī)定添加或移除class的指定元素,如需規(guī)定若干 class,請(qǐng)使用空格來(lái)分隔類名。switchboolean可選參數(shù),規(guī)定是否添加或移除class

$(selector).toggleClass(function(index,class),switch) index表示索引,class表示選擇器當(dāng)前擁有的類

實(shí)例:

$("img").toggleClass("redBar");   //這里對(duì)所有的img在redBar這個(gè)類之間切換

$("img").toggleClass("redBar blueBar");  //在兩個(gè)類之間來(lái)回的切換



$("").appendTo("#buttonDiv").click(function (e) {
        $("img").toggleClass("redBar blueBar");   //在兩種class之間切換,如果有就刪除,沒(méi)有的就添加
        e.preventDefault();    
        })
        
        
        //下面添加一個(gè)按鈕,完成同時(shí)添加多個(gè)圖片的效果
    $("").appendTo("#buttonDiv").click(function (e) {
        $("img").toggleClass(function (index,currentClass) {
            if(index%2==0)
                return "blueBar";   //動(dòng)態(tài)的切換,這里是偶數(shù)就切換blue
            else
                return "redBar blueBar";  //這里是奇數(shù)的圖片在兩種顏色來(lái)回的切換

        });
        e.preventDefault();

    })
css

css() 方法返回或設(shè)置匹配的元素的一個(gè)或多個(gè)樣式屬性,這里只說(shuō)css,還有其他的設(shè)置css樣式請(qǐng)看w3School

語(yǔ)法:

$(selector).css(name) 返回第一個(gè)匹配元素的 CSS 屬性值。namecss屬性的名稱

$(selector).css(name,value) 設(shè)置所有匹配元素的指定 CSS 屬性。name表示屬性名稱,value表示屬性的值

$(selector).css(name,function(index,value)) 此函數(shù)返回要設(shè)置的屬性值。接受兩個(gè)參數(shù),index 為元素在對(duì)象集合中的索引位置,value 是原先的屬性值。name表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值

實(shí)例:

$("label").css("font-size","30px");  //設(shè)置字體大小

$("label").css("font-size","+=10");  //使用相對(duì)值設(shè)置屬性值,在原有的基礎(chǔ)上加上10

console.log($("h1").css("font-family"));   //獲取h1標(biāo)簽的字體

var cssValues={
    "border":"thick double red",
    "font-size":"1.5em"
};
$("label").css(cssValues);   //同時(shí)設(shè)置多個(gè)屬性
text

text() 方法方法設(shè)置或返回被選元素的文本內(nèi)容。當(dāng)該方法用于返回一個(gè)值時(shí),它會(huì)返回所有匹配元素的組合的文本內(nèi)容(會(huì)刪除 HTML 標(biāo)記)

語(yǔ)法:

$(selector).text() 當(dāng)該方法用于返回一個(gè)值時(shí),它會(huì)返回所有匹配元素的組合的文本內(nèi)容(會(huì)刪除 HTML 標(biāo)記)。

$(selector).text(content) 當(dāng)該方法用于設(shè)置值時(shí),它會(huì)覆蓋被選元素的所有內(nèi)容。

$(selector).text(function(index,oldcontent)) index表示索引,oldcontent表示選擇器當(dāng)前的文本內(nèi)容

html

html() 方法返回或設(shè)置被選元素的內(nèi)容 (inner HTML)。如果該方法未設(shè)置參數(shù),則返回被選元素的當(dāng)前內(nèi)容。

語(yǔ)法:

$(selector).html() 當(dāng)使用該方法返回一個(gè)值時(shí),它會(huì)返回第一個(gè)匹配元素的內(nèi)容。

$(selector).html(content) 當(dāng)使用該方法設(shè)置一個(gè)值時(shí),它會(huì)覆蓋所有匹配元素的內(nèi)容。

$(selector).html(function(index,oldcontent)) 使用函數(shù)來(lái)設(shè)置所有匹配元素的內(nèi)容。index - 可選。接收選擇器的index 位置,oldcontent - 可選。接收選擇器的當(dāng)前內(nèi)容

val

val() 方法返回或設(shè)置被選元素的值,元素的值是通過(guò) value 屬性設(shè)置的。該方法大多用于 input 元素,如果該方法未設(shè)置參數(shù),則返回被選元素的當(dāng)前值

語(yǔ)法:

$(selector).val(value) 設(shè)置文本域的值為value

$(selector).val() 得到文本域的值

$(selector).val(function(index,oldvalue)) 設(shè)置文本域的值,這里函數(shù)的返回值將會(huì)用來(lái)設(shè)置文本域的值,index表示元素索引,oldvalue表示選擇器當(dāng)前文本域的值

本人博客文章

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

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

相關(guān)文章

  • JQuery 干貨篇之選擇元素

    摘要:干貨篇之選擇元素實(shí)驗(yàn)的的代碼選擇器選擇正在處理動(dòng)畫(huà)的元素選擇第一個(gè)元素選擇最后一個(gè)元素選擇第個(gè)元素從開(kāi)始選擇序號(hào)為偶數(shù)的元素選擇序號(hào)為奇數(shù)的元素選擇序號(hào)大于的元素選擇序號(hào)小于的元素選擇所有的文本輸入框 JQuery 干貨篇之選擇元素 實(shí)驗(yàn)的HTML+CSS的代碼 html Example Jacquis Flower Shop ...

    zorpan 評(píng)論0 收藏0
  • JQuery干貨篇之處理元素

    摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實(shí)例設(shè)置字體大小使用相對(duì)值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時(shí)設(shè)置多個(gè)屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。 JQuery干貨篇之處理元素 注意這里用的還是我前兩篇用的例子,詳情請(qǐng)看我的博客 attr attr() 方法設(shè)置或返回被選元素的屬性值。 語(yǔ)法: $(selector).attr(attribute) 返回被選...

    tuantuan 評(píng)論0 收藏0
  • JQuery干貨篇之處理元素

    摘要:表示要設(shè)置的屬性名稱,返回值就是要設(shè)置的屬性值實(shí)例設(shè)置字體大小使用相對(duì)值設(shè)置屬性值,在原有的基礎(chǔ)上加上獲取標(biāo)簽的字體同時(shí)設(shè)置多個(gè)屬性方法方法設(shè)置或返回被選元素的文本內(nèi)容。 JQuery干貨篇之處理元素 注意這里用的還是我前兩篇用的例子,詳情請(qǐng)看我的博客 attr attr() 方法設(shè)置或返回被選元素的屬性值。 語(yǔ)法: $(selector).attr(attribute) 返回被選...

    zhaofeihao 評(píng)論0 收藏0
  • JQuery干貨篇之插入元素

    摘要:在匹配元素集合中的每個(gè)元素后面插入?yún)?shù)所指定的內(nèi)容,作為其兄弟節(jié)點(diǎn)。當(dāng)需要移走一個(gè)元素,不久又將該元素插入時(shí),這種方法很有用。實(shí)例從中移除集合中匹配元素的所有子節(jié)點(diǎn)。 JQuery干貨篇之插入元素 本次使用的html,css還是我上一篇的源代碼,詳情請(qǐng)看上一篇文章 分類 插入子元素:append,prepend ,appendTo,prependTo 封裝包裹元素:wrap,wrap...

    jemygraw 評(píng)論0 收藏0

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

0條評(píng)論

weij

|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<