【前端】三个bug

最新推荐文章于 2022-10-08 15:46:54 发布

weixin_30700099

最新推荐文章于 2022-10-08 15:46:54 发布

阅读量125

点赞数

CC 4.0 BY-SA版权

文章标签：前端数据库 javascript ViewUI

原文链接：http://www.cnblogs.com/lanleiming/p/7504206.html

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