先祝大家2019快乐呀 本来打算一号写一篇单独的博客的 可是最近没怎么遇到bug和难的需求 所以没想到要写什么 只能写一写用jquery怎么久了 看到的一些博客和个人使用的一些优化心得

废话不说了 正文开始

一、jQuery链式

这个太重要了 在jQ中是很常用的技巧

<!-- HTML -->
<div id="xl-users-type" class="xl-users-type">
    <p>
        <span>用户</span>
        <i class="xl-backstage-icon xl-icon-select"></i>
    </p>
    <ul>
        <li data-type="user">用户</li>
        <li data-type="student">xxx</li>
        <li data-type="teacher">小管理</li>
        <li data-type="controller">管理员</li>
    </ul>
    <span class="xl-dialog-error"></span>
</div>

//jQuery
//贴一个项目用的代码
$(document).on('click','#xl-users-type p',function (){
    if(!$(this).next().is(":animated"))
        $(this).toggleClass('xl-show').next().slideToggle().next().next().hide();
}).on('click','#xl-users-type li',function (){
    $(this).siblings().removeClass('xl-show').end().addClass('xl-show').parent().prev().find('span').text($(this).text()).parent().click();
});

可以看到使用JQ的链式可以减少代码量 更优雅

二、使用.on()绑定事件

如果你使用的是jQ1.7版本以上 请快点无情的抛弃.live()、.bind()和. delegate() 然后使用.on()!

.on()性能是前面几个的几倍起步 最直观的体验就是 我在兼容ie7时 使用.live()和.on()绑定未来元素时 .on()是秒打开的 .live()至少三秒以上才看到界面

上面链式的例子我也是用了.on()绑定元素 把未来元素绑定在了$(document) 因为页面是ajax加载的 加载完不绑在$(document)的话就不能触发事件了

//普通绑定
$(select).on('click',function (){
    //代码
});

//绑定未来元素
$(document).on('click','select',function (){
    //代码
});

//解除.on()事件绑定用.off()
$(select).off();

2019年1月9日 23:31:08

今天我发现如果是未来元素的话 可以不绑定到$(document) 只需要绑定到页面加载时就有的并且不会被删除的元素即可

.click( function(){} )和.on(‘click’,function(){})这两者的区别在于 只要后面不用为新增元素添加事件的话就用.click(),.click()属于静态加载

三、同一个地方多处需要点击事件可以写在一起

$(select).on('click',function (e){
    var target=e.target;
    switch (target) {
        case $(select)[0]:
            //代码
            break;
        case $(select)[0]:
            //代码
            break;
        case $(select)[0]:
            //代码
            break;
        case $(select)[0]:
            //代码
            break;
        default:
            return false;
    }
    return false;
})

用switch区分target,但要记住选择器后面一定要加[0] 转化为javascript对象 如果不加是不会进入case的 因为获取到的还是JQ对象 没办法进入判断

这种我通常用在一个区域有多处按钮 这样可以减少很多代码量

四、使用.each()时定义变量保存$(this)

$(select).each(function (i){
    var $this=$(this);
    //代码
});

这样会使代码执行速度加快

暂时就想到怎么多 以后再想到什么还会在这里更新

2019年1月3日 19:12:58

判断网站是否使用了jQuery

F12进入控制台输入jQuery

如果没有报错代表该网站使用了jQuery 拿GitHub为案例 上一年已经宣布完全移除jQuery 全部代码使用原生javascript

只要不是报错 说明网站使用jQuery

五、提示框显示几秒后隐藏(一直触发事件不会隐藏)

$(select).stop().show().delay(1500).hide(0)
//.delay(1500)控制隐藏秒数 单位毫秒

第一次弹出提示框只点了一次 1.5秒后隐藏

第二次弹出提示框时点击多次 一直显示 停止后1.5秒隐藏