为 jQuery 发布你的简短扩展函数好东西

Posted 2023-05-09

【中文标题】为 jQuery 发布你的简短扩展函数好东西

【英文标题】：Post your short extension functions goodies for jQuery

【发布时间】：2010-09-30 18:55:32

【问题描述】：

与 SO 上的 c# 扩展主题类似，如果我们能将一大堆有用的 jQuery 函数扩展集合在一起，那就太好了。

请注意，我们的想法是使用简短的 sn-ps 代码而不是完整的知名插件或 ui 小部件

【问题讨论】：

网站的结构是这样的，通过适当的标签和标题，可以为特定的搜索找到特定的问题和答案。如果我需要一个日志插件，我不会搜索“[jquery] extension goodies”，我会搜索“[jquery-plugin] logging”...或搜索 jQuery 插件存储库。

有趣的是如何获得 3000 次观看然后***.com/questions/271398/…。

Shog - 这变成了一个完整的项目，所以我认为你必须从你认为你的高处跳下来。

没有其他网站可以继续吗？ jQuery没有这样的目录吗？

其目的是编写简短的 sn-ps 代码，人们可以使用它来节省打字……而不是完整的插件来提供小部件。

【参考方案1】：

// Allows chainable logging
// USAGE: $('#someDiv').hide().log('div hidden').addClass('someClass');
// Demo : http://jsbin.com/odeke
jQuery.log = jQuery.fn.log = function (msg) 
      if ( window.console && window.console.log ) 
         console.log("%s: %o", msg, this);
      
      return this;
;

【讨论】：

不应该是if(window.console)吗？

我认为这适用于 firefox/firebug (console.log)

这个sn-p的作者是Dominic Mitchell。 ajaxian.com/archives/jquery-logginghappygiraffe.net/blog/2007/09/26/jquery-logging

这是萤火虫，但我相信 window.console 是正确的做法。

我使用：function debug(msg) if(window.console && window.console.log) window.console.log(msg);

【参考方案2】：

您可以使用它来查看选择器是否存在。

if($.exists('#mydiv'))  

$.exists = function(selector) 
    return ($(selector).length);

【参考方案3】：

将页面上的绝对 URL 解释为外部链接，并将它们设置为在新选项卡中打开，并为特定样式设置友好的标题和类。

$("#content [href^='http']:not(a:has('img'))").each(function()$(this).attr("target", "_blank").addClass("external").attr("title", "External Link to " + $(this).attr("href")));

【参考方案4】：

validation 插件很棒。在 ASP.NET MVC 应用程序中使用它来使用 ajax 动态验证客户端上的内容...甚至根据用户输入返回自定义错误消息...非常酷。

【参考方案5】：

快速简单的 AJAX：

以下允许您制作锚像

<a href='http://www.google.com/' rel='#myselector' class='ajax' />

对href URL 执行AJAX 查询，并将结果注入到锚点rel 属性中选择器定义的第一个元素中。

// Allow hrefs with the class 'ajax' and a rel attribute set with a selector to load content via ajax into the selected element.
$('.ajax').unbind('click').click
(
    function(e)
    
        $($(this).attr('rel')).load($(this).attr("href"));
        e.preventDefault();
    
);

【参考方案6】：

http://plugins.jquery.com/ 托管各种大小的插件，并且将是比此线程更全面和有用的资源，抱歉。

【讨论】：

这不是关于小部件的完整插件，它是 jquery 的短 sn-ps。

【参考方案7】：

啊 我有点偏离最初的问题，但如果有“get/set an id”sn-p， 然后我有一些代码来创建唯一 ID：

$.increment = function ()
    var me = arguments.callee;  
    if (!me.count) me.count = 0;
    return ++me.count;      


$.domToSelector = function (jq, options)
    var selectors = [], i = 0; defaults = , opts = $.extend(defaults,options);
    $(jq).each(function()  
        var $node = $(this);    
        if ($node.attr('id'))
            selectors[i] = '#'+$(this).attr('id');      
        
        else
             var customId = ''+new Date; 
             customId = customId.replace(/ /g, '').replace(/:/g, '').replace(/\+/g, '');
             customId = customId+'_'+$.increment();
             if (opts.prefix)  customId = opts.prefix+customId;
             $node.attr('id', customId);
             selectors[i] = '#'+customId;        
        
        i++;    
    );
    if (selectors.length == 1) selectors = selectors[0];    
    return selectors;

【参考方案8】：

扩展选择器，即编写您自己的自定义选择器。这是两个示例：

$(document).ready(function()
    $.extend($.expr[':'], 
        inputEmpty: inputEmpty,
        inputNotEmpty: inputNotEmpty
    );
);

function inputEmpty(el) 
    return $(el).val() == "";


function inputNotEmpty(el) 
    return $(el).val() != "";

【参考方案9】：

只是获取/设置元素 ID 的快捷方式。

 (function($) 
    $.fn.id = function(newDOMID)
        var $this = $(this); 
        if($this.attr('id'))
            if(!newDOMID)
                $this.id.getID($this);
            
            else 
                $this.id.setID($this,newDOMID);
               
        
        else 
            alert('The target no longer appears to be a part of the DOM!')
        
    ;
    $.fn.id.getID = function($this)
        return $this.attr('id');
    ;
    $.fn.id.setID = function($this,newDOMID)
        $this.attr('id',newDOMID);
        return this
    ;
)(jQuery);

它是 jQuery 插件网站上的 jID。

【讨论】：

过度抽象的 IMO。有什么问题：$.fn.id = function() return arguments.length>0?this.attr('id',arguments[0]):this.attr('id'); ;