一、创建对象的四种方式：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("吃");
}
var student=new Object();
//追加属性
student.name="zhang";
student.age=12;
student.gender="nan";
//追加方法
student.eat=function(){
alert("吃");
}
student.eat();
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" οnclick="onForward()" />
</body>三、实例之二级联动的实现
布局：
<select id="pro" οnchange="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> 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>";
}
}
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="全选/反选" οnclick="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="加起来" οnclick="sum()"><input type="text" name="sum"/>
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="点击" οnclick="changeTest()"/>
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" οnclick="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;" οnclick="add()"></td></tr>
</table>
</form>
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());
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
