jQuery提示和技巧

jQuery的data()方法很有用,但并不为人所知.它允许您在不修改DOM的情况下将数据绑定到DOM元素.

嵌套过滤器

你可以嵌套过滤器(如此处所示的nickf).

.filter(":not(:has(.selected))")

我真的不喜欢这条$(document).ready(fn)捷径.当然它减少了代码,但它也减少了代码的可读性.当你看到$(document).ready(...),你知道你在看什么.$(...)用于太多其他方式立即有意义.

如果你有多个框架可以jQuery.noConflict();按照你的说法使用,但你也可以为它分配一个不同的变量:

var $j = jQuery.noConflict();

$j("#myDiv").hide();

如果您有几个可以简化为$x(...)-style调用的框架,那将非常有用.

哦,我们不要忘记jQuery元数据!data()函数很棒,但必须通过jQuery调用填充.

而不是违反W3C对自定义元素属性的遵从性,例如:

改为使用元数据:

现场活动处理程序

为与选择器匹配的任何元素设置事件处理程序,即使它在初始页面加载后被添加到DOM:

$('button.someClass').live('click', someFunction);

这允许您通过ajax加载内容,或通过javascript添加它们,并自动为这些元素正确设置事件处理程序.

同样,要停止实时事件处理:

$('button.someClass').die('click', someFunction);

与常规事件相比,这些实时事件处理程序有一些限制,但它们对大多数情况都很有用.

有关更多信息,请参阅jQuery文档.

更新:live()并die()在jQuery 1.7中弃用.有关类似的替换功能,请访问http://api.jquery.com/on/和http://api.jquery.com/off/.

UPDATE2:live()长期以来一直被弃用,甚至在jQuery 1.7之前.对于1.7之前的版本jQuery 1.4.2+ delegate()和使用undelegate().的live()例子($('button.someClass').live('click', someFunction);)可以使用改写delegate()这样的:$(document).delegate('button.someClass', 'click', someFunction);.

用命名函数替换匿名函数.这真的取代了jQuery上下文,但是由于它依赖于回调函数,它在使用jQuery时似乎更加发挥作用.我使用内联匿名函数的问题是它们更难调试(更容易查看具有明确命名函数的callstack,而不是6级"匿名"),以及同一个内部的多个匿名函数这一事实jQuery链可能变得难以阅读和/或维护.另外,匿名函数通常不会被重用; 另一方面,声明命名函数鼓励我编写更有可能被重用的代码.

插图; 代替:

$('div').toggle(
    function(){
        // do something
    },
    function(){
        // do something else
    }
);

我更喜欢:

function onState(){
    // do something
}

function offState(){
    // do something else
}

$('div').toggle( offState, onState );

在元素创建时定义属性

在jQuery 1.4中,您可以使用对象文字在创建元素时定义属性:

var e = $("", { href: "#", class: "a-class another-class", title: "..." });

$("", {
    ...
    css: {
        color: "#FF0000",
        display: "block"
    }
});

var $ = someOtherFunction(); // from a different library

jQuery(function($) {
    if ($ instanceOf jQuery) {
        alert("$ is the jQuery object!");
    }
});

(function($) {
    $('...').etc()    // whatever jQuery code you want
})(jQuery);

var index = e.g $('#ul>li').index( liDomObject );

$("ul > li").click(function () {
    var index = $(this).prevAll().length;
});

$(document).ready(function ()
{
    // ...
});

$(function ()
{
    // ...
});

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

Sys.UI.Control.prototype.j = function Sys$UI$Control$j(){
  return $('#' + this.get_id());
}

$get('#myControl').j().hide();

var subset = $("");

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

    Larger | 
    Smaller
    

    In today’s video tutorial, I’ll show you how to resize text every time an associated anchor tag is clicked. We’ll be examining the “slice”, “parseFloat”, and “CSS” Javascript/jQuery methods. 
    

强烈推荐这些教程......

http://blog.themeforest.net/screencasts/jquery-for-absolute-beginners-video-series/

异步each()函数

如果你有非常复杂的文件运行jquery 每个()函数在迭代期间锁定浏览器,和/或Internet Explorer弹出" 你想继续运行这个脚本 "的消息,这个解决方案将节省一天.

jQuery.forEach = function (in_array, in_pause_ms, in_callback)
{
    if (!in_array.length) return; // make sure array was sent

    var i = 0; // starting index

    bgEach(); // call the function

    function bgEach()
    {
        if (in_callback.call(in_array[i], i, in_array[i]) !== false)
        {
            i++; // move to next item

            if (i < in_array.length) setTimeout(bgEach, in_pause_ms);
        }
    }

    return in_array; // returns array
};


jQuery.fn.forEach = function (in_callback, in_optional_pause_ms)
{
    if (!in_optional_pause_ms) in_optional_pause_ms = 10; // default

    return jQuery.forEach(this, in_optional_pause_ms, in_callback); // run it
};

你可以使用它的第一种方式就像每个():

$('your_selector').forEach( function() {} );

一个可选的第二参数,可以指定在迭代之间的速度/延迟其可以是用于动画有用(在下面的例子将在等待1秒迭代之间):

$('your_selector').forEach( function() {}, 1000 );

请记住,由于这是异步工作,因此您不能依赖迭代在下一行代码之前完成,例如:

$('your_selector').forEach( function() {}, 500 );
// next lines of code will run before above code is complete

我为一个内部项目编写了这个,虽然我确信它可以改进,但它适用于我们需要的东西,所以希望你们中的一些人觉得它很有用.谢谢 -

Syntactic shorthand-sugar-thing - 在一行上缓存对象集合并执行命令:

代替:

var jQueryCollection = $("");

jQueryCollection.command().command();

我做:

var jQueryCollection = $("").command().command();

一个有点"真实"的用例可能是这样的:

var cache = $("#container div.usehovereffect").mouseover(function ()
{
    cache.removeClass("hover").filter(this).addClass("hover");
});

我喜欢$this在匿名函数的开头声明一个变量,所以我知道我可以引用一个jQueried.

像这样:

$('a').each(function() {
    var $this = $(this);

    // Other code
});

将jQuery对象保存在变量中以便重用

将jQuery对象保存到变量可让您重用它,而无需通过搜索DOM来查找它.

(正如@Louis建议的那样,我现在使用$来表示变量包含一个jQuery对象.)

// Bad: searching the DOM multiple times for the same elements
$('div.foo').each...
$('div.foo').each...

// Better: saving that search for re-use
var $foos = $('div.foo');
$foos.each...
$foos.each...

作为一个更复杂的例子,假设您在商店中有食物清单,并且您只想显示符合用户标准的食物.您有一个带有复选框的表单,每个复选框都包含一个条件.复选框的名称organic和lowfat,并且产品具有相应的类 - .organic等.

var $allFoods, $matchingFoods;
$allFoods = $('div.food');

现在您可以继续使用该jQuery对象了.每次单击一个复选框(检查或取消选中),从主食品列表开始,并根据复选框过滤:

// Whenever a checkbox in the form is clicked (to check or uncheck)...
$someForm.find('input:checkbox').click(function(){

  // Start out assuming all foods should be showing
  // (in case a checkbox was just unchecked)
  var $matchingFoods = $allFoods;

  // Go through all the checked boxes and keep only the foods with
  // a matching class 
  this.closest('form').find("input:checked").each(function() {  
     $matchingFoods = $matchingFoods.filter("." + $(this).attr("name")); 
  });

  // Hide any foods that don't match the criteria
  $allFoods.not($matchingFoods).hide();
});

似乎已经提到了大多数有趣且重要的提示,所以这只是一点补充.

小技巧是jQuery.each(对象,回调)函数.每个人都可能使用jQuery.each(回调)函数迭代jQuery对象本身,因为它很自然.jQuery.each(对象,回调)实用程序函数迭代对象和数组.很长一段时间,我不知道除了不同的语法之外没有看到它是什么(我不介意编写所有时尚的循环),而且我有点惭愧,我最近才意识到它的主要优势.

问题在于,由于jQuery.each(对象,回调)中的循环体是一个函数,因此每次在循环中都会得到一个新的作用域,这在循环中创建闭包时特别方便.

换句话说,一个典型的常见错误是执行以下操作:

var functions = [];
var someArray = [1, 2, 3];
for (var i = 0; i < someArray.length; i++) {
    functions.push(function() { alert(someArray[i]) });
}

现在,当您调用functions数组中的函数时,您将获得三次警报,其内容undefined很可能不是您想要的.问题是只有一个变量i,所有三个闭包都引用它.当循环结束时,最终值为i3,并且someArrary[3]是undefined.您可以通过调用另一个为您创建闭包的函数来解决它.或者您使用jQuery实用程序,它基本上会为您执行此操作:

var functions = [];
var someArray = [1, 2, 3];
$.each(someArray, function(item) {
    functions.push(function() { alert(item) });
});

现在,当您调用这些函数时,您将获得三个警报,其中包含内容1,2和3.

一般来说,这是你自己无法做到的事情,但它很高兴.

像访问数组一样访问jQuery函数

基于布尔值添加/删除类...

function changeState(b)
{
    $("selector")[b ? "addClass" : "removeClass"]("name of the class");
}

是...的缩短版本

function changeState(b)
{
    if (b)
    {
        $("selector").addClass("name of the class");
    }
    else
    {
        $("selector").removeClass("name of the class");
    }
}

没有那么多的用例.从来没有; 我觉得它很整洁:)

更新

如果你不是注释读取类型,ThiefMaster指出toggleClass接受一个布尔值,它确定是否应该添加或删除一个类.因此,就我上面的示例代码而言,这将是最好的方法......

$('selector').toggleClass('name_of_the_class', true/false);

从集合中删除元素并保留可链接性

考虑以下:

    
One
    
Two
    
Three
    
Four
    
Five

$("li").filter(function()
{
    var text = $(this).text();

    // return true: keep current element in the collection
    if (text === "One" || text === "Two") return true;

    // return false: remove current element from the collection
    return false;
}).each(function ()
{
    // this will alert: "One" and "Two"       
    alert($(this).text());
});

该filter()函数从jQuery对象中删除元素.在这种情况下:将删除所有不包含文本"One"或"Two"的li元素.

更新:

只需在网站上包含此脚本,您就可以在任何浏览器中弹出一个Firebug控制台进行调试.不完整的功能,但它仍然非常有用!记得在完成后将其删除.

    


    

        

            
            

                
                    
                
            

            

                手机用户2402852387            

            

                这个屌丝很懒，什么也没留下！            
            
            


                                
                    
                    关注作者
                            

        
    


    

        
Tags | 热门标签
        

            

                                

                    actionscrip
                
                                

                    bash
                
                                

                    c#
                
                                

                    c++
                
                                

                    c语言
                
                                

                    erlang
                
                                

                    flutter
                
                                

                    go
                
                                

                    golang
                
                                

                    java
                
                                

                    javascript
                
                                

                    lua
                
                                

                    node.js
                
                                

                    perl
                
                                

                    php
                
                                

                    python
                
                                

                    scala
                
                                

                    typescript
                
                                

            
        
    


    

        
RankList | 热门文章
        

            

                                

                    1如何隐藏或禁用功能中打印的消息
                
                                

                    2如何使用nodejs child_process.spawn捕获ENOENT？
                
                                

                    3使用activityManager.getRunningAppProcesses()获取(实际)前台进程
                
                                

                    4为什么具有背景的父元素不会覆盖宽度大于视口的子元素？
                
                                

                    5stream.forEach中的多行代码
                
                                

                    6用Python生成多维网格
                
                                

                    7Angular 2可选路由参数
                
                                

                    8在AWS中重新分配私有IP地址？
                
                                

                    9如果我使用RxJava链接多个运算符,我需要为每个运算符调用.subscribeOn()吗？
                
                                

                    10逐行读取文本文件到字符串中
                
                                

                    11如何从npm install获取更多信息？
                
                                

                    12为什么这个for循环停止了？
                
                                

                    13我可以指望任何STL容器的sizeof(string)或sizeof吗？
                
                                

                    14为什么我不能为libsass构建轮子,即使它会安装？
                
                                

                    15重塑相关矩阵,仅包括每对变量一次
                
                                

                    16如果dataSource计数可能会改变,可以同时使用reloadItemsAtIndexPaths和reloadData吗？
                
                                

                    17亚马逊s3a使用Spark返回400 Bad Request
                
                                

                    18ViewBag里面有什么？
                
                                

                    19<p>元素中的数组,每个都是换行符？
                
                                

                    20在Node.js中使用RabbitMQ进行标头交换示例