【前端】三個bug

目錄

1、Array對象的indexOf()

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

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

 

1、Array對象的indexOf()      

      一、indexOf()定義：

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

      二、bug描述            

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

      三、解釋

           indexOf()  會作強類型校驗。

 

2、clone下拉框問題

       一、clone()定義

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

       二、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>

       三、解決方法： 

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

});

 

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

       一、html的data-*屬性 

 

定義和用法

 

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

 

data-* 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。

 

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

 

data-* 屬性包括兩部分：

 

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

 

註釋：用戶代理會徹底忽略前綴爲 "data-" 的自定義屬性。            

        二、jquery的data()方法

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

        三、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>

      

      四、解釋

         以前我一直理解的是： 若是一個元素的屬性爲data-test  ，那麼$().data('test')  和 $().attr('data-test')是一個等價的存在。

         正確的解釋以下：

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

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

參考連接：

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

jQuery.data() 的實現方式