JavaScript（1）
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>关羽<guanyu@qq.com></li> <li>刘备</li> <li>赵云<zhaoyun@163.com></li> </ul> </body> </html>
