首页 > > 网页制作 > Javascript >

JavaScript

2018-06-24 00:56:41来源：未知阅读 ()

1、js的简介

　（1）js是什么？

　　　　js是可以嵌入到html中，是基于对象和事件驱动的脚本语言。

　　特点：

　　　　　　交互性

　　　　安全性：js不能访问本地磁盘

　　　　　　跨平台：浏览器中都具备js解析器

（2）js能做什么

　　　　js能动态的修改（增删）html和css的代码

　　　　能动态的校验数据

（3）js的历史及组成

　　　　BOM（浏览器对象模型）DOM（文档对象模型）

（4）js被引入的方式

　　　　内嵌脚本

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <input type = "button" value = "button" onclick="alert('xxx')">
</body>
</html>

　　　　内部脚本

<script type="text/javascript">
    alert("xxx");
</script>

　　　　外部脚本

　　　　　　首先创建一个js文件

　　　　其次在html中引入

<script type="text/javascript" src = "demo1.js"></script>

　　　　　　　　js的代码放在哪？

　　　　　　　　放在哪都行但是在不影响html功能的前提下，越晚加载越好。

2、js的基本语法：

　　（1）变量

　　　　方法1:

　　　　　　　var x = 5;

　　　　　　　x = 'javascript';

　　　　　　var y = "hello";

　　　　　　　var b = true;

　　　　方法2:

　　　　　　　x = 5;

　　（2）原始数据类型

　　　　 number:数字类型

　　　　 string:字符类型

　　　　 boolean:布尔

　　　　 null:空类型

　　　　 underfind:未定义　

　　　　注意：number、boolean、string是伪对象

　　　　类型转换：

　　　　　　number\boolean转成string:

　　　　　　　　toString();

　　　　　　string\boolean转成number

　　　　　　　　parseInt()

　　　　　　　　parseFloat()

　　　　　　　　boolean不能转

　　　　　　 string可以将数字字符串转换成number

　　　　强制转换

　　　　　　　　Boolean() 强制转换成布尔

　　　　　　　　　　　数字强制转成成布尔非零就是true 零就是false

　　　　　　　　　　字符串强转成布尔非""就是true

　　　　　　　　Number() 强制转换成数字

　　　　　　　　　　布尔转数字 true转成1 false转成0

　　　　　　　　　　　字符串转数字不能强制转换

　　（3）引用数据类型

　　　　java:Object obj = new Object();

　　　　js:var obj = new Object();

　　　　 var num = new Number();

　　（4）运算符

　　　　赋值运算符

　　　　　　var x = 5;

　　　　算数运算符

　　　　　　+ - * \ %

　　　　　　+ : 遇到字符串变成连接

　　　　 - : 先把字符串转成数字然后进行运算

　　　　逻辑运算符

　　　　　　&& ||

　　　　比较运算符

　　　　　　> < >= != ==

　　　　　　=== : 全等：类型和值都要相等

　　　　三元运算符

　　　　　　3 < 2?"大于":"小于"

　　　　void运算符

<a href="javascript:void(0);">xxx</a>

　　　　类型运算符

　　　　　　typeof : 判断数据的类型(返回数据的类型)

　　　　　　instanceof : 判断数据类型(判断是否是某种类型)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var obj = new Object();
    alert(typeof obj);
    alert(obj instanceof Object);
</script>

</head>
<body>
    
</body>
</html>

　　　　返回：Object true

　　（5）逻辑语句

　　　　（1）if-else

　　　　（2）switch

　　　　（3）for

　　　　（4）for in

3、js的内置对象

　　　　（1）Number

　　　　　　创建方式：

　　　　　　　　var myNum = new Number(value);

　　　　　　　　var myNum = 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(s);

　　　　　　　　var str = String(s);

　　　　　　属性和方法：

　　　　　　　　length:字符串的长度

　　　　　　　　charAt() : 返回索引字符

　　　　　　　　indexOf() : 返回字符索引

　　　　　　　　lastIndexOf() : 逆向返回字符的索引

　　　　　　　　split() : 将字符串按照特殊字符切割成数组

　　　　　　　　substr() : 从起始索引号读取字符串中指定数目的字符

　　　　　　　　substring(); 提取字符串中两个指定的索引号之间的字符

　　　　　　　　toUpperCase() : 转大写

　　　　（4）Array

　　　　　　创建方式：

　　　　　　　　　属性和方法：

　　　　　　　　length : 数组的长度。

　　　　　　　 join() : 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

　　　　　　 pop() : 删除并返回最后一个元素。

　　　　　　　　push() : 向数组的末尾添加一个或多个元素，并返回新的长度

　　　　　　　　reverse() : 反转数组

　　　　　　　　sort()：排序

　　　　（5）Date

　　　　　　　　创建方式：

　　　　　　　　　　var myDate = new Date();

　　　　　　　　　　var myDate = new Date(毫米值); //代表从1970-1-1到现在的一个毫秒值

　　　　　　　　属性和方法：

　　　　　　　　　　getFullYear() : 年

　　　　　　　　　　getMonth() : 月 0 -11

　　　　　　　　　　getDate() : 日 1-31

　　　　　　　　　　getDay() : 星期 0 - 6

　　　　　　　　　　getTime() : 代表从1970-1-1到指定日期（字符串）的一个毫秒数

　　　　　　　　　　toLocaleString() : 获得本地时间格式的字符串

　　　　（6）Math　　　　　　　

　　　　　　　　　属性和方法：

　　　　　　　　　PI : 圆周率

　　　　　　　　　abs() : 绝对值

　　　　　　　　 ceil() : 对数进行上舍入

　　　　　　　　　floor() : 对数进行向下舍入

　　　　　　　　　round() : 四舍五入

　　　　　　　　 pow(x,y) : 返回x的y次幂　　　　　　　　

　　　　（7）RegExp

　　　　　　　　创建方式：

　　　　　　　　　　var reg = new RegExp(pattern);

　　　　　　　　　　var reg = /^正则规则$/;

　　　　　　　　规则的写法：

　　　　　　　　[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);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var email = "haohao_827@163.com";
    var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
    alert(reg.test(email));
</script>

</head>
<body>
    
</body>
</html>

　　返回：true

4、js的函数

　　（1）js函数定义的方式

　　　　普通方式

　　　　　　语法：function 函数名（参数列表）{函数体}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function method(){
        alert("xxx");
    }
    method();
</script>

</head>
<body>    
    
</body>
</html>

　　　　匿名函数：

　　　　　　语法：function(参数列表){函数体}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var method = function(){
        alert("yyy");
    };
    method();
</script>

</head>
<body>    
    
</body>
</html>

　　　　对象函数

　　　　语法：new Function(参数列表，函数体)

　　　　注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var fn = new Function("a","b","alert(a+b)");
    fn(2,5);
</script>

</head>
<body>    
    
</body>
</html>

　　函数的参数：

　　　（1）形参没有var去修饰

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function fn(a,b,c){
        var sum = a + b + c;
        alert(sum);
    }
    fn(1,2,3);
</script>

</head>
<body>    
    
</body>
</html>

　　输出：7

　　（2）形参和实参的个数不一定一致

　　返回值：

　　　　（1）在定义函数的时候不必表明是否具有返回值。

　　　　（2）返回值仅仅通过return关键字就可以了 return后的代码不执行。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    function fn(a,b){
        return a + b;
    }
    alert(fn(2,3));
</script>

</head>
<body>    
    
</body>
</html>

输出结果为：5

　　　　* js的全局函数

　　　　　　（1）编码和解码

　　　　　　　　encodeURI() decodeURI()

　　　　　　　　encodeURICompoent() decodeURICompoent()

　　　　　　　　escape() unescape()

　　　　　　　　三者区别：

　　　　　　　　　　进行编码的符号范围不同，实际开发中常使用第一种

　　　　　　（2）强制转换

　　　　　　　　Number()

　　　　　　　　String()

　　　　　　　　Boolean()

　　　　　　（3）转成数字

　　　　　　　　　parseInt()

　　　　　　　　　parseFloat()

　　　　　　（4）eval()方法

　　　　　　　　将字符串当作脚本解析运行

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var str = "var a = 2;var b = 3;alert(a+b)";
    eval(str);
</script>

</head>
<body>    
    
</body>
</html>

输出5

五、js的事件

　　1、 js的常用事件

　　　　 onclick : 点击事件

　　　　　 onchange : 域内容被改变的事件

　　　　　　　　需求：实现二级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <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>
</body>

<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><option>杨浦</option>";
                break;
            default:
                alert("error"); 
        }  
    }
    
</script>

</html>

　　　　 onfoucus ：获得焦点的事件

　　　　 onblur : 失去焦点的事件

　　　　　　　　需求：当输入框获得焦点的时候，提示输入的内容格式

　　　　　　　　　　当输入框输入焦点的时候，提示输入有误

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <label for = "txt">name</label>
    <input id = "txt" type = "text"/><span id = "action"></span>
</body>

<script type="text/javascript">
    var txt = document.getElementById("txt");
    txt.onfocus = function(){
        //友好提示
        var span = document.getElementById("action");
        span.innerHTML = "用户名格式最小8位";
        span.style.color = "green";
    };
    txt.onblur = function(){
        //错误提示
        var span = document.getElementById("action");
        span.innerHTML = "对不起，格式不正确";
        span.style.color = "red";
    } 
</script>

</html>

　　　　　 onmouseover ：鼠标悬浮的事件

　　　　 onmouseout : 鼠标离开的事件

　　　　　　　　需求：div元素鼠标移入变为绿色移出回复原色

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type = "text/css">
    #d1{
        background-color : red;
        width:200px;
        height:200px;
    }
</style>

</head>
<body>            
    <div id = "d1"></div>
</body>

<script type="text/javascript">
    var div = document.getElementById("d1");
    div.onmouseover = function(){
        this.style.backgroundColor = "green";
    }
    div.onmouseout = function(){
        this.style.backgroundColor = "red";
    }
</script>

</html>

　　　　　 onload : 加载完毕的事件

　　　　　　等到页面加载完毕再执行onload事件所指向的函数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    window.onload = function()
    {
        var span = document.getElementById("span");
        span.innerHTML = "hello js"
    };
</script>

</head>
<body>            
    <span id = "span"></span>
</body>



</html>

　　2、事件的绑定方式

　　　　（1）将事件和响应行为都内嵌到html标签中

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" value = "button" onclick = "alert('xxx')">
</body>

<script type="text/javascript">
    
</script>

</html>

当点击按钮的时候会弹出xxx

　　　　（2）将事件内嵌到html中而响应行为用函数进行封装

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" value = "button" onclick = "fn()">
</body>

<script type="text/javascript">
    function fn(){
        alert("yyy");
    }
</script>

</html>

　　　　（3）将事件和响应行为与html标签完全分离

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input id = "btn"type = "button" value = "button">
</body>

<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        alert("zzz");
    }
</script>

</html>

　　　　this关键字

　　　　this经过事件的函数进行传递的是html标签对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>    
    <input type = "button" name = "mybtn" value = "button123" onclick = "fn(this)">
</body>

<script type="text/javascript">
    function fn(obj){
        alert(obj.name);
    }
</script>

</html>

　　3、阻止事件的默认行为

　　　　IE：window.event.returnValue = false;

　　　　W3c : 传递过来的事件对象.preventDefault();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <a href = "http://www.baidu.com" onclick = "fn(event)">点击我吧</a>
</body>

<script type="text/javascript">
    function fn(e){
        //IE window.event.returnValue = false;
        //w3c 传递过来的事件对象.preventDefault();
        //w3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标准
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
    }
</script>

</html>

　　4、阻止事件的传播　

　　　　IE：window.event.cancelBubble = true;

　　　　W3c : 传递过来的事件对象.stopPropagation();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <div onclick = "fn1(event)" style = "width:100px;height:100px;background-color:green;padding:50px">
        <div onclick = "fn2(event)" style = "width:100px;height:100px;background-color:red;">xxx</div>
    </div>
</body>

<script type="text/javascript">
    function fn1(e){
        alert("fn1");
    }
    function fn2(e){
        alert("fn2");
        //阻止事件的传播        
        if(e&&e.preventDefault){
            e.stopPropagation();
        //IE标准
        }else{
            window.event.cancelBubble = true;
        }
    }
</script>

</html>

六、js的bom

　　1、window对象

　　　　弹框的方法

　　　　　　提示框：alert("提示信息");

　　　　　　确认框：confirm("确认信息");

　　　　　　　　有返回值：如果点击确认返回true 如果点击取消返回false

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    var res = confirm("您确认要删除吗");
    alert(res);
</script>

</html>

　　　　输入框：prompt("提示信息");

　　　　　　也有返回值：如果点击确认返回输入框的文本，如果点击取消返回null

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    var res = prompt("请输入密码？");
    alert(res);
</script>

</html>

　　　　open方法：

　　　　　　window.open("url地址");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    window.open("http://www.baidu.com");
</script>

</html>

　　　　　定时器:

　　　　　　setTimeout(函数,毫秒值);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    
</body>

<script type="text/javascript">
    setTimeout(
        function(){
            alert("x");
        },
        3000
    );
</script>

</html>

　　　　clearTimeout(定时器的名称)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var fn = function(){
        alert("x");
        timer = setTimeout(fn,2000);
    };
    var closer = function(){
        clearTimeout(timer);
    }
    fn();
</script>

</head>
<body>            
    <input type = "button" value = "button" onclick = "closer()">
</body>
</html>

　　　　setInterval(函数,毫秒值);

　　　　clearinterval(定时器的名称);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
    var timer = setInterval(
        function(){
            alert("你好");
        },
        2000        
    );
    
    var closer = function(){
        clearInterval(timer);
    }
</script>

</head>
<body>            
    <input type = "button" value = "button" onclick = "closer()">
</body>
</html>

　　　　需求：注册后五秒跳转到首页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
        var time = 5;
        var timer;
        timer = setInterval(
            function(){
                var second = document.getElementById("second");    
                if(time >= 1)
                {
                    second.innerHTML = time;
                    time--;
                }
                else
                {
                    clearInterval(timer);
                    location.href = "demo11.html"
                }
            },
            1000
        );
</script>

</head>
<body>            
    恭喜您注册成功，<span id = "second" style = "color:red">5</span>秒后跳转到首页，如果不跳转请<a href = "demo11.html">点击这里</a>
</body>
</html>

　　　　location跳转

　　　　　　location.href = "url的地址"

　　　 history

　　　　　　back();

　　　　　　forward();

　　　　　　go();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
        
</script>

</head>
<body>            
    <a href = "demo14.html">后一页</a>
    <input type = "button" value = "上一页" onclick = "history.back()">
    <input type = "button" value = "下一页" onclick = "history.forword()">
</body>
</html>

七、js的dom

　　1、理解dom对象的模型

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

　　　　在dom树当中一切皆为节点对象

　　2、dom的方法和属性

　　　　查找元素

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

</head>
<body>            
    <form name = "form1" action = "text.html" method = "post">
        <input type = "text" name = "username" value = "天道酬勤" id = "tid">
        <input type = "submit" name = "ok" value = "保存">
    </form>
</body>

<script type="text/javascript">
        var inputNode = document.getElementById("tid");
        alert(inputNode.value);
        
        var inputNode = document.getElementById("tid");
        alert(inputNode.type);
</script>

</html>