国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

jQuery中attr()和prop()的區(qū)別

mo0n1andin / 2379人閱讀

摘要：需求很簡單的，一個非常簡單的復(fù)選框的使用。與的區(qū)別復(fù)選框設(shè)置設(shè)置自定義自定義設(shè)置類型設(shè)置類型支持類型在這里溫馨提示提示一下，當(dāng)我們設(shè)置這個屬性時，再用獲取的時候，控制提示。

問題引入

昨天接到了一個活，里面有一個小需求，在寫的過程中遇到了一個小問題。雖然這個問題并不是很復(fù)雜的東西，但卻是一個比較細(xì)節(jié)的問題。相信不少新手前端會遇到。下面我先描述一下我這個遇到的這個需求。

需求很簡單的，一個非常簡單的復(fù)選框的使用。你需要實現(xiàn)下面三個邏輯：

勾選“全國”，東區(qū)、南區(qū)、西區(qū)、北區(qū)都會被選中

取消勾選“全國”，東區(qū)、南區(qū)、西區(qū)、北區(qū)都會被取消選中

如果四個區(qū)域都被選中，則“全國”會被勾選，若四個區(qū)域有一個未被勾選則“全選”不會被勾選

在處理這個需求的時候我首先想到當(dāng)然回事jQuery中的attr()方法啦！attr("checked",true)這樣一下就可以實現(xiàn)對復(fù)選框的控制，但是我在判斷的時候卻出現(xiàn)了兩個問題：

當(dāng)復(fù)選框被勾選之后，用attr("checked")來獲取其狀態(tài)時卻返回undefined

當(dāng)你還未對復(fù)選框進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之后，attr("checked",true)或者attr("checked",false)失效了

這兩個問題讓我非常疑惑不解。在我查閱資料之后，發(fā)現(xiàn)了其中原因，今天我們就扯一下jQuery中attr()和prop()的區(qū)別，來解釋一下上面兩個問題出現(xiàn)的原因，另外這也是新手前端容易忽略的問題。

工欲善其事，必先利其器，先談?wù)刟ttribute與property的區(qū)別

要想弄清楚jQuery中attr()和prop()的區(qū)別，首先我們得弄明白attribute與property的區(qū)別。當(dāng)我們弄清楚這兩個屬性之后，再過來理解jQuery中attr()和prop()的區(qū)別就會很輕松。attribute與property這兩個屬性對于剛?cè)胄星岸说耐瑢W(xué)們來說，是非常容易混淆的。這邊我自己總結(jié)一下，大概有有以下四點：

1.Dom節(jié)點自帶的屬性既是attribute也是property，修改attribute或者property都可以使屬性變化

2.attribute和property自定義的屬性，相互之間是不能訪問的

3.attribute只支持string類型，而property是可以支持string、number以及boolean的

4.attribute的自定義屬性可以在innerHTML中查看的，而property的自定義屬性卻是不可以在innerHTML中查看的

看完上面這幾點總結(jié)，我相信還是有很多同學(xué)們并不能理解。所以我寫一些小案例，供同學(xué)們?nèi)ンw會attribute與property的區(qū)別。




    
    Attribute與Property的區(qū)別


復(fù)選框

在這里溫馨提示提示一下，當(dāng)我們設(shè)置class這個屬性時，再用oCheckBox.class獲取的時候，控制提示undefined。在property里面是className而不是class，這就跟document.getElementsByClassName()很類似。細(xì)心小伙伴們會發(fā)現(xiàn)一個當(dāng)我用property設(shè)置自帶的屬性的時候，返回的類型是string，跟前面第三點不符啊！這里我們就要說回第一點自帶屬性既是attribute也是property，而attribute卻只支持string類型，當(dāng)我們用property設(shè)置自帶屬性的時候，會自動將其轉(zhuǎn)換成string類型以滿足attribute只支持string類型的要求，所以我們自帶的屬性只能是string類型了。

揭起attr()和prop()的面紗

說完attribute和property之后，接下來我們就要說一下jQuery中的attr()和prop()了。前面提到我們提到了兩個困惑的地方，我們來逐一解釋其中原由。
1、 當(dāng)復(fù)選框被勾選之后，用attr("checked")來獲取其狀態(tài)時卻返回undefined

這里我們注意的是，用attr()獲取的屬性，必須是你在DOM節(jié)點上可以看見的屬性，看不見則會返回undefined。這里我們可以驗證一下，當(dāng)你使用attr("checked",true)之后，你會發(fā)現(xiàn)與之相對應(yīng)的DOM節(jié)點會添加一個checked="checked"這么一條屬性，你再用attr("checked")去獲取它的checked屬性的時候便會返回“checked”字符串，這也就驗證了這句話。

用attr()獲取的屬性，必須是你在DOM節(jié)點上可以看見的屬性，看不見則會返回undefined。

針對DOM節(jié)點上自己定義的屬性的，prop()是不能獲取的，而attr()是可以的，如果是標(biāo)簽自帶的那便都能獲取。原因就在于我們前面總結(jié)attribute和property時，所提到的Dom節(jié)點自帶的屬性既是attribute也是property。

2 、當(dāng)你還未對復(fù)選框進行任何勾選操作時，attr("checked",true)或者attr("checked",false)是有效的，但是進行完勾選操作之后，attr("checked",true)或者attr("checked",false)失效了

在這里我們需要弄清楚的一件事是attr("checked",true)和attr("checked",false)其實設(shè)置的不是checked屬性，而是defaultChecked屬性。而我們勾選和取消勾選這兩個操作才是改變checked屬性 ，這個相當(dāng)于執(zhí)行了prop("checked",true)或者prop("checked",false)這兩條語句。當(dāng)我們未修改checked屬性時,復(fù)選框的勾選情況就是被defaultChecked這個屬性所控制，在我們修改了checked屬性之后，復(fù)選框的勾選情況將由checked屬性接管，defaultChecked這個屬性便失效了，除非你再刷新一次頁面。




    
    Title


    全國


//記得引入jQuery
結(jié)語

我們文章開頭拋出的兩個問題已經(jīng)得到解決了，這里我們我們總結(jié)一下attr()和prop()使用場景。

在設(shè)置disabled、selected、checked等這些Boolean類型自帶屬性時，我們需要用prop()方法；其他字符串類型自帶屬性時，我們使用attr()方法即可;DOM節(jié)點可見的自定義屬性我們也使用attr()方法。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82398.html

相關(guān)文章

  • jQuery中attr()和prop()方法的一些區(qū)別理解

    摘要：后來了一番不知怎么搜索的又發(fā)現(xiàn)了一個和區(qū)別的一些解釋。操作對象不同在中表示文檔節(jié)點屬性，而則表示對象屬性。函數(shù)主要依賴的是對象的和兩個方法。 昨天在開發(fā)的時候同事幫忙寫了一小段JS代碼，取數(shù)據(jù)的時候用到了以前都沒用過的$(this).data(xxx)的這種形式，后來看了手冊才知道在HTML5中可以對元素進行自定義屬性。格式類似于data-xxx=value,然后可以用JQ中的....

    iKcamp 評論0 收藏0

  • jquery中attr和prop的區(qū)別

    摘要：今天研究前端的給固有屬性加值是出現(xiàn)錯誤，搜索了下，找到了原因，就是中和的區(qū)別。下面和大家分享下在高版本的引入方法后，什么時候該用什么時候用它們兩個之間有什么區(qū)別這些問題就出現(xiàn)了。關(guān)于它們兩個的區(qū)別，網(wǎng)上的答案很多。 今天研究前端jquery的attr給固有屬性加值是出現(xiàn)錯誤，搜索了下，找到了原因，就是：jquery中attr和prop的區(qū)別。下面和大家分享下： 在高版本的jquery引...

    ad6623 評論0 收藏0

  • jquery中attr()和prop()的區(qū)別

    摘要：在中新加了一個方法，查看文檔可以看到一句話獲取在匹配的元素集中的第一個元素的屬性值。這種情況適用于多選項全選和反選的情況。 在jquery1.6中新加了一個方法prop()，查看jquery文檔可以看到一句話:獲取在匹配的元素集中的第一個元素的屬性值。 大家都知道有的瀏覽器只要寫disabled，checked就可以了，而有的要寫成disabled = disabled，checked...

    劉德剛 評論0 收藏0

  • jQuery 的 attr 與 prop 的區(qū)別

    摘要：先提出問題對于這類值是的屬性，用的或方法進行讀取或設(shè)置值是有區(qū)別的。因此，如果你想知道文本框的當(dāng)前值，則讀取。的值并不會隨著的狀態(tài)而作出相應(yīng)改變，而會。為對象設(shè)置值的安全做法避免內(nèi)存泄漏是使用。參考翻譯地址的與的區(qū)別 先提出問題：對于 checked 這類值是 true/false 的屬性，用 jQuery 的 attr 或 prop 方法進行 讀取或設(shè)置值是有區(qū)別的。 在看 jQue...

    kk_miles 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<