zoukankan      html  css  js  c++  java
  • javascript,dom

    详情

    JavaScript

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

    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 = /Java(w*)/;
    # ["JavaScript", "Script"]


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

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


    DOM

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

    补充:

    绑定事件的方法:

    a. 直接标签绑定 onclick='xxx()'

    b.先获取DOM对象,然后进行绑定

    document.getElementById('Id').onclick

    this, 当前触发事件的标签

    c. 第三种绑定方式

     1 <style>
     2         .c1{
     3             background-color: red;
     4             height: 80px;
     5              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              180px;
     9         }
    10         .c2{
    11             background-color: pink;
    12             height: 80px;
    13              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>
    下拉菜单,全选,反选,取消
  • 相关阅读:
    ubuntu下安装maven
    159.Longest Substring with At Most Two Distinct Characters
    156.Binary Tree Upside Down
    155.Min Stack
    154.Find Minimum in Rotated Sorted Array II
    153.Find Minimum in Rotated Sorted Array
    152.Maximum Product Subarray
    151.Reverse Words in a String
    150.Evaluate Reverse Polish Notation
    149.Max Points on a Line
  • 原文地址:https://www.cnblogs.com/nikitapp/p/7453761.html
Copyright © 2011-2022 走看看