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 value='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 inputvar tr=document.createElement("tr");//tdvar 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");//inputvar 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中添加inputtd1.appendChild(in1);td2.appendChild(in2);td3.appendChild(in3);td4.appendChild(in4);td5.appendChild(in5);td6.appendChild(in6);td7.appendChild(in7);//旺tr中添加tdtr.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());

持续更新中.....