js笔记_maniacxx-CSDN博客

本文链接：https://blog.csdn.net/maniacxx/article/details/77618810

一.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="haohao_827@163.com";
        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也能获取到该对象节点的文本