jQuery

Posted 叫我大头

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

      在javascript中，我们要常常用到event对象来处理一些事件，但是IE和Firefox下event对象的属性是不同的。

1.keyCode||which||charCode

      IE下支持keyCode，不支持which，charCode。
      Firefox下支持keyCode，除功能键外，其他键值始终为0，Firefox下支持which和charCode属性
      要获取兼容IE和Firefox的键值，有如下方法：
      在函数调用时传递event  
技术分享
技术分享<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
技术分享<html xmlns="http://www.w3.org/1999/xhtml">
技术分享<head>
技术分享<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
技术分享<title>Demo</title>
技术分享<script type="text/javascript">
技术分享    function test_event(e){
技术分享        var e=e||event;   
技术分享        currKey=e.keyCode||e.which||e.charCode;     
技术分享        document.getElementById("key").value = currKey;
技术分享    }
技术分享</script>
技术分享</head>
技术分享
技术分享<body>
技术分享<input type="text" onkeyup="test_event(event)"/>
技术分享<input type="text" id="key">
技术分享</body>
技术分享</html>
技术分享
技术分享

      在函数调用时不传递event
技术分享
技术分享<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
技术分享<html xmlns="http://www.w3.org/1999/xhtml">
技术分享<head>
技术分享<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
技术分享<title>Demo</title>
技术分享<script type="text/javascript">
技术分享    function test_event(e){
技术分享        var e=arguments.callee.caller.arguments[0]||event;   
技术分享        currKey=e.keyCode||e.which||e.charCode;     
技术分享        document.getElementById("key").value = currKey;
技术分享    }
技术分享</script>
技术分享</head>
技术分享
技术分享<body>
技术分享<input type="text" onkeyup="test_event()"/>
技术分享<input type="text" id="key">
技术分享</body>
技术分享</html>
技术分享
  


2.event.srcElement||event.target

     在IE下，event对象有srcElement属性，没有target属性。在火狐下，event对象有target属性，没有srcElement属性
解决办法很简单：
    

技术分享
技术分享<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
技术分享
技术分享<html xmlns="http://www.w3.org/1999/xhtml">
技术分享<head>
技术分享    <title>Demo</title>
技术分享    <style type="text/css">
技术分享        .focus
技术分享        {
技术分享            color: Red;
技术分享        }
技术分享    </style>
技术分享    <script type="text/javascript">
技术分享        function test_event(event) {
技术分享            var evt = event.srcElement || event.target;
技术分享            evt.className = "focus";
技术分享        }
技术分享    </script>
技术分享</head>
技术分享<body>
技术分享    <input type="text" id="text1" value="text1" onfocus = "test_event(event)"/>
技术分享    <input type="text" id="text2" value="text2" onfocus = "test_event(event)"/>
技术分享    <input type="text" id="text3" value="text3" onfocus = "test_event(event)"/>
技术分享</body>
技术分享</html>
技术分享


3.event.x,event.y||event.pageX,event.pageY

      IE下event对象有event.x,event.y属性，而Firefox下没有。Firefox下有event.pageX,event.PageY属性，而IE下没有。解决办法：
      var mx = event.x?event.x:event.pageX;

4.attachEvent()||addEventListener()

IE下支持attachEvent()方法，而Firefox下支持addEventListener()方法。
attachEvent("eventType",fun)
eventType是指事件类型,fun是指调用事件的函数
addEventListener("eventType",fun,flag)
addEventListener方法的前两个参数和attachEvent方法一样，flag参数则是一个 Boolean 值，指明该结点是否以DOM中所谓的捕捉模式来侦听事件。对于一个典型的事件侦听器来说，第三个参数应该为false（假）。

技术分享
技术分享<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
技术分享
技术分享<html xmlns="http://www.w3.org/1999/xhtml">
技术分享<head>
技术分享    <title>Demo</title>
技术分享    <script type="text/javascript">
技术分享        function test() {
技术分享            var str = "为了兼容IE和Firefox，就要多写代码！";
技术分享            alert(str);
技术分享        }
技术分享        function test_event() {
技术分享            var obj = document.getElementById("btn");
技术分享            if (document.all) {
技术分享                obj.attachEvent("onclick", test);
技术分享            }
技术分享            //注意两个方法的第一个参数，一个是"onclick",一个是"click"
技术分享            else {
技术分享                obj.addEventListener("click", test, false);
技术分享            }
技术分享        }
技术分享        window.onload = test_event;
技术分享    </script>
技术分享</head>
技术分享<body>
技术分享    <input type="button" value="测试按钮" id="btn" />
技术分享</body>
技术分享</html>
技术分享



      我所知道的常用的event属性或方法就是上面那4条。上面的东西虽然不复杂，但是我会经常遗忘，jQuery则帮我们很好的解决了这些问题，我们通过jQuery无需再去判断浏览器是否支持某某属性，某某方法。
      首先看看jQuery对象有哪些属性和方法
     

下面是jQuery事件对象可以在扩浏览器支持的属性:

属性名称 描述 举例
type
事件类型.如果使用一个事件处理函数来处理多个事件, 可以使用此属性获得事件类型,比如click. 
$("a").click(function(event) {
  alert(event.type);
});
target
 获取事件触发者DOM对象 
$("a[href=http://google.com]").click(function(event) {
  alert(event.target.href);
});
data
 事件调用时传入额外参数. 
$("a").each(function(i) {
  $(this).bind(‘click‘, {index:i}, function(e){
     alert(‘my index is ‘ + e.data.index);
  });
});
relatedTarget
 对于鼠标事件, 标示触发事件时离开或者进入的DOM元素 
$("a").mouseout(function(event) {
  alert(event.relatedTarget);
});
currentTarget
 冒泡前的当前触发事件的DOM对象, 等同于this. 
$("p").click(function(event) {
  alert( event.currentTarget.nodeName );
});

结果:P
pageX/Y
鼠标事件中, 事件相对于页面原点的水平/垂直坐标. 
$("a").click(function(event) {
  alert("Current mouse position: " + event.pageX + ", " + event.pageY );
});
result
 上一个事件处理函数返回的值 
$("p").click(function(event) {
  return "hey"
});
$("p").click(function(event) {
  alert( event.result );
});

结果:"hey"
timeStamp
 事件发生时的时间戳. 
var last;
$("p").click(function(event) {
   if( last )
      alert( "time since last event " + event.timeStamp - last );
   last = event.timeStamp;
});

名称 说明 举例
preventDefault()
取消可能引起任何语意操作的事件. 比如<a>元素的href链接加载, 表单提交以及click引起复选框的状态切换. 
$("a").click(function(event){
  event.preventDefault();
  // do something
});
isDefaultPrevented()
 是否调用过
preventDefault()
方法		 
$("a").click(function(event){
  alert( event.isDefaultPrevented() );
  event.preventDefault();
  alert( event.isDefaultPrevented() );
});
stopPropagation()
 取消事件冒泡 
$("p").click(function(event){
  event.stopPropagation();
  // do something
});
isPropagationStopped()
 是否调用过
stopPropagation()
方法		 
$("p").click(function(event){
  alert( event.isPropagationStopped() );
  event.stopPropagation();
  alert( event.isPropagationStopped() );
});
stopImmediatePropagation()
 取消执行其他的事件处理函数并取消事件冒泡.

如果同一个事件绑定了多个事件处理函数, 在其中一个事件处理函数中调用此方法后将不会继续调用其他的事件处理函数.		 
$("p").click(function(event){
  event.stopImmediatePropagation();
});
$("p").click(function(event){
  // This function won‘t be executed
});
isImmediatePropagationStopped()
 是否调用过
stopImmediatePropagation()
方法		 
$("p").click(function(event){
  alert( event.isImmediatePropagationStopped() );
  event.stopImmediatePropagation();
  alert( event.isImmediatePropagationStopped() );
});


这些函数中  stopPropagation()  是我们最长用的也是一定会用到的函数. 相当于操作原始event对象的event.cancelBubble=true来取消冒泡.

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段