jquery学习文档笔记

1、未见过的事件：

focusin跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

focusout跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。

2、使用wrapAll方法

举例如下

原始代码：

<div class="mm"><p>我们在公司</p></div>
<div class="mv">
    <p>我们在公司</p>
    <p>我们在公司</p>
    <p>我们在公司</p>
</div>

jquery操作：$("p").wrapAll('<div class="test"></div>');

输出代码：

<div class="mm">
    <div class="test"><p>我们在公司</p>
        <p>我们在公司</p>
        <p>我们在公司</p>
        <p>我们在公司</p>
    </div>
</div>
<div class="mv">
</div>

总结：

//该方法会将所有的的p标签移动到一个第一个p标签出现的位置，并将其appendTo到<div class="test"></div>中

3、对于detach方法的使用：

描述：remove()方法会移除所有的事件处理程序以及可能绑定到被移除元素上的其他数据。detach()方法和remove()雷士，但是不会移除事件处理程序和数据。想临时从文档中移除元素以便后续再次插入时，detach可能更有用。

事例：

html代码：

<a class="clickElm" style="display: block;width:100px;height:20px;line-height: 20px;text-align: center;background: #e1e1e1;">点击我</a>

<a class="clickElm2" style="display: block;width:100px;height:20px;line-height: 20px;text-align: center;background: #e1e1e1;">点击我2</a>

jquery操作：

var $clickElm = $(".clickElm"),
      $clickElm2 = $(".clickElm2")

            ;
            $clickElm.attr("ppp","999");
            $clickElm2.attr("ppp","999");
            $clickElm.click(function(){
                alert($(this).attr("ppp"));
            });
            $clickElm2.click(function(){
                alert($(this).attr("ppp"));
            });
            $clickElm.detach();
            $clickElm2.remove();


            setTimeout(function(){
                $clickElm.appendTo("body");
                $clickElm2.appendTo("body");
            },15000);

 

结果：

<a ppp="999" class="clickElm" style="display: block;width:100px;height:20px;line-height: 20px;text-align: center;background: #e1e1e1;">点击我</a>
<a ppp="999" class="clickElm2" style="display: block;width:100px;height:20px;line-height: 20px;text-align: center;background: #e1e1e1;">点击我2</a>

类名为"clickElm"的a标签在消失15秒钟之后重新出现，并且可以响应点击事件，类名为"clickElm2"的a标签在消失15秒钟之后重新出现，但不能响应点击事件，两者通过attr函数所赋予的值都还存在与元素中

4、error事件

对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。

 隐藏JavaScript错误:

$(window).error(function(){
  return true;
});

给你IE的用户隐藏无效的图像:
$("img").error(function(){ $(this).hide(); });

5、可以在iframe和图片上使用load()方法
$("img").load(function(){
　　alert($(this).height());
});
解释：
图片一旦加载出来，即可调用该函数的回调函数，便于基于图片本身的信息（例如长宽）对图片进行重新放置。

 6、事件的捕获和冒泡解析

http://www.ynpxrz.com/n612817c2023.aspx

7、jquery的result属性

　　　　var  count = 0;
            $("img").click(function(){
                return count++;
            });
            $("img").click(function(e){
                alert("点击了"+e.result+"次");
            });

显示最后一次点击事件返回的结果：

8、通过trigger函数给事件传递参数：

$(".test").click(function(event, a, b){
                alert(a + b);
  });
$(".mv").click(function(){
   $(".test").trigger("click",["foo","bar"]);
 });

//当点击mv类时，触发test类的点击事件，并且传入参数，最终弹出foobar