JS基础教程-优快云博客

本文链接：https://blog.youkuaiyun.com/Path_to_God/article/details/53153253

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/>");
    }
    `