javascript总结

转自：https://www.cnblogs.com/zhangxinqi/p/8884520.html

阅读目录

1、javascript显示数据
2、javascript语法
3、javascript数据类型
4、javascript对象
5、javascript事件
6、字符串属性和方法
7、逻辑判断与循环
8、JavaScript类型转换
9、JavaScript正则表达式
10、JavaScript错误处理
11、实例

JavaScript简介：

JavaScript是web的编程语言，所有现代的HTML页面都使用JavaScript。

JavaScript是一种轻量级的编程语言；可以插入HTML页面的编程代码；可由所有的现代浏览器执行。

回到顶部

1、javascript显示数据

javascript可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

回到顶部

2、javascript语法

数字（number）字面量，可以是整数或者是小数，或者科学计数（e）。

字符串（string）字面量，可以使用单引号或者双引号。

表达式字面量，用于计算。

数组（array）字面量，定义一个数组：[10,20,30,40]

对象（object）字面量，定义一个对象：{name:"zhangsan",age:22,sex:"men"}

函数（function）字面量，定义一个函数：function myfunction(a,b) {return a * b;}

javascript变量，使用关键字var来定义变量，使用等号来为变量赋值：

在javascript中声明无值的变量时，其值实际上是undefined。

如果重新声明变量，该变了的值不会丢失，在重新赋值时才会丢失。

var a,length
x = 18
length = 8

javascript语句使用分号分隔。

和其他编程语言一样，javascript保留一些关键字为自己所用，如:var关键字告诉浏览器创建一个新的变量。

javascript关键字必须以字母、下划线或美元符开始，后续的字符可以是字幕，数字，下划线或者美元符，数组不允许作为首字符出现。

javascript注释使用双斜杠“//”进行单行注释，多行注释以/*开始，以*/结尾。

JavaScript 对大小写是敏感的。

JavaScript 使用 Unicode 字符集。

Unicode 覆盖了所有的字符，包含标点等字符。

JavaScript 语句标识符 (关键字) ：

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

提示：JavaScript 是脚本语言。浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

回到顶部

3、javascript数据类型

字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

javascript数组：

创建数组的方法：数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推

var array1=new array();
array1[0]="none";
array1[1]="two";
array1[2]="three";

//或者
var array1 = new array("none","two","three");

//或者
var array1=["none","two","three"];

javascript对象：

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

对象属性有两种寻址方式：

name=person.lastname;
name=person["lastname"];

Undefined 这个值表示变量不含有值；可以通过将变量的值设置为 null 来清空变量。

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

回到顶部

4、javascript对象

在javascript中，几乎所有的事物都是对象，对象也是一个变量，但对象可以包含多个值（多个变量）。

javascript对象是变量的容器，但是，我们通常认为javascript对象的键值对是容器，键值对的通常写法为name:value，以冒号分割，键值对在javascript对象通常称为对象属性。

对象方法：对象的方法定义了一个函数，并作为对象的属性存储，对象方法通过添加（）调用，作为一个函数

访问对象方法：

你可以使用以下语法创建对象方法：

methodName : function() { code lines }

你可以使用以下语法访问对象方法：

objectName.methodName()

回到顶部

5、javascript事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性

可以使用多种方法来执行 JavaScript 事件代码：

HTML 事件属性可以直接执行 JavaScript 代码
HTML 事件属性可以调用 JavaScript 函数
你可以为 HTML 元素指定自己的事件处理程序
你可以阻止事件的发生。

回到顶部

6、字符串属性和方法

属性：

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

方法：

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

回到顶部

7、逻辑判断与循环

switch语句，选择执行多个代码块之一，使用 default 关键词来规定匹配不存在时做的事情

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

<body>
<button onclick="myfunc()">点击</button>
<p id="demo"></p>

<script>
    function myfunc(){
        var x;
        var d = new Date().getDay();   //获取星期值
        switch (d){   //匹配星期
            case 0:x="星期日";
            break;
            case 1:x="星期一";
            break;
            case 2:x="星期二";
            break;
            case 3:x="星期三";
            break;
            case 4:x="星期四";
            break;
            case 5:x="星期五";
            break;
            case 6:x="星期六";
            break;
        }
        document.getElementById("demo").innerHTML=x;  //匹配的x值赋值给demo对象
    }
</script>
</body>

for循环：

<script>
    for(var i=0;i<10;i++){
        document.write("数字:" + i + "<br />");
    }
</script>

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

for in 语句循环遍历对象的属性：

var pre = {one:'java',two:'python',three:'php',four:'c++',five:'bash'};
    for (var i in pre){
        console.log(i + "==" + pre[i]);
    }

while循环：指定条件为真时循环执行代码块。

var i = 0;
while ( i < 10){
        console.log("this is number:" + i + "<br />");
        i++;
}

do while循环，while循环的变体，该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话重复一个循环。

<body>
<p>do while循环</p>
<button onclick="myfunction()">点击</button>
<p id="demo"></p>
<script>
    function myfunction(){
        var x="",i=0;
        do{
            x=x+"该数字为:"+i+"<br />";
            i++;
        }while(i<5)
        document.getElementById("demo").innerHTML=x;
    }
</script>
</body>

可以对 JavaScript 语句进行标记，如需标记 JavaScript 语句，请在语句之前加上冒号：

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块。

typeof操作符，可以检测变量的数据类型。

回到顶部

8、JavaScript类型转换

Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

在 JavaScript 中有 5 种不同的数据类型：

string
number
boolean
object
function

3 种对象类型：

Object
Date
Array

2 个不包含任何值的数据类型：

null
undefined

请注意：

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

<script>
    document.getElementById('demo').innerHTML =
    typeof "John" + "<br>" +     //string
    typeof 3.14 + "<br />" +   //number
    typeof NaN + "<br />" +   //number
    typeof false + "<br />" +   //boolean
    typeof [1,2,3] + "<br />" +   //object
    typeof {name:"john",age:22} + "<br />" +   //object
    typeof mycar + "<br />" +    //undefined
    typeof null;     //object
</script>

constructor 属性返回所有 JavaScript 变量的构造函数:

//判断是否为数组
<script>
    var fru = ['banana','orange','apple','mango']
    document.getElementById("demo").innerHTML = isArry(fru);
    function isArry(myarray){
        return myarray.constructor.toString().indexOf("Array") > -1;
    }
</script>

//判断是否为日期
<script>
    var mydate = new Date();
    window.alert(mydate);
    document.getElementById("demo").innerHTML = isArry(mydate);
    function isArry(myarray){
        return myarray.constructor.toString().indexOf("Date") > -1;
    }
</script>

JavaScript 类型转换:

全局方法 String() 可以将数字转换为字符串:

<p id="demo"></p>
<script>
    var aa = 88;
    document.getElementById("demo").innerHTML =
        typeof aa + "<br />" +
        typeof String(aa);
</script>

to String()方法同样可以将数字转换为字符串;还可以将布尔值转换为字符串

toExponential()把对象的值转换为指数计数法。

toFixed() 把数字转换为字符串，结果的小数点后有指定位数的数字。

toPrecision() 把数字格式化为指定的长度。

date方法，返回日期：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

Number() 可以将字符串转换为数字，空字符串转换为0,其他字符串会转换为NaN；还可以将布尔值转换为数字

parseFloat() 解析一个字符串，并返回一个浮点数。

parseInt() 解析一个字符串，并返回一个整数。

一元运算符“+” :可以将变量转换为数字,如果变量不能转换，它仍然是一个数字，值为NaN。

将日期转换为数字：Number() 或 dateName.getTime()

<script>
    var d = new Date();
    document.getElementById("demo").innerHTML =
        Number(d) + "<br />" +    //将日期转换为数字
        d.getTime();    //效果同上

</script>

自动转换类型：

当JavaScript尝试操作一个“错误”的数据类型时，会自动转换为“正确"的数据类型。

5 + null    // 返回 5         null 转换为 0
"5" + null  // 返回"5null"   null 转换为 "null"
"5" + 1     // 返回 "51"      1 转换为 "1"  
"5" - 1     // 返回 4         "5" 转换为 5

回到顶部

9、JavaScript正则表达式

语法：/正则表达式主体/修饰符(可选)

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

<script>
    function myfun(){
        var str = "pythonbachjavascriptphp";
        alert(str.search(/java/));  //查找匹配项返回匹配的起始位置
        alert(str.replace(/java/i,"hello")) //替换查找的内容
    }
    myfun()
</script>

正则表达式修饰符：

i :执行对大小写不敏感的匹配

g :执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）

m :执行多行匹配.

正则表达式模式：

[abc] :查找方括号之间的任何字符。

[0-9] :查找任何从0到9直接的数字

{x|y} :查找任何以|分隔的选项值.

\d :查找数字

\s :查找空白字符

\b :匹配单边单词

\uxxxx ：查找以十六进制数xxxx规定的Unicode字符.

n+ :匹配任何包含至少一个N的字符串

n* :匹配任何包含零个或多个n的字符串

n? :匹配任何包含零个或一个n的字符串。

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

alert(/e/.test("abcdefg"));  //匹配字符串中是否包含有匹配的文本，有则返回true.

exec() 方法用于检索字符串中的正则表达式的匹配。

该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

alert(/e/.exec("abceefg"));  //返回匹配的结果

判断字符串是否为数字、字母、下划线组成：

function isvalid(str){return /^\w+$/.test(str);}
    str = "123ddf_";
    document.write(isvalid(str));

回到顶部

10、JavaScript错误处理

try 语句测试代码块的错误；catch 语句处理错误；throw 语句创建自定义错误。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

<body>
<script>
    var tex = '';
    function message(){
        try{
            adlert("welcome guest");
        }
        catch(err){
            tex="本页有错误 \n\n";
            tex+="错误详细："+err.message +"\n\n";
            tex+="点击确定继续 \n\n";
            alert(tex);
        }
    }
</script>
<input type="button" value="详细消息" onclick="message()" />
</body>

throw 语句允许我们创建自定义错误；正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

<p>请输出一个 5 到 10 之间的数字:</p>

<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入</button>
<p id="message"></p>

<script>
function myFunction() {
    var message, x;
    message = document.getElementById("message");
    message.innerHTML = "";
    x = document.getElementById("demo").value;
    try { 
        if(x == "")  throw "值为空";
        if(isNaN(x)) throw "不是数字";
        x = Number(x);
        if(x < 5)    throw "太小";
        if(x > 10)   throw "太大";
    }
    catch(err) {
        message.innerHTML = "错误: " + err;
    }
}
</script>

JavaScript的调试工具，可使用浏览器自带的调试工具，可按F12键调出。

也可以在代码中使用debugger关键字，当代码碰到debugger关键字后将不再往下执行。

<script>
function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}
</script>
</head>
<body>

<form name="myForm" action="demo_form.php"
onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

</body>

验证表单输入是否为1到10之间的数字：

<body>
    <h1>javascript</h1>
    <p>请输入1到10之间的数字</p>
    <input id="numb">
    <button type="button" onclick="myfunc()">提交</button>
    <p id="demo"></p>
    <script>
        function myfunc(){
            var x,text;
            x=document.getElementById("numb").value;
            if (isNaN(x) || x < 1 || x > 10){
                text = "输入错误！";
            }else{
                text="输入正确！"
            }
            document.getElementById("demo").innerHTML=text;
        }
    </script>
</body>

回到顶部

11、实例

找对象的方法：

//按ID查找
        alert(document.getElementById("ID"));
        //按标签找,div,p,input...哪怕只找到一个也会包装成数组返回。
        var hist = document.getElementsByTagName('div');
        alert(hist);
        alert(hist[0]);

        //对应表单元素，可以按name来查询
        alert(document.getElementsByName("username")[0]);
        alert(document.getElementsByName('username')[0].value);

        //按照类名来查找
        alert(document.getElementsByClassName("className")[0]);

        //找子对象children和父对象parent
        alert(document.getElementById("ID").children.length);
        alert(document.getElementById("ID").parent.length);

        //改变css
        document.getElementsByTagName('h1')[0].style.background="gray";

点击事件，颜色变化

<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script>
        function togo(){
            var test = document.getElementById("demo");
            var coll = ["red","blue","green","black","yellow","purple","while","gray"];
            //document.write(test.style.background.indexOf("blue"));
            if(test.style.background.indexOf("blue") >=0){
                test.style.background = "green";
            }
            else if(test.style.background.indexOf("green") >=0){
                test.style.background = "red";
            }
            else if(test.style.background.indexOf("red") >=0){
                test.style.background = "yellow";
            }
            else{
                test.style.background = "blue";
            }
        }

    </script>
</head>
<body>
<div id="demo" style="height:300px;width:300px;background:blue;" onclick="togo()"></div>

点击DIV使其背景色红绿交替宽增高5px; 下边框增粗1px;

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .test1{
            background:green;
        }
        .test2{
            background:red;
        }
    </style>
    <script>
        function t(){
            var div = document.getElementsByTagName('div')[0];
            if(div.className.indexOf('test1') >= 0){
                div.className = "test2";
            }else{
                div.className = "test1";
            }
            div.style.width = parseInt(div.style.width)+5+'px'; //parseInt转换字符为数字
            div.style.height = parseInt(div.style.height)+5+'px';
            div.style.borderBottomWidth =parseInt(div.style.borderBottomWidth)+1+'px';
        }
    </script>
</head>
<body>
<div class="test1" onclick="t();" style="width:200px;height:200px;border-bottom:5px solid black;">
    点击DIV使其背景色红绿交替
    宽增高5px;
    下边框增粗1px;
</div>
</body>

上面的方法只能在内联标签下获取样式，不够灵活。下面使用getComputedStyle()方法获取计算的最终样式，再进行修改，这种方法获取的样式数值是只读的，不能修改。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width:200px;
            height:200px;
            border-bottom:1px solid black;
        }
        .test1{
            background:green;
        }
        .test2{
            background:red;
        }
    </style>
    <script>
        function getstyle(obj,attr){  //获取计算样式
            return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
        }
        function t(){
            var div = document.getElementsByTagName('div')[0];
            if(div.className.indexOf('test1') >= 0){
                div.className = "test2";
            }else{
                div.className = "test1";
            }
            div.style.width = parseInt(getstyle(div,"width"))+5+'px'; //parseInt转换字符为数字
            div.style.height = parseInt(getstyle(div,'height'))+5+'px';
            div.style.borderBottomWidth =parseInt(getstyle(div,'borderBottomWidth'))+1+'px';
        }
    </script>
</head>
<body>
<div class="test1" onclick="t();">
    点击DIV使其背景色红绿交替
    宽增高5px;
    下边框增粗1px;
</div>
</body>

创建子节点并通过输入添加内容，删除子节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js删除和添加子对象</title>
    <script>
        function del(){
            var lis = document.getElementsByTagName('li');  //获取子节点
            var lastli = lis[lis.length-1];   //获取最后一个子节点
            lastli.parentNode.removeChild(lastli); //通过父对象将子对象的最后一个删除
        }
        function add(){
            var lia = document.createElement('li');  //创建子节点
            var te = document.getElementsByName('name')[0].value; //获取节点内容
            //alert(te);
            var txt = document.createTextNode(te);  //创建节点文本
            lia.appendChild(txt);   //将文本写入子节点
            document.getElementsByTagName('ul')[0].appendChild(lia); //增加子节点
        }
    </script>
</head>
<body>
<input type="text" name="name" value="hehe" />
<input type="button" value="删除" onclick="del();" />
<input type="button" value="增加" onclick="add();" />
<ul>
    <li>春</li>
    <li>夏</li>
    <li>秋</li>
    <li>冬</li>
</ul>
</body>
</html>

使用innerHTML暴力操作节点子节点：

<head>
    <meta charset="UTF-8">
    <title>innerHTML暴力操作属性</title>
</head>
<body>
    <input type="text" name="name" value=""/>
    <input type="button" value="添加" onclick="add()"/>
    <ul></ul>
</body>
    <script>
        function add(){
            var ul = document.getElementsByTagName("ul")[0];
            var text = document.getElementsByName('name')[0].value;
            var allte = '<li>' + text + '</li>';
            ul.innerHTML += allte;
        }
    </script>

联动菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>联动菜单</title>
    <script>
        var area = [
            ['朝阳','海淀','丰台'],
            ['武汉','荆州','汉口'],
            ['奉贤','浦东','虹口']
        ];
        function dd(){
            var sel = document.getElementById('prov');
            var opt = '';
            if (sel.value == '-1'){
                document.getElementById('city').innerHTML = opt;
                return;
            }
            for (var i=0,len=area[sel.value].length;i<len;i++){
                opt= opt + '<option value="'+ i +'">' + area[sel.value][i] + '</option>';
            }
            document.getElementById('city').innerHTML = opt;
        }

    </script>
</head>
<body>
    <select name="" id="prov" onchange="dd();">
        <option value="-1">请选择</option>
        <option value="0">北京</option>
        <option value="1">湖北</option>
        <option value="2">上海</option>
    </select>
    <select name="" id="city">

    </select>
</body>
</html>

window.setTimeout("function",time)；//设置一个超时对象，只执行一次,无周期
window.setInterval("function",time)；//设置一个超时对象，周期＝'交互时间'
停止定时：
window.clearTimeout(对象) 清除已设置的setTimeout对象
window.clearInterval(对象) 清除已设置的setInterval对象

定时更换图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js setTimeout</title>
    <script>
        function bang(){
            var inp = document.getElementsByTagName('img')[0];
            inp.src='2.jpg';
            document.getElementsByName('vay')[0].value = 0;
        }
        setTimeout('bang()',3000);  //设置定时3秒执行函数
    </script>
</head>
<body>
<h1>定时器</h1>
<input type="button" name="vay" value="3"><br />
<img style="height:300px;width:300px;" src="1.jpg"/>
</body>
</html>

倒记时更换效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function ban(){
            var inp = document.getElementsByName('time')[0];
            var time = parseInt(inp.value) - 1; //parseInt转换字符为数字
            inp.value = time;
            if(time == 0){
                document.getElementsByTagName('img')[0].src='2.jpg';
                clearInterval(clock);  //清除定时
            }
        }
        var clock = setInterval('ban()',1000); //指定1秒后执行ban()
    </script>
</head>
<body>
<h1>定时器</h1>
<input type="button" name="time" value="5"/><br />
<img style="height:300px;width:300px;" src="1.jpg"/>
</body>
</html>

常用事件：

onclick　　元素点击时

onfocus　　元素获得焦点时

onblur　　元素失去焦点时

当元素获取焦点时，改变元素的style值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>thing</title>
    <script>
        function t1(){
            document.getElementsByName('username')[0].style.border = '1px solid red';
        }
        function t2(){
            document.getElementsByName('username')[0].style.border = '';
        }
    </script>
</head>
<body>
<p>
    <input type="text" name="username" onfocus="t1();" onblur="t2()"/>
</p>
<p>
    <input type="text" name="email"/>
</p>
</body>
</html>

onmouseover事件:鼠标指针移动到元素上时触发事件

onmouseout事件:在鼠标指针移出指定的对象时触发事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标经过事件</title>
    <style>
        div{
            height:300px;
            width:300px;
            background:yellow;
            border:2px solid green;
        }

    </style>
    <script>
        function t1(){
            var div = document.getElementsByTagName('div')[0];
            div.style.background = "red";
        }
        function t2(){
            document.getElementsByTagName('div')[0].style.background = "green";
        }
    </script>
</head>
<body>
<h1>鼠标经过移开时发生的事件</h1>
<div id="" onmouseover="t1();" onmouseout="t2();" ></div>
</body>
</html>

onsubmit：表单提交时事件

onload：页面加载完毕时事件

事件、行为、结构分离：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件、行为、结构分离</title>
    <style>     //行为ccs
        div{
            width:300px;
            height:300px;
            border:2px solid blue;
        }
    </style>
</head>
<body>
<div>    //结构
    <p>
        <ul>
            <li>结构</li>
        </ul>
    </p>
</div>

</body>
<script>   //事件
    document.getElementsByTagName("div")[0].onclick = function (){
        document.getElementsByTagName('div')[0].style.border ="5px solid red";
        this.style.background ="yellow";   //this代表查找的对象本身
    }

</script>
</html>

事件对象：事件发生的瞬间，发生位置，时间，鼠标按键，触发的节点等信息被打包成一个对象，此对象，系统自动传递给事件函数的第一个参数。

onmouseover当鼠标经过时移动位置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件对象</title>
    <style>
        img{
            width:130px;
            height:130px;
            position:relative;
            left: 0px;
            top: 0px;
        }
    </style>
</head>
<body>
<pre>
1.事件对象包含事件相关的信息，如鼠标，时间，触发的DOM对象等
2.事件对象被系统传递给事件函数的第一个参数
3.事件对象的属性在IE/w3c略有不同
4.一个重要的事件属性：target，srcElement(IE下)，代表事件发生的所在DOM对象。
</pre>
<img src="./11.jpg" alt="" />
</body>
<script>
    document.getElementsByTagName('img')[0].onmouseover = function(ev){
        //console.log(ev);
            this.style.left = ev.pageX + 10 + 'px';
            this.style.top = ev.pageY + 10 + 'px';
    }
</script>
</html>

事件委托：td委托table通过事件对象对属性更改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width:300px;
            height:300px;
            border:0;
            border-collapse:collapse;
            background:green;
        }
        td{
            border:1px solid gray;
        }
    </style>
</head>
<body>
<h1>事件委托</h1>
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>
</body>
<script>
    var num=0;
    document.getElementsByTagName('table')[0].onclick = function(ev){
        ev.target.style.background = num++%2?"black":"white";
    }  //使用事件委托对事件对象target操作改变属性
</script>
</html>

JS使用正则：

声明：var patt=/^d{11}$/;

使用：判断string是否符合正则要求：patt.test(String);

找出字符中符合正则的子串：patt.exec(String);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则</title>
</head>
<body>
<pre>
    1.用户名由6-11位数字字母组成
    2.email符合规范
    3.不合规范不允许提交
</pre>
<form action="">
    <p>用户名：<input type="text" name="username"/></p>
    <p>email：<input type="text" name="email" /></p>
    <p><input type="submit" value="提交" /></p>
</form>

</body>
<script>
    document.getElementsByTagName('form')[0].onsubmit = function(){
        var patt=/^[a-zA-Z0-9]{6,11}$/;
        var email = /^\w+@\w+(\.\w+)+$/;
        if(!patt.test(document.getElementsByName('username')[0].value)){
            alert('用户名必须由6-11位数字字母组成');
            return false;
        }
        else if(!email.test(document.getElementsByName('email')[0].value)){
            alert('请输入正确的email');
            return false;
        }
    }
</script>
</html>

exec匹配有邮箱的人并标记颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则匹配</title>
    <script>
        function find(){
            var lis = document.getElementsByTagName('li');
            var email = /\w+@\w+(\.\w+)+/;
            for(var i=0;i<lis.length;i++){
                if(email.exec(lis[i].innerHTML) != null){
                    lis[i].style.background = 'green';
                }
            }
        }
    </script>
</head>
<body>
<input type="button" value="查找有邮箱的人" onclick="find();" />
<ul>
    <li>张飞</li>
    <li>关羽&lt;guanyu@qq.com&gt;</li>
    <li>刘备</li>
    <li>赵云&lt;zhaoyun@163.com&gt;</li>
</ul>
</body>
</html>

posted @ 2018-07-04 10:57 qqssnn 阅读(291) 评论(0) 编辑收藏举报

刷新页面返回顶部

非明Tina

javascript总结

1、javascript显示数据

2、javascript语法

3、javascript数据类型

4、javascript对象

5、javascript事件

6、字符串属性和方法

7、逻辑判断与循环

8、JavaScript类型转换

9、JavaScript正则表达式

10、JavaScript错误处理

11、实例

公告