JS笔记

于 2021-01-27 20:51:25 发布
阅读量89 收藏
点赞数
文章标签： js javascript java css python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50744143/article/details/113271743
版权

一，JavaScript

1.JS基础

<script type="text/javascript" >
    //所有变量都可以作为布尔类型使用
    // var a=12
    // var b="bc"
    // //typeof()是一个函数  查看变量类型
    // alert(a*b)//NAN
    
    // //  ==  只做两个数的比较
    // // ===  除了做两个数的数值比较  还做两个变量的数值类型比较
    // var a=12
    // var b="12"
    // //typeof()是一个函数  查看数值类型
    // alert(a==b)//ture
    // alert(a===b)//false

    //在boolean判断时  只有   0  null  undefined  “”  为假
    // var a=0
    // if(a){
    //     alert("0为真")
    // }
    // else{
    //     alert("0为假")
    // }//为假
    // var a=null
    // if(a){
    //     alert("null为真")
    // }
    // else{
    //     alert("null为假")
    // }//为假
    // var a=undefined
    // if(a){
    //     alert("undefined为真")
    // }
    // else{
    //     alert("undefined为假")
    // }//为假
    // var a=""
    // if(a){
    //     alert("空串为真")
    // }
    // else{
    //     alert("空串为假")
    // }//为假

    /*&&且运算
    有两种情况：
    第一种：当表达式全为真时，返回最后一个表达式的值
    第二种：当表达式有一个为假时，返回第一个为假的表达式的值
    */
    // var a="abc";
    // var b=true;
    // var c=false;
    // var d=null;
    //
    // alert(a&&d);

    /*  数组的定义*/
    var a=[]//定义一个空数组
    a[2]=3
    //此时长度为3  数组内的值分别是  undefined  undefined  3
    //数组的遍历
    for(var i=0;i<a.length;i++){
        alert(a[i])
    }

</script>

2.函数的定义及使用

第一种定义方式

<script type="text/javascript">
    // function fun() {
    //     alert("调用了无参函数")
    // }
    // fun()


    // function fun1(a,b){
    //     alert("有参函数被调用了a="+a+"b="+b)
    // }
    // fun1(52,6)
    function sum(a,b){
        var result=a*b
        return result
    }
    alert(sum(5,6))
</script>

第二种定义方式

 <script type="text/javascript">
 var fun=function (){
        alert("调用无参函数")
    }
    // fun()
    var fun1=function (a,b) {
        alert("有参函数被调用了a="+a+"b="+b)
    }
    fun1(1,2)
    var sum=function (sum1,sum2) {
        var result=sum1*sum2
        return result
    }
    alert(sum(10,9))
</script>

函数不可以重载

//函数不可以重载
function fun(){
    alert("无参函数()")
}
function fun(a,b){
    alert("有参函数()")
}
alert(fun())//有参函数

函数隐形参数

//隐形函数  arguments
function fun(){
    //arguments   可以当做数组来用
    alert(arguments.length)//显示参数个数
    alert(arguments[0])
    alert(arguments[1])
}
fun(1,2,"aaa")//3

 //需求   要求编写一个函数，求所有函数的和
        function sum(){
            var result=0;
            for(var i=0;i<arguments.length;i++){
                if(typeof(arguments[i])=="number"){
                    result+=arguments[i];
                }
            }
            return result;

        }
        alert(sum(1,2,"aaa",5,8,9,4))//3    遇到不是number类型的时候会自动拼接

3.JS中的自定义对象

Object形式

对象的定义：

​ var 变量名=new Object(); //对象实例(空对象)

​ 变量名.属性名=值； //定义一个属性

​ 变量名.函数名=function(){} //定义一个函数

对象的访问：

变量名.属性/函数()

//   对象的定义：
//     var 变量名=new Object();  //对象实例(空对象)
//     变量名.属性名=值；        //定义一个属性
//     变量名.函数名=function(){}   //定义一个函数

var obj=new Object();
obj.name="yh";
obj.age=20;
obj.sex="男";
obj.fun=function (){
    alert("姓名"+this.name+",年龄"+this.age)
}
//   对象的访问：
// 变量名.属性（函数）
alert(obj.name);//yh
obj.fun();//姓名yh，年龄20

花括号形式

对象的定义

var 变量={ //定义一个空对象

​ 属性：值, //定义一个属性

​ 属性：值, //定义一个属性值

​ 函数名：function(){} //定义一个函数

}；

对象的访问

变量名.属性/函数()

var obj={};

//花括号形式
  //对象的定义

  var obj={
                       //空对象
      name:s="yh",     //定义一个属性
      age: a=12 ,      //定义一个属性
      fun:function (){   //定义一个函数
          alert("姓名"+this.name+",年龄"+this.age)
      }

  };
  //对象的访问
 // alert(obj.name;
  obj.fun();

4.JS中的事件

常用的事件

onload 加载完成事件 页面加载完成后 常用于做页面js代码初始化操作

onclick 单击事件 常用于按钮点击操作

onblur 失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法

onchange 内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作

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

事件的注册（绑定）

静态注册事件：指通过html标签属性直接赋予时间响应后的代码

动态注册事件：先通过js代码得到标签的dom对象，然后通过dom对象.事件名=function（）{}这种形式赋予事件响应后的代码，叫做动态注册

动态注册的基本步骤：

​ 1.获取标签对象

​ 2.标签对象.事件名=function（）{}

onload事件

  <script type="text/javascript">
        //onload 方法
        function onloadFun() {
            alert('静态注册事件')
        }
        //onload动态注册  是固定形式
        window.onload=function (){
            alert("onload动态注册事件")
        }
    </script>
</head>
<!--静态注册事件
  onload事件是浏览器解析完页面后就会自动触发的事件
      <body onload="onloadFun()">
-->
<body>

</body>

onclick事件

<script type="text/javascript">
        function onclickFun(){
            alert("静态注册onclick事件");
        }
        //动态注册
        window.onload=function (){
            //1.获取标签对象
            //getElementById   js中的一个方法   通过id属性回去标签对象
            var btnObj=document.getElementById("btn01");
            //2.标签对象.事件名=function（）{}
            btnObj.onclick=function (){
                alert("动态注册事件")
            }
        }
    </script>
</head>
<body>
  <button onclick="onclickFun()">按钮1</button>
  <button id="btn01">按钮2</button>
</body>

onblur事件

 <script type="text/javascript">
         //静态注册失去焦点事件
         function onblurFun(){
             //console是控制台对象，是有JavaScript语言提供，专门用来向浏览器的控制器打印输出，用于测试使用
             //log（）是打印的方法
             console.log("静态注册失去焦点事件")
         }
         //动态注册失去焦点事件
         window.onload=function (){
             //1.获取标签对象
             var passwordObj=document.getElementById("btn02")
             //2.标签对象.事件名=function（）{}
             passwordObj.onblur=function (){
                 console.log("动态注册失去焦点事件")
             }
         }
    </script>
</head>
<body>
用户名：<input type="text" onblur="onblurFun()"> <br/>
密 码：<input type="text" id="btn02"> <br/>

onchange事件

 <script type="text/javascript">

        //静态注册onchange事件
        function onchangeFun(){
            alert("选择好了吗");
        }
       window.onload=function (){
           //动态注册onchange事件
           //1.获取标签对象
           var selObj=document.getElementById("sel01");
           //alert(selObj);
           //2. 通过标签对象.事件名=function（）{}
           selObj.onchange=function (){
               console.log("onchange动态注册");
           }

       }

    </script>
</head>
<body>
        选择下面的选项
        静态注册onchange事件
     <select onchange="onchangeFun()">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
     </select>
<br/>

        选择一下
        <!--        动态注册onchange事件-->
        <select id="sel01">
            <option>111</option>
            <option>2222</option>
            <option>3333</option>
            <option>433111</option>
        </select>
</body>

onsubmit事件

 <script type="text/javascript">
        //静态注册表单事件
        function onsubmitFun(){
            //要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
            alert("静态表单提交事件");
            return false;
        }
        //动态注册
        window.onload=function (){
            //1.获取表单对象
            var formObj=document.getElementById("form01");
            //alert(form01);
            //2.通过标签对象.事件=function（）{}
            formObj.onsubmit=function (){
                //要验证所有表单项是否合法，如果有一个不合法就阻止表单提交
                alert("动态注册onsubmit事件")
                return false;
                
            }
        }
    </script>
</head>
<body>
<!--          return false  可以阻止表单提交-->
        <form action="http://www.baiudu.com" method="get" onsubmit="return onsubmitFun()">
            <input type="submit"  value="静态注册"/>
        </form>

        <form action="http://www.baiudu.com" id="form01">
            <input type="submit"  value="动态注册"/>
        </form>

</body>

5.DOM模型

在这里插入图片描述

1.getElementById的使用

     <script type="text/javascript">
           /*
            * 需求：当用户点击校验按钮后，要获取输入框内容，并判断是否合法
            * 验证规则是：必须有数字，字母，下划线组成，并且长度由5-12位组成
            * */
        function getElement(){
           //1.当我们操作一个标签的时候，首先要获得这个标签的对象
            var usernameObj=document.getElementById("username");
            //alert(usernameObj);
            //alert(usernameObj.value);//获取输入框的内容属性
            //定义获取文本框内容的对象
            var  usernameText=usernameObj.value;
            var patt=/^\w{5,12}$/;//正则表达式


            var usernameSpanObj=document.getElementById("usernameSpan");
                if(patt.test(usernameText)) {//test  测试  一个方法
                    //alert("用户名合法");
                usernameSpanObj.innerHTML="用户名合法";//这里也可以放图片   对号或者叉号
                }
                else{
                    //alert("用户名不合法");
                usernameSpanObj.innerHTML="用户名不合法";
                }
        }
    </script>
</head>
<body>
  用户名：<input type="text" id="username" value="yh"/>
  <span style="color:red" id="usernameSpan"></span>
   <button onclick="getElement()">校验</button>

2.getElementByName

<script type="text/javascript">
        //全选
        //document.getElementsByName();根据指定name属性查询并返回多个标签对象集合
        //这个集合操作和数组一样
        //集合中每个元素都是dom对象
        //这个数组（集合）的顺序是按照HTML页面中从上到下
        function checkAll(){
            var hobbies=document.getElementsByName("hobby");
            //checked 表示复选框中选中状态  ture表示选中  false是未选中状态
            for(var i=0;i<hobbies.length;i++)
            {
                hobbies[i].checked=true;
            }

        }
        //全不选
        function checkNo(){
            var hobbies=document.getElementsByName("hobby");
            //checked 表示复选框中选中状态  ture表示选中  false是未选中状态
            for(var i=0;i<hobbies.length;i++)
            {
                hobbies[i].checked=false;
            }
        }
        //反选
        function checkReverse(){
            var hobbies=document.getElementsByName("hobby");
            //checked 表示复选框中选中状态  ture表示选中  false是未选中状态
            for(var i=0;i<hobbies.length;i++)
            {
               hobbies[i].checked=!hobbies[i].checked;
               //  if(hobbies[i].checked==true){
               //      hobbies[i].checked=false;
               //  } else {
               //      hobbies[i].checked=true;
               //  }
            }

        }
    </script>
</head>
<body>
兴趣爱好
<br/>
        <input type="checkbox"  name="hobby" value="java">java
        <input type="checkbox" name="hobby" value="c++">c++
        <input type="checkbox"name="hobby"  value="js">js
        <br/>
        <button onclick="checkAll()">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse()">反选</button>

3.getElementByTagName(通过标签名进行查询并返回)

<script type="text/javascript">
        function checkAll(){
            //这个集合也像数组一样
            //集合中的元素都是dom对象
            //数组（集合）的顺序是按照html页面中的从上到下的顺序
            var inputs=document.getElementsByTagName("input");//按照标签名进行查询并且返回集合
            for(var i=0;i<inputs.length;i++){
                inputs[i].checked=true;

            }

        }
    </script>
</head>
<body>
        兴趣爱好
        <br/>
        <input type="checkbox"  value="java">java
        <input type="checkbox"  value="c++">c++
        <input type="checkbox"  value="js">js
        <br/>
        <button onclick="checkAll()">全选</button>

4.以上三个的使用顺序是

Id>Name>TagName

  • 有Id就用Id，没Id用Name，两者都没有的话用TagName（标签）；
  • 因为三者的范围越来越大
  • 以上三种方法一定要在页面加载完成后 才能查询到

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

childNodes

属性，获取当前节点的所有子节点

firstChil

属性，获取当前节点的第一个子节点

lastChild
属性，获取当前节点的最后一个子节点

parentNode
属性，获取当前节点的父节点

nextSibling
属性，获取当前节点的下一个节点

previousSibling
属性，获取当前节点的上一个节点

className
用于获取或设置标签的class属性值
innerHTML
属性，表示获取/设置起始标签和结束标签中的内

innerText
属性，表示获取/设置起始标签和结束标签中的文本

6.document对象的补充说明

document.creatElement

节点就是标签对象
方法:
通过具体的元素节点调用getElementsByTagName()
方法，获取当前节点的指定标签名孩子节点
appendChild( ocbildNode )
方法，可以添加一个子节点，oChildNode是要添加的孩子节点

<script type="text/javascript">
    window.onload=function (){
        //现在使用js代码来创建html标签，并显示到页面上
        //标签内容是<div>yh</div>
        var divObj=document.createElement("div");
        divObj.innerHTML="yh";//<div>yh</div>已经创建  但是现在还在内存中
        //添加子元素
        document.body.appendChild(divObj);
    }
</script>

6.正则表达式（regexp）

在这里插入图片描述
在这里插入图片描述

<script type="text/javascript">
    //要求字符串中包含字母e
    // var patt=RegExp("e");
    // var patt=/e/;//另外一种写法
    // var str="abs";
    //alert(patt.test(str))

    //在斜杠中间加上[]表示是否包含括号内的任何一个值
    //var patt=/[asdfg]/;//意思指是否包含asdfg中的任何一个字母
    // str1="asqwwere";
    // alert(patt.test(str1));
    //要求字符串中包含小写字母
    //var patt=/[a-z]/;
    //要求字符串中包含大写字母
    //var patt=/[A-Z]/;
    //要求字符串中包含任意数字
    //var patt=/[0-9]/;
    // \w  元字符  用来查找单词字符
    // 要求字符串中是否包含  字母  数字  下划线
    //var patt=/\w/;
    //var  str="]]a]]";
    //alert(patt.test(str));
    //要求 字符串中是否至少包含一个a
    //var patt=/a+/;
    //var str="ssss"
    //alert(patt.test(str));
    //要求 字符串中是否包含0个或多个a
    //var patt=/a*/;
    //var str="sssas"
    //alert(patt.test(str));
    //要求 字符串中是否包含0个或一个a
    //var patt=/a?/;
    //要求 字符串中是否包含连续3个a
    //var patt=/a{3}/;
    //要求 字符串中是否包含连续3个a 最多5个a
    //var patt=/a{3,5}/;
    //要求 字符串中是否包含   至少     连续3个a
    //var patt=/a{3,}/;
    //要求 字符串必须以a结束
    //var patt=/a$/;
    // 要求 字符串必须以a开头
    //var patt=/^a/;


    //要求字符串中是否包含至少3个连续的a
    var patt=/a{3,5}/;
    //要求字符串中所有字符都要匹配   即以a开头  a结尾   3到5个a
    var patt=/^a{3,5}$/;


    var str="aaaaaa";
    alert(patt.test(str));




</script>
   //var patt=/a+/;
    //var str="ssss"
    //alert(patt.test(str));
    //要求 字符串中是否包含0个或多个a
    //var patt=/a*/;
    //var str="sssas"
    //alert(patt.test(str));
    //要求 字符串中是否包含0个或一个a
    //var patt=/a?/;
    //要求 字符串中是否包含连续3个a
    //var patt=/a{3}/;
    //要求 字符串中是否包含连续3个a 最多5个a
    //var patt=/a{3,5}/;
    //要求 字符串中是否包含   至少     连续3个a
    //var patt=/a{3,}/;
    //要求 字符串必须以a结束
    //var patt=/a$/;
    // 要求 字符串必须以a开头
    //var patt=/^a/;


    //要求字符串中是否包含至少3个连续的a
    var patt=/a{3,5}/;
    //要求字符串中所有字符都要匹配   即以a开头  a结尾   3到5个a
    var patt=/^a{3,5}$/;


    var str="aaaaaa";
    alert(patt.test(str));




</script>
有空一起吃饭吧
关注
js笔记
qizhichao110的专栏
02-02 516
10.JavaScript中判断变量、参数是否初始化的三种方法：     10.1     var x;     if(x==null){     alert("null");     }     10.2     if(typeof(x)=="undefined"){     alert('undefined');     }     10.3     if(!x){ale
js 笔记
weixin_43979902的博客
09-08 175
js代码需要写到 script标签一旦引入外部标签那么内部标签就无法使用了 数据类型 1 原始数据类型（基本数据类型） number：整数，小数、nan String 字符串 bollean 布尔类型 null 一个对象为空的占位符 undefined：未定义如果一个变量没又给出始话值则会 数据的转换 可以通过 toString（）转换为字符串 可以通过类型名字加括号来改变类型例如 String（a），Number（a） 来强制转换为数字 parsInt（）将字符串转换为数字逐一字符判断字符是否是数字不能
狂神说系列 JavaScript笔记
06-15
【狂神说系列 JavaScript笔记】是一份全面且深入的JavaScript学习资源，旨在帮助开发者和初学者深入理解这门广泛应用于Web开发的脚本语言。这份笔记涵盖了JavaScript的基础语法、核心概念以及高级特性，旨在构建一个...
js笔记js笔记js笔记js笔记
最新发布
03-07
js笔记js笔记js笔记js笔记
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。JavaScript不是Java的子集，两者之间没有直接关联。JS起初名为LiveScript，但在...
javascript笔记
04-20
javascript学习笔记，从actionScript转到前端开发，偏重于前端理论基础，供参考
javaScript笔记
08-15
自己整理的javaScript部分笔记，认为比较有用的。。。。。。。。。。。。。。。。。。。。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值