****************************
动态的生成选择下拉框，并能构成在另外一个文本框中显示用户选择的内容
**forms对象(集合)
forms对象集合有
length:返回大小
item(index):指定取出forms对象集合的第几个form对象
说明：当访问某个表单的某个元素的时候，可以
（1）document.forms[第几个表单].元素的名字
（2）document.forms.item(第几个表单).元素的名字
案例：
**表单的一个验证综合案例：
Table对象
1. rows[] 表格中所有行的一个数组（针对表格）
2.cells[] 表格中所以单元格的一个数组（针对一行）
3.deleteRow() 删除一行 4.insertRow() 插入一行
案例：
小结：
1）.创建一个RegExp对象有两种方法：
1）.隐式创建：var myRegExp=/正则表达式/gim（g表示全局匹配，i表示区分大小写，m考虑换行）
2）.显式创建：var myRegExp=new RegExp("正则表达式","gi");
***************
2.RegExp对象方法有两种：
1.exec(contant):检索字符串中指定的值，并返回值（找不到则返回null）
2.test(contant):检索字符串中指定的值，但只是返回tru或false;
3.String对象中与正则表达式有关的方法：
1.match() 语法格式为：match(RegExp).与RegExp对象的exec方法类似，他使用正则表达式
模式对字符串执行搜索，并返回一个包含搜索结果的数组；注意：exec()返回的只是一个结果的
数组，而match()返回的是所有结果的数组；
2.search() 语法格式：search(RegExp)，他返回使用正则表达式搜索时，第一个匹配的字符串在整个
被搜索的字符串中的位置；
3.replace() 语法格式：replace(RegExp,"指定替换字符")；使用正则表达式模式对字符串执行搜索，
并对搜索到的内容用指定字符串替换，返回值为包含替换后的内容的字符串对象，
案例：
***************************************************
4.RegExp对象的属性
RegExp对象属性分为静态属性和实例属性。
所谓静态属性是指：可以通过RegExp就可以访问。
所谓实例属性是指：通过RegExp对象实例才能访问。
RegExp静态属性：
1. index是当前表达式模式首次匹配内容的开始位置，从0开始计数，其初始值为-1，每次成功匹配时，index属性都会随之改变。
2. lastindex 是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数。
3. input 返回当前所作用的字符串。
4. leftContext 是当前表达式模式最后一个匹配字符串左边的所有内容。
5. rightContext 是当前表达式模式最后一个匹配字符串右边的所有内容。
5.RegExp实例属性：
1. global 返回创建RegExp对象实例时指定的global标志(g)的状态(true,false)
2. ignoreCase 是返回创建RegExp对象实例时指定的ignoreCase标志(i)的状态(true,false)
3. multiline 返回创建RegExp对象实例时指定的multiLine标志(m)的状态true或者false
4. source 返回创建RegExp对象实例时指定的表达式文本字符串
6.子表达式和捕获，反向引用的概念
（图片子表达式和捕获，反向引用的概念图 ）
案例：\d表示数字型
① abba数字型：/(\d)(\d)\2\1/gi
② aabbccdd数字型：/(\d)\1(\d)\2(\d)\3(\d)\4/gi
③ abcde-fffggghhh数字型：/(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi
动态的生成选择下拉框，并能构成在另外一个文本框中显示用户选择的内容
<select id="myCourse" οnchange="getCourse();">
<option value="" selected>--请选择一门课程--</option>
</select><br/>
<textarea id="myares" cols=30 rows=10>
</textarea>
<script language="javascript">
var last_select_num=3;
//加入从数据库中查询，发现用户上次选择了3门课程
var myOption=document.createElement("OPTION");
//动态添加第一门课程java myOption.value="java";
myOption.text="java";
myCourse.add(myOption);
var myOption=document.createElement("OPTION");
//动态添加第二门课程
oracle myOption.value="oracle";
myOption.text="oracle";
myCourse.add(myOption);
var myOption=document.createElement("OPTION");
//动态添加第三门课程
j2ee myOption.value="j2ee";
myOption.text="j2ee";
myCourse.add(myOption);
//注意这两种方式的结果，有什么区别
function getCourse(){
myares.value+="你选中了1:"+myCourse.value+"\r\n";
//在文本域中“\r\n”表示回车换行。
//myares.value="你选中了:"+myCourse.options[myCourse.selectedIndex].innerText;
//每次只输出一行文本 } </script>
************************************forms对象(集合)
forms对象集合有
length:返回大小
item(index):指定取出forms对象集合的第几个form对象
说明：当访问某个表单的某个元素的时候，可以
（1）document.forms[第几个表单].元素的名字
（2）document.forms.item(第几个表单).元素的名字
案例：
**表单的一个验证综合案例：
要求：当用户输入的信息，不满足要求时，在提交的时候，给出相应的提示
<script language="javascript">
function $(id){
return document.getElementById(id);
}
function getInfo(obj){
var userNameLen=document.forms[0].userName.value.length;
var passwLen=document.forms[0].passw.value.length;
$("span1").innerText="";
$("span2").innerText="";
if(userNameLen<4||userNameLen>8){
$("span1").innerText="用户名应该在4~8位";
return false;
}
if(passwLen<4||passwLen>8){
$("span2").innerText="密码应该在4~8位";
return false;
}
}
</script>
</head>
<!--HTML代码-->
<body>
<h1>表单注册</h1>
<table border="1px">
<form action="#" >
<tr><td>用户 名</td><td class="td1"><input type="text" name="userName" class="style1"/><span id="span1"></span></td></tr>
<tr><td>密 码</td><td><input type="password" name="passw" class="style1"/><span id="span2"></span></td></tr>
<tr><td>确认密码</td><td><input type="password" name="passw2" class="style1"/></td></tr>
<tr><td>年 龄</td><td><input type="text" name="userAge" class="style1"/></td></tr>
<tr><td>电子邮件</td><td><input type="text" name="email" class="style1"/></td></tr>
<tr><td>电话号码</td><td><input type="text" name="phoneNum" class="style1"/></td></tr>
<tr><td><input type="submit" value="注册用户" name="submit1" οnclick="return getInfo(this)"/></td><td><input type="reset" name="reset1"/></td></tr>
</form>
</table>
</body>
**********
CSS文件代码：
.style1{
width:130px;
}
.td1{
width:300px;
}
span{
font-size:10px;
color:red;
}
**************************说明在验证表单的时候，可以在
<form action=”” οnsubmit=”函数”/>
也可：
<input type=”submit” οnclick=”函数”/>
******************************************
Images对象(对象)/img对象：
案例：
<script type="text/javascript">
function test1(){
myid.innerText="fail onload picture";
}
function test2(){
myid.innerText="success onload picture";
}
</script>
<img src="小黄.jpg" οnerrοr="test1()" οnlοad="test2()"/>
<span id="myid"></span>
***************************************
Table对象
1. rows[] 表格中所有行的一个数组（针对表格）
2.cells[] 表格中所以单元格的一个数组（针对一行）
3.deleteRow() 删除一行 4.insertRow() 插入一行
案例：
<!--HTML代码-->
<body>
<h1>英雄排行榜</h1>
<table border="1px" id="myTab">
<tr>
<td>排名</td>
<td>姓名</td>
<td>外号</td>
</tr>
<tr>
<td>1</td>
<td>宋江</td>
<td>及时雨</td>
</tr>
<tr>
<td>2</td>
<td>吴用</td>
<td>智多星</td>
</tr>
</table>
<input type="button" value="查询行数和列数" οnclick="getInfo(this)"/><br/>
<input type="button" value="查询表格内容" οnclick="getInfo2(this)"/><br/>
<input type="button" value="插入一行" οnclick="insertInfo(this)"/><br/>
<input type="button" value="删除一行" οnclick="deletInfo(this)"/><br/>
<script language="javascript">
function $(id){
return document.getElementById(id);
}
var myTabRows=$("myTab").rows;
var myTabCells=$("myTab").cells;
//得到行和列
function getInfo(obj){
alert("行数是："+myTabRows.length);
alert("列数是："+myTabRows[0].cells.length);
alert("单元格数是："+myTabCells.length);
}
//遍历表格信息并输出
function getInfo2(obj){
for(var i=0;i<myTabRows.length;i++){
var eachRow=myTabRows[i];
for(var j=0;j<eachRow.cells.length;j++){
alert(eachRow.cells[j].innerText);
}
}
}
//插入一行信息
function insertInfo(obj){
var myTabRow=$("myTab").insertRow(0);
myTabRow.insertCell(0).innerText="1";
myTabRow.insertCell(1).innerText="卢俊义";
myTabRow.insertCell(2).innerText="玉麒麟";
}
//删除一行信息
function deletInfo(obj){
$("myTab").deleteRow(0);
}
</script>
</body>
**********************************************************8
关于表格的一个综合案例：
<!--HTML代码-->
<body>
<h1>英雄排行榜</h1>
<table border="1px" id="myTab">
<tr>
<td>排名</td>
<td>姓名</td>
<td>外号</td>
</tr>
<tr>
<td>1</td>
<td>宋江</td>
<td>及时雨</td>
</tr>
<tr>
<td>2</td>
<td>吴用</td>
<td>智多星</td>
</tr>
</table>
<br/>
<h1>请输入新的好汉</h1>
排名<input type="text" id="paiming"/><br/>
姓名<input type="text" id="userName"/><br/>
绰号<input type="text" id="xiaohao"/><br/>
<input type="button" value="添加" οnclick="addInfo(this)"/>
<script language="javascript">
var tabRows=$("myTab").rows;
function $(id){
return document.getElementById(id);
}
//信息加入
function addInfo(obj){
//遍历表格的第一列，比较是否出现重复编号
for(var i=0;i<tabRows.length;i++){
var eachRow=tabRows[i];
//这边要注意比较的是innerText，不要忘了
if(eachRow.cells[0].innerText==$("paiming").value){
alert("编号重复");
return false;
}
}
//信息插入
var newTabRow=$("myTab").insertRow(tabRows.length);
newTabRow.insertCell(0).innerText=$("paiming").value;
newTabRow.insertCell(1).innerText=$("userName").value;
newTabRow.insertCell(2).innerText=$("xiaohao").value;
}
</script>
</body>
*******************************************
正则表达式：
1.基本概念：
用某种模式去匹配一类字符串的一个公式，反应到我们的JS中就是一个RegExp对象
举例：
给你一个字符串，请你查找所有四个数字连在一起的字符串；
<script languange="javascript" type="text/javascript" >
function $(id){
return document.getElementById(id);
}
function search(){
var myRegExp=/(\d){4}/gi;//检索四个连续的数字
var contant=$("contant").value;
while(res=myRegExp.exec(contant)){//检索处理的结果，一个结果对应一个数组，该数组的res[0]就是在找到的那个文本
alert("找到"+res[0]);
}
}
</script>
</head>
<body>
<textarea id="contant" rows="20" cols="20"></textarea>
<input type="button" value="查找" οnclick="search()"/>
</body>
小结：
1）.创建一个RegExp对象有两种方法：
1）.隐式创建：var myRegExp=/正则表达式/gim（g表示全局匹配，i表示区分大小写，m考虑换行）
2）.显式创建：var myRegExp=new RegExp("正则表达式","gi");
***************
2.RegExp对象方法有两种：
1.exec(contant):检索字符串中指定的值，并返回值（找不到则返回null）
2.test(contant):检索字符串中指定的值，但只是返回tru或false;
3.String对象中与正则表达式有关的方法：
1.match() 语法格式为：match(RegExp).与RegExp对象的exec方法类似，他使用正则表达式
模式对字符串执行搜索，并返回一个包含搜索结果的数组；注意：exec()返回的只是一个结果的
数组，而match()返回的是所有结果的数组；
2.search() 语法格式：search(RegExp)，他返回使用正则表达式搜索时，第一个匹配的字符串在整个
被搜索的字符串中的位置；
3.replace() 语法格式：replace(RegExp,"指定替换字符")；使用正则表达式模式对字符串执行搜索，
并对搜索到的内容用指定字符串替换，返回值为包含替换后的内容的字符串对象，
案例：
<script languange="javascript" type="text/javascript" >
function $(id){
return document.getElementById(id);
}
//match(regexp)
function search1(){
var myRegExp=/(\d){4}/gi;
var contant=$("contant").value;
res=contant.match(myRegExp);
for(var i=0;i<res.length;i++){
alert("找到"+res[i]);
}
}
//search(regexp)
function search2(){
var myRegExp=/(\d){4}/gi;
var contant=$("contant").value;
res=contant.search(myRegExp);
alert(res+"找到"+$("contant").value[res]);
}
//replace(regexp,"替换字符串")
function search2(){
var myRegExp=/(\d){4}/gi;
var contant=$("contant").value;
res=contant.replace(myRegExp,"四个连续数字");
//$("contant").value=res;
$("contant").innerText=res;
}
</script>
</head>
<body>
<textarea id="contant" rows="20" cols="20"></textarea>
<input type="button" value="查找" οnclick="search2()"/>
</body>***************************************************
4.RegExp对象的属性
RegExp对象属性分为静态属性和实例属性。
所谓静态属性是指：可以通过RegExp就可以访问。
所谓实例属性是指：通过RegExp对象实例才能访问。
RegExp静态属性：
1. index是当前表达式模式首次匹配内容的开始位置，从0开始计数，其初始值为-1，每次成功匹配时，index属性都会随之改变。
2. lastindex 是当前表达式模式首次匹配内容中最后一个字符的下一个位置，从0开始计数。
3. input 返回当前所作用的字符串。
4. leftContext 是当前表达式模式最后一个匹配字符串左边的所有内容。
5. rightContext 是当前表达式模式最后一个匹配字符串右边的所有内容。
5.RegExp实例属性：
1. global 返回创建RegExp对象实例时指定的global标志(g)的状态(true,false)
2. ignoreCase 是返回创建RegExp对象实例时指定的ignoreCase标志(i)的状态(true,false)
3. multiline 返回创建RegExp对象实例时指定的multiLine标志(m)的状态true或者false
4. source 返回创建RegExp对象实例时指定的表达式文本字符串
6.子表达式和捕获，反向引用的概念
（图片子表达式和捕获，反向引用的概念图 ）
案例：\d表示数字型
① abba数字型：/(\d)(\d)\2\1/gi
② aabbccdd数字型：/(\d)\1(\d)\2(\d)\3(\d)\4/gi
③ abcde-fffggghhh数字型：/(\d){5}-(\d)\2\2(\d)\3\3(\d)\4\4/gi
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
