jquery手记

发表于 | 分类于 | 阅读次数:

写了几天的jquery，没有以前那么抗拒了。用着用着觉得还是挺不错的，至少用起来比写原生的DOM操作要方便得多，虽然没有框架动不动就双向绑定来的方便。但是学着还是好的，说不定哪天需要看旧项目的代码，还是会有一定的用处的。

熟悉熟悉API，至少让脑子知道有这么一回事就ok了。遇到问题了查一查。

还有就是之前习惯了写es6，最近写要兼容旧的浏览器，所以用es5及以下的东西。但是一定要加use strict，放过寄几以及以后维护你代码的人。。不要全局变量到处飞。。

问题一 —— jQuery报错

报错一：

checks that jQuery selectors are used in an efficient way.It suggests to splite descendant selectors which are perfaced with id selector and warns about duplicated selectors which could be cached.

image.png

最近在实现一个小功能，但不知道为什么写着写着越觉得有点卡顿，内心觉得有可能是浏览器的问题所以也没怎么在意，其实一直存在一个警告，就上图，只是我没怎么在意。

查了一下文档发现jQuery不会缓存元素。如果选择器需要重复使用，应将选择器保存在变量中，而不是重复进行选择。

因此按文档说的，将重复使用的选择器都用变量存储起来，让变量来实现选择器的缓存。

image.png

不要吐槽我为什么变量用1和2了。。。（逃

报错二：

项目中引入了BBCode转码文件后，jQuery中的$符号用不了，只能使用jQuery。

原因：$命名空间被占用，使用jQuery.noConflict()返回一个新的别名。

1
2
3
var $jq=jQuery.noConflict();

$jq('.classSelector').addClass("addClassName");

问题二——常规操作

增加/删除css类（class）

1
2
3
4
5
6
7
8
9
//增加class
$('.classSelector').addClass("addClassName");
$('#idSelector').addClass("addClassName");

$('selector').addClass('class1 class2')

//删除class
$('.classSelector').removeClass("removeClassName");
$('#idSelector').removeClass("removeClassName");

修改某项css属性

1
2
3
4
5
6
7
8
9
10
11
$('.classSelector').css("css","value");
$('#idSelector').css("css","value");

//example
$('.classSelector').css("display","none");
$('#idSelector').css("display","block");

$(selector).css({
  'css1':'value';
  'css2':'value'
})

监听鼠标事件

方法 描述
$(‘selector’).click(func) 点击鼠标左键时触发
$(‘selector’).dbclick(func) 迅速连续的两次点击时触发
$(‘selector’).mousedown(func) 按下鼠标时触发
$(‘selector’).mouseover(func) 松开鼠标时触发
$(‘selector’).mouseup(func) 鼠标从一个元素移入另一个元素时触发
$(‘selector’).mouseout(func) 鼠标移出元素时触发（冒泡）
$(‘selector’).mouseenter(func) 鼠标移入元素时触发
$(‘selector’).mouseleave(func) 鼠标移出元素时触发（不冒泡）
$(‘selector’).hover(func1，func2) hover事件
$(‘selector’).toggle(func1，func2) 鼠标点击切换事件
$(‘selector’).mouseleave(func)
  • 可以实现鼠标移开目标区域关闭div的效果。
1
2
3
4
5
6
7
// 监听鼠标移动
$("selector").mouseleave(function(){
  if(showbody){
    selectorBody.css('display','none');
    showbody = !showbody;
  }
})
$(‘selector’).hover(func1，func2)
  • 可以实现鼠标移到某个元素显示特定div，移开隐藏的效果。
1
2
3
4
5
6
// 显示详情
$("#pageDetails").hover(function(){
    $("#pageDetailsShow").css("display","block");
},function(){
    $("#pageDetailsShow").css("display","none");
});

多个选择器绑定同一事件

1
2
3
4
// 失去焦点事件
jQuery('#selector1 , #selector2 , #selector3').blur(function() {
    // todo something
});

jquery中获取某个节点的firstchild

1
2
3
4
5
6
7
8
$('#selector :first-child').blur(function() {
    alert('blur');
});

//原生写法
document.getElementById("selectorId").firstChild.onblur = function() {
   alert('blur');
}

问题三——事件绑定

bind()、unbind()

1
2
3
4
5
6
7
8
9
10
11
$('selector').click(function(){
  //todo something
})

//等价于
$('selector').bind('click',function(){
  //todo something
})

//解绑
$('selector').unbind('click');

delegate()、undelegate()

这里对事件代理就不作介绍了，还不知道事件代理的：传送门——js中的事件与事件委托

其实我写事件代理函数习惯直接把函数挂在节点上。。。（逃。。

1
2
3
4
5
6
7
8
9
10
11
//添加代理
$('rootSelector').delegate(childSelector,event,data,func);

$('rootSelector').delegate("button","click",function(){
  //todo something
});

//清除代理
$('selector').undelegate(selector,event,func);

$('selector').undelegate("p");

on()、off()

在某些情况下，跟bind和unbind没啥区别。

1
2
3
4
5
6
7
//绑定
$('selector').on('click',function(){
  //todo something
})

//解绑
$('selector').off('click');

再看文档看on的参数

1
2
3
4
5
$('selector').on(events ，[selector] ，[data]，func )
//event 事件对象
//selector 一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果是null的话那就跟bind是一样的效果
//data 事件触发时传递的参数
//func 事件处理函数

one()

为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次。

1
2
3
4
5
$('selector').one(event,fun);

$('selector').one("click",function(){
  //todo something
});

绑定onchange事件

文件/图片上传。

1
2
3
4
5
$('selector').change(func);

$('#uploadFile').change(function() {
    uploadFile();
});

以上，都是最近用到的一些api，都是查查文档、资料、教程啥的。用到新的再补上。