4月29日学习 - 《JavaScript》

Date对象
Math
包装类
字符串方法
正则表达
正则语法
DOM
事件
文档的加载

Date对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var d = new Date();
        console.log(d);//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
    //创建指定时间
    var d2 = new Date("12/03/2016 11:00:00");
       var date = d2.getDate();//获取为几日
    var day = d2.getDay();//周几 0-6
    var month = d2.getMonth();//月份 0-11
    var time = d2.getTiem();//时间戳
    time = Date.now();//当前时间戳
    console.log(time);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

Math

Math不是构造函数不用new

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              console.log(Math.PI);
        console.log(Math.abs(1));
        console.log(Math.ceil(1.3));//2 向上取整
        console.log(Math.round(Math.random()*9)+1);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

包装类

在JS中为我们提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象
String() Number() Boolean()
方法和属性才能添加给对象,不能添加绐基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时
浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var num  = new Number(3);
      var str  = new String("Hello");
      //一般不这么用
        num.hello = "abc";//向num中添加一个属性
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

字符串方法

contact 连接字符串
indexOf lastIndexOf检测是否含有指定内容
slice 切片 substring
split()将字符串拆分成数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var str  = "Hello";
         console.log(str[0]);
        var result = str.charAt(0);
        console.log(result);
        result = str.indexOf("l",1);//找第二个
        var str2 = "he,ll,o";
        result = str2.spilt(",");
        result = str.spilt("");//h,e,l,l,o
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

正则表达

比如检查邮件格式
正则表达式用于定义一些字符串的规则

在构造函数中可以传递一个匹配模式作为第二个参数
可以是 i 忽略大小写 g 全局匹配模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
              var reg = new RegExp("正则表达式","匹配模式");
        var reg = new RegExp("a");//这个正则表达式可以来检查一个字符串中是否含有a
        var str = "a";//严格区分大小写
    //检查
    var result = reg.text(str);
    console.log(result);
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

正则语法

使用字面量来创建正则表达式
语法var 变量 = /正则表达式/匹配模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        var reg = /a/i;
        var str = "a";
    var result = reg.text(str);
    console.log(result);
    var reg = /a|b|c/;//或
    var reg = /[ab]/;//或
    //[a-z]任意小写字母
    //[A-Z]任意大写字母
    //[A-z]任意字母
    //是否含有abc 或adc 或aec
    var reg = /a[bde]c/;
    var reg = /[^ab]/;//除了ab
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

字符串和正则相关的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        var str = "1a2b3c";
        var result = str.split("c");//拆分
        var result = str.split(/[A-z]/);//可以传递正则表达式
        var result = str.search("abc");
        var result = str.search(/a[bce]c/);
        var result = str.match(/[A-z]/);
        var result = str.match(/[A-z]/g);//找所有的字母
        var result = str.match(/[a-z]/ig);//match会封装到数组
           var result = str.replace("a","b");//替换内容 新内容
        var result = str.replace(/a/gi,"b");
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

正则表达式语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        var reg = /aaa/;
        console.log(reg.test("abc"));
        var reg = /a{3}/;
      var reg = /(ab){3}/;//ab出现3次
        var reg = /ab{1,3}c/;//b出现1-3次
        var reg = /ab+c/;//至少一个
        var reg = /ab*c/;//0个或多个
        var reg = /ab?c/;//0个或1个
        var reg = /^a/;//表示开头为a吗
        var reg = /a$/;//表示结尾为a吗
        var reg = /^a$/;//如果在正则表达式中同时使用^$则要求字符转必须完全符合正则表达式
      var reg = /^a|a$/;
        //用来检查一个字符串是否是一个合法手机号
        var reg = /^1[3-9][0-9{9}$]/;
        //.表示任意字符 \.转义
         var reg = /\./;
         var reg = new RegEXp("\\.");
    //注意:使用构造函数时,由于它的参数是一个字符串,而\是字符串中转义字符,如果要使用\则需要使用\\来代替
    //接受用户名
        var str = prompt("请输入你的用户名：");
        str =    str.replace(/^\s*|\s*$/g,'');
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

邮件正则

网上常用表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <script type="text/javascript">
        //  \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
    var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
  </script>
    <title>测试</title>
</head>
<body>
</body>
</html>

DOM

JS中通过DOM来对HIML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面

节点:Node——构成HTML文档最基本的单元。

常用节点分为四类

文档节点:整个HM文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
  <button id ="btn">button</button>
  <script type="text/javascript">
        //获取到button对象
     var btn = document.getElementByid("btn");
     console.log(btn);
     btn.innerHTML = "Hello";
  </script>
</body>
</html>

事件

事件就是用户和浏览器之间的交互行为。比如:点击按钮，鼠标移动，关闭窗口。。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
</head>
<body>
  <button id ="btn" onclick="alert(1);">button</button>//不方便维护
  <button id ="btn">button</button>
  <script type="text/javascript">
     var btn = document.getElementByid("btn");
     btn.onclick = function{
       alert(1);
     };
  </script>
</body>
</html>

文档的加载

浏览器在加载一个页面时,是按照自上向下的顺序加载的,读取到一行就运行一行,如果将 script标签写到页面的上边,在代码执行时,页面还没有加载。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script type="text/javascript">
     window.onload = function{
     var btn = document.getElementByid("btn");
     btn.onclick = function{
       alert(1);
         };
     };//统一写到onload中
  </script>
    <title>测试</title>
</head>
<body>
  <button id ="btn">button</button>
</body>
</html>