js笔记

一.js简介

1.js是什么

    js是可以嵌入到html中，是基于对象和事件驱动的脚本语言    特点        （1）交互性        （2）安全性：js不能访问本地硬盘        （3）跨平台：浏览器中都具备js解析器

2.js能做什么
（1）js能动态的修改（增删）html和css的代码
（2）能动态的校验数据

3.js的历史及组成
EXMAscript BOM（浏览器对象模型） DOM（文档对象模型）

4.js被引入的方式
(1)内嵌脚本

（2）内部脚本

alert('xxx');

（3）外部脚本
首先创建一个js文件，然后引入文件

        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)bool:布尔类型    (4)null:空类型    (5)underfind:未定义    注意：number，boolean，string是伪对象    类型转换：        number、boolean转成string        tostring();        string,boolean转成number        parseInt        转成浮点数        parseFloat        注意：boolean不能转              string可以将数字转换为number  “132dfd54ewf”转成132      强制转换：Boolean()  强转成boolean   数字转布尔  非0就是true；字符串强转为布尔，非""就是true                Number()   强转成数字      布尔转数组  true为1，false为0    字符串无法强转

3.引用数据类型

    java：Obeject obj = new Object();     js:  var obj = new Object();

4.运算符

    （1）赋值运算符        =：var x=5;    （2）算数运算符        + - * / %        +:数字是加和，遇字符串变成连接        % / * -：遇数字是转成运算，遇字符串会转成数字    （3）逻辑元素符        && ||    （4）比较运算符        <   >   <=   >=        ==:强转后值相等即可，        ===(全等);类型也必须一样    （5）三元运算        alert(3>2？"大于":"小于")    （6）void运算符        <a href="javascript:void(0);">xxxx</a>    （7）类型运算符        typeof:判断数据类型  返回值为数据类   var x=5; alert(typeof x);   打印number        instanceof：判断数据类型  判断是否为某种类型  返回布尔值        var obj=new Object(); alert(obj instanceof Object) 打印true

5.逻辑语句

    (1)if-else    (2)switch    (3)for    (4)while    (5)for in    var arr=[1,3,5,7,"js"];    for(index in arr){        alert(arr[index])    }

三.js的内置对象

（1）Number    创建方式：        var myNum=new Number(value);        var muNum=Number(value);        创建的是一个对象数据    属性和方法：        toString():转化成字符串，拆箱过程，转化为字符串数据类型        valueOf():拆箱，转化为number数据（2）Boolean    创建方法：        var bool=new Boolean(value);        var bool=Boolean(value);        创建的是一个对象数据    方法：        toString():转化成字符串，拆箱过程，转化为字符串数据类型        valueOf():拆箱，转化为boolean数据（3）String    创建方法：        var str=new String(value);        var str=String(value);        创建的是一个对象数据    属性和方法：        length：字符串的长度        charAt(数字)：返回索引字符        charCodeAt(数字):返回索引字符的unicode        indexOf(字符);返回字符的索引        lastIndexof(字符):返回逆向字符的索引        split(特殊字符):将字符串按照特殊字符切割成数组        substr():从起始索引号提前字符串中知道数目的字符                substr(2,3),从第二位开始，一共截取三位        substring():提前字符串中两份指定索引值之间的字符（4）Array    创建方式：        var arr=new Array();//空数组        var arr=new Array(size);//创建一个指定长度的数组        var arr=new Array(element1,element2......elementn);//创建数组直接实例化        var arr=[];//空数组        var arr=[1,5,79,89,64,"sdw"];//实例化    属性和方法：        length：获取数组长度        join：把数组转字符串，通过指定字符分隔        pop：删除并返回最后元素        push：向末尾放一个元素        reverse():反转数组        sort():排序  先排数字，再排其他字符串（5）Date(日期类)    创建方式：var myDate = new Date();    创建方式：var myDate = new Date(毫秒值);代表从1970-1-1到现在的一个毫秒值    属性和方法        getDate():从Date对象中返回一个月中的某天（1-31）        getDay():从Date对象中返回一周中的某天（0-6）        getMonth():从Date对象中返回月份（0-11）        getFullYear():从Date对象中返回年份        getTime():返回1970-1-1到指定日期的毫秒值        toLocalString():获取本地时间格式（6）Math    创建方式：    不需要创建对象，类似java中的静态，可以直接调用方法    属性和方法        PI：圆周率        abs():取绝对值        sin(),cos(),tan():三角函数        asin(),acos(),atan():反三角函数        ceil():数进行上舍入        floor():数进行下舍入        pow(x,y):返回x的y次幂        random():0-1之间的随机数        round():四舍五入（7）RegExp（正则）`   创建方式：        var reg=new RegExp(pattern);传入正则的字符串        var reg=/^正则规则$/;    规则的写法：        [0-9] \d  代表数字        [A-Z]  [a-z]  [A-z]        \w    查找单词字符        \W    非单词字符        \s    空白字符        \S    非空白字符        +     至少一次        *     0次或多次        ？    0次或一次        {n}   出现n次        {2,8}   2到8次    方法：test(str):检查字符串中指定的值，返回true或者false    需求：        校验一个邮箱        var str="[e-mail]";        var reg=/^[A-z]+[A-z0-9-_]*\@[A-z0-9]+\.[A-z]+$/;        alert(reg.text(str));

四：js函数

1.js函数定义的方式

    （1）普通方式（少用）        语法：function 函数名(参数列表){函数体}        示例：            function method() {                alert("xxx");             }            method();    （2）匿名函数（常用）        语法：function(参数列表){函数部分}        var method=function(){            alert("xxx");         };         method();    (3)对象函数(基本不用)        语法：：new Function(参数列表，函数体)        注意：参数名称必须使用字符串形式，最后一个        默认是函数体且函数体必须是字符串形式        var fn = new Function("a","b","c","alert(a+b+c)");        fn(1,2,3);

2.js的全局函数

    （1）编码和解码的            编码         解码        encodeURI()   decodeURI()  （常用）        encodeURIcomponet()   decodeURIcomponet()        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(str);        作用：去掉传参字符串的外壳，执行内部命令

五.js事件

事件事件源响应行为

1.js的常用事件

    onclick：点击事件    onchange：域内容被改变的事件        实现二级联动    onfoucus：获得焦点的事件    onblur：失去焦点的事件        需求：当输入框获得焦点的时候，提示输入的内容格式               当输入框失去焦点的时候，提示输入有误    onmouseover：鼠标悬浮的事件    onmouseout：鼠标离开的事件        需求：当鼠标移入变成绿色，移出变成原色        <script type="text/javascript">            var div=document.getElementById("d1");            div.onmouseover=function () {                this.style.backgroundColor="green";            };            div.onmouseout=function () {                this.style.backgroundColor="red";            }        </script>    onload：加载完毕        等到页面加载完毕才会执行onload时间指向的函数功能

2.事件与事件源的绑定方式

（1）将事件和响应行为都内嵌到html标签中<input type="button" value="button" onmouseover="alert('xxx')">(2)将事件内嵌到html中，而响应行为用函数进行封装<input type="button" value="button" onmouseover="fn()"/><script>    function fn(){       alert("yyy");    }</script>(3)将行为与html标签完全分离<input id="btn" type="button" value="button"/><script type="text/javascript">    var btn=document.getElementById("btn");    btn.onclick=function(){        alert("xxx");    };</script>（4）this关键字    this进过事件函数传递的是标签的对象

3.阻止事件的默认行为

   方式(1)    IE:window.event.returnValue = false;    W3c:传递过来的事件对象.preventDefault();    <a id="span" href="http://www.baidu.com" onclick="fn(event)">here</a>   <script type="text/javascript">        function fn(e) {            //IE:window.event.returnValue=false            //W3c:传递过来的事件对象.preventDefault();            if(e&&e.preventDefault){                alert("w3c");                e.preventDefault();            }else{                alert("IE");                window.event.returnValue=false;            }        }    </script>    方式（2）        通过事件返回false也可以阻止事件的默认行为       <a id="span" href="http://www.baidu.com" onclick="return false">here</a>

4.阻止事件的传播

    （1）        IE:window.event.cancelBubble = true;        W3c:传递过来的事件对象.stopPropagation();        if(e&&e.stopPropagation){            e.stopPropagation()        }else{            window.event.cancelBubble=true;        }

六.js的bom

1.window对象

    a.弹框的方法        (1)提示框：alert("提示的信息");-----window.alert()        (2)确认框：confirm("确认信息");            var res= confirm("hjhjk");            alert(res);        点击确认返回true，取消返回false        (3)输入框：prompt()        var gh=prompt("输入用户名");        alert(gh);        点击确认返回输入信息，取消返回null    b.open的方法：        window.open("url地址");//打开一个网页    c.定时器        setTimeout(函数，毫秒值)        使用匿名函数：setTimeout(function(){alert("xxx");},5000);        传函数：        function a(){alert("xxx");}        setTimeout(a,5000);        clearTimeout()结束定时器        var time;        function fn() {            alert("xxx");          time = setTimeout(fn,1000);        };        fn();       function closer() {            clearTimeout(time);        }        setInterval(函数,毫秒值)//设置间隔多少时间关闭   需求：注册后5s跳转到首页   将在<span id="second" style="color: red">5</span>秒后跳转到首页，如果不能跳转，请<a href="jsF.html">点击此处</a>    var time=5;    var timer=setInterval(        function () {          if(time>=1){            var second=document.getElementById("second");            second.innerHTML=time;            time--;            }else{            clearInterval(timer);            location.href="jsF.html";        }    }    ,1000);(2)location    location.href="地址"  :跳转(3)history    back();    forward();前进    go();指定跳转写入数字，正数往前跳，负数往后跳    这里是K<a href="jsL.html">后一页</a>    <input type="button" value="上一页" onclick="history.back()">    <input type="button" value="下一页" onclick="history.forward()">

七.js的dom

1.理解一下文档对象模型

    html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行代码的动态修改    在dom树中，一切皆为节点对象

2.dom的方法和属性

    (1).getElementById()//通过id查找节点对象    (2).getElementsByName()//通过name查找所有name满足要求的节点对象，返回对象数组    (3).getElementsByTagName()//通过标签名字找所有标签名字满足要求的节点对象，返回对象数组    (4).hasChildNodes()//判断是否有孩子节点    (5).属性：1）nodeName:节点名称，只读              2）nodeType:元素节点为1（获取方式：获取节点对象的方法即可），                        属性节点为2（用元素节点调用getAttributeNode("属性")，需要哪个属性，传入属性即可                        文本节点为3（用元素节点，调用firstChild往下走就能得到文本对象）              3）nodeValue：元素节点为null                            属性节点为对应属性值                            文本节点为文本值              4）childNodes  返回节点所有子节点              5）firstChild   lastChild  获取该对象下的第一个/最后一个子对象              6)parentNode   返回该对象的父节点              7)nextSibling   返回该对象节点共同父节点的下一个节点    (6)replaceChild(new,old)   把该节点对象的某个子节点替换掉,old节点被替换，new节点被剪切    (7)getAttribute("属性")  获得对象属性值，传入属性，获取属性值    (8)setAttyibute("属性","属性值")   给该对象的属性设置属性值，没有的话就动态的加上    (9)document.createElement("元素类型")   返回一个元素节点，创建的节点没有属性，创建属性需要调用方法（8）    (10)document.createTextNode("属性值")   返回一个文本节点    (11)appendChild(节点对象)  为对象创建一个子节点，传入一个节点对象    (12)insertBefore(需要的插入节点对象，目标对象)  把该节点插入到目标对象前面    (13)removeChild()  删除父节点对象下的某个子节点    (14)innerHTML("修改后的内容")    修改节点对象的文本        innerHTML也是一个属性：获取文本内容        innerText也能获取到该对象节点的文本