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

Question

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

请注意，我们的想法是使用简短的代码片段，而不是完整的众所周知的插件或 ui 小部件

Answer 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;
};

Answer 2

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

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

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

Answer 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"))});

Answer 4

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

Answer 5

快速简单的 AJAX：

以下允许您制作锚点

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

它对 URL进行 AJAX 查询，href并将结果注入到锚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();
    }
);

Answer 6

http://plugins.jquery.com/托管各种大小的插件，并且将是一个比这个线程更全面和有用的资源，对不起。

Answer 7

啊，我离最初的问题有点远，但如果有“get/set an id”片段，那么我有一些代码来创建唯一的 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;
}

Answer 8

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

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

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

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

Answer 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。