专栏首页大前端_Webjquery常用函数及技巧(持续更新)

jquery常用函数及技巧(持续更新)

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51279552

关于选择器

  • 尽量ID选择器。其背后机理其实是调用原生的document.getElementById()
  • 使用类选择器时不指定元素的类型。
  • 多级查找中,右边尽量指定得详细点而左边则尽量简单点
// 丑陋
$("div.data .gonzalez");

// 优化后
$(".data td.gonzalez");
  • 表使用万能选择器,并且警惕隐式的万能选择器
$('div.someclass :radio'); // 差
$('div.someclass input:radio'); // 棒
  • 操作任何元素前先将其从文档卸载,完了再贴回去
var $myList = $("#list-container > ul").detach();
//...一大堆对$myList的处理
$myList.appendTo("#list-container");

jQuery中each的用法之退出循环和结束本次循环

jQuery中each类似于javascript的for循环 但不同于for循环的是在each里面不能使用break结束循环,也不能使用continue来结束本次循环,想要实现类似的功能就只能用return,

break         用return false
continue     用return ture或者return

$.proxy

$.proxy方法类似于ECMAScript 5的bind方法,可以绑定函数的上下文(也就是this对象)和参数,返回一个新函数。 jQuery.proxy()的主要用处是为回调函数绑定上下文对象。

var o = {
    type: "object",
    test: function(event) {
        console.log(this.type);
    }
};

$("#button")
  .on("click", o.test) // 无输出
  .on("click", $.proxy(o.test, o)) // object

jQuery的加载

一般采用下面的写法,在网页中加载jQuery。

<script type="text/javascript"
  src="//code.jquery.com/jquery-1.11.0.min.js">
</script>
<script>
window.jQuery ||
  document.write(
    '<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>'
  );
</script>

上面代码有两点需要注意。一是采用CDN加载。如果CDN加载失败,则退回到本地加载。二是采用协议无关的加载网址(使用双斜线表示),同时支持http协议和https协议。

jQuery构造函数

jQuery对象本质上是一个构造函数,主要作用是返回jQuery对象的实例。

$('body').nodeType
// undefined
$('body') instanceof jQuery
// true

上面代码表示,由于jQuery返回的不是DOM对象,所以没有DOM属性nodeType。它返回的是jQuery对象的实例。

jquery事件命名空间

如果可能尽量在绑定事件处理程序时使用一个命名空间,这样可以方便地取消绑定而不会影响其他绑定。

$('button') .on('click.myNamespace', function() { console.log('a'); }); 
$('button') .on('click.myNamespace2', function() { console.log('b'); }); 
$('button').trigger('.myNamespace2');

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不定高多行溢出文本省略

    大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

    空空云
  • cordova 安卓开发环境搭建(Mac OSX

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • 深入理解xhr的responseType中blob和arrayBuffer

    版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

    空空云
  • jQuery最佳实践

    上周,我整理了《jQuery设计思想》。 那篇文章是一篇入门教程,从设计思想的角度,讲解"怎么使用jQuery"。今天的文章则是更进一步,讲解"如何用好jQue...

    ruanyf
  • jQuery最佳实践

    jQuery的版本更新很快,你应该总是使用最新的版本。因为新版本会改进性能,还有很多新功能。

    javascript.shop
  • 如何设计,容易挨揍的URI???

    后端工程师,如何无脑设计一些shi一样的URI,来恶心移动/前端工程师呢? 希望本文能给大家一些启示。 方法一:搞一些不知所谓的名称。 例如: http:/...

    架构师之路
  • 你应该知道的那些Jupyter Notebook奇技淫巧

    Jupyter Notebook是一个在线编辑器,可以在网页上编辑程序,在编辑的过程中,每次编辑一行代码就可以运行一行代码,运行的结果也可以显示在代码的下方,方...

    1480
  • 你应该知道的那些Jupyter Notebook奇技

    Jupyter Notebook是一个在线编辑器,可以在网页上编辑程序,在编辑的过程中,每次编辑一行代码就可以运行一行代码,运行的结果也可以显示在代码的下方,方...

    石晓文
  • vSphere Hypervisor 6.5 虚拟机创建和操作系统安装

    在上一篇博客中,介绍了vSphere Hypervisor 6.5的安装过程:包括镜像下载、定制和安装以及部分问题解决,一路磕磕碰碰,最终也算是把vSphere...

    格子Lin
  • Contrastive Loss(对比损失)Contrastive Loss

    致Great

扫码关注云+社区

领取腾讯云代金券