首页 > > 网页制作 > css >

21个值得收藏的Javascript技巧

2018-06-23 22:16:06来源：未知 阅读 ()

新老客户大回馈,云服务器低至5折

在本文中列出了21个值得收藏的Javascript技巧,在实际工作中,如果能适当运用,则大大提高工作效率。

 

　　1  Javascript数组转换为CSV格式

　　首先考虑如下的应用场景,有一个Javscript的字符型(或者数值型)数组,现在需要转换为以逗号分割的CSV格式文件。则我们可以使用如下的小技巧，代码如下：

1
2
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.valueOf();

　　输出：apple,peaches,oranges,mangoes

　　其中，valueOf()方法会将Javascript数组转变为逗号隔开的字符串。要注意的是，如果想不使用逗号分割，比如用｜号分割，则请使用join方法，如下：

1
2
var fruits = ['apple', 'peaches', 'oranges', 'mangoes'];
var str = fruits.join("|");

　　输出： apple|peaches|oranges|mangoes

　　2 将CSV格式重新转换回Javscript数组

　　那么如何将一个CSV格式的字符串转变回Javascript数组呢？可以使用split()方法，就可以使用任何指定的字符去分隔，代码如下：

1
2
var str = "apple, peaches, oranges, mangoes";
var fruitsArray = str.split(",");

　　输出 fruitsArray[0]: apple

　　3 根据索引移除数组中的某个元素

　　假如需要从Javascript数组中移除某个元素，可以使用splice方法，该方法将根据传入参数n，移除数组中移除第n个元素(Javascript数组中从第0位开始计算)。

1
2
3
4
5
6
7
8
9
10
11
function removeByIndex(arr, index) {
    arr.splice(index, 1);
}
test = new Array();
test[0] = 'Apple';
test[1] = 'Ball';
test[2] = 'Cat';
test[3] = 'Dog';
alert("Array before removing elements: "+test);
removeByIndex(test, 2);
alert("Array after removing elements: "+test);

　　则最后输出的为Apple,Ball,Dog

　　4 根据元素的值移除数组元素中的值

　　下面这个技巧是很实用的，是根据给定的值去删除数组中的元素，代码如下：

1
2
3
4
5
6
7
8
9
10
11
function removeByValue(arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
}
var somearray = ["mon", "tue", "wed", "thur"]
removeByValue(somearray, "tue");
//somearray 将会有的元素是 "mon", "wed", "thur"

　　当然，更好的方式是使用prototype的方法去实现，如下代码：

1
2
3
4
5
6
7
8
9
10
11
Array.prototype.removeByValue = function(val) {
    for(var i=0; i<this.length; i++) {
        if(this[i] == val) {
            this.splice(i, 1);
            break;
        }
    }
}
//..
var somearray = ["mon", "tue", "wed", "thur"]
somearray.removeByValue("tue");

　　5 通过字符串指定的方式动态调用某个方法

　　有的时候，需要在运行时，动态调用某个已经存在的方法，并为其传入参数。这个如何实现呢？下面的代码可以：

1
2
3
4
5
6
var strFun = "someFunction"; //someFunction 为已经定义的方法名
var strParam = "this is the parameter"; //要传入方法的参数
var fn = window[strFun];
 
//调用方法传入参数
fn(strParam);

　　6 产生1到N的随机数

1
2
3
4
5
6
7
var random = Math.floor(Math.random() * N + 1);
 
//产生1到10之间的随机数
var random = Math.floor(Math.random() * 10 + 1);
 
//产生1到100之间的随机数
var random = Math.floor(Math.random() * 100 + 1);

　　7 捕捉浏览器关闭的事件

　　我们经常希望在用户关闭浏览器的时候，提示用户要保存尚未保存的东西，则下面的这个Javascript技巧是十分有用的，代码如下：

1
2
3
4
5
6
7
8
9
<script language="javascript">
function fnUnloadHandler() {
 
       alert("Unload event.. Do something to invalidate users session..");
}
</script>
<body onbeforeunload="fnUnloadHandler()">
………
</body>

　　就是编写onbeforeunload()事件的代码即可

　　8  检查是否按了回退键

　　同样，可以检查用户是否按了回退键，代码如下：

1
2
3
window.onbeforeunload = function() {
    return "You work will be lost.";
};

　　9  检查表单数据是否改变

　　有的时候，需要检查用户是否修改了一个表单中的内容，则可以使用下面的技巧，其中如果修改了表单的内容则返回true，没修改表单的内容则返回false。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function formIsDirty(form) {
  for (var i = 0; i < form.elements.length; i++) {
    var element = form.elements[i];
    var type = element.type;
    if (type == "checkbox" || type == "radio") {
      if (element.checked != element.defaultChecked) {
        return true;
      }
    }
    else if (type == "hidden" || type == "password" ||
             type == "text" || type == "textarea") {
      if (element.value != element.defaultValue) {
        return true;
      }
    }
    else if (type == "select-one" || type == "select-multiple") {
      for (var j = 0; j < element.options.length; j++) {
        if (element.options[j].selected !=
            element.options[j].defaultSelected) {
          return true;
        }
      }
    }
  }
  return false;
}
 
window.onbeforeunload = function(e) {
  e = e || window.event; 
  if (formIsDirty(document.forms["someForm"])) {
    // IE 和 Firefox
    if (e) {
      e.returnValue = "You have unsaved changes.";
    }
    // Safari 浏览器
    return "You have unsaved changes.";
  }
};

　　10  完全禁止使用后退键

　　下面的技巧放在页面中，则可以防止用户点后退键，这在一些情况下是需要的。代码如下：

1
2
3
4
5
6
7
<SCRIPT type="text/javascript">
    window.history.forward();
    function noBack() { window.history.forward(); }
</SCRIPT>
</HEAD>
<BODY onload="noBack();"
    onpageshow="if (event.persisted) noBack();" onunload="">

　　11 删除用户多选框中选择的项目

　　下面提供的技巧，是当用户在下拉框多选项目的时候，当点删除的时候，可以一次删除它们，代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function selectBoxRemove(sourceID) {
   
    //获得listbox的id
    var src = document.getElementById(sourceID);
    
    //循环listbox
    for(var count= src.options.length-1; count >= 0; count--) {
   
         //如果找到要删除的选项，则删除
        if(src.options[count].selected == true) {
    
                try {
                         src.remove(count, null);
                           
                 } catch(error) {
                           
                         src.remove(count);
                }
        }
    }
}

　　12  Listbox中的全选和非全选

　　如果对于指定的listbox，下面的方法可以根据用户的需要，传入true或false,分别代表是全选listbox中的所有项目还是非全选所有项目，代码如下：

1
2
3
4
5
6
function listboxSelectDeselect(listID, isSelect) {
    var listbox = document.getElementById(listID);
    for(var count=0; count < listbox.options.length; count++) {
            listbox.options[count].selected = isSelect;
    }
} 

　　13 在Listbox中项目的上下移动

　　下面的代码，给出了在一个listbox中如何上下移动项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function listbox_move(listID, direction) {
   
    var listbox = document.getElementById(listID);
    var selIndex = listbox.selectedIndex;
   
    if(-1 == selIndex) {
        alert("Please select an option to move.");
        return;
    }
   
    var increment = -1;
    if(direction == 'up')
        increment = -1;
    else
        increment = 1;
   
    if((selIndex + increment) < 0 ||
        (selIndex + increment) > (listbox.options.length-1)) {
        return;
    }
   
    var selValue = listbox.options[selIndex].value;
    var selText = listbox.options[selIndex].text;
    listbox.options[selIndex].value = listbox.options[selIndex + increment].value
    listbox.options[selIndex].text = listbox.options[selIndex + increment].text
   
    listbox.options[selIndex + increment].value = selValue;
    listbox.options[selIndex + increment].text = selText;
   
    listbox.selectedIndex = selIndex + increment;
}
//..
//..
  
listbox_move('countryList', 'up'); //move up the selected option
listbox_move('countryList', 'down'); //move down the selected option

　　14 在两个不同的Listbox中移动项目

　　如果在两个不同的Listbox中，经常需要在左边的一个Listbox中移动项目到另外一个Listbox中去，下面是相关代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function listbox_moveacross(sourceID, destID) {
    var src = document.getElementById(sourceID);
    var dest = document.getElementById(destID);
   
    for(var count=0; count < src.options.length; count++) {
   
        if(src.options[count].selected == true) {
                var option = src.options[count];
   
                var newOption = document.createElement("option");
                newOption.value = option.value;
                newOption.text = option.text;
                newOption.selected = true;
                try {
                         dest.add(newOption, null); //Standard
                         src.remove(count, null);
                 }catch(error) {
                         dest.add(newOption); // IE only
                         src.remove(count);
                 }
                count--;
        }
    }
}
//..
//..
listbox_moveacross('countryList', 'selectedCountryList');

　　15 快速初始化Javscript数组

　　下面的方法，给出了一种快速初始化Javscript数组的方法，代码如下：

1
2
3
var numbers = [];
for(var i=1; numbers.push(i++)<100;);
//numbers = [0,1,2,3 ... 100]

　　使用的是数组的push方法

　　16 截取指定位数的小数

　　如果要截取小数后的指定位数，可以使用toFixed方法，比如：

1
2
var num = 2.443242342;
alert(num.toFixed(2));

　　而使用toPrecision(x)则提供指定位数的精度，这里的x是全部的位数，如：

1
2
num = 500.2349;
result = num.toPrecision(4); //输出500.2

　　17 检查字符串中是否包含其他字符串

　　下面的代码中，可以实现检查某个字符串中是否包含其他字符串。代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
if (!Array.prototype.indexOf) {
    Array.prototype.indexOf = function(obj, start) {
         for (var i = (start || 0), j = this.length; i < j; i++) {
             if (this[i] === obj) { return i; }
         }
         return -1;
    }
}
  
if (!String.prototype.contains) {
    String.prototype.contains = function (arg) {
        return !!~this.indexOf(arg);
    };
}

　　在上面的代码中重写了indexOf方法并定义了contains方法，使用的方法如下：

1
2
3
var hay = "a quick brown fox jumps over lazy dog";
var needle = "jumps";
alert(hay.contains(needle));

　　18  去掉Javscript数组中的重复元素

　　下面的代码可以去掉Javascript数组中的重复元素，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function removeDuplicates(arr) {
    var temp = {};
    for (var i = 0; i < arr.length; i++)
        temp[arr[i]] = true;
  
    var r = [];
    for (var k in temp)
        r.push(k);
    return r;
}
 
//用法
var fruits = ['apple', 'orange', 'peach', 'apple', 'strawberry', 'orange'];
var uniquefruits = removeDuplicates(fruits);
//输出 uniquefruits ['apple', 'orange', 'peach', 'strawberry'];

　　19  去掉String中的多余空格

　　下面的代码会为String增加一个trim()方法，代码如下：

1
2
3
4
5
6
7
8
9
10
if (!String.prototype.trim) {
   String.prototype.trim=function() {
    return this.replace(/^\s+|\s+$/g, '');
   };
}
  
//用法
var str = "  some string    ";
str.trim();
//输出 str = "some string"

　　20 Javascript中的重定向

　　在Javascript中，可以实现重定向，方法如下：

1
window.location.href = <a href="http://viralpatel.net" class="">http://viralpatel.net</a>;

　　21 对URL进行编码

　　有的时候，需要对URL中的传递的进行编码，方法如下：

1
2
var myOtherUrl =
       "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

　　原文链接：http://viralpatel.net/blogs/javascript-tips-tricks/

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：将HTML转成XHTML并清除一些无用的标签和属性

下一篇：20+个可重复使用的jQuery代码片段

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签