1.每一个函数都有两个方法，call和apply，都是调用函数。可以用来传递参数
2.prototype即原型，这是每一个构造函数都具有的属性。如：
function Test()
{
}
alert(Test.prototype); // 输出 "Object"js中继承是通过prototype来实现的，这位原型继承，而java则是通过extends来实现。例如：
<script>
function Person(name,age){//实际上定义了一个Person类
this.name = name;
this.age = age;
}
function Boy(){}
Boy.prototype = new Person("李四",15);//以Person为原型构造新类
function test(){
var b = new Boy();
alert(b.name);
}
</script><script>
test();
</script>3.用js添加生成按钮
var filebtn = document.creatElement('input');
//虽然添加的是按钮，但由于有<input type="button">,实际上//Element看的是//标签，因为button的也为input标签。从这里可以看出，若要生成文本框，
//element类型也为input
var br = document.creatElement('br');
//这是添加换行符
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type=text/javascript charset=utf-8>
//用js生成按钮并添加相应事件
window.onload = function(){
//1新建按钮 点击的时候能够添加一个文件、删除按钮
var filebtn = document.createElement('input');//必须用createElement,而不是addElement
filebtn.type = 'button';
filebtn.value = '新增文件';
filebtn.id = 'filebtn';
filebtn.addEventListener('click',function(){
addFileAndBr();
},false);
var br = document.createElement('br');//定义换行符
document.body.appendChild(filebtn);//将新增节点添加到body中
document.body.appendChild(br);
};
function addFileAndBr(){
var file = document.createElement('input');
file.type = 'file';
var del = document.createElement('input');
del.type = 'button';
del.value = '删除当前行';
del.addEventListener('click',function(){
this.parentNode.removeChild(this.previousSibling);
this.parentNode.removeChild(this.nextSibling);
this.parentNode.removeChild(this);//在这儿要注意，前两项可互相调换位置，而第三项只能位于最后，只能到最后再删除自己
} , false);
var br = document.createElement('br');
document.body.appendChild(file);
document.body.appendChild(del);
document.body.appendChild(br);
};
</script>
</head>
<body>
</body>
</html>
再说一下target.addEventListener(type,listener,useCapture)的用法
target为文档节点，一般为document、window等
type为事件类型，如click，keydown等，不含"on"
listener为监听时的处理方法
useCapture为是否使用捕捉，值在true或false中选，一般选择false
这种方法可以对统一事件绑定多个处理方法，很灵活。
⑴直接获取
①getElementByid 普通对象
②getElementsByname 数组，如：
document.getElementsByName("abc")是将所有name属性为abc的元素节点放到一个数组返回
③getElementsByTagName 数组
document.getElementByTagName("a")是将所有<a>标签的元素节点放到一个数组返回
⑵间接获取
①获取子节点
childNodes,firstNode,lastNode
②获取父节点
parentNode
③获取兄弟节点
nextSibling,previouSibling
如何操作已有对象？
①通过属性操作，用.来进行。setAttribute,getAttribute
②通过内容操作，innerHTML
给BOM树增加新节点？
①创建节点 documemt.creatElement
②将新建节点添加到bom树 appendChild,insertBefore
添加新节点例子，如：
var c = document.getElementById("c");
div2.insertBefore(m,document.getElementById("c"));
//m是新插入的节点，c为老节点，div2为父节点，意为将m节点添加到c节点之前这种方法不好的地方在于要知道c的父节点是谁，若不想这么麻烦，则可以用:c.parentNode.insertBefore(m,c);
//这是常用写法，无需知道c节点的父节点是什么
c.parentNode.removeChild(c);//即可删除c节点c.removeChild(c);//必须先调用父节点，而我们无需知道父节点是什么removeChild
替换BOM树的节点
replaceChild
5.获取表单名字，可用多种方法，其中最常用的是如：
<form name="regFrm"></form>var frm1 = document.regFrm;//最简单，最常用的方法
var frm2 = document.forms["regFrm"];6.表单验证，一般这样写（基本写法）
<form name="regFrm" action="a.jsp" method="post" οnsubmit="return validate()">对于“用户名”不能为空的简单验证
用户名 <input type="text" name="username" ><script>
function validate(){
var na = document.regFrm.username;//document后直接跟表单名和用户名的name
if(na.value.length>0){//千万不能丢了value
return true;
}else{
alert("用户名不能为空");
}
}
</script><form name="regFrm" action="a.jsp" method="post" οnsubmit="return validate(this)">function validate(frm){//frm只是形参名字，表示表单
var na = frm.username;
}7.表单域没有name属性就不会被提交，这可应用在password选项中，比较两次密码输入是否一致时，可将“确认密码”项的name改为id，这样既可以引用，又不用提交。
8.处理复选框、单选按钮，通常的做法就是遍历
9.综合练习，利用js做简单的表单验证。一定要熟练
<!--利用js做简单的表单验证 -->
<!--要求1.用户名不能为空 -->
<!-- 2.密码必须一致 -->
<!-- 3.爱好至少选一项 -->
<!--错误时给出提示，而不是弹窗 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>TestForm.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.error{color:red;}
<!--使用类选择器-->
</style>
<script type="text/javascript" src="util.js">//从外部引入js
</script>
<script type="text/javascript">
function check(frm){//因为在form中是check(this),所以frm指代的是表单名称
var username = frm.username.value.trim();//作用是去除空格,value是属性，后边不能加括号，否则不执行,不能写成frm.username.value()
var pwd_1 = frm.pwd1.value.trim();//属性为name的写法
var pwd_2 = $("pwd2").value.trim();//对应属性为id的写法，注意$(e)中的e为字符串，必须加"",不能写成$(pwd2)
var flag1 = true;
$("unameMsg").innerHTML = "";//这样写防止username不为空时仍出现错误提示信息
$("pwdMsg").innerHTML = "";
if(username.length==0){
$("unameMsg").innerHTML = "×用户名不能为空";
flag1 = false;
}
if(pwd_1.length==0){
$("pwdMsg").innerHTML = "×密码不能为空";
flag1 = false;
}
if(pwd_1!=pwd_2){
$("pwdMsg").innerHTML = "×两次密码输入不一样";//还是在第一行密码前提示，不用在第二行
flag1 = false;
}
var flag2 = false;
for(var i=0;i<frm.fav.length;i++){
if(frm.fav[i].checked){
flag2 = true;
break;//若为true，则中断该方法
}
}
$("favMsg").innerHTML = "";
if(!flag2){//注意为非flag2，默认为false，取反才能执行错误提示操作
$("favMsg").innerHTML = "×至少选一项";
}
return flag1&&flag2;//注意是&&，而不是&
}
</script>
</head>
<body>
<form name="regFrm" method="get" οnsubmit="return check(this)"><!-- this指的是当前对象，即form -->
用户名<input type="text" name="username" ><span class="error" id="unameMsg"></span><br/>
<!--不能用<div>,因为会换行 -->
密码<input type="password" name="pwd1"><span class="error" id="pwdMsg"></span><br/>
确认密码<input type="password" id="pwd2"><br/><!--写id而不是name是因为第二次密码无需提交 -->
爱好
<input type="checkbox" name="fav" value="1">看书
<input type="checkbox" name="fav" value="2">跑步
<input type="checkbox" name="fav" value="3">游泳
<span class="error" id="favMsg"></span><br/>
<br/>
<input type="submit" value="提交">
</form>
</body>
</html>
function $(e){
return document.getElementById(e);
}
//作用是去除空格
String.prototype.trim = function(){//为String对象增加一个trim方法,以后就可以直接使用。如var s=" sb ";s=s.trim();即可去除空格
return this.replace(/(^\s+)|(^\s+$)/,"");
}
说明：
String.prototype.trim = function(){
return this.replace(/(^\s+)|(^\s+$)/,"");
}动态的给String的原型添加了一个trim()的方法。添加后，就可以这样使用String.trim();如：
var s = " abc ";
s = s.trim(); // s是个String，可以使用刚定义的trim方法。
alert(s);
扫一扫
3965
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
