jquery 獲取和設置 checkbox radio 和 select option的值?

============== 獲取和設置 checkbox radio 和 select的值? ===

val()函數, 其名字就表達了 它的意思:　他就是＝　value 的簡寫! val就是value, 就是爲獲取 表單元素的 value屬性的 屬性值, 只能針對form表單元素 有效!!

selected選中的是針對 select元素的option, checked是針對checkbox和radio元素.

• select和checkbox的表示 "值" 的方式不一樣: select是用option標籤下 的 包含"文本"值 來表示的; 可是option下也有value屬性?

總之, 
若是option標籤自己有value, 則$("#select").val()  // 獲取的是value屬性的值, 不是文本的值;
若是option標籤自己沒有value屬性, 則$("select").val(), // 獲取的是option之間的文本

那麼如何處理select的 能夠多選的狀況? 是用返回的數組來表示的:

**感受js下的循環等 操做跟c 差很少...

• 而checkbox & radio 是用其 屬性: value的值來表示的.

• 如何區別 成組的 checkbox和radio? 多個checkbox radio他們的類型是同樣的, 並且名稱name"屬性"也是同樣的, 前二者都沒有區別! 是經過 各自的 id 或者class 來區別的

要獲取checkbox 和 radio組的值, 必須是去獲取 被選中的那個item的值, 即必須是用 :checked篩選出來的 那個元素的值, 並且是針對 在實際 選取操做 後的值, 在原始代碼中看不到的 .. 固然, 對於 其餘form表單元素, 如input-text就不必定了, 文本域能夠直接用val獲取它的值...

因爲若是不寫:checked篩選過濾, 則默認返回的是第一個item的value值(無論第一個選項 選中仍是沒有選中):　$(":checkbox").val();

可是, 即便你寫了 :checked, 返回的仍然只是 第一個被選中的選項的值 , 不是全部被選中選項的值, 所以, 要想得到 全部([被選中的])選項的值 ,必須使用each函數 travers遍歷:

這實際上是一個廣泛的現象, 不僅是對checkbox, 對其餘表單元素, 如input type="text"來講, 也是同樣: val()只能得到一個同類的 表單元素 集合中的 第一個 元素的value值, 要得到全部的 值, 要用each來遍歷:

這是自我總結出來的, 網上也有文章明確的談到了這一點: http://blog.csdn.net/gao454917848/article/details/39155947

要避免一種錯覺:　ｃｈｅｃｋｂｏｘ和 radio 是沒有文本的, 它後面 /前面的文字, 跟他是沒有關係的, 因此若是用 $(":checkbox").text() 將只能獲得空值, 同時, 要避免 :checkbox 跟 :checked的區別, 前者只是匹配 複選框這一種 只一種控件, 而:checked是匹配兩種:ｃｈｅｃｋbox 和 radio.

能夠直接用dom元素 (不是jquery的對象) , 經過 點語法, 來訪問得到 dom元素的 屬性值. 也能夠在js中, 經過 點語法設置 元素 的屬性值. 訪問屬性時, 就不能給屬性名 添加 引號了...　 要訪問屬性, 平時就要注意元素標籤 有哪些屬性 ,屬性 名稱要記清楚, 如: width, height, className(採用駝峯表示法), bgcolor, background(圖片), cols, rows, type, name, value....

• 要設置checkbox radio的值, 能夠用 attr/prop來設置: $("指定到具體的item id或class"). prop("checked", "checked")

val()方法函數 是用來 jquery 獲取 "表單"元素 的值, 這是針對 "表單元素" 纔有意義, 對非表單元素, 如p, div都沒有意義. 默認的val()返回的數據類型是 string / array .(js的數據類型都是小寫的, jquery表示數據類型都是首字母大寫). 對非表單元素來講, 則是空的"" 字符串, 因此alert彈出窗口則是什麼內容都沒有.

speak: 演講/發言; 說話等等意思. essay: 隨筆, v. 嘗試/試圖= try. he essayed to (=try to) speak but was told to be quiet.

val函數的原型是 val([val|fn|arr]), 也就是說, 若是要獲取元素的值, 則必須/只能是 空參數. 不能帶參數. 要帶參數, 都是用來設置表單元素的值的: val是設置input text文本域的值, fn也是返回設置文本域的函數, arr則是用來設置 select元素和 checkbox, radio元素的值的...

emmet採用了相似於css選擇符的方式, 是 指 emmet的 html之間 能夠採用"元素標籤, 如p, div , 和 類.class, id如: #id的方式, 來表示html元素的方式 . 可是html標籤自己是不能 簡寫的!! 如table, 你不能簡寫爲 tb, span不能簡寫sp.....

簡寫的插件有兩種, emmet和haml, haml: html abstractio markup language. 後者要安裝python. E^N表示的是 E 的上一級元素(能夠替代括號跟加號. 可是寫法更簡潔, 能夠認爲一個^跟一個> 正好抵消)...如:

// 這裏的p.p2就是採用了^符號來表示.p2與.p1的層次級別相同
p.p1>(span>{click}+a[href=here$]{here}+{to continue}+br*2)*3^p.p2   

將擴展成爲:
<p class="p1">
    <span>click<a href="here1">here</a>to continue<br><br></span>
    <span>click<a href="here2">here</a>to continue<br><br></span>
    <span>click<a href="here3">here</a>to continue<br><br></span>
</p>
<p class="p2"></p>  

===============================================
.div>p.p1>(span>{click}+a[href=here$]{here}+{to continue}+br*2)*3^p.p2^.div2
將擴展成爲:
<div class="div">
    <p class="p1">
        <span>click<a href="here1">here</a>to continue<br><br></span>
        <span>click<a href="here2">here</a>to continue<br><br></span>
        <span>click<a href="here3">here</a>to continue<br><br></span>
    </p>
    <p class="p2"></p>
</div>
<div class="div2"></div>    

## 這裏要注意的是, 你不要管有 幾個 ^, 也不要管前面有多少個 ^, 你只須要記住, 每一個^ 符號, 只看跟它緊挨着的 前面那個元素就行了, 
是相對於 最鄰近的 前面那個元素的層次 關係 向上提高几個層次. 因此這裏, 最後的.div2 就是在 它前面的p.p2的基礎上 提高了一個層級.

總之, emmet能夠縮寫/略寫 ,簡寫 css的屬性名, 如 border縮寫爲bd, padding 縮寫爲p等, 可是 html元素自己 是不能夠 縮寫的簡寫的!!

1. html有沒有listbox元素標籤?

沒有專門的listbox元素標籤, 可是經過select能夠作出 相似listbox的效果. 瞭解亮點:

• select的屬性, multiple表示是否能夠多選, 它的值等於 multiple, multiple="multiple"就表示能夠多選, 但這個並非 "listbox"效果的根源

• 要產生listbox效果, 就是要讓 select的option 不僅是顯示1個, 而是要顯示多個 option! select 默認的只 顯示一個 option, 其他的在"下拉框"中, 因此只要改變 select標籤的 size屬性, 好比讓size=3, 4, 5, (默認的size=1, 表示能夠直接顯示的 選項的行數). 就能夠看出listbox的效果了!

<select name="" id="" size="4">
    <option value="">Lorem ipsum dolor.</option>
    <option value="">Fuga quis aut.</option>
    <option value="">Mollitia nemo ipsa.</option>
    <option value="">Veniam sequi rerum!</option>
    <option value="">Nisi repellendus accusantium.</option>
    <option value="">Vero accusamus similique.</option>
</select>

========================================== ==
linux 的終端的位置 和 終端的大小, 是能夠區分的:

• 若是出現一個手 形, 只有一個手形, 那麼就是移動 終端窗口的 位置;
• 若是出現一個手形, 同時下面有一個數字相乘, 那麼就是 調整 窗口的尺寸.

2. 前面說的是得到表單元素的值, 那麼設置呢? 首先要把jquery關於val 的官方文檔讀懂, 發覺原來沒有把官方文檔讀懂!

• 另外: 若是對 input type=text文本域 , 使用val(["first", "second"])這樣的數組形式賦值, 將會把 數組做爲一個總體看待, 把數組元素 用逗號鏈接起來進行設置 文本域的內容

• 還有一個很重要的概念: 在設置 checkbox, radio, select的哪些選項被選中時, 前面的 jquery對象元素, 必定不能是 $(":checked"), 由於最開始 的時候, 都沒有設置, (你既然要去設置 哪些項將被 checked, 你都不知道哪些 當前已經被選中) , 那你怎麼用 :checked呢? 應該用 $("input, 或者 select, 或者 :input, 或者:checkbox, 或者單獨的 :radio") 而後去設置val([...]), 哪些選項被選中!!

• input只能匹配input標籤元素, 而:input則變了, 它表示的是一種類型, 因此他纔是匹配form下的全部的表單元素, 包括: input, select, textarea, button. $(":input").val(); 能夠設置 checkbox, radio, 和 select的選中選項.