javascript
基本语法
script标签
alert()：警告框函数，传入的参数是警告框内要显示的信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1.script标签</title>
<script type="text/javascript">
//alert()是JavaScript提供的一个警告函数，可以接收任意类型的参数，这个参数就是警告框内显示的信息
alert("hello JavaScript");
</script>
</head>
<body>
</body>
</html>
引入js代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2.引入JavaScript代码</title>
<!--
使用script标签引入js代码
src属性专门用来引入 js文件路径（可以是相对路径，也可以是绝对路径）
script标签可以用来定义 js代码，也可以用来引入 js文件
但是，两个功能二选一使用，不能同时使用两个功能，定义两个script标签即可
-->
<script type="text/javascript" src="2.js代码.js"></script>
<script type="text/javascript">alert("123");</script>
</head>
<body>
</body>
</html>
2.js代码.js
/**
* 2.引入JavaScript代码.html对应的js代码
*/
alert("hello JavaScript");
变量
typeof(x)：判断x的数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3.变量</title>
<script type="text/javascript">
/*
JavaScript 的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
选择符合要求的数据类型：
if(typeof(x)=="number"){
}
JavaScript 里特殊的值：
undefined 未定义，所有 js变量未赋初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字，非数值。
JS 中的定义变量格式：
var 变量名;
var 变量名 = 值;
*/
var i;
alert(i);//undefined
i = 12;
//typeof()可以返回变量的数据类型
alert(typeof(i));//number
i = "abc";
alert(typeof(i));//string
var a = 1;
var b = "abc";
alert(a*b);//NaN
</script>
</head>
<body>
</body>
</html>
比较运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>4.比较运算</title>
<script type="text/javascript">
/*
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
*/
var a = "12";
var b = 12;
alert( a == b ); //true
alert( a === b ); //false
</script>
</head>
<body>
</body>
</html>
逻辑运算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>5.逻辑运算</title>
<script type="text/javascript">
/*
且运算： &&
或运算： ||
取反运算： !
在 JavaScript中，所有的变量，都可以做为一个 boolean类型的变量去使用
0 、null、 undefined、""(空串) 都认为是 false
&& 且运算：
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算：
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
&&运算和||运算有短路：
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
*/
var a = "abc";
var b = true;
var c = null;
var d = false;
//alert( a && b );//true
//alert( b && a );//abc
//alert( a && d );//false
//alert( a && c );//null
//alert( d || c );//null
//alert( c || d );//false
//alert( a || c );//abc
//alert( b || c );//true
</script>
</head>
<body>
</body>
</html>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>6.数组</title>
<script type="text/javascript">
/*
js中数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1, 'abc', true];//定义数组同时赋值元素
javaScript中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动给数组做扩容操作
*/
var arr = [];
alert(arr.length);//0
arr[0] = 12;
alert(arr[0]);//12
alert(arr.length);//1
arr[2] = "abc";
alert(arr[2]);//abc
alert(arr[1]);//undefined
alert(arr.length);//3
//数组的遍历
for(var i=0; i<arr.length; i++){
alert(arr[i]);//12 undefined abc
}
</script>
</head>
<body>
</body>
</html>
函数
第一种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>7.函数_1</title>
<script type="text/javascript">
/*
定义函数的第一种方式：
格式：
function 函数名(形参列表) {
函数体
}
在 Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
*/
//无参函数
function fun1(){
alert("fun1");
}
fun1();
//有参函数
function fun2(a, b){
alert("a="+a+", "+"b="+b);
}
fun2(1, "abc");
//有返回值的函数
function fun3(a, b){
return a + b;
}
alert(fun3(1, 2));
</script>
</head>
<body>
</body>
</html>
第二种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>7.函数_2</title>
<script type="text/javascript">
/*
定义函数的第二种方式：
格式：
var 函数名 = function(形参列表) {
函数体
}
在 Java中函数允许重载，但是在JS中函数的重载会直接覆盖掉上一次的定义
*/
//无参函数
var fun1 = function(){
alert("123");
}
fun1();
//有参函数
var fun2 = function(a, b){
alert(a+b);
}
fun2(1, 2);
//有返回值的函数
var fun3 = function(a, b){
var res = a + b;
return res;
}
alert(fun3(2, 4));
</script>
</head>
<body>
</body>
</html>
隐式参数arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>8.隐式参数arguments</title>
<script type="text/javascript">
/*
js中的函数，可以通过arguments属性，获取传入该函数的所有参数，类似于Java中的可变参数
*/
function fun(){
alert(arguments.length);//可变参数个数
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
for (var i=0; i<arguments.length; i++){
alert(arguments[i]);
}
}
fun(1,"ad",true);
//需求：编写 一个函数，计算所有参数相加的和并返回
function sum(){
var res = 0;
for(var i=0; i<arguments.length; i++){
res += arguments[i];
}
return res;
}
alert(sum("abc",1,2,3));//0abc123
alert(sum(1,2,3,4));//10
//优化sum
function sumPro(){
var res = 0;
for(var i=0; i<arguments.length; i++){
if(typeof(arguments[i])=="number"){
res += arguments[i];
}
}
return res;
}
alert(sumPro("abc",1,2,3));//6
</script>
</head>
<body>
</body>
</html>
自定义对象
{ }形式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.{}形式的自定义对象</title>
<script type="text/javascript">
/*
对象的定义：
var 变量名 = { // 空对象
属性名：值, //定义一个属性
属性名：值, //定义一个属性
函数名：function(){} //定义一个函数
};
对象的访问：
变量名.属性 / 函数名();
*/
var obj = {
name: "迪达拉",
age: 20,
func: function(){
alert("姓名：" + this.name + "，年龄：" + this.age);
}
};
alert(obj.name);
alert(obj.age);
obj.func();
</script>
</head>
<body>
</body>
</html>
Object形式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>9.Object形式的自定义对象</title>
<script type="text/javascript">
/*
对象的定义：
var 变量名 = new Object(); //对象实例（空对象）
变量名.属性名 = 值; // 定义一个属性
变量名.函数名 = function(){} //定义一个函数
对象的访问：
变量名.属性 / 函数名();
*/
var obj = new Object();
obj.name = "天道";
obj.age = 22;
obj.func = function(){
alert("姓名：" + this.name + "，年龄：" + this.age);
}
alert(obj.name);
alert(obj.age);
obj.func();
</script>
</head>
<body>
</body>
</html>
事件
注意：onsubmit事件要绑定在表单（form标签）上
onload
静态注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态注册onload事件</title>
<script type="text/javascript">
function func(){
alert("静态注册onload");
}
</script>
</head>
<!--
静态注册onload事件
onload 事件是浏览器解析完页面之后就会自动触发的事件
-->
<body onload="func()">
</body>
</html>
动态注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态注册onload事件</title>
<script type="text/javascript">
/*
动态注册事件：是指先通过 js 代码得到标签的 dom对象，然后再通过 dom对象.事件名 = function(){} 这种形式赋于事件响应后的代码，叫动态注册。
动态注册基本步骤：
1、获取标签对象
2、标签对象.事件名 = fucntion(){}
onload 加载完成事件： 页面加载完成之后，常用于做页面 js 代码初始化操作
*/
//动态注册onload事件
window.onload = function(){
alert("动态注册onload");
}
</script>
</head>
<body>
</body>
</html>
onclick
document是JavaScript语言提供的一个对象（文档）
document.getElementById()：通过 id 属性获取标签对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onclick事件</title>
<script type="text/javascript">
/*
onclick 单击事件： 常用于按钮的点击响应操作。
*/
//静态注册onclick
function func(){
alert("静态注册onclick");
}
//动态注册onclick
window.onload = function(){
//1.获取标签对象
/*
document是JavaScript语言提供的一个对象（文档）
getElementById 通过 id 属性获取标签对象
*/
var button02 = document.getElementById("button02");
//2.通过标签对象.事件名 = function(){}
button02.onclick = function(){
alert("动态注册onclick");
}
}
</script>
</head>
<body>
<button onclick="func()">按钮1</button>
<button id="button02">按钮2</button>
</body>
</html>
onblur
console是控制台对象，是由 JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用。
console.log()：打印到控制台
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onblur事件</title>
<script type="text/javascript">
/*
onblur 失去焦点事件： 常用用于输入框失去焦点后验证其输入内容是否合法。
*/
function func(){
//console是控制台对象，是由 JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
//log()是打印的方法
console.log("静态注册onblur");
}
//动态注册onblur
window.onload = function(){
//1.获取标签对象
var pwd = document.getElementById("pwd");
//2.通过标签对象.事件名 = function(){}
pwd.onblur = function(){
console.log("动态注册onblur");
}
}
</script>
</head>
<body>
<form>
<table align="center">
<tr>
<td>用户名：</td>
<td><input type="text" onblur="func()"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="pwd"></td>
</tr>
</table>
</form>
</body>
</html>
onchange
静态绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>静态注册onchange事件</title>
</head>
<script type="text/javascript">
/*
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
*/
function func(){
alert("静态注册onchange");
}
</script>
<body>
<form>
<table align="center">
<tr>
<td>国籍：</td>
<td>
<select onchange="func()">
<option selected="selected">国籍</option>
<option>中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
动态绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态注册onchange事件</title>
</head>
<script type="text/javascript">
/*
onchange 内容发生改变事件： 常用于下拉列表和输入框内容发生改变后操作
*/
//动态注册
window.onload = function(){
//1.获取标签对象
var select = document.getElementById("select");
//2.通过标签对象.事件名 = function(){}
select.onchange = function(){
alert("动态注册onchange");
}
}
</script>
<body>
<form>
<table align="center">
<tr>
<td>国籍：</td>
<td>
<select id="select">
<option selected="selected">国籍</option>
<option>中国</option>
<option>美国</option>
<option>日本</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
onsubmit
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onsubmit事件</title>
<script type="text/javascript">
/*
onsubmit 表单提交事件： 常用于表单提交前，验证所有表单项是否合法。
*/
//要验证所有表单项是否合法，如果有一个不合法就要阻止表单提交
function func(){
alert("静态注册onsubmit，发现不合法表单项！");
return false;
}
//动态注册
window.onload = function(){
//1.获取标签对象
var form02 = document.getElementById("form02");
//2.通过标签对象.事件名 = function(){}
form02.onsubmit = function(){
alert("动态注册onsubmit，发现不合法表单项！");
return false;
}
}
</script>
</head>
<body>
<!--return false 可以阻止 表单提交 -->
<form action="https://www.baidu.com" method="get" onsubmit="return func()">
<input type="submit" value="静态注册">
</form>
<form action="https://www.baidu.com" method="get" id="form02">
<input type="submit" value="动态注册">
</form>
</body>
</html>
DOM对象
DOM，Document Object Model，文档对象模型
Document对象：
- 管理了所有HTML文档内容。
- 是一种树型结构的文档，有层级关系。
- 把所有的标签都对象化
- 可以通过document访问所有的标签对象。
注意：上述方法必须要在页面加载完成之后（onload内）使用
getElementById()
代码1：点击校验按钮，弹出窗口提示用户名是否合法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById_1</title>
<script type="text/javascript">
/*
需求：
用户输入用户名，点击校验按钮之后，获取输入内容，判断是否合法
用户名只能由字母、数字、下划线组成，长度为5-12位
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName)
*/
//为校验按钮绑定onclick事件
window.onload = function(){
var but01 = document.getElementById("but01");
but01.onclick = function(){
//获取input标签内容，首先要获取input标签对象
var in01 = document.getElementById("input01");
//获取输入框内的内容（动态获取）
var userName = in01.value;
var regex = /^\w{5,12}$/;
/*
*test()方法用于测试某个字符串，是否与匹配规则 ，
* 匹配则返回 true，不匹配则返回 false.
*/
if(regex.test(userName)){
alert("用户名合法");
} else {
alert("用户名不合法");
}
}
}
</script>
</head>
<body>
用户名：<input type="text" id="input01" value="请输入用户名">
<button id="but01">校验</button>
</body>
</html>
代码2：点击校验按钮，在用户名输入框右侧显示 √ 或 ×
dom对象.innerHTML：获取起始标签和结束标签之间的内容
dom对象.value：动态获取标签的value值（新输入的值覆盖默认的值）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById_2</title>
<script type="text/javascript">
/*
第二种校验方式
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName)
*/
window.onload = function(){
//获取input、span、button标签对象
var input01 = document.getElementById("input01");
var span01 = document.getElementById("span01");
var button01 = document.getElementById("but01");
//为button标签注册onclick事件
button01.onclick = function(){
var regx = /^\w{5,12}$/;
var flag = regx.test(input01.value);
/*
if(flag){
//innerHTML获取起始标签和结束标签之间的内容
checkName.innerHTML = "用户名合法";
} else {
checkName.innerHTML = "用户名不合法";
}
*/
if(flag){
//innerHTML获取起始标签和结束标签之间的内容
span01.innerHTML = "<img src=\"right.png\" width=\"20\" height=\"20\">";
} else {
span01.innerHTML = "<img src=\"wrong.png\" width=\"20\" height=\"20\">";
}
}
}
</script>
</head>
<body>
用户名：<input type="text" id="input01" value="请输入用户名">
<span style="color: red;" id="span01"></span>
<button id="but01">校验</button>
</body>
</html>
代码3：去除校验按钮，当输入框失去焦点后就显示 √ 或 ×
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementById_2</title>
<script type="text/javascript">
/*
第二种校验方式
document.getElementById(elementId)
通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName)
通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname)
通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement(tagName)
*/
window.onload = function(){
//获取input、span、button标签对象
var input01 = document.getElementById("input01");
var span01 = document.getElementById("span01");
//为input标签注册onblur事件
input01.onblur = function(){
var regx = /^\w{5,12}$/;
var flag = regx.test(input01.value);
if(flag){
//innerHTML获取起始标签和结束标签之间的内容
span01.innerHTML = "<img src=\"right.png\" width=\"20\" height=\"20\">";
} else {
span01.innerHTML = "<img src=\"wrong.png\" width=\"20\" height=\"20\">";
}
}
}
</script>
</head>
<body>
用户名：<input type="text" id="input01" value="请输入用户名">
<span style="color: red;" id="span01"></span>
</body>
</html>
getElementByName
实现全选、全不选和反选操作：
复选框dom对象的checked属性，表示复选框的选中状态，选中是true，不选中是false
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementByName</title>
<script type="text/javascript">
/*
getElementsByName()可以用来获取属于同一组的标签对象，
当想同时对一组标签进行操作时，可以为这些标签设置同样的name属性，之后利用该方法获取所有标签对象
*/
window.onload = function(){
//获取三个按钮对象，并绑定onclick事件
var checkAll = document.getElementById("button01");
var checkNone = document.getElementById("button02");
var checkReverse = document.getElementById("button03");
checkAll.onclick = function(){
/*
document.getElementsByName();是根据指定的name属性查询返回多个标签对象集合
这个集合的操作跟数组一样，集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面中从上到下的顺序
*/
var hobbies = document.getElementsByName("hobby");
for(var i=0; i<hobbies.length; i++){
/*
checked 表示复选框的选中状态，选中是true，不选中是false
*/
hobbies[i].checked = true;
}
}
checkNone.onclick = function(){
var hobbies = document.getElementsByName("hobby");
for(var i=0; i<hobbies.length; i++){
hobbies[i].checked = false;
}
}
checkReverse.onclick = function(){
var hobbies = document.getElementsByName("hobby");
for(var i=0; i<hobbies.length; i++){
//hobbies[i].checked = !hobbies[i].checkes;
var flag = hobbies[i].checked;
if(flag){
hobbies[i].checked = false;
} else {
hobbies[i].checked = true;
}
}
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" name="hobby" value="java">java
<input type="checkbox" name="hobby" value="python">python
<input type="checkbox" name="hobby" value="C++">C++
<input type="checkbox" name="hobby" value="C">C
<br>
<button id="button01">全选</button>
<button id="button02">全不选</button>
<button id="button03">反选</button>
</body>
</html>
getElementByTagName
演示全选操作：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>getElementsByTagName</title>
<script type="text/javascript">
/*
getElementsByTagName()可以用来获取属于同一组的标签对象，
当想同时对一组标签进行操作时，但没有对标签进行id和name属性的赋值，若这些标签是相同类型的标签，可以利用该方法获取所有标签对象
*/
window.onload = function(){
//获取按钮对象，并绑定onclick事件
var checkAll = document.getElementById("button01");
checkAll.onclick = function(){
/*
document.getElementsByTagName();返回多个相同类型标签对象的集合
这个集合的操作跟数组一样，集合中每个元素都是dom对象，这个集合中的元素顺序是他们在html页面中从上到下的顺序
*/
var inputs = document.getElementsByTagName("input");
for(var i=0; i<inputs.length; i++){
/*
checked 表示复选框的选中状态，选中是true，不选中是false
*/
inputs[i].checked = true;
}
}
}
</script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="java">java
<input type="checkbox" value="python">python
<input type="checkbox" value="C++">C++
<input type="checkbox" value="C">C
<br>
<button id="button01">全选</button>
</body>
</html>
dom对象的属性
dom对象.appendChild( oChildNode )：为当前标签添加一个子标签，oChildNode 是要添加的孩子标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
window.onload = function(){
//1.查找#bj节点
document.getElementById("btn01").onclick = function(){
var bj = document.getElementById("bj");
alert(bj.innerHTML);
}
//2.查找所有li节点
var btn02Ele = document.getElementById("btn02");
btn02Ele.onclick = function(){
var lis = document.getElementsByTagName("li");
alert(lis.length);
};
//3.查找name=gender的所有节点
var btn03Ele = document.getElementById("btn03");
btn03Ele.onclick = function(){
var genders = document.getElementsByName("gender");
alert(genders.length);
};
//4.查找#city下所有li节点
var btn04Ele = document.getElementById("btn04");
btn04Ele.onclick = function(){
//1.获取id为city的节点
var city = document.getElementById("city");
//2.获取city下name=li的所有节点
var lis = city.getElementsByTagName("li");
alert(lis.length);
};
//5.返回#city的所有子节点
var btn05Ele = document.getElementById("btn05");
btn05Ele.onclick = function(){
//1.获取id为city的节点
var city = document.getElementById("city");
//2.获取city的所有节点
alert(city.childNodes.length);//9空白字符也算子节点
};
//6.返回#phone的第一个子节点
var btn06Ele = document.getElementById("btn06");
btn06Ele.onclick = function(){
alert(document.getElementById("phone").firstChild.innerHTML);
};
//7.返回#bj的父节点
var btn07Ele = document.getElementById("btn07");
btn07Ele.onclick = function(){
alert(document.getElementById("bj").parentNode.innerHTML);
};
//8.返回#android的前一个兄弟节点
var btn08Ele = document.getElementById("btn08");
btn08Ele.onclick = function(){
var android = document.getElementById("android");
var preNode = android.previousSibling;
alert(preNode.innerHTML);
};
//9.读取#username的value属性值
var btn09Ele = document.getElementById("btn09");
btn09Ele.onclick = function(){
var value = document.getElementById("username").value;
alert(value);
};
//10.设置#username的value属性值
var btn10Ele = document.getElementById("btn10");
btn10Ele.onclick = function(){
document.getElementById("username").value = "12345";
};
//11.返回#city的文本值
var btn11Ele = document.getElementById("btn11");
btn11Ele.onclick = function(){
alert(document.getElementById("city").innerHTML);//innerHTML获取所有内容
alert(document.getElementById("city").innerText);//innerText只获取文本，不包括字符等
};
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#city的文本值</button></div>
</div>
</body>
</html>
正则表达式
注意：如果要精确匹配，必须要使用^和$包围
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
<script type="text/javascript">
/*
var patt = new RegExp(pattern, modifiers);
var patt = /pattern/modifiers;
modifiers = i/g/m
i 忽略大小写。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。
注意与Java的区别，Java要求某位必须是某个字符，JS是只要整个字符串包含该字符即可
Java中：System.out.println("123abc456".matches("[a-z]"));//false, 因为第一位不是字母
JS中：alert(/[a-z]/.test("123abc456"));//true
[abc] 查找方括号之间的任何字符。
[^abc] 查找任何不在方括号之间的字符。
[0-9] 判断是否包含数字
[a-z] 判断是否包含小写字母
[A-Z] 判断是否包含大写字母
[A-z] 查找任何从大写 A到小写 z的字符。
[adgk] 查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
. 查找单个字符，除了换行和行结束符。
\w 查找单词字符。
\W 查找非单词字符。
\d 查找数字。
\D 查找非数字字符。
\s 查找空白字符。
\S 查找非空白字符。
\b 匹配单词边界。
\B 匹配非单词边界。
\0 查找 NULL 字符。
注意：描述方式是包含时，只检查最低规则，
alert(/a?/.test("123aabc456"));//true, 因为包含0个a
alert(/a{1,2}/.test("123aaabc456"));//true, 因为包含最少1个a
若要严格执行规则，要加^和$
alert(/^a?$/.test("123aabc456"));//false
alert(/^a{1,2}$/.test("123aaabc456"));//false
n+ 匹配任何包含至少一个n的字符串。
n* 匹配任何包含零个或多个n的字符串。
n? 匹配任何包含零个或一个n的字符串。
n{X} 匹配包含X个n的序列的字符串。
n{X,Y} 匹配包含X或Y个n的序列的字符串。
n{X,} 匹配包含至少X个n的序列的字符串。
n$ 匹配任何结尾为n的字符串。
^n 匹配任何开头为n的字符串。
?=n 匹配任何其后紧接指定字符串n的字符串。
?!n 匹配任何其后没有紧接指定字符串n的字符串。
RegExp对象方法：
compile 编译正则表达式。
exec 检索字符串中指定的值。返回找到的值，并确定其位置。
test 检索字符串中指定的值。返回 true或false。
支持正则表达式的 String对象的方法：
search 检索与正则表达式相匹配的值。
match 找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split 把字符串分割为字符串数组。
*/
alert(/[a-z]/.test("123abc123"));//注意：Java中代表第一个字符必须是a-z，但JS中，只要字符串中包含a-z就返回true
alert(/^a?$/.test("123aabc456"));//false
alert(/^a{1,2}$/.test("123aaabc456"));//false
</script>
</head>
<body>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
