关于JavaScript 如何快速进阶

JavaScript高级

1、js的函数定义（三种方式）
一、使用关键字 function 方法名称(参数列表) { 方法体和返回值 }
         注意1：参数列表中的参数不需要写类型（var），直接写参数名称
         注意2：返回值，根据实际需要可以有也可以没有
      例1：function test1() { alert("123456");}//定义函数
      test1();//调用函数test1()
例2：function add1(a,b) {var sum = a+b; return sum;}
      alert(add1(2,3)); //调用函数add1()

二、匿名函数，使用关键字function(参数列表) { 方法体和返回值; }
例： var test1 = function(a,b) { return a+b;}
alert(test1(3,4)); //调用test1()

三、动态函数（方法体和返回值、参数列表都由参数传递）
释：用js内置对象 new Function("参数列表","方法体和返回值")
例：var param = "a,b";
     var method = "var sum;sum=a+b;return sum;";
     var test2 = new Function(param,method);
     alert(test2(5,6)); //调用函数test2()

2、js的函数重载(js中不存在重载，但可通过js函数的arguments数组模拟重载的效果)
    （1）原理：js里面有一个数组arguments用来保存传递进来的参数，利用此数组可模拟重载的效果
    （2）模拟重载的效果
     function add1() {
  for(var i=0;i<arguments.length;i++) {
   alert(arguments[i]);
  }
  var sum = 0;
  for(var i=0;i<arguments.length;i++) { //模拟重载（有几个参数，实现这几个参数的相加）
   sum += arguments[i];
  }
  return sum;
}
alert(add1(1,2));
alert(add1(1,2,3));
alert(add1(1,2,3,4));

3、js的事件
（1）事件作用：在html的标签上可通过触发事件调用js里面的函数
（2）使用事件（三种方式）
1：使用事件属性调用js方法
例：<input type="button" value="第一种方式" onclick="add1();"/>

2：获取绑定的标签，再使用事件的属性
例：document.getElementById("buttonid").onclick = add1;

3：首先得到要绑定的标签，写js的代码
例：document.getElementById("buttonid1").onclick = function() {
alert("aaaaa");};

4、js的常用的事件
（1）onload事件和onclick事件
onload：html页面加载时触发事件例：<body onload="test1();">
onclick：鼠标点击事件例：<input type="text" onclick="test2();"/>

（2）其他事件
onfocus：获取焦点
onblur：失去焦点
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
      onkeypress：键盘按下触发
例： <input type="text" id="textid1" onkeypress="key1(event);"/>
      function key1(obj) {
     alert(obj.keyCode);//若按下回车键，取得其对应值13
     if(obj.keyCode==13) { alert("key1");}
      }

5、js的dom对象（document object model：文档对象模型）
（1）概念   文档：指的是标记型文档（html、xml）
            对象：在对象里面有属性和方法
（2）作用使用dom里面提供对象的属性和方法，对标记型文档进行操作（先解析）
（3）使用dom解析标记型文档html（html中包含标签、属性、文本内容）
解析过程：根据html的层级结构在内存中分配一个树形结构
   document对象，代表整个文档
   element对象，代表标签
   attribute属性对象
   text文本对象
   Node节点对象，是这些对象的父对象，在找不到想要使用的方法，到Node里面找

（4）DHTML简介（很多技术的统称）
包含技术有：html（封装数据） css（使用属性和属性值修改数据的样式）
ECMAScript（语句和语法） DOM：对标记型文档进行操作

6、document对象（代表整个文档）
（1）主要方法
1.write() 向页面输出内容，可以输出html代码
例：document.write("aa"); 例： document.write("<hr/>");

2.getElementById() 通过标签的id值获取标签对象
例：var input1 = document.getElementById("textid");
document.write(input1.value);

3：getElementsByName(): 根据标签name属性值得到多个标签对象的数组
  例：var inputs1 = document.getElementsByName("name1");
      for(var i=0;i<inputs1.length;i++) {
     var input1 = inputs1[i];
     alert(input1.value);
      }
        注意：若只有一个标签，该方法返回的仍是一个数组，但可直接使用数组的下标获取值
  例：var inputs2 = document.getElementsByName("name2");
      alert(inputs2[0].value);

4：getElementsByTagName()：根据标签的名称获取标签对象，返回数组
  例：var inputs3 = document.getElementsByTagName("input");
      for(var i=0;i<inputs3.length;i++) {
      alert(inputs3[i].value);
      }
         注意：若只有一个标签，该方法返回的仍是一个数组，但可直接使用数组的下标获取值
  例：var arr = document.getElementsByTagName("input");
      alert(arr[0].value);

7、innerHTML属性（不是dom里面属性）
功能1，获取标签里面的文本内容
例：var span1 = document.getElementById("spanid");
alert(span1.innerHTML);

功能2，向标签内设置内容（可以写html代码）（会覆盖原标签内容）
例：var div1 = document.getElementById("div1");
div1.innerHTML = "<table border='1'><tr><td>aaa</td><td>bbb</td></tr></table>";

8、练习：动态生成表格（点击生成按钮，根据行列数生成对应的表格）
（1）实现的步骤
    1.创建页面，在页面中包含两个普通输入项和按钮（有事件）
    2.首先得到输入的行和列
         3.根据行和列生成表格
    4.循环行 <tr>
    5.在行里面循环单元格 <td>

（2）代码实现
function add1() {
  var hang = document.getElementById("hid").value;
  var lie = document.getElementById("lid").value;
  var tab = "<table border='1' cellpadding='10'>";
  for(var i=1;i<=hang;i++) {
   tab += "<tr>";
   for(var j=1;j<=lie;j++) {
    tab += "<td>aaaaa</td>";
   }
   tab += "</tr>";
  }
  tab += "</table>";
  var div1 = document.getElementById("div1");
  div1.innerHTML = tab;
}

9、表单的提交（form标签）方式
第一种：form标签内提交按钮提交 <input type="submit"/>
  例：<form method="get">
     username: <input type="text" name="username"/> <br/>
     password: <input type="password" name="password"/> <br/>
     <input type="submit" value="提交"/>
      </form>

第二种：form标签内普通按钮提交 <input type="button"/>
  例：function form01() {
   var form01 = document.getElementById("form01");
   form01.submit();
      }

第三种：使用超链接提交数据
释：<a href="要链接的地址?参数名称1=参数的值1&参数名称2=参数的值2">超链接</a>
例：<a href="15-表单的提交方式二.html?username=ccc&password=123456">超链接提交数据</a>

10、表单校验（规范数据的输入格式）
（2）表单校验步骤
第一种：submit提交表单校验。（在form标签里面，使用onsubmit事件）
   释：<form method="get" onsubmit="return checkForm();"> return返回值为true才提交表单
   例：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;
       }

第二种：button提交表单的校验
    释：function form01() {
    例：var username = document.getElementById("usernameid").value;
  var password = document.getElementById("passwordid").value;
  if(username == "") {
   alert("用户名不能为空");
  } else if(password == "") {
   alert("密码不能为空");
  } else {
   var form01 = document.getElementById("form01");
   form01.submit();
  }
}

11、json简介（JavaScript Object Notation ：JavaScript对象表示法）
（1）json是数据的交换格式，比xml更加轻巧。
json是js的原生的格式，可通过js直接操作json格式数据，不需要依赖其他东西。
（2）json数据格式（两种）
    1.：json的对象格式 {json数据的名称1:json数据的值1,json数据的名称2:json数据的值2.....}
        说明1：类似于key-value形式
       2：名称和值之间使用冒号隔开，多个值之间使用逗号隔开
       3：json数据的名称是字符串类型，json数据值类型string, number, object, array, true, false, null
    例：{"name":"zhangsan","age":20,"addr":"nanjing"}

    2.：json的数组格式 [json对象1,json对象2........]
    说明：在数组里面有多个json对象，多个json对象之间使用逗号进行隔开
    例：[{"name":"lucy","age":20},{"name":"mary","age":30}]

（3）可以使用json的这两种格式组成更加复杂json的格式
    例：{"name":[{"name":"zhangsan","addr":"beijing"},{"name":"lisi","addr":"tianjin"}]}

12、js解析json
（1）js解析json对象的数据格式（由json对象数据格式里的name得到name对应的值）
  例：var json1 = {"username":"lucy","age":20,"addr":"nanjing"};
      document.write(json1.username+"<br/>");
      document.write(json1.age+"<br/>");
      document.write(json1.addr);

（2）js解析json的数组的数据格式
    释：遍历json数组，得到json数组每个json对象，解析每个json对象，根据对象的数据名称得到值。
    例：var json2 = [{"username":"zhangsan","age":20,"addr":"beijing"},
      {"username":"lisi","age":30,"addr":"tianjin"},
      {"username":"wangnwu","age":40,"addr":"nanjing"}];
    document.write(json2[1].age+""<br/>"");   //得到第二个json对象里面的age对应值
    document.write(json2[0].addr+"<br/>");    //得到第一个json对象里面的addr对应值
    for(var i=0;i<json2.length;i++) {
   var person = json2[i];
   var username = person.username;
   var age = person.age;
   var addr = person.addr;
   document.write("username:"+username+" ;age:"+age+" ;addr:"+addr+"<br/>");
  }

13、json练习：人员信息的显示
要求：把多个人员的信息存到json的数据格式里面，通过js解析json的数据格式，把所有的人员显示到页面的表格里面。
例：var persons = [{"name":"zhangsan","age":20,"addr":"beijing"},
          {"name":"lisi","age":30,"addr":"tinajin"},
          {"name":"wangwu","age":40,"addr":"nanjing"}];
    function showData() {
  var tab = "<table border='1' cellpadding='10'>";
  tab += "<tr><th>姓名</th><th>年龄</th><th>地址</th></tr>";
  for(var i=0;i<persons.length;i++) {
   var person = persons[i];
   var name = person.name;
   var age = person.age;
   var addr = person.addr;
   tab += "<tr><td>"+name+"</td><td>"+age+"</td><td>"+addr+"</td></tr>";
  }
  tab += "</table>";
  var div1 = document.getElementById("div1");
  div1.innerHTML = tab;
}

注：本篇文章转载于http://blog.csdn.net/tujunyong/article/details/53402475

请访问原作者博客

关于JavaScript 如何快速进阶

猜你喜欢