js声明
<!--在head标签中使用script标签进行js代码域声明-->
<script type="text/javascript" language="JavaScript"></script>
<!--引入外部声明的js文件-->
<script src="" type="text/javascript" charset="utf-8"></script>
变量
var=12|3.14|"aa"|'bb'|true|new Date()
变量名区分大小写
数据类型
查看数据类型 typeof a
number，string，boolean，object，undefined(undefined类型)，null(object类型)
变量转换
Number(a)，转换为数值类型，失败返回NaN(number类型)
Boolean(a)，转布尔，非零值返回true，0值，null，未定义，空字符串返回false
算术运算符
除了+号，碰到字符串，进行字符串连接
其他运算符都会先将运算对象转换成数值类型在进行计算
比较运算符中有数字时，也会先将其他类型转成数值类型
===必须类型一致，值一致
null == undefined，但是不全等
数组
声明方式
var arr1 = new Array(); //声明空数组
arr1[0] = "abc";
var arr2 = new Array(5); //声明指定长度的数组
alert(arr2.length);
var arr3 = [1, 2, 3];
var arr4 = new Array([5, 6]); //直接给初始值
var arr5 = []; //空数组
arr5[0] = 0;
arr5[10] = 10;
alert(arr5.length); //11
// 数组长度看最大的下标，下标只能是数字，下标不存在的值是undefined
//遍历
for(;;)
for(var i in arr)
练习
function test(btn){
// var num = document.getElementById("aaa").value;
var num = btn.value;
switch(num) {
case "=":
document.getElementById("inp").value = eval(document.getElementById("inp").value);
break;
case "c":
document.getElementById("inp").value = "";
break;
default:
document.getElementById("inp").value += btn.value;
break;
}
}
<input type="text" id="inp" value="" />
<input type="button" id="aaa" value="1" onclick="test(this)" />
数组常用操作
合并：str.concat(b, c);
数组转字符串：str.join(“-”); //参数是分隔符
尾部出栈：str.pop();
尾部入栈：str.push("hello");
反转：str.reverse();
头部出栈：str.shift();
头部入栈：str.unshift("aa");
排序：sort()；
删除并可选插入：splice()；
JS函数
//js里函数是对象
function foo(a1, a2) {alert("函数声明1")}；
var test = new Function("a1", "a2", "alert('函数声明2')")；//最后一个是函数体
var bar = function(a1, a2) {};
类
function Person(name, age) {//声明和构造二合一了
this.name = name;
this.age = age;
this.test = function(a) {
alert(a);
}
}
var p1 = new Person("张三", 20);
alert(p1.name);
p1.address = "北京市";
alert(p1.address); //类对象里的内容，可以动态加
//使用prototype
Person.prototype.test = function(){alert("哈哈");}; //类对象公有的，优先找本对象自己的
function User(uname, pwd) {
this.uname = uname;
this.pwd = pwd;
}
User.prototype.goo = function(){alert("goo")};
Person.prototype.user = new User();
p1.user.goo(); //变相实现继承的功能
Person.prototype = new User();
p1.goo();
对象
//临时创建一个对象，来自定义属性存储数据,一般用来存数据
var obj = new Object();
obj.name = "张三";
obj.age = "25";
常用方法和对象
String对象
toUpperCase
toLowerCase
substr //指定开始位置和长度
strstring //指定开始位置和结束位置
indexOf //指定字符第一次出现的位置
LastIndexOf //最后一次
Date对象
var d =new Date();
d.getYear();
Math对象
random //[0, 1）
floor //向下取整
Gloabal对象
eval //检查js代码并执行
isNaN //
parseInt //
JS事件
onclick //单击
ondbclick //双击
onmouseover //鼠标进入
onmousemove //鼠标移动
onmouseout //鼠标移出
onkeydown //键盘按下
onkeyup //键盘弹起
onfocus //获取焦点
onblur //失去焦点
onload //页面加载，页面加载成功之后，主要用来初始化页面数据，body
onchange //值改变事件，select
事件冲突
例如单双击事件之间
事件阻断
事件的函数如果返回的是false，那么标签本身的功能，如超链接，form表单提交的动作会被阻断
超链接执行js函数
<a href="javascript:testfunc()">调动js函数</a>
window对象
BOM浏览器对象模型的具体实现，JS调用浏览器本身的功能
window对象不用new，直接进行使用即可。window关键字可以省略不写
框体方法
window.alert("我是警告框"); //警告框，无返回值
window.confirm("确定要删除么？"); //确认框，返回boolean
var name = window.prompt("请输入昵称:"); //提示框，返回输入的字符串或null
定时器和间隔器
var id1 = setTimeout(func, 3000);//定时执行，指定时间后执行指定函数，参数1函数对象，参数2时间毫秒
var id2 = setInterval(func, 2000); //间隔执行，间隔固定时间执行
cleanTimeout(id1); //停止执行的定时器
cleanInterval(id2); //停止指定的间隔器
子页面
//从父页面，打开子页面
open('页面.html','newwindow', 'width=600, height, left=100px, top, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no')
window.setInternal(function(){
var span = document.getElementById("timeSpan");
span.innerHTML = span.innerHTML - 1;
// 关闭子页面
if (span.innerHTML == 0) {
window.close(); //只能关闭window.open打开的页面
}
}, 1000);
window.openser.testfunc();//子页面调用父页面的方法。可以在父页面搞提示语，可以重新加载父页面的资源
<b> 欢迎访问，页面将在<span id="timeSpan" style="color:red; font-size:30px">5</span>后关闭</b>
window对象常用属性
//地址栏属性
window.location.href="http://www.baidu.com"; //跳转
window.location.reload(); //刷新
//历史记录属性
window.history.forward(); //前进
window.history.back(); //后退
window.history.go; //跳转到指定历史记录页面，0是当前页面
//屏幕属性
window.screen.width; //分辨率
window.screen.height;
//浏览器配置属性
window.navigator.userAgent; //浏览器版本信息
//主体面板属性(document)
document对象
浏览器对外提供的一个对象，支持js操作HTML文档，此对象封存了HTML文档的所有信息。
document获取元素对象
- 直接获取
var a = window.document.getElementById("uname");//id
var fav = window.document.getElementsByName("fav");//name,返回数组
var input = window.document.getElementsByTagName("input");//标签名，返回数组
var xx = window.document.getElementsByClassName("common");//class
- 间接获取
//父子关系
var showdiv = document.getElementById("showdiv"); //获取父级元素对象
var childs = showdiv.childNodes; //获取所有的子元素对象数组
//子父关系
var inp = document.getElementById("inp"); //获取子元素对象
var div = showdiv.parentNode; //获取父元素
//兄弟关系
var inp = document.getElementById("inp"); //获取元素对象
var preEle = inp.previosSibling; //上一个元素
var nextEle = inp.nextSibling; //下一个元素
document操作元素属性
var inp = document.getElementById("unmme");
alert(inp.type + ":" + inp.name + ":" + inp.id + ":" + inp.value); //获取固有属性
inp.value = "jealous"; //修改固有属性
inp.getAttribute("customized_attribute");
inp.setAttribute("customized_attribute", "classic");
document操作元素内容和样式
alert(div.innerHTML); //获取元素对象div的所有内容，包括HTML标签
div.innerTEXT; //获取元素对象div的文本内容，不包括HTML标签
showdiv.style.backgroundColor="#FFA500"; //修改元素style属性中的样式
document操作元素的文档结构
showdiv.innerHTML = showdiv.innerHTML + "<div><input type='file' value=''/><input type='button' value='删除' onclick='delInp(this)'/></div>"; //div增加内容
function delInp(btn) {
var showdiv = getElementById("showdiv");
var cdiv = btn.parentNode; //input元素对象的父节点
showdiv.removeChild(cdiv); //父div删除子div
}
var showdiv = document.getElementById("showdiv");
var inp = document.createElement("input");
inp.type = "file";
var btn = document.createElement("input");
btn.tyle = "button";
btn.value = "删除"；
btn.onclick = function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
var br = document.createElement("br");
//将创建的元素放到div里面
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
JS操作form表单
//获取form表单对象
var fm = document.getElementById("fm");
//直接通过name属性值
var frm = document.frm;
//获取form表单元素对象集合
fm.elements.length
//form表单常用方法
fm.submit();
fm.reset();
//表单属性操作
fm.action = "http://www.baidu.com/s";
fm.method = "GET";
//表单元素通用属性
readonly="readonly"; //数据不可更改，但是可以提交
disabled="disabled"; //不能进行任何操作，数据不会提交
操作表格
//删除行
function delRow(btn) {
var ta =document.getElementById("ta"); //获取表格对象
vat tr = btn.parentNode.parentNode; //获取要删除的行对象
ta.deleteRow(tr.rowIndex);
}
//修改行内容
function updateRow(){
var cell = document.getElementById("cell");
cell.innerHTML="<input type='text' value='" + cell.innerHTML + "' onblur='updateRow2(this)'/>"; //修改单元格内容
}
function updateRow2(inp) {
var cell = document.getElementById("cell");
cell.innerHTML = inp.value; //失去焦点时保存数值
}
// 添加行
function addRow() {
var ta = document.getElementById("ta"); //获取表格对象
var tr = ta.insertRow(1);
var cell0 = tr.insertCell(0);
cell0.innerHTML = "<input type='checkbox' name = 'chk'/>";
var cell1 = tr.insertCell(1);
cell1.innerHTML = getElementById("uname").value;
...
}
// 复制行
function copyRow() {
tr.innerHTML = ta.row[i].innerHTML;
}