Js进阶知识（三）

1）用JS来实现一个比较简单的jquery效果，具体代码如下：

 window.onload = function () {      var J = function (element) {          return {              ele: document.getElementsByTagName(element),              css: function (attr, val) {                  for (var item in this.ele) {                      this.ele[item].style[attr] = val;                  }              }          }      };      J("span").css("border", "1px dotted red");  }

有几点问题需要注意一下，就是document.getTagName获取的结果是数组，所以我们下面要用for循环来取值；for （var item in this.ele）中的item是索引值，而不是像C#的foreach那样；this关键字，要记住了在对象内部，访问对象里面的其它key的时候要加上this关键字（注：这里的return 后面大括号是一个对象而不是J）

2）对于上面的方法改进，可以连续的写css，eg：

var J = function (element) {    return {        ele: document.getElementsByTagName(element),        css: function (attr, val) {            for (var a = 0; a < this.ele.length; a++) {                this.ele[a].style[attr] = val;            }            return this;//这里的this是当前的对象，即现在的return回来的这个对象            //所以我们可以连续的点击css，就跟我们调用属性是一样的，直接就可以点            //出来。        }    }};J("span").css("border", "1px dotted red").css("color", "red");

3）动态实现加载另外一个css文件的效果，我们可以把link元素添加一个id，或者直接选取link元素，然后把其中的路径用jquery的attr给替换一下就可以了。

4）获取浏览器可用区域代码：

var width = document.documentElement.clientWidth;var height = document.documentElement.clientHeight;

5）js获取某一个元素的宽度
document.getElementById(“father”).offsetWidth+”px”;
高度
document.getElementById(“father”).offsetHeight +”px”;
获取完了之后假如需要操作的话，一定要在后面添加上px，貌似火狐浏览器不支持没有单位的数值。

6）清空select，document.getElementById(“jj”).length=0;

7）让一个div居中的js代码。

document.getElementById("father").style.top=document.body.clientHeight/2;document.getElementById("father").style.left=document.body.clientWidth/2;document.getElementById("father").style.marginLeft=-(document.getElementById("father").offsetWidth/2);document.getElementById("father").style.marginTop=-(document.getElementById("father").offsetHeight/4);//这里之所以用4是因为father中有两个元素，只不过是一个可见一个不可以见，所以要除以4；正常的是除以2；

8）我们通常在使用ajax的时候，会动态的在后台取值，然后放到前台去，并且可能为其添加上动作，通常我们都会使用如下代码：

 $("#checkoutHolder").append("<button id='wenbin'>Hi</button>"); $("#wenbin").on("click", function () {     console.log("以前用的方法！"); });

现在还有一种写法，具体如下：
jq再给新建元素绑定事件的时候可以不给元素起一个名字，直接使用$（元素内容）也可以。

var btn = $("<button>Hi</button>");//虽然此处可以这样写，但是它并不是一种选择器，如果我们写成这样$("#checkoutHolder").click(function(){});就会出错。btn.on('click', function (evt) { console.log("新方法"); });$("#checkoutHolder").append(btn);

9）以后bind live on统一使用on来进行事件的绑定，因为on性能好一些，而且不易出错。

10）判断一个元素是否存在，js写法如下：

js判断一个元素是否存在直接使用use code like thisif (document.getElementById("wenbin")) {alert('存在');} else {alert('不存在');}

如果是jquery判断的话 需要使用元素选择器.length>0,如果大于0 则表示元素存在，否则不存在。