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