jquery学习文档笔记

Posted 2020-06-21 wts_crazy

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函数所赋予的值都还存在与元素中