javascript

    xiaoxiao2021-03-26  10

    JavaScript笔记概要 一、js的简介     1、js是什么         js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言         特点:             (1)交互性             (2)安全性:js不能访问本地磁盘             (3)跨平台:浏览器中都具备js解析器     2、js能做什么         (1)js能动态的修改(增删)html和css的代码         (2)能动态的校验数据     3、js历史及组成         ECMAScript    BOM(浏览器对象模型)  DOM(文档对象模型)        4、js被引入的方式         (1)内嵌脚本             <input type="button" value="button" οnclick="alert('xxx')" />                    (2)内部脚本             <script type="text/javascript">                 alert("xxx");             </script>         (3)外部脚本             首先先创建一个js文件             其次在html中引入                 <script type="text/javascript" src="demo1.js"></script>         js代码放在哪?             放在哪都行 但是在不影响html功能的前提下 越晚加载越好 二、js基本语法     1、变量         (1) var x = 5; x = 'javascript'; var y = "hello"; var b = true;               (2)         x = 5;     2、原始数据类型         (1)number:数字类型         (2)string:字符串类型         (3)boolean:布尔类型         (4)null:空类型         (5)underfind:未定义         注意:number、boolean、string是伪对象         类型转换:             number\boolean转成string                 toString();             string\boolean转成number                 parseInt()                 parseFloat()                 boolean不能转                 string可以将数字字符串转换成number 如果“123a3sd5” 转成123             强制转换                 Boolean()     强转成布尔                     数字强转成布尔  非零就是true   零就是false                     字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是false                 Number()    强转成数字                     布尔转数字 true转成1  false转成0                     字符串转数字 不能强转     3、引用数据类型         java:    Object obj = new Object();         js:        var obj = new Object();                 var num = new Number();        4、运算符         (1)赋值运算符             var x = 5;         (2)算数运算符             + - * / %             +: 遇到字符串变成连接             -:先把字符串转成数字然后进行运算             *: 先把字符串转成数字然后进行运算             /: 先把字符串转成数字然后进行运算         (3)逻辑运算符             &&    ||         (4)比较运算符             <    >    >=    <=    !=    ==             ===:全等:类型与值都要相等         (5)三元运算符             3<2?"大于":"小于"         (6)void运算符             <a href="javascript:void(0);">xxxxxx</a> -- 页面跳转         (7)类型运算符             typeof:判断数据类型 返回我的数据类型             instanceof:判断数据类型 是否是某种类型 var obj = new Object(); alert(typeof obj);//object alert(obj instanceof Object);//true               5、逻辑语句         (1)if-else(同)         (2)switch(同)         (3)for(同)         (4)for in var arr = [1,3,5,7,"js"]; for(index in arr){//index代表角标     //alert(index);     alert(arr[index]); }            三、js内建对象     (1)Number  --  类型:Object         创建方式:(new 和 强转)             var myNum=new Number(value);             var myNum=Number(value);         属性和方法:             toString():转成字符串    -- 类型:string             valueOf():返回一个 Number 对象的基本数字值  --  类型:number     (2)Boolean         创建方式:             var bool = new Boolean(value);                var bool = Boolean(value);         属性和方法:             toString():转成字符串             valueOf():返回一个 Boolean 对象的基本值(boolean)                (3)String         创建方式:             var str = new String(s);             var str = String(s);         属性和方法:             length:字符串的长度             charAt():返回索引字符             charCodeAt:返回索引字符unicode             indexOf():返回字符的索引             lastIndexOf();逆向返回字符的索引             split();将字符串按照特殊字符切割成数组             substr():从起始索引号提取字符串中指定数目的字符             substring():提取字符串中两个指定的索引号之间的字符             toUpperCase();转大写         示例:     (4)Array         创建方式:             var arr = new Array();//空数组             var arr = new Array(size);//创建一个指定长度的数据             var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素             var arr = [];//空数组             var arr = [1,2,5,"java"];//创建数组直接实例化元素         属性和方法:             length:数组长度             join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个             pop():删除并返回最后元素             push():向数组的末尾添加一个或更多元素,并返回新的长度             reverse();反转数组             sort();排序     (5)Date         创建方式:                var myDate = new Date();//默认是当前时间             var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值         属性和方法             toString():打印时间             getFullYear():年             getMonth():月 0-11             getDate():日 1-31             getDay():星期 0-6             getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数             toLocalString();获得本地时间格式的字符串     (6)Math         创建方式:                Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,             不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。         属性和方法             PI:圆周率             abs():绝对值             ceil():对数进行上舍入             floor():对数进行下舍入             pow(x,y):返回 x 的 y 次幂             random():0-1之间的随机数             round():四舍五入     (7)RegExp         创建方式:                var reg = new RegExp(pattern);             var reg = /^正则规则$/;//以^开头,以$结尾,跟java不同         规则的写法:             [0-9]             [A-Z]             [a-z]             [A-z]             \d 代表数据             \D    非数字             \w    查找单词字符             \W    查找非单词字符             \s    查找空白字符             \S    查找非空白字符             n+    出现至少一次             n*    出现0次或多次             n?    出现0次或1次             {5} 出现5             {2,8} 2到8次         方法:                test(str):检索字符串中指定的值。返回 true 或 false         需求: //校验邮箱: var email = "haohao_827@163.com"; var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/; reg.test(email);           四、js的函数     1、js函数定义的方式         (1)普通方式             语法:function 函数名(参数列表){函数体}             示例: function method(){        alert("xxx");  }  method();                          (2)匿名函数(常用)             语法:function(参数列表){函数体}             示例: var method = function(){      alert("yyy"); }; method();                          (3)对象函数             语法:new Function(参数1,参数2,...,函数体);             注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式             示例: var fn = new Function("a","b","alert(a+b)"); fn(2,5);                    2、函数的参数         (1)形参没有var去修饰         (2)形参和实参个数不一定相等         (3)arguments对象 是个数组 会将传递的实参进行封装 function fn(a,b,c){     //var sum = a+b+c;     //alert(sum);     //arguments是个数组 会将传递的实参进行封装     for(var i=0;i<arguments.length;i++){          alert(arguments[i]);     } } fn(1,2,4,8);       3、返回值         (1)在定义函数的时候不必表明是否具有返回值         (2)返回值仅仅通过return关键字就可以了 return后的代码不执行 function fn(a,b){      return a+b;      //alert("xxxx"); } alert(fn(2,3));            4、js的全局函数         (1)编码和解码             encodeURI()   decodeURI()  -- 只    将中文转换成Unicode码             encodeURIComponet()      decodeURIComponent()             escape()    unescape()             三者区别:                 进行编码的符号范围不同吧,实际开发中常使用第一种         (2)强制转换             Number()             String()             Boolean()         (3)转成数字             parseInt()             parseFloat()         (4)eval()方法                将字符串当作脚本进行解析运行 //var str = "var a=2;var b=3;alert(a+b)"; //eval(str); function print(str){        eval(str); } print("自定义逻辑");             五、js的事件     事件     事件源     响应行为     1、js的常用事件         onclick:点击事件         onchange:域内容被改变的事件             需求:实现二级联动 <select id="city">      <option value="bj">北京</option>      <option value="tj">天津</option>      <option value="sh">上海</option> </select> <select id="area">      <option>海淀</option>      <option>朝阳</option>      <option>东城</option> </select> <script type="text/javascript">      var select = document.getElementById("city");      select.onchange = function(){          var optionVal = select.value;          switch(optionVal){              case 'bj':                   var area = document.getElementById("area");                   area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";                   break;              case 'tj':                   var area = document.getElementById("area");                   area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";                   break;              case 'sh':                   var area = document.getElementById("area");                   area.innerHTML = "<option>浦东</option><option>杨浦</option>";                   break;              default:                   alert("error");              }          }; </script>                     onfoucus:获得焦点的事件         onblur:失去焦点的事件             需求:    当输入框获得焦点的时候,提示输入的内容格式                     当输入框失去焦点的时候,提示输入有误 <body>     姓名:<input type="text" id="username" name="username"><span id="reminder"></span>  </body>  <script type="text/javascript">     var username = document.getElementById("username");     //聚焦事件     username.onfocus = function(){         //友好提示         var reminder = document.getElementById("reminder");         reminder.innerHTML = "请输入长度大于5的名称";         reminder.style.color = "green";     }     //焦点离开事件     username.onblur = function(){         var usernameValue = username.value;         if(usernameValue.length<5){             //错误提示             var reminder = document.getElementById("reminder");             reminder.innerHTML = "对不起,个提示不正确";             reminder.style.color = "red";         }else{             //格式符合,隐藏             var reminder = document.getElementById("reminder");             reminder.style.display = "none";         }     }  </script>         onmouseover:鼠标悬浮的事件         onmouseout:鼠标离开的事件             需求:div元素 鼠标移入变为绿色 移出恢复原色             应用:商品图片大小的改变  <style>     #d1{background-color:red; width:200px; height:200px }   </style>  </head>  <body>     <div id="d1"></div>  </body>  <script type="text/javascript">     var d1 = document.getElementById("d1");     //鼠标移上的事件     d1.onmouseover = function(){         this.style.backgroundColor = "green";//注意此处css的命名格式需要转为驼峰式命名     }     //鼠标移出的事件     d1.onmouseout = function(){         this.style.backgroundColor = "red";     }  </script>         onload:加载完毕的事件             等到页面加载完毕在执行onload事件所指向的函数             等同于将js放到body之后加载 <script type="text/javascript">     window.onload = function(){         var span = document.getElementById("span");         span.innerHTML = "onload事件";     };   </script>  </head>  <body>     <span id="span"></span>  </body>               2、事件的绑定方式         (1)将事件和响应行为都内嵌到html标签中             <input type="button" value="button"  οnclick="alert('xxx')"/>         (2)将事件内嵌到html中而响应行为用函数进行封装 (常用) <input type="button" value="button" οnclick="fn()" /> <script type="text/javascript">        function fn(){             alert("yyy");        } </script>                    (3)将事件和响应行为 与html标签完全分离 (常用,分理处单独的js文件) <input id="btn" type="button" value="button"/> <script type="text/javascript">         var btn = document.getElementById("btn");         btn.onclick = function(){//匿名函数             alert("zzz");         }; </script>                      ****this关键字             this经过事件的函数进行传递的是html标签对象 <input id="btn" name="mybtn" type="button" value="button123" οnclick="fn(this)"/> <script type="text/javascript">         function fn(obj){                alert(obj.name);         } </script>                 3、阻止事件的默认行为,提交按钮,链接,,,         IE:window.event.returnValue = false;  --  返回值         W3c: 传递过来的事件对象.preventDefault();  --  组织默认 //通过传递事件阻止事件的默认行为 <a href="demo11.html" οnclick="return false">点击我吧</a> //通过事件返回false也可以阻止事件的默认行为 <a href="demo11.html" οnclick="return false">点击我吧</a> //ie:window.event.returnValue = false; //W3c:传递过来的事件对象.preventDefault(); //W3c标准 if(e && e.preventDefault){//方法名指的是方法本身,方法名后加括号,指的是调用方法     alert("w3c");     e.preventDefault(); //IE标准 }else{     alert("ie");     window.event.returnValue = false; }           4、阻止事件的传播         IE:window.event.cancelBubble = true;  --  取消冒泡         W3c: 传递过来的事件对象.stopPropagation();  --  停止传播  <body>     <div id="d1" οnclick="fun1(event);" style="background-color:red; width:200px; height:200px; padding:50px; ">         <div id="d2" οnclick="fun2(event);" style="background-color:green; width:200px; height:200px; ">     </div>  </body>  <script type="text/javascript">     function fun1(evnet){         alert("fun1");     }     function fun2(e){         alert("fun2");         if(e&&e.stopPropagation){//停止传播             alert("w3c");             e.stopPropagation();         //IE标签         }else{             alert("ie");             window.event.cancelBubble = true;//取消冒泡         }        }  </script> 六、js的bom(页面的上部分)     (1)window对象         弹框的方法:             提示框:alert("提示信息");                 没有返回值             确认框:confirm("确认信息");                 有返回值:如果点击确认返回true  如果点击取消 返回false                 var res = confirm("您确认要删除吗?");                 alert(res);             输入框:prompt("提示信息");                 有返回值:如果点击确认返回输入框的文本 点击取消返回null                 var res =  prompt("请输入密码?");                 alert(res);   <input type="button" value="弹出框" οnclick="fun1();" />   <input type="button" value="确认框" οnclick="fun2();" />   <input type="button" value="输入框" οnclick="fun3();" />   <script type="text/javascript">     function fun1(){         alert("这是弹出框");     };     function fun2(){         confirm("确认要删除吗?");     };     function fun3(){         prompt("请输入密码");     };   </script> open方法:             window.open("url地址");                    定时器:             setTimeout(函数,毫秒值);                 setTimeout(                     function(){                         alert("xx");                     },                     3000                 );             clearTimeout(定时器的名称);                 var timer;                 var fn = function(){                     alert("x");                     timer = setTimeout(fn,2000);                 };                 var closer = function(){                     clearTimeout(timer);                 };                 fn();             setInterval(函数,毫秒值);//注:方法没有方法体             clearInterval(定时器的名称)                 var timer = setInterval(                 function(){                     alert("nihao");                 },                 2000             );             var closer = function(){                 clearInterval(timer);             };         需求:注册后5秒钟跳转首页 <body>     恭喜你注册成功,<span id="second" style="color:red">5</span>秒后跳转到登录界面,如果不跳转,请<a href="demo1.html">点击这里</a>  </body>  <script type="text/javascript">     var time = 5;     var timer;     timer = setInterval(         function(){             var secondnow = document.getElementById("second");             if(time>=1){                 second.innerHTML = time;                 time--;             }else{                 clearInterval(timer);                 location.href="demo1.html";             }         },         1000     );  </script>     (2)location            location.href="url地址";     (3)history         back();         forward();         go(); <a href="demo7.html">后一页</a> <input type="button" value="上一页" οnclick="history.back()"> <input type="button" value="下一页" οnclick="history.forward()"> <input type="button" value="上一页" οnclick="history.go(-1)"> <input type="button" value="下一页" οnclick="history.go(1)"> 七、js的dom     1、理解一下文档对象模型         html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改         在dom树当中 一切皆为节点对象         注:属性节点是元素节点的附属,而不是它的子节点      DOM结构:   2、dom方法和属性(NODE接口的特性和方法)           document节点的方法           (1)getElementById()--常用                           寻找一个有着给定 id 属性值的元素,返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素,它返回 null.

    var oElement = document.getElementById ( “sID” )

         该方法只能用于 document 对象 (2)getElementsByName()        寻找有着给定name属性的所有元素,这个方法将返回 一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定name属性的所有元素的总个数。 (3)getElementsByTagName()      寻找有着给定标签名的所有元素,这个方法将返回一个节点集合,这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。 (4)hasChildNodes()         该方法用来检查一个元素是否有子节点,返回值是 true 或 false.   varbooleanValue= element.hasChildNodes();                     document节点的属性(每个节点都具有这三个属性)     nodeName:一个字符串,其内容是给定节点的名字。

      varname = node.nodeName;

       * 如果节点是元素节点,nodeName返回这个元素的名称

       * 如果是属性节点,nodeName返回这个属性的名称

       * 如果是文本节点,nodeName返回一个内容为#text 的字符串

    注:nodeName是一个只读属性。 nodeType:返回一个整数,这个数值代表着给定节点的类型。nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种:     * Node.ELEMENT_NODE    ---1    -- 元素节点    * Node.ATTRIBUTE_NODE  ---2    -- 属性节点    * Node.TEXT_NODE       ---3    -- 文本节点      注:nodeType 是个只读属性 nodeValue:返回给定节点的当前值(字符串)      * 如果给定节点是一个属性节点,返回值是这个属性的值。    * 如果给定节点是一个文本节点,返回值是这个文本节点的内容。    * 如果给定节点是一个元素节点,返回值是 nullnodeValue 是一个 读/写属性,但不能对元素节点的 nodeValue 属性设置值,      但 可以为文本节点的 nodeValue 属性设置一个值。     1.innerHTML方法只是调用获取的是指定元素里面的内容,包括标签,赋值语句用于给页面添加代码 //1.获取元素里面的内容 <div id="d1"><h1>javascript</h1></div> var div = document.getElementById("d1"); alert(div.innerHTML); //输出:<h1>javascript</h1> //2.给页面添加代码 <select id="area"></select> var area = document.getElementById("area"); area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
    转载请注明原文地址: https://ju.6miu.com/read-600155.html

    最新回复(0)