一, 了解的几个概念:
构造函数; 对象; prototype; (和 C++ 类似)
通过编写一个计算二维平面, 点到原点距离的例子:
javascript 代码
- // 定义构造函数
- function Point(x,y){ // 构造函数均以大写字母开始
- this.x=x;
- this.y=y;
- }
- // 使用 new 关键字创建一个实例
- var p = new Point(1,1); // 平面几何中的点 (1,1)
- // 通过给构造函数的 prototype 对象赋值来给 Point 对象定义方法
- Point.prototype.r = function(){
- return Math.sqrt(this.x*this.x + this.y*this.y);
- };
- //Point 的实例对象 p 继承了方法 r()
- console.log(p.r()); //=>1.414...
二, confirm() 用法
javascript 代码
- function moveon(){
- var answer = confirm("Are you ready?");
- if(answer) window.location = "http://www.taobao.com";
- }
- setTimeout(moveon,2000);
三, 设置节点属性的另一方法
javascript 代码
- function debug(msg){
- var log = document.getElementById("debuglog");
- if(!log){
- log = document.createElement("div");
- log.id = "debuglog"; // 设置节点属性的另一种方法
- //log.setAttribute("id","debuglog"); 之前javascript DOM 编程艺术中的方法
- log.innerhtml = "<h1>Debuglog</h1>";
- document.body.appendChild(log);
- }
- var pre = document.createElement("pre");
- var text = document.createTextNode(msg);
- pre.appendChild(text);
- log.appendChild(pre);
- }
- window.onload = debug('debugmessage show here');
四, display="none" 和 visibility="hidden" 区别
display="none" : 隐藏元素而且所占空间也消失;
visibility="hidden" : 隐藏元素但是保留其所占空间;
html 代码
- <body>
- <div id="e">Hello World!</div>
- <script>
- function hide(e,reflow){
- if(reflow){
- e.style.display = "none";
- }else{
- e.style.visibility = "hidden";
- }
- }
- var e = document.getElementById("e");
- hide(e,false);
- </script>
五, addeventListener 方法
添加事件处理函数
例子:
- window.onload = function(){
- var images = document.getElementsByTagName("img");
- for(var i=0;i<images.length;i++){
- var image = images[i];
- if(image.addEventListener)
- image.addEventListener("click",hide,false);
- else // 兼容 IE8 及以前的版本
- image.attachEvent("onclick",hide);
- }
- function hide(event){ event.target.style.visibility = "hidden"; }
- }
六, jQuery 利用 $() 函数, 与原生 js 区别
拿之前写的 debug 函数为例
原生 js:
- *function debug(msg){
- var log = document.getElementById("debuglog");
- if(!log){
- log = document.createElement("div");
- log.id = "debuglog"; // 设置节点属性的另一种方法
- //log.setAttribute("id","debuglog"); 之前javascript DOM 编程艺术中的方法
- log.innerHTML = "<h1>Debuglog</h1>";
- document.body.appendChild(log);
- }
- var pre = document.createElement("pre");
- var text = document.createTextNode(msg);
- pre.appendChild(text);
- log.appendChild(pre);
- }
- jQuery:
- function debug(msg){
- var log = $("#debuglog");
- if(log.length == 0){
- log = $("<div id='debuglog'><h1>Debug Log</h1></div>");
- log.appendTo(document.body); // 将其追加到 body 中
- }
- log.append($("<pre/>").text(msg)); // 将 msg 包装在 < pre > 中, 再追加到 log 中
- }
七, 开启 ECMAScript 5 的严格模式
如果浏览器支持的话, 在 < script > 标签中添加这条语句:
"use strict";
来源: http://www.qdfuns.com/article/22942/5413b445a522ace28e8f2de291ea817e.html