javaScript基础知识集锦

一、创建对象的四种方式：
js的对象有：String、Boolean、Number（数值）、Date、Math（算术）、Array（数组）、RegExp(正则表达式)

1.有参数的构造函数

function Person(name,age,gender){
//name属性 this当前对象
this.name=name;
this.age=age;
this.gender=gender;
this.sleeep=function (){
}
alert("睡觉");
}
var p=new Person("xiaowangba",12,"nan")
p.sleeep()

2.无参的构造函数，追加属性和方法

function Teacher(){
}
var t=new Teacher();
//追加属性
t.name="w";
t.age=18;
t.gender="男";
//追加方法
t.eat=function(){
alert(t.gender+12313114);
alert(t.age)
alert("吃");
}

3.通过Object对象创建。然后追加属性和方法

var student=new Object();
//追加属性
student.name="zhang";
student.age=12;
student.gender="nan";

//追加方法
student.eat=function(){
alert("吃");
}

student.eat();

对象的内容的访问区别于java

for(item in student){
document.write("属性"+item+"值："+student[item]+"<br/>")

}

4.字面量方式创建对象

var p={
"name":"张三",
"age":18,
"gender":"男",
"say":function(){
alert("hello~~~");
}
}

p.say();
for(i in p){
document.write(p[i]+"<br />");

}
二、表单<form>

表单的常用属性：
action:把表单数据提交到哪个地方

method:get post

get:一般是大小的限制

post:

表单信息，一定要有name属性

input:

type属性：

text:文本框

password:密码框

radio:单选按钮(一组单选按钮的name属性值一样)

checkbox:复选框（一组复选框可以多选，name属性值一样）

reset:重置(重置表单数据回复默认)

button:普通按钮

file:文件

hidden:隐藏域（用来提交数据的，但是又不想在页面显示的）

maxlength:能输入的最大字符数

readonly:只读

disabled:禁止使用

border 边框值

cellspacing 合并单元格

常用内嵌标签

复选框：checkbox:checked="checked"默认选中

下拉框：<select></select>

<tr>\<th>\<td colspan="">

表单的验证待续...

二、BOM编程（通过浏览器封装的window、location、history、Screen来操作浏览器）

window的一些方法：

常用方法：setinterval()、setTimeout()

下面介绍了window,open()的使用

window.open() - 打开新窗口

window.close() - 关闭当前窗口

window.moveTo() - 移动当前窗口

window.resizeTo() - 调整当前窗口的尺寸

/**
* 第一个参数：地址
* 第二个参数：打开方式
* 第三个参数：
*/
window.open("广告.html","_blank","width=200px;height=300px;");

location的一些方法和属性：

常用方法：reload()

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）
href 路径

Screeen的一些方法和属性：

 availHeight
获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。
availWidth
获取系统屏幕的工作区域宽度，排除 Windows 任务栏。
height 获取屏幕的垂直分辨率。 
width 获取屏幕的水平分辨率。 

history的一些方法和属性：

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同

以下是测试代码：

<script>
function onForward(){
window.history.forward();
}
</script>

body>
<a href="content.html" target="_self">history</a>
<input type="button" value="forward" onclick="onForward()" />

</body>

三、实例之二级联动的实现

布局：

<select id="pro" onchange="change()">
<option value="000">---请选择----</option>
<option value="001">四川</option>
<option value="002">北京</option>
</select>
<select id="city">
<option value="000">---请选择----</option>
<option value="011">朝阳</option>
<option value="021">成都</option>
</select>
js:

function change(){
<!--<option没有value值时的访问方式?????>-->
//					alert("改变了"+document.getElementById("pro").value);
var proName=document.getElementById("pro").value;
var city=document.getElementById("city");

//					city.innerHTML="";
if(proName==001){
city.innerHTML="<option value='021'>成都</option>"
}else{
city.innerHTML="<option value='011'>朝阳</option>";
}
}

如果要实现大量数据的联动,js代码改为：
function change(){
//alert("改变了"+document.getElementById("pro").value);

var proValue=document.getElementById("pro").value;
var city=document.getElementById("city");
/**
* 北京
*/
city.innerHTML="<option value='0'>---请选择----</option>";
var city1=['成都','绵阳','南充','泸州','眉山','郫县'];
if(proValue==001){
city.innerHTML="<option va
4000
lue='0'>---请选择----</option><option value='朝阳'>朝阳</option><option value='昌平'>昌平</option>";

}
else if(proValue==002){
//city.innerHTML="<option value='成都'>成都</option>";
for(var i=0;i<city1.length;i++){
//在字符串里拼变量双引号双加
city.innerHTML+="<option value='"+city1[i]+"'>"+city1[i]+"</option>";

}
}
四、实例之复选框的全选/反选

运行效果：

布局：

<input type="button" value="全选/反选" onclick="selectALlOrNot()"/><br />
<input type="checkbox" name="price" id="" value="300" /><input type="text" name="subPrice"/><br />
<input type="checkbox" name="price" id="" value="300" /><input type="text" name="subPrice"/><br />
<input type="checkbox" name="price" id="" value="300" /><input type="text" name="subPrice"/><br />
<input type="checkbox" name="price" id="" value="300" /><input type="text" name="subPrice"/><br />
<input type="checkbox" name="price" id="" value="300" /><input type="text" name="subPrice"/><br />
<input type="button" value="加起来" onclick="sum()"><input type="text" name="sum"/>
js代码：
function selectALlOrNot(){
var prices=document.getElementsByName("price");
for(var i=0;i<prices.length;i++){
if(prices[i].checked==false){
prices[i].checked="checked";
}else{
prices[i].checked="";
}
}
}
function sum(){
var sum=0;
var prices=document.getElementsByName("price");
var subPrices=document.getElementsByName("subPrice");
for(var i=1;i<prices.length;i++){
if(prices[i].checked==true){
var price=parseInt(subPrices[i].value);
sum+=price;
}
}
document.getElementsByName("sum")[0].value=sum;
}
五、实例之图片的显示/隐藏

布局：

<img src="" alt="1" id="img1"/>
<input type="button" value="点击" onclick="changeTest()"/>
js：
function changeTest(){
/**
* 修改src的属性
*/
document.getElementById("img1").src="img/54089405_p0.jpg";
}
六、动态添加行

document.createElemet();

效果图：

布局：

<form>
<table border="1" cellspacing="0" cellpadding="" width="200">
<thead>
<tr><td>选中</td><td>编号</td><td>用户</td><td>密码</td><td>年龄</td><td>住址</td><td>操作</td></tr>
<tr ><td colspan="2"><input type="checkbox" ></td><td><a href=""><input type="text" value="全部删除" class="delete" onclick="deleteAll(this)"></a></td></tr>
</thead>
<tbody>
<tr><td><input type="checkbox" ></td>
<td><input type="text" value="001"></td>
<td><input type="text" value="黎明"></td>
<td><input type="text" value="111"></td>
<td><input type="text" value="11"></td>
<td><input type="text" value="香港"></td>
<td><input type="text" value="删除" class="delete"></td></tr>
</tbody>
</table>
<table border="" cellspacing="0" cellpadding="">
<tr><td><input type="text" value="编号:" style="width: 60px;" readonly="readonly" ></td><td><input type="text" name="ele1"></td></tr>
<tr><td><input type="text" value="用户:" style="width: 60px;" readonly="readonly"></td><td><input type="text" name="ele2"></td></tr>
<tr><td><input type="text" value="密码:" style="width: 60px;" readonly="readonly" ></td><td><input type="password" name="ele3"></td></tr>
<tr><td><input type="text" value="年龄:" style="width: 60px;" readonly="readonly" ></td><td><input type="text" name="ele4"></td></tr>
<tr><td><input type="text" value="住址:" style="width: 60px;" readonly="readonly" ></td><td><input type="text" name="ele5"></td></tr>
<tr><td lign="center" ><input type="button" value="重置" style="width: 60px;">
<input type="button" value="添加" style="width: 60px;" onclick="add()"></td></tr>
</table>

</form>
js:
function add(){
//获取输入值
var ele1=document.getElementsByName("ele1");
var ele2=document.getElementsByName("ele2");
var ele3=document.getElementsByName("ele3");
var ele4=document.getElementsByName("ele4");
var ele5=document.getElementsByName("ele5");
//创建 tr td input
var tr=document.createElement("tr");

//td
var td1=document.createElement("td");
var td2=document.createElement("td");
var td3=document.createElement("td");
var td4=document.createElement("td");
var td5=document.createElement("td");
var td6=document.createElement("td");
var td7=document.createElement("td");

//input

var in1=document.createElement("input");

in1.setAttribute("type","checkbox")
var in2=document.createElement("input");

in2.value=ele1[0].value;
var in3=document.createElement("input");
in3.value=ele2[0].value;
var in4=document.createElement("input");
in4.value=ele3[0].value;
var in5=document.createElement("input");
in5.value=ele4[0].value;
var in6=document.createElement("input");
in6.value=ele5[0].value;
var in7=document.createElement("input");
in7.value="删除";
in7.setAttribute("class","delete");
/**
* 动态添加事件
* 方法一：在IE中行不通
* in7.setAttribute("onclick","delete(this)");
*/
in7.setAttribute("onchange",delete(this));

in7.attachEvent("onclick","function(){alert("测试")}");

//旺td中添加input
td1.appendChild(in1);
td2.appendChild(in2);
td3.appendChild(in3);
td4.appendChild(in4);
td5.appendChild(in5);
td6.appendChild(in6);
td7.appendChild(in7);
//旺tr中添加td
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);
tr.appendChild(td6);
tr.appendChild(td7);

var t=document.getElementsByTagName("tbody");
t[0].appendChild(tr);
}
/**
* ?？？？？ Js中如何动态添加事件
*/
// function delete(obj){
//// var p=obj.parentNode;
////
//// p.removeChild(obj.Element)
// alert("OK!");
// }
function deleteAll(obj){var p=obj.parentNode;
for(var i=1;i<p.childNodes.length;i++){
p.remove((p.childNodes)[i]);
}

}七、原型（给对象添加方法）
实例一给自定义对象添加新的方法：

function Person(name){
this.name=name;
/*this.prototype= function prototype(){};*/
this.search=function(){}
} 实例二给系统对象重定义方法：

Array.prototype.sort=function (target){

for(var i=0;i<this.length;i++){
if(this[i]==target){
return i;
}
}

return -1;
}
var arr=[1,2,3,4,5,6];
alert(arr.sort(2));

实例三给系统对象添加新的方法：

var arr=[1,2,3,4,6];
var array=new Array();
String.prototype.toCharArray=function(){
for(var i=1;i<this.length;i++){
array[i]=this[i];
}
return array;
}
var str="scsdgda";
// alert(str.toCharArray());
String.prototype.reverse=function(){
for(var i=1;i<this.length;i++){
array[i]=this[this.length-i];
}
return array;
}
alert(str.reverse()); 持续更新中.....