随身笔记

作者： admin

  • 用jQuery._data()判断元素或者DOM绑定事件的情况

    jquery 判断 元素 DOM 绑定

    一个jquery对象绑定了多少个事件或者一个事件绑定了多少次，可以使用$._data()内部函数去判断。

    在1.8.0版本之前，我们要想获取某个DOM绑定的事件处理程序可以这样：

    $.data(domObj,'events');//或者$('selector').data('events')

     

    而从1.8.0版本开始，jQuery突然不支持这样使用了，而是改到了一个叫’_data’的函数功能上了，即，1.8.0及以后的版本你可以这么用：

    $._data(domObj,'events');//注意，这里不能像$('selector')._data('events')这样用了。

    要想写出兼容兼容各个jQuery版本的方式，这样获取即可：

    var eventsData = $.data(domObj,'events') || $._data(domObj,'events');//这个改变在easyui 1.3.1的源码中也有体现。

     

    案例：

    //$('#d')绑定了click两次事件
$('#d').click(function(){alert(1);});
$('#d').click(function(){alert(2);});


var objEvt = $._data($("#d")[0], "events");  //获取DOM元素
 if (objEvt && objEvt["click"]) {  //DOM元素存在 并且 元素绑定了click事件
    alert("bind click");
 }else {
    alert("Not bind click");
}


objEvt.click.length  //click绑定了两次事件

     

  • css animation的监听事件

    在css3中有animation属性，如果我们需要在animation的动画过程中执行一些JS或者是监听animation，JS中有提供相应的事件

     

    x.addEventListener("animationend", myStartFunction);  //标准写发


addEventListener("webkitAnimationEnd", function(){ //针对webkit内核
   //回调代码
}, false);


不同浏览器的AnimationEnd写法 (webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend)


开始事件 webkitAnimationStart 
结束事件 webkitAnimationEnd 
重复运动事件 webkitAnimationIteration 



-webkit-animation-iteration-count:infinite //动画无限播放时
监听webkitAnimationIteration事件就会无线次触发


-webkit-animation-iteration-count:1   //webkitAnimationIteration事件不会触发
-webkit-animation-iteration-count:2 //webkitAnimationIteration事件触发1次
-webkit-animation-iteration-count:3 //webkitAnimationIteration事件触发2次

     

     

     

     

  • jquery中end()用法

    在jquery中我们可以使用链式写法例如：

    $('#wo').find('.xx')  //这语句中最终获取到的jquery对象就是 class名为.xx的元素

    如果想在以上代码的基础上继续使用链式写法，重新在返回获取到$(‘#wo’)对象如何写？

    我们都知道find()的用法就是找到某元素下的后代元素，谁又知道他们之间隔了多少层元素呢，总不能使用类似parent().parent().parent()层层往上找吧，这样确实是可以但是不觉得很累赘吗？

    这时候就能使用end()了，例如：

    $('#wo').find('.xx').end()   //重新又获取到了$('#wo')元素

     

  • 基于百度手势插件实现手机幻灯片效果

    百度 手势 touch 手机 微信 幻灯片

    touch_tab

     

    在线演示：https://sdeno.com/zp/baidu_touch/

    baidu_touch

     

    基于jQuery,不依赖百度touch.js

    nobaidutou

    https://sdeno.com/zp/baidu_touch/map.html

  • 点击测试按钮创建一个新窗口页面测试当前代码

    查看 按钮 测试 新页面 新窗口

    test_win

     

    HTML：

    <textarea id="demo1" style="margin: 0px; height: 200px; width: 232px;"></textarea>

<input type="button" value="测试" onclick="runCode('demo1')">

     

    js:

    function runCode(id) {
  var obj = document.getElementById(id);
  var TestWin = open('');
  TestWin.opener = null;
  TestWin.document.write(obj.value);
  TestWin.document.close();
}

     

     http://www.jb51.net/article/37679.htm