我最喜欢的一些 JavaScript 提示和技巧教程

已发表: 2013-06-23

Crunchify JavaScript 技巧

演示

1.如何检查字符串是否包含另一个子字符串

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
       < h2 >
             1. How to Check if String Contains another Substring ? < br >
         < / h2 >
         String 1 : < input id = "foo" type = "text" value = "eBay Google Paypal Yahoo" >
         < br > String 2 : < input id = "bar" type = "text" value = "Google" >
         < br > < br >
         < button onclick = "checkstring()" > Click to check if String 1
             contains String 2 < / button >
         <script>
             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 ) ;
                 } ;
             }
 
             function checkstring ( ) {
                 var foo = document . getElementById ( "foo" ) . value ;
                 var bar = document . getElementById ( "bar" ) . value ;
 
                 alert ( foo . contains ( bar ) ) ;
             }
         </script>
 
         < br > < br >
         < h2 > 2. How to Remove Array Element by Value ? < / h2 >
         < br > Array = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ; < br >
         Let ' s remove element "Google" < br > < br >
         < button onclick = "javsacript:test()" > Remove element < / button >
 
         <script>
             function removeByValue ( arr , val ) {
                 for ( var i = 0 ; i < arr . length ; i ++ ) {
                     if ( arr [ i ] == val ) {
                         arr . splice ( i , 1 ) ;
                         break ;
                     }
                 }
             }
             function test ( ) {
                 var somearray = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
                 var old = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
 
                 removeByValue ( somearray , "Google" ) ;
 
                 alert ( "Array before removing elements: " + old
                        + "\n\nArray after removing elements: " + somearray ) ;
             }
         </script>

2. 如何按值删除数组元素？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
       < h2 > 2. How to Remove Array Element by Value ? < / h2 >
         < br > Array = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ; < br >
         Let ' s remove element "Google" < br > < br >
         < button onclick = "javsacript:test()" > Remove element < / button >
 
         <script>
             function removeByValue ( arr , val ) {
                 for ( var i = 0 ; i < arr . length ; i ++ ) {
                     if ( arr [ i ] == val ) {
                         arr . splice ( i , 1 ) ;
                         break ;
                     }
                 }
             }
             function test ( ) {
                 var somearray = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
                 var old = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
 
                 removeByValue ( somearray , "Google" ) ;
 
                 alert ( "Array before removing elements: " + old
                        + "\n\nArray after removing elements: " + somearray ) ;
             }
         </script>

3. 如何将列表框的值向左/向右移动？

其他必读：

  • 如何在 Spring Web MVC (.jsp) 中使用 AJAX、jQuery - 示例
  • JavaScript 验证表单提交事件中的电子邮件和密码字段

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
       < h2 >
             3. How to Move Listbox Values to Left / Right ? < br >
         < / h2 >
         < table >
             < tbody >
                 < tr >
                     < td > < select id = "sourceSelect" size = "5" multiple = "" >
                             < option value = "a" > eBay < / option >
                             < option value = "b" > Google < / option >
                             < option value = "c" > Paypal < / option >
                             < option value = "d" > Yahoo < / option >
                     < / select > < / td >
                     < td >
                         < button onclick = "listboxMoveacross('sourceSelect', 'destSelect');" > &gt; &gt; < / button >
                         < br >
                         < button onclick = "listboxMoveacross('destSelect', 'sourceSelect');" > &lt; &lt; < / button >
                     < / td >
                     < td > < select id = "destSelect" size = "5" multiple = "" >
                             < option value = "a" > Microsoft < / option >
                             < option value = "b" > Facebook < / option >
                             < option value = "c" > Twitter < / option >
                             < option value = "d" > Pinterest < / option >
                     < / select > < / td >
                 < / tr >
             < / tbody >
         < / table >
 
         <script>
             function listboxMoveacross ( 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 -- ;
                     }
                 }
             }
         </script>

4. 如何从数组中删除重复元素？

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
       < h2 >
             4. How to Remove Duplicates Elements from Array ? < br >
         < / h2 >
         < pre >      var companies = [ "eBay" , "Google" , "Paypal" , "Yahoo" , "Google" ] ;
< / pre >
         Note 'Google' is duplicate in companies array . Click to remove
         duplicate elements from companies array : < br > < br >
         < button onclick = "check()" > Remove Duplicate < / button >
         <script>
             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 ;
             }
 
             function check ( ) {
                 var fruits = [ "eBay" , "Google" , "Paypal" , "Yahoo" , "Google" ] ;
                 var uniquefruits = removeDuplicates ( fruits ) ;
                 alert ( uniquefruits ) ;
             }
         </script>

5. 如何按索引删除数组元素？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
       < h2 > 5. How to Remove Array Element by Index ? < / h2 >
         < br > Array = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ; < br >
         Let ' s remove 2nd element , i . e . "Google" < br > < br >
         < button onclick = "javsacript:testRemove()" > Remove element < / button >
 
         <script>
             function removeByIndex ( arr , index ) {
                 arr . splice ( index , 1 ) ;
             }
             function testRemove ( ) {
                 var test = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
                 var old = [ "eBay" , "Google" , "Paypal" , "Yahoo" ] ;
 
                 removeByIndex ( test , 2 ) ;
 
                 alert ( "Array before removing elements: " + old
                        + "\n\nArray after removing elements: " + test ) ;
             }
         </script>

您可能对所有 JSON、AJAX、jQuery、Java 教程的列表感兴趣。