天天看点
返回

【干货分享】JavaScript学习笔记分享

javascript学习~编程小哥令狐

1.javascript的变量类型：

  • 数值类型：number
  • 字符串类型：string
  • 对象类型：object
  • 布尔类型：boolean
  • 函数类型：function

2.JavaScript里的特殊值：

  • undefined：未定义，所有js变量未赋初始值的时候，默认都是undefined
  • null：空值
  • NAN：全称是Not a number 非数字，非数值。

3.JavaScript变量定义及其初始化 

var a;
    a=10;

      // var i;
      // alert(i);//undefined
       //i=12;
      // alert(i);//12
        //alert(typeof (i));
        var a=12;
        var b="abc";
        alert(a*b);//NAN,非数值

4.关系（比较）运算

  • 等于： == 数字比较
  • 全等于： === 数字比较+数据类型比较 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var a=123;
        var b="123";

        alert(a==b);//数字面比较，为true
        alert(a===b);//数据类型比较，为false


    </script>
</head>
<body>

</body>
</html>

5.逻辑运算

  • 与运算【且运算】： &&
  • 或运算： ||
  • 非运算【取反运算】：！
  • 0、null、undefined、“空字符串”都认为是false 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    // var a=0;
    //   if(a){
    //     alert("0为真");
    // }else{
    //     alert("0为假");
    // }

    // var b=null;
    // if(b){
    //     alert("null为真");
    // }else{
    //     alert("null为假");
    // }

    // var c=undefined;
    // if(c){
    //     alert("undefined为真");
    // }else{
    //     alert("undefined为假");
    // }

    var d="";
    if(d){
        alert("空字符串为真");
    }else{
        alert("空字符串为假");
    }

    </script>
</head>
<body>

</body>
</html>

6.数组

  • 数组的定义： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        var arr=[];//定义一个空数组
       // alert(arr.length);
        arr[0]=12;
       //  alert(arr[0]);
       //
         arr[2]="abc";
       //  alert(arr.length);
        
        //数组的遍历
        for (var i=0;i<arr.length;i++){
            alert(arr[i]);
        }

    </script>
</head>
<body>

</body>
</html>

7.函数

7.1函数的定义方法（一）

  • ​

    ​function​

     ​ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    //定义一个无惨函数
    //     function fun(){
    //         alert("无参函数被调用");
    //     }
    // //函数调用
    //     fun();

        function fun2(a,b) {
            alert("有参函数的调用=》a="+a+"b="+b);
        }
        fun2(1,2)

          //定义带有返回值的函数
        function sum(num1,num2){
            return (num1+num2);
        }
        alert(sum(1,2));
    </script>
</head>
<body>

</body>
</html>

7.2函数定义方法（二） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //无参函数
       var fun=function () {
           alert("无参函数");
       }
       fun();
        
       //有参函数
      var fun2=function(a,b){
           alert("有参函数a="+a+",b="+b);
       }
       fun2(1,2);

    //有参函数带返回值
     var sum=function(num1,num2){
            return num1+num2;
        }
        alert(sum(1,2));
    </script>

</head>
<body>

</body>
</html>

7.3隐形参数arguments 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
      function fun(){
          //alert(arguments.length);//查看参数的个数
          /*
          * 这个功能类似于数组的功能，可以通过下标查看
          * */
          alert(arguments[0]);
          alert(arguments[1]);
          alert(arguments[2]);
          alert("无惨函数fun");
        
          for(var i=0;i<arguments.length;i++)
              alert(arguments[i]);
      }
      fun(1,"ab",true);

  //需求：编写一个函数，用于计算所有参数相加的和并返回
        function Total() {
            var sum=0;
            for(var i=0;i<arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
        }
        alert(Total(1,2,3,4,5,6,7,8,9));


    </script>
</head>
<body>

</body>
</html>

8.Js中的自定义对象

8.1Object形式的自定义对象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">

        // 对象的定义：
        //     var 变量名 = new Object();   // 对象实例（空对象）
        //     变量名.属性名 = 值;       // 定义一个属性
        //     变量名.函数名 = function(){}  // 定义一个函数
        var obj=new Object();
        obj.name="令狐荣豪";
        obj.age=18;
        obj.fun=function(){
            alert("姓名是："+obj.name+"年龄是："+obj.age);
            alert("姓名是："+this.name+"年龄是："+this.age);
        }
        // 对象的访问：
        //     变量名.属性 / 函数名();
       // alert( obj.age );
        obj.fun();


    </script>
</head>
<body>

</body>
</html>

8.2花括号形式的自定义对象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 对象的定义：
        // var 变量名 = {          // 空对象
        //     属性名：值,           // 定义一个属性
        //     属性名：值,           // 定义一个属性
        //     函数名：function(){} // 定义一个函数
        // };
        var obj = {
            name:"国哥",
            age:18,
                fun : function () {
                alert("姓名：" + this.name + " , 年龄：" + this.age);
            }
        };
        var oobj={
            name:"令狐",
            age:18,
            fun:function () {
                alert("姓名："+oobj.name+"年龄："+oobj.age);
            }
        }

        // 对象的访问：
        //     变量名.属性 / 函数名();
        alert(oobj.name);
        oobj.fun();
    </script>
</head>
<body>

</body>
</html>

9.javascript中的事件

  • 事件是电脑输入设备与页面进行交互的响应，我们称为事件。

9.1常用的事件

  • ​

    ​onload​

     ​加载完成事件【页面加载完成后，常用作js代码初始化操作】
  • ​

    ​onclick​

     ​单击事件【常用于按钮的点击响应操作】
  • ​

    ​onblur​

     ​失去焦点事件【常用于输入框失去焦点后验证其输入内容是否会丢失】
  • ​

    ​onchange​

     ​内容发生改变事件【常用于下拉列表和输入框内容发生改变后的操作】
  • ​

    ​onsubmit​

     ​表单提交事件【常用于表单提交前，验证所有表单项是否合法】

9.2事件的注册(绑定)

  • 事件的注册(绑定)就是告诉浏览器，当事件
  • 响应后要执行哪些操作代码。
  • 静态注册事件：通过html标签的事件属性直接赋予事件响应的代码，这种方式我们叫静态注册事件。
  • 动态注册事件：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function（）{}这种形式赋予事件响应后的代码，叫动态注册。

动态注册基本步骤：

1.获取标签对象

2.标签对象.事件名

9.21​

​onload​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // onload事件的方法
        function onloadFun(){
            alert("静态注册onload事件")
        }
        // onload事件动态注册。是固定写法
        window.onload=function () {
            alert("动态注册onload事件")
        }

    </script>
</head>
<!--静态注册onload事件
        onload事件是浏览器解析完页面之后就会自动触发的事件
       <body onload="onloadFun();">
-->
<body onload="onloadFun()">

</body>
</html>

9.22​

​onclick​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
      function onclickFun() {
          alert("静态注册事件");
      }

        //动态注册事件
        window.onload=function () {
            //1.获取标签对象
            /*
            * 1.document:表示当前整个页面，是JavaScript语言提供的一个对象(文档)
            * 2.get：获取
            * 3.Element：元素【标签】
            * 4.By：通过
            * 5.Id：id属性
            * getElementById:通过id属性获取标签元素，对象
            * */
             var btnObj=document.getElementById("btn1");
             //btnObj就是一个对象

        //    2.通过标签对象.事件名=function(){}
                btnObj.onclick=function () {
                    alert("动态注册事件");
                }
        }

    </script>
</head>
<body>
<!--静态注册事件-->
    <button onclick="onclickFun()">按钮1</button>

<!--动态注册事件-->
    <button id="btn1">按钮2</button>
</body>
</html>

9.23 ​

​onblur​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //静态注册事件
        function onblurFun() {
            //console是控制台对象，是JavaScript语言提供的，专门用来x向浏览器控制台打印输出的，用于测试使用
            //log是打印的方法
            console.log("静态失去焦点事件");
        }

        //动态注册onblur事件
        window.onload=function () {
            //1.获取标签对象
            var passwordObj=document.getElementById("password");
           
            //2.通过标签对象.事件名=function(){};
             passwordObj.onblur=function () {
                alert("动态焦点事件");
            }
        }
    </script>
</head>
<body>
    用户名：<input type="text" onblur="onblurFun()"><br>
    密码：<input type="text" id="password"><br>
</body>
</html>

9.24 ​

​onchange​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了");
        }

        window.onload=function () {
            var onchangeObj=document.getElementById("onchangeFun");
            onchangeObj.onchange=function () {
                alert("女神已经改变了动态");
            }
        }


    </script>
</head>
<body>
  请选择你心中的女神：
<!--  静态注册change事件-->
<!--   <select onchange="onchangeFun()">-->
    <select id="onchangeFun">
        <option>---女神---</option>
        <option>芳芳</option>
        <option>佳佳</option>
        <option>娘娘</option>
    </select>


</body>
</html>

9.24 ​

​onsubmit​

 ​事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >//静态注册表单提交事件
        function onsubmitFun() {
            //要验证所有表单是否合法，如果有一个不合法就阻止提交表单
            alert("静态注册表单提交事件------发现不合法");

            return false;
        }

        window.onload=function () {
            var submitFunObj=document.getElementById("submitFun");
            submitFunObj.onsubmit=function () {
                alert("静态注册表单提交事件------发现不合法");
                return false;
            }
        }</script>
</head>
<body>
<!--return false 可以阻止表单提交-->
   <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
       <input type="submit" value="静态注册">
   </form>

<form action="http://localhost:8080" method="get" id="submitFun">
    <input type="submit" value="动态注册">
</form>

</body>
</html>

10.Dom模型

  • ​

    ​DOm​

    ​全称是 Document Object Model文档对象模型

    大白话就是把文档中的标签对象，属性，文本，转换成对象来管理。

10.1Document对象中的方法介绍

  • ​

    ​document.getElementById(elementId)​

     ​

通过标签的id属性查找标签的dom对象，elementId是标签的id属性值

  • ​

    ​doucument.getElementsByName(elementName)​

     ​通过标签的name属性查找dom对象，elementName标签的name属性值
  • ​

    ​document.getElementsByTagName(tagname)​

     ​
  • ​

    ​document.createElement(tagname)​

     ​方法，通过给定的标签名创建一个标签对象，tagname是创建的标签名 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >/*
        * 需求：当用户点击了校验按钮，要获取输出框里的内容，然后验证是否合法
        * 验证的规则是，必须有字母数字下划线组成，并且长度在5-12位
        * */
        function onclickFun() {
            //当我们需要操作一个标签的饿时候，一定要先获取这个标签对象，
            var usernameObj=document.getElementById("username");
            // alert(usernameObj);
            //[object HTMLInputElement]他就是dom对象
            //dom对象就是标签，保存了标签的所有信息，所以你可以访问其属性值
           //alert(usernameObj.value);
            //验证字符串合不合法，需要利用正则表达式的规则
            var usernameText=usernameObj.value;

            var patt=/^\w{5,12}$/;//正则表达式的规则
            /*
            * test()方法用于测试某个字符串，是不是匹配的规则
            * 匹配就返回true，不匹配就返回false
            * */
            if(patt.test(usernameText)){
                alert("用户名合法");
            }else {
                alert("用户名不合法");
            }

        }</script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg">
    <button onclick="onclickFun()">校验</button>
</body>
</html>
  • 正则表达式：

10.2 检测字符串中是否包含字母“e”------正则表达式对象 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//表示要求字符串中，是否包含字母e
        //var patt=new RegExp("e");
        var patt=/e/;//这个也是正则表达式对象

        var str="abcd";
        alert(patt.test(str));//不包含e所以打印出false</script>
</head>
<body>

</body>
</html>

10.3常用检测 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//表示要求字符串中，是否包含字母a或b或c
       var patt=/[abc]/;
        //表示要求字符串中，是否包含字母a到z
       var patt=/[a-z]/;
        //表示要求字符串中，是否包含字母A到Z
       var patt=/[A-Z]/;
        //表示要求字符串中，是否包含数字0到9
       var patt=/[0-9]/;
        
        ///表示字符串是否包含字母数字下划线
       var patt=/\w/;
        var str="abcd";
        alert(patt.test(str));</script>
</head>
<body>

</body>
</html>

11.JavaScript两种常见的验证提示效果—getElementById方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" >/*
        * 需求：当用户点击了校验按钮，要获取输出框里的内容，然后验证是否合法
        * 验证的规则是，必须有字母数字下划线组成，并且长度在5-12位
        * */
        function onclickFun() {
            //当我们需要操作一个标签的饿时候，一定要先获取这个标签对象，
            var usernameObj=document.getElementById("username");
            // alert(usernameObj);
            //[object HTMLInputElement]他就是dom对象
            //dom对象就是标签，保存了标签的所有信息，所以你可以访问其属性值
           //alert(usernameObj.value);
            //验证字符串合不合法，需要利用正则表达式的规则
            var usernameText=usernameObj.value;

            var patt=/^\w{5,12}$/;//正则表达式的规则
            /*
            * test()方法用于测试某个字符串，是不是匹配的规则
            * 匹配就返回true，不匹配就返回false
            * */
            var usernameSpanObj=document.getElementById("usernameSpan");
            usernameSpanObj.innerHTML="令狐你好";
            if(patt.test(usernameText)){
                alert("");
                usernameSpanObj.innerHTML="用户名合法";
            }else {
                usernameSpanObj.innerHTML="用户名不合法";
                alert("");
            }

        }</script>
</head>
<body>
    用户名：<input type="text" id="username" value="wzg">
    <span id="usernameSpan"style="color: red;"></span>
    <button onclick="onclickFun()">校验</button>
</body>
</html>

11.1getElementsByName()方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">//全选
        function checkAll() {
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每个元素都是dom对象
            var hobbys=document.getElementsByName("hobby");
            //checked表示复选框选中的状态，如果选中是true，不逊中是false
            //这个属性可读可写
            //
           // hobbys[2].checked=true;
            for (var i=0;i<hobbys.length;i++){
                hobbys[i].checked=true;
            }
        }

        //全不选
        function checkNo() {
            //让所有复选框都选中
            //document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
            //这个集合的操作跟数组一样
            //集合中每个元素都是dom对象
            var hobbys=document.getElementsByName("hobby");
            //checked表示复选框选中的状态，如果选中是true，不逊中是false
            //这个属性可读可写
            //
            // hobbys[2].checked=true;
            for (var i=0;i<hobbys.length;i++){
                hobbys[i].checked=false;
            }
        }
        //反选
        function checkReverse() {
            var hobbys=document.getElementsByName("hobby");
            for (var i=0;i<hobbys.length;i++){
                if (hobbys[i].checked===false)
                    hobbys[i].checked=true;
                else
                    hobbys[i].checked=false;
            }
        }</script>
</head>
<body>
    兴趣爱好：
    <input type="checkbox" name="hobby" value="cpp" checked="checked">C++
    <input type="checkbox" name="hobby" value="java">java
    <input type="checkbox" name="hobby" value="js">javascript
<br>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkNo()">全不选</button>
    <button onclick="checkReverse()">反选</button>
</body>
</html>

11.2getElementsByTagName()方法 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">


        // 全选
        function checkAll() {
            //document.getElementsByTagName("input")是按照指定标签名来进行查询并返回集合
            //这个集合的操作和数组一样
            //集合是dom对象
            //集合中元素顺序是他们在html页面从上到下的顺序
            var inputs=document.getElementsByTagName("input");
            for (var i=0;i<inputs.length;i++){
                inputs[i].checked=true
            }
        }
    </script>
</head>
<body>

    <!--as -->
    兴趣爱好：
    <input type="checkbox" value="cpp" checked="checked">C++
    <input type="checkbox" value="java">Java
    <input type="checkbox" value="js">JavaScript
    <br/>
    <button id="btn01" onclick="checkAll()">全选</button>

</body>
</html>

12.节点的常用属性和方法 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">.onload = function(){//页面加载之后的函数
    //1.查找#bj节点
    document.getElementById("btn01").onclick=function () {
      var bjObj=document.getElementById("bj");
      alert(bjObj.innerHTML);
    };
    //2.查找所有li节点
    var btn02Ele = document.getElementById("btn02");
    btn02Ele.onclick = function(){
      var lis=document.getElementById("li");
      alert(lis.length);
    };
    //3.查找name=gender的所有节点
    var btn03Ele = document.getElementById("btn03");
    btn03Ele.onclick = function(){

    };
    //4.查找#city下所有li节点
    var btn04Ele = document.getElementById("btn04");
    btn04Ele.onclick = function(){

    };
    //5.返回#city的所有子节点
    var btn05Ele = document.getElementById("btn05");
    btn05Ele.onclick = function(){

    };
    //6.返回#phone的第一个子节点
    var btn06Ele = document.getElementById("btn06");
    btn06Ele.onclick = function(){

    };
    //7.返回#bj的父节点
    var btn07Ele = document.getElementById("btn07");
    btn07Ele.onclick = function(){

    };
    //8.返回#android的前一个兄弟节点
    var btn08Ele = document.getElementById("btn08");
    btn08Ele.onclick = function(){

    };
    //9.读取#username的value属性值
    var btn09Ele = document.getElementById("btn09");
    btn09Ele.onclick = function(){

    };
    //10.设置#username的value属性值
    var btn10Ele = document.getElementById("btn10");
    btn10Ele.onclick = function(){

    };
    //11.返回#bj的文本值
    var btn11Ele = document.getElementById("btn11");
    btn11Ele.onclick = function(){

    };
  };</script>
</head>
<body>
<div id="total">
  <div class="inner">
    <p>
      你喜欢哪个城市?
    </p>

    <ul id="city">
      <li id="bj">北京</li>
      <li>上海</li>
      <li>东京</li>
      <li>首尔</li>
    </ul>

    <br>
    <br>

    <p>
      你喜欢哪款单机游戏?
    </p>

    <ul id="game">
      <li id="rl">红警</li>
      <li>实况</li>
      <li>极品飞车</li>
      <li>魔兽</li>
    </ul>

    <br />
    <br />

    <p>
      你手机的操作系统是?
    </p>

    <ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
  </div>

  <div class="inner">
    gender:
    <input type="radio" name="gender" value="male"/>
    Male
    <input type="radio" name="gender" value="female"/>
    Female
    <br>
    <br>
    name:
    <input type="text" name="name" id="username" value="abcde"/>
  </div>
</div>
<div id="btnList">
  <div><button id="btn01">查找#bj节点</button></div>
  <div><button id="btn02">查找所有li节点</button></div>
  <div><button id="btn03">查找name=gender的所有节点</button></div>
  <div><button id="btn04">查找#city下所有li节点</button></div>
  <div><button id="btn05">返回#city的所有子节点</button></div>
  <div><button id="btn06">返回#phone的第一个子节点</button></div>
  <div><button id="btn07">返回#bj的父节点</button></div>
  <div><button id="btn08">返回#android的前一个兄弟节点</button></div>
  <div><button id="btn09">返回#username的value属性值</button></div>
  <div><button id="btn10">设置#username的value属性值</button></div>
  <div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
javascript html 动态注册
上一篇: 【译】9个强大的JavaScript技巧
下一篇: JavaScript|语法

继续阅读