javascript高级

来源：互联网发布：电脑桌面知乎编辑：程序博客网时间：2024/05/15 01:07

JavaScript

js的函数

## js中定义函数的三种方式 ##    *function method(参数列表) {方法体和返回值}        **参数列表不需写类型var,直接写参数名        **返回值可以写,也可以不写        `function test() {            alert("test");        }`    *var method = function(参数列表) {方法体和返回值}        **匿名函数需要定义变量来接收        `var method = function(a,b) {            return a+b;        }        alert(method(5,10));        `    *动态函数 var method = new Function("参数列表","方法体和返回值");        `var method = new Function("a,b","return a+b");        alert(method(5,10));        `

js函数的重载

## 1.js中不存在重载,但是可以用js函数的arguments数组模拟函数重载的过程 (arguments数组保存传递进来的参数) ##`function method() {    var sum = 0;    for(var i = 0; i < arguments.length; i++) {        sum += arguments[i];    }    return sum;}alert(method(3,5));alert(method(3,5,8));alert(method(3,5,8,10));`

js的事件

## 1.事件就是html中触发事件调用js的函数 #### 2.触发事件的方式有三种 ##    *使用事件属性触发事件 onclick        `<input type="button" value="第一种事件触发" onclick="method();">`    *获取需要绑定的标签,使用事件属性        `document.getElementById("buttonid").onclick = method();`    *获取需要绑定的标签,写js代码        `document.getElementById("buttonid").onclick = function() {方法体}`

js常用事件

## 1.onload和onclick ##    *onload:html页面加载时触发事件,调用js方法,一般写在body标签中        **`<body onload="method();"></body>`    *onclick:鼠标点击事件,一般写在input标签中        **<input type="text" onclick="method();">## 2.onfocus事件和onblur事件 ##    *onfocus:获取焦点    *onblur:失去焦点## 3.onmouseover和onmouseout ##    *onmouseover:鼠标移到元素上    *onmouseout:鼠标从元素移开## 4.onkeypress ##    *onkeypress:点击键盘某个键,调用方法        `<input type="button" onkeypress="key(event)">        function key(obj) {            //alert(obj.keyCode); //获取按键对应数字            if(obj.keyCode == 13) {                alert("key");            }        }        `

js的dom对象

## 1.dom:文档对象模型 ##    *文档:标记型文本(html, xml)    *对象:对象里的属性和方法:使用dom对象的属性和方法对标记型文档进行操作    *dom要先对标记型文档进行解析,在内存中创建树形结构## 2.dom解析html ##    *解析过程:根据html的层级结构在内存中分配属性结构    *document对象,代表整个文档    *element对象,代表标签    *属性对象    *文本对象    *Node节点对象,是所有对象的父对象

document对象

## 1.document对象代表整个文档 ##    常用方法    *write(),向页面输出内容,可以是html代码        `document.write("<hr/>");`    *getElementById(),根据id获取标签对象        `var input = document.getElementById("id");`    *getElementsByName(),根据name获取标签对象,返回数组    根据数组索引取标签对象        `var inputs = document.getElementsByName("name");`    *getElementsByTagName(),根据标签名获取标签对象,返回数组,根据数组索引获取对象        `var inputs = document.getElementsByTagName("input");`

innerHTML属性

## 1.获取标签内的文本内容 ##    `var div = document.getElementById("textid");     alert(div.innerHTML);    `## 2.向标签里设置内容,可以设置html代码 ##    `var div = document.getElementById("textid")     div.innerHTML="alert("innerHTML");"    `

表单提交

表单提价有三种方式## 1.在form标签写提交按钮<input type="submit"/> ##    `<form method="get">        username: <input type="text" name="username"/>        <br/>        password: <input type="text" name="password"/>        <br/>        <input type="submit" value="提交">    </form>`## 2.form标签中写普通按钮<input type="button"/> ##    `<form id="form1" method="get">        function() {            var form1 = document.getElementById("form1");            form1.submit();        }     </form>`## 3.超链接提交数据 ##    <a href="要链接到的地址?参数名称1=参数值&参数名称2=参数值2">超链接</a>        `<a href="test.html?username=wangliqiang&password=123456">超链接提交数据</a>`

表单校验

## 1.使用submit提交表单,进行校验 ##    *使用事件onsubmit,写在form标签里        `<form method="get" onsubmit="return checkform()"></form>`    如果return返回的值是true,可以提交表单,如果是false不会提交表单        `function checkform() {            var username = document.getElementById("usernameid").value;            var password = document.getElementById("passwordid").value;            if(username=="") {                alert("用户名不能为空");                return false;             }            if(password=="") {                alert("密码不能为空");                return false;            }            return true;         }`## 2.使用button进行表单校验 ##    `function form1() {        var username = document.getElementById("usernameid").value;        var password = document.getElementById("passwordid").value;        if(username=="") {            alert("用户名不能为空");         } else if(password=="") {            alert("密码不能为空");         } else {            var form1=document.getElementById("form1");            form1.submit();         }     }`

json简介

## 1.json是js的一种原生的数据交换格式,js可以对json直接进行操作 #### 2.json的两种数据格式 ##    *json对象格式 {json数据名1:json数据值1,json数据名2:json数据值2......}        `{"name":"张三","age":20,"addr":"南京"}`    *json数组格式 [json对象1,json对象2......]        `[{"name":"张三","age":20},{"name":"lisi","age":30}]`

js解析json

## 1.js解析json的对象数据格式 ##    *通过json对象数据格式里的name的名称得到name对应的值    `var json1={"username":"jack","age":20}     document.write(json1.username + "-" + json1.age);`## 2.js解析json数组的数据格式 ##    *根据数组下边得到json对象,解析json对象,得到数据名和值    `var json2=[{"username":"mary","age":20},{"username":"jack","age":25}]    for(var i = 0; i < json.length; i++) {        var person = json2[i];        document.write(person.username + "-" + person.age);        document.write("<br/>");    }    `

0 0