【前端】三个bug

目录

一、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')); //
  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() 的实现方式