JS语法基础

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;
}