JavaScript 入门

Scroll Down

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

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表单校验

...

支付宝 微信