目錄

一、Array對象的indexOf()

二、使用jquery，clone()下拉框問題

三、jquery獲取獲取html5的data-*屬性

一、Array對象的indexOf()

1、indexOf()定義：

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

2、bug描述

var arr = ["1","2"];
console.log(arr.indexOf(1)); // -1    為何是-1？

3、解釋

indexOf() 會做強類型校驗。

二、clone下拉框問題

1、clone()定義

clone() 方法生成被選元素的副本，包含子節點、文本和屬性。

2、bug描述

如下圖片：

先將select值選為2。點擊clone後，新增的select選中項為1；

如何才能保證clone的select元素，選中的項也一樣？

...
<div>
  <select>
    <option>1</option>
    <option>2</option>
  </select>
</div>
<br/><button>clone</button>


<script>
 

$(‘button‘).click(function(){
   var select1 = $(‘select‘).clone();
   $(‘div‘).append(select1);

});
</script>

3、解決方法：

 //對下拉框增加change事件。每次改變下拉框，手動增加selected屬性；
$(‘select‘).change(function(){
    $(this).find(‘option[selected]‘).removeAttr(‘selected‘);
    $(this).find(‘option:selected‘).attr(‘selected‘,‘selected‘);

});

三、jquery獲取獲取html5的data-*屬性

1、html的data-*屬性

定義和用法

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不應該包含任何大寫字母，並且在前綴 "data-" 之後必須有至少一個字符
• 屬性值可以是任意字符串

註釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

2、jquery的data()方法

data() 方法向被選元素附加數據，或者從被選元素獲取數據。

3、bug描述

<select data-test="1">
   <option>1</option>
   <option>2</option>
</select>
<button>change</button>


<script>
//點擊button後，會對select的data-test屬性賦值為2； 然後進行讀取
$(‘button‘).click(function(){
  $(‘select‘).data(‘test‘,‘2‘);
  console.log($(‘select‘).data(‘test‘)); // 2
  console.log($(‘select‘).attr(‘data-test‘)); // 1     為何兩個結果不一致呢？ 

});
</script>

4、解釋

之前我一直理解的是： 如果一個元素的屬性為data-test ，那麽$().data(‘test‘) 和 $().attr(‘data-test‘)是一個等價的存在。

正確的解釋如下：

data()的值進行修改並不會影響到DOM元素上的data-*屬性的改變。

data()的本質其實是將一個 “cache” 附加到了對象上，並使用了一個特殊的屬性名稱。

參考鏈接：

js,jQuery獲取html5的data-*屬性

jQuery.data() 的實現方式

【前端】三個bug