前端JS使用的技巧总结【持续更新】

浏览数：30 / 时间：2015年06月09日

7、如何将a标签变成普通的文本颜色，并且使其没有点击事件，没有hover属性等。

看第一个例子，没有绑定事件的。

<html>
<head>
<style type="text/css">
	a{
	//pointer-events: none;
	text-decoration: none;
	cursor: default;
	}
	a:visited{
	color:black;
	}
	</style>
</head>
<body>
<a href="#" >test</a>
</body>
</html>

假如上面的例子绑定了click事件，还是会触发的。

看第二个例子

<html>
<head>
<style type="text/css">
	a{
	pointer-events: none;
	text-decoration: none;
	}
	</style>
</head>
<body>
<a href="#" onclick="alert(‘click‘);">test</a>
</body>
</html>

绑定了事件，使用pointer-events:none让事件不生效。

6、给元素添加事件时，要考虑到该元素之前是否有相同的事件，通常使用addEventListener()来追加，当然对于IE下可使用attachEvent()，兼容各个浏览器的话可对2个函数进行修正一下

5、当层次嵌套时需注意事件的捕获或冒泡，比如一个div内放一个div，需要对内层div添加onclick事件时，要注意事件冒泡事件，w3c可以使用event.stopPropagation()，IE使用设置cancelBubble设置为true。另外可利用event.preventDefault()去除原本事件

4、jquery层次选择器的使用：

层次选择器——通过元素之间的层次关系获取特定元素。例如后代元素、子元素、相邻元素和同辈元素等。
　　$("a b")选取a元素里的所有后代b元素
　　$("a>b")选取a元素下的子元素b，这里是直接后代关系
　　$("a+b")选取紧邻在a元素后的b元素（同辈元素）,可用next()方法代替
　　$("a~b")选取a元素后的所有同辈元素b，可用nextAll()方法代替

3、jquery对象和DOM对象的区别：

DOM（文档对象模型）每一份DOM都可以表示成一棵树，DOM对象可以使用javascript方法。jquery对象就是通过jquery包装DOM对象产生的对象。jquery对象是jquery独有的。在jquery对象中无法使用DOM对象的任何方法，DOM对象也不能使用jquery里的方法。
jquery对象转化为DOM对象方法：

var $cr=$("#cr");var cr=$cr[0]

var $cr=$("#cr");var cr=$cr.get(0);
DOM对象转化为jquery对象方法：
　　var cr=document.getElementById("cr");
　　var $cr=$(cr)；
　　
　　解决jquery与其他库的冲突可以用jQuery.noConflict()函数。具体可见：http://www.w3school.com.cn/jquery/core_noconflict.asp

var j = jQuery.noConflict();

j("div p").hide();	// 基于 jQuery 的代码

$("content").style.display = "none";	// 基于其他库的 $() 代码

2、当使用的层级多的时候，有时候会碰见如设置的事件不生效等问题，可以在firefox或chrome对其进行审查元素，确定是否有元素挡在其上面，如果有可以将下层的z-index设置得比上层高即可躲过上层的遮罩，另一种方法可以使用css3新属性pointer-events: none;将该属性应用于上层即该层不再捕获任何click事件（点击时即可穿透该层）

1、灵活使用“隐藏”。通常的隐藏元素有display:hide 还有visibility:hidden。两者区别可见：http://blog.csdn.net/love_5209/article/details/19916557

当对于一个元素初始设置为以上任一种时，该元素绑定的事件也将不生效，那么假如要鼠标经过display:hide的元素，让其显示，该怎么做呢？

解决办法有2个：

第一，可以在隐藏元素外层嵌套一层div并设置鼠标经过事件，让其改变隐藏元素的display为inline或block；

第二，不使用display:hide，使用css3的透明度opacity:0，然后鼠标经过事件则改变opacity:1即可（注：IE不支持该属性）

前端JS使用的技巧总结【持续更新】,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

前端JS使用的技巧总结【持续更新】