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 this
if (document.getElementById("wenbin")) {
alert('存在');
} else {
alert('不存在');
}
如果是jquery判断的话 需要使用元素选择器.length>0,如果大于0 则表示元素存在,否则不存在。