虽然我的目标是后端,但是前端的这些很厉害的东东,起码了解一下吧!
嘿嘿!

fighting！fighting！

Js

常见方法

eval() 计算字符串中的算数

length 长度

...

数组方法

concat() 数组合并

join() 指定间隔符转换字符串,例如join("-");

pop() 移除数组中最后一个元素,并返回

push() 数组的追加,返回新的长度

reverse() 返回一个元素顺序反转的array() 对象

shift() 移除数组中的第一个元素,并返回

unshift() 在开始位置插入指定元素

sort() 对数组进行适当的排序

splice() 数组删除指定位置的元素,并返回(可以在删除位置添加元素)

...

函数(function )

函数的声明

function test1(a1,a2){
 alert("函数声明一");
}
//js中函数可以为对象
var test2 = new Function("a1","a2","alert('函数声明二')");
//方式三
var test3 = function(a1,a2){
 alert("函数声明三");
}
//调用声明的函数
test1(1,2);
test2(1,2);

函数的参数

• js 中的函数在调用时,形参可以不赋值,不报错
• js 中的函数在调用时,形参赋值可以不全部赋值,不报错,但是实参会依次进行赋值

函数的返回值

• js 中如果函数有返回值则直接返回,没有返回默认返回值undefined

类

类的声明

function Person(name,age){
    this.name=name;
    this.age=age;
    this.fav="唱歌";
    this.test=function(a){
        alert(a);
    }
}

类的使用

var p1=new Person("张三",32);
alert(p1.name);

对象

创建自定义对象

var obj=new Object();
//var obj={};
obj.name="张三";
obj.age=23;
obj.test=function(){
	alert("我是obj");
}

常用对象和方法

String

• toUpperCase() 将字符串转换为大写
• toLowerCase() 将字符串转换为小写
• split() 按照指定的字符串切割字符串,返回数组
• substr() 从指定的开始位置截取指定长度的子字符串
• substring() 从指定的开始位置和指定的结束位置截取子字符串,含头不含尾.
• indexOf() 返回指定子字符串第一次出现的角标,没有则返回-1

Date

• getYear() 1900年开始距今的年份数
• getFullYear() 当前的年份
• getMonth() 当前月份的角标值,需要+1
• getDate() 当前的日期数
• getDay() 当前的星期数,但是周天会返回值为0
• getHours() 当前事件的小时数
• getMinutes()
• getSeconds() 当前时间的秒数

Math

• random() 返回0-1之间的随机数字,含0不含1
• floor() 向下取整
• ceil() 向上取整
• round() 四舍五入
• min()
• max()

Global

• eval() 将字符串转换为可执行的代码
• isNaN() 判断是否值NaN
• parseFloat() 获取字符中的浮点数

事件机制*

单双击事件

function testOnclick(){
    alert("单击事件");
}
function testOndblclick(){
    alert("双击事件");
}

<input type="button" name="" id="" value="单击事件" onclick="testOnclick();"/>
<input type="button" name="" id="" value="双击事件" ondblclick="testOndblclick();"/>

鼠标事件

function testOnmouseover(){
    alert("鼠标悬停事件");
}
function testOnmousemove(){
    alert("我被移动了");
}
function testOnmouseout(){
	alert("我被移出了");
}

<style type="text/css">
    #showdiv{
        width: 300px;
        height: 300px;
        border: solid 1px;
    }
</style>
<div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout();">
    
</div>

键盘事件(onkeyup,onkeydown)

...

焦点事件(onfocus,onblur)

...

页面加载事件(onload)

...

其他小姿势

• onchange 值改变事件
• 事件冲突 例如单双击
• 事件阻断
• 超链接调用js函数 调用js函数

window对象

常用方法

• alert 警告框:提示一个警告信息,没有返回值

• confirm 确认框:提示用户选择一项操作(确定true/取消false)

• prompt 提示框:提示用户某个信息的录入(有数据点确定有返回值)

  ---

• window.setTimeout() 指定的时间后执行指定的函数(参数1:函数对象;参数2:时间,单位毫秒;)

• window.setInterval() 间隔执行(参数1:函数对象;参数2:时间,单位毫秒;)

• clearTimeout clearInterval 分别停止上面的两位

子窗口方法

• window.open('url','newwindow',....)
• window.close(); 只能关闭open打开的页面

子页面调用父页面的函数

• window.opener.方法名();

window对象常用属性

• 地址栏属性(location)

  • window.location.href="url";
  • window.location.reload(); 刷新

• 历史记录属性(history)

  • window.history.forward(); 前进
  • window.history.back(); 后退
  • window.history.go(index); 跳转到指定的历史记录资源

• 屏幕属性(screen)

  • window.screen.width;
  • window.screen.height;

• 浏览器配置属性(navigator)

  • window.navigator.userAgent;

• 主题面板属性(document)

document对象**

浏览器对外提供的支持js的用来操作HTML文档的一个对象,此对象封存的HTML文档的所有信息.

获取html元素对象

直接获取方式

//id
window.document.getElementById("");
//name
document.getElementByname("");
//标签名
document.getElementTagName("");
//class
document.getElementClassName("");

间接获取方式

//父子关系
function testParent(){
    //获取父级元素对象
    var showdiv=document.getElementById("showdiv");
    //获取所有子元素对象数组
    var childs=showdiv.childNodes;
    alert(childs);
}
//子父关系
function testChild(){
    //获取子元素对象
    var inp=document.getElementById("inp");
    var div=inp.parentNode;
    alert(div);
}
//兄弟关系
function testBrother(){
    //兄获取弟
    var inp=document.getElementById("inp");
    var preEle=inp.previousSiblig;//弟获取兄
    var nextEle=inp.nextSibling;//兄获取弟
    alert(preEle+""+nextEle);
}

操作html元素对象的属性

//获取属性值
function testField(){
	//获取元素对象
    var inp=document.getElement("uname");
    //获取元素属性值
    alert(inp.type+":"+inp.name=":"+inp.id+":"+inp.value);
}
//修改元素属性值
function testField2(){
	//获取元素对象
    var inp=document.getElementById("uname");
    //修改元素属性
    inp.value="哈哈";
    inp.type="button";
}
//自定义属性
function testOwnField(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//获取自定义属性的值
						alert(inp.getAttribute("abc"));//abc是属性名
				}
				//修改
				function testOwnField2(){
					//获取元素对象
					var inp=document.getElementById("uname");
					//修改自定义属性的值
					inp.setAttribute("abc","呵呵");
				}
//使用自定义方式操作固有属性
				function testOper(){
					//获取元素对象
						var inp=document.getElementById("uname");
					//操作对象属性
						alert(inp.getAttribute("type"));
						alert(inp.getAttribute("value"));
				}

操作html元素对象的内容和样式*

• 元素对象名.innerHTML 返回当前元素对象的所有内容,包括HTML标签

• 元素对象名.innerText 返回当前元素对象的所有内容,不包括HTML标签

• 元素对象名.style.样式名= ""; //添加、修改、删除元素样式

• 获取元素.className;//获取class,借此更改css样式(div.className="commen2";//修改class值==修改css样式)

操作html的文档结构

function delInp(btn){
	//获取父级div
    var showdiv=document.getElementById("showdiv");
    //获取要删除的子div
    var cdiv=btn.parentNode;//获取按钮的父级==showdiv的子级
    //父div删除子div
    showdiv.removeChild(cdiv);
}

document操作form元素

js操作form

获取form表单对象

​ 使用 id :var fm=document.getElementById("fm");

​ 使用name属性 :var frm=document.frm;

获取form下的所有表单元素对象集合

​ fm.elements

form表单的常用方法

​ 表单对象名.submit(); //提交表单数据

form的属性操作

​ 表单对象名.action="新的值" //动态的改变数据的提交路径

​ 表单对象名.method="新的值" //动态的改变提交方式

js表单元素的通用属性

只读模式:

​ readonly="readonly" //不可以更改,但是数据可以提交

关闭模式:

​ disabled="disabled" //不可以进行任何的操作,数据不会提交

document操作表格

具体看案例

...

document对象实现form表单校验

...