以下是一些非常有用的jQuery提示和所有jQuery的开发技巧。

1。优化性能复杂的选择
查询DOM中的一个子集,使用复杂的选择时,大幅提高了性能:

var subset = $("");
$("input[value^='']", subset);

2。设置上下文和提高性能
jQuery核心功能上,指定上下文参数。指定context参数,允许从DOM中更深的分支,而不是从DOM根,jQuery来启动。鉴于一个足够大的DOM,指定上下文参数转化为性能提升。

$("input:radio", document.forms[0]);

3。现场事件处理程序

设置任何一个选择的元素相匹配的事件处理程序,即使它被添加后的初始页面加载到DOM:
$('button.someClass').live('click', someFunction);

这允许你通过Ajax加载内容,或通过JavaScript添加事件处理程序的成立为这些元素正确自动。
 
同样,要停止现场事件处理:

4。检查索引
jQuery有索引,但它是一种痛苦,使用你所需要的元素的列表,并通过元素你想要的指标

var index = e.g $('#ul>li').index( liDomObject );
以下是比较容易:
$("ul > li").click(function ()
{
    var index = $(this).prevAll().length;
});
如果你想知道在一个集合元素的索引,例如在一个无序列表的列表项:

5。使用jQuery的数据的方法
jQuery的数据()方法是有用的,不为人所熟知。它可以让你无需修改DOM绑定数据到DOM元素。
$("ul > li").click(function ()
{
    var index = $(this).prevAll().length;
});
6。删除一个元素的淡出效果基本show效果
结合多个jQuery效果,动画和删除DOM元素。

$("#myButton").click(function() {
         $("#myDiv").fadeTo("slow", 0.01, function(){ //fade
             $(this).slideUp("slow", function() { //slide up
                 $(this).remove(); //then remove from the DOM
             });
         });
});
7。检查是否存在一个元素

if ($("#someDiv").length) {
    //hooray!!! it exists...
}

使用下面的代码片段来检查一个元素是否存在与否。

8。添加到DOM中动态创建的元素

使用下面的代码片段来动态创建一个DIV,并添加到DOM。
var newDiv = $('<div></div>');

newDiv.attr("id","myNewDiv").appendTo("body");

9。换行符和chainability的

而不是做:

 
$("a").hide().addClass().fadeIn().hide();

像这样可以增加可读性:

$("a")
  .hide()
  .addClass()
  .fadeIn()
  .hide();

10。创建自定义选择

$.extend($.expr[':'], {
    over100pixels: function(a) {
        return $(a).height() > 100;
    }
});
 
$('.box:over100pixels').click(function() {
    alert('The element you clicked is over 100 pixels high');
});

11。克隆在jQuery对象

使用clone()方法。jQuery的方法克隆任何JavaScript中的DOM对象。

// Clone the DIV
var cloned = $('#somediv').clone();
jQuery的clone()方法不克隆一个JavaScript对象。克隆JavaScript对象,使用下面的代码。

// Shallow copy
var newObject = jQuery.extend({}, oldObject);
 
// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

12。测试,如果事情是隐藏使用jQuery

我们使用。隐藏()。在jQuery的show()方法来改变元素的知名度。使用以下代码来检查一个元素是否是可见或不可见。
if($(element).is(":visible") == "true") {
       //The element is Visible
}
13。另一种方式的文件准备就绪

//Instead of
$(document).ready(function() {
    //document ready
});
//Use
$(function(){
    //document ready
});

14。选择一个元素。(期),在它的ID

在选择使用反斜杠来选择的元素,在它的ID期间。

$("#Address\\.Street").text("Enter this field");

15。计数的直接子元素

如果你要计算所有的div#foo的元素存在于

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz">
  </div>
  <span><span>
</div>
 
//jQuery code to count child elements
$("#foo > div").size()
16。做一个“闪存”的元素

jQuery.fn.flash = function( color, duration )
{
    var current = this.css( 'color' );
    this.animate( { color: 'rgb(' + color + ')' }, duration / 2 );
    this.animate( { color: current }, duration / 2 );
}
//Then use the above function as:
$( '#importantElement' ).flash( '255,0,0', 1000 );
17。中心元素在屏幕上

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}
 
//Use the above function as:
$(element).center();

18。获取父div使用最接近

如果你想找到的包装纸DIV元素(不论该DIV的ID),然后你会想这个jQuery选择:

$("#searchBox").closest("div");

19。禁用右键单击上下文菜单

还有许多JavaScript片段禁用右键
单击上下文菜单,但jQuery让事情容易多了:

$(document).ready(function(){
    $(document).bind("contextmenu",function(e){
        return false;
    });

});

20。获取鼠标光标的X和Y轴

这个脚本会显示X和Y值 - 鼠标指针的坐标。

$().mousemove(function(e){
    //display the x and y axis values inside the P element
    $('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});

20个热门jQuery的提示和技巧的更多相关文章

  1. 几个 jQuery 小提示和技巧

    几个 jQuery 小提示和技巧 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 H ...

  2. 开发中可能会用到的几个 jQuery 小提示和技巧

    今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...

  3. 开发中可能会用到的几个 jQuery 小提示和技巧(转)

    今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人员.jQuery 是最好的 JavaScript 库之一,用于简化动画,事件处理,支持 Ajax 和 HTML 的客户端脚本.网络中有大量 ...

  4. 开发中可能会用到的几个 jQuery 小提示和技巧 (转)

    转自:http://www.cnblogs.com/lhb25/p/useful-jquery-tips-and-tricks.html 今天,我们将分享一些很有用的技巧和窍门给 jQuery 开发人 ...

  5. 25个增强iOS应用程序性能的提示和技巧(中级篇)(3)

    25个增强iOS应用程序性能的提示和技巧(中级篇)(3) 2013-04-16 14:42 破船之家 beyondvincent 字号:T | T 本文收集了25个关于可以提升程序性能的提示和技巧,分 ...

  6. 25个增强iOS应用程序性能的提示和技巧--中级篇

    25个增强iOS应用程序性能的提示和技巧--中级篇 标签: ios性能优化内存管理 2013-12-13 10:55 738人阅读 评论(0) 收藏 举报  分类: IPhone开发高级系列(34)  ...

  7. 增强iOS应用程序性能的提示和技巧(25个)

    转自 http://www.cocoachina.com/newbie/basic/2013/0522/6259.html 在开发iOS应用程序时,让程序具有良好的性能是非常关键的.这也是用户所期望的 ...

  8. 25个增强iOS应用程序性能的提示和技巧 — 中级篇

    本文由破船译自:raywenderlich 转载请注明出处:BeyondVincent的博客 _____________ 在开发iOS应用程序时.让程序具有良好的性能是非常关键的.这也是用户所期望的. ...

  9. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

随机推荐

  1. 【转】android camera(一):camera模组CMM介绍

    关键词:android  camera CMM 模组 camera参数平台信息:内核:linux系统:android 平台:S5PV310(samsung exynos 4210)  作者:xubin ...

  2. 关于memecache的使用及清楚示意

    Memcache是danga.com的一个项目,最早是为 LiveJournal 服务的,目前全世界不少人使用这个缓存项目来构建自己大负载的网站,来分担数据库的压力.它可以应对任意多个连接,使用非阻塞 ...

  3. java转换字符串编码格式 (解码错误,重新解码)

    字符集概念:规定了某个文字对应的二进制数字存放方式(编码)和某串二进制数值代表了哪个文字(解码)的转换关系. 我们在计算机屏幕上看到的是实体化的文字,而在计算机存储介质中存放的实际是二进制的比特流. ...

  4. PHP反射ReflectionClass、ReflectionMethod 入门教程

    PHP反射ReflectionClass.ReflectionMethod 入门教程 作者:SNSGOU 发布于:2014-03-16 16:44:00  分类:PHP   浏览(6145) PHP5 ...

  5. Unity 之圆环算法

    首先我们要明白圆环生成的原理,其实说白了并不是圆环,而是圆.因为我们使用的预制物体时Cube(物体本身是有大小的)难免会有发生实物的折叠看起来给人的感觉是圆环而已. 1.1 几何中我们要画一个圆,因为 ...

  6. DataSet转Json 方法

    防止忘记,留着备用 /// <summary> /// DATASET转JSON /// </summary> /// <param name="ds" ...

  7. 一个完整的SSL连接建立过程

    客户端浏览器连接到Web服务器,发出建立安全连接通道的请求. 服务器接受客户端请求,发送服务器证书做为响应. 客户端验证服务器证书的有效性,如果验证通过,则用服务器证书中包含的服务器公钥加密一个会话密 ...

  8. node 通过指令创建一个package.json文件及npm安装package.json

    描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license项的 ...

  9. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  10. DOMDocument类文件

    http://php.net/manual/en/class.domdocument.php <?php $xml = <<< XML <?xml version=&qu ...