javascript,dom

時間 2019-12-07

原文原文鏈接

詳情html

JavaScriptide

http://www.cnblogs.com/wupeiqi/articles/5602773.htmlthis

JS正則表達

test - 判斷字符串是否符合規定的正則
rep = /\d+/;
rep.test("asdfoiklfasdf89asdfasdf")
# true

rep = /^\d+$/;
rep.test("asdfoiklfasdf89asdfasdf")
# true

exec - 獲取匹配的數據
rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ["67"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/;
# ["JavaScript", "Script"]

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava\w*\b/g;
# ["JavaScript"]
# ["Java"]
# ["JavaBeans"]
# null

JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/g;
# ["JavaScript",'Script']
# ["Java", ""]
# ["JavaBeans", "Beans"]
# null

spa

DOM

http://www.cnblogs.com/wupeiqi/articles/5643298.htmlcode

補充：htm

綁定事件的方法：對象

a. 直接標籤綁定 onclick='xxx()'blog

b.先獲取DOM對象，而後進行綁定事件

document.getElementById('Id').onclickip

this, 當前觸發事件的標籤

c. 第三種綁定方式

 1 <style>
 2         .c1{
 3             background-color: red;
 4             height: 80px;
 5             width: 50px;
 6         }
 7     </style>
 8 </head>
 9 <body>
10     <div class="c1">aaaaa</div>
11 
12     <script>
13         var v = document.getElementsByClassName("c1")[0];
14         //同時綁定兩個方法
15         v.addEventListener("click",function(){console.log('aa')},true);
16         v.addEventListener("click",function(){console.log('bb')},true);
17 
18
19     </script>
20 
21 </body>

 1 <head>
 2     <meta charset="UTF-8">
 3     <title>Title</title>
 4     <style>
 5         .c1{
 6             background-color: red;
 7             height: 200px;
 8             width: 180px;
 9         }
10         .c2{
11             background-color: pink;
12             height: 80px;
13             width: 50px;
14         }
15     </style>
16 </head>
17 <body>
18     <div class="c1">
19         <div class="c2"></div>
20     </div>
21 
22 </body>
23     <script>
24         var a = document.getElementsByClassName('c1')[0];
25         var b = document.getElementsByClassName('c2')[0];
26 
27         a.addEventListener('click',function(){console.log('aa')},true);
28         b.addEventListener('click',function(){console.log('bb')},true);
29 
30 //       true 表示捕捉模型，aa 先出現，false表示冒泡模型，bb先出現
31     </script>

View Code

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6 </head>
  7     <style>
  8         .hiden{
  9             display: none;
 10         }
 11         .head{
 12             background-color: blue;
 13             width: 300px;
 14             text-align: center;
 15         }
 16         .text{
 17             text-align: center;
 18             width: 300px;
 19         }
 20         th{
 21             width: 180px;
 22             height: 30px;
 23             text-align: center;
 24 
 25         }
 26         td{
 27             width: 180px;
 28             height: 30px;
 29             text-align: center;
 30         }
 31 
 32     </style>
 33 <body>
 34     <div style="float: left">
 35         <div id="i1" class="head" onclick="ShowMeue('i1')">標題1</div>
 36         <div class="text hiden">
 37             <div>內容1</div>
 38             <div>內容1</div>
 39             <div>內容1</div>
 40         </div>
 41         <div id="i2" class="head" onclick="ShowMeue('i2')">標題2</div>
 42         <div class="text hiden">
 43             <div>內容2</div>
 44             <div>內容2</div>
 45             <div>內容2</div>
 46         </div>
 47         <div id="i3" class="head" onclick="ShowMeue('i3')">標題3</div>
 48         <div class="text hiden">
 49             <div>內容3</div>
 50             <div>內容3</div>
 51             <div>內容3</div>
 52         </div>
 53     </div>
 54     <div style="float: right">
 55         <table id="il">
 56             <thead>
 57                 <tr>
 58                     <th>1</th>
 59                     <th>2</th>
 60                     <th>3</th>
 61                     <th>
 62                         <input type="button" value="全選" onclick="ChooseAll()">
 63                         <input type="button" value="取消" onclick="CancleAll()">
 64                         <input type="button" value="反選" onclick="ReverseAll()">
 65                     </th>
 66 
 67                 </tr>
 68             </thead>
 69             <tbody>
 70                 <tr>
 71                     <td>aaaa</td>
 72                     <td>aaaa</td>
 73                     <td>aaaa</td>
 74                     <td>
 75                         <input type="checkbox">
 76                     </td>
 77                 </tr>
 78                 <tr>
 79                     <td>bbbb</td>
 80                     <td>bbbb</td>
 81                     <td>bbbb</td>
 82                     <td>
 83                         <input type="checkbox">
 84                     </td>
 85                 <tr>
 86                     <td>cccc</td>
 87                     <td>cccc</td>
 88                     <td>cccc</td>
 89                     <td>
 90                         <input type="checkbox">
 91                     </td>
 92                 </tr>
 93             </tbody>
 94     </div>
 95     <script>
 96         function ChooseAll(){
 97             var a = document.getElementById('il');
 98             var b = a.children[1].children;
 99             for (var i = 0;i< b.length;i++){
100                 var list = b[i]
101                 list.children[3].children[0].checked = true
102             }
103         }
104         function CancleAll(){
105             var a = document.getElementById('il');
106             var b =a.children[1].children;
107             for (var i = 0;i< b.length;i++){
108                 var list = b[i]
109                 list.children[3].children[0].checked = false
110             }
111         }
112         function ReverseAll(){
113             var a = document.getElementById('il');
114             var b = a.children[1].children;
115             for (var i = 0;i< b.length;i++){
116                 var list = b[i]
117                 if (list.children[3].children[0].checked){
118                     list.children[3].children[0].checked = false
119                 }else {list.children[3].children[0].checked = true
120                 }
121             }
122         }
123         function ShowMeue(a){
124             var b = document.getElementById(a);
125             var c = b.parentElement.parentElement.children[0].children;
126             for (i=1;i< c.length;i=i+2){
127                 c[i].classList.add("hiden");
128             b.nextElementSibling.classList.remove('hiden')
129             }
130         }
131     </script>
132 
133 </body>
134 </html>

下拉菜單，全選，反選，取消

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。