jQuery和$问题

Question

我正在修改一些有很多jQuery的代码,但我不确定某些jQuery语句在做什么.

在jQuery代码的顶部有

jQuery.noConflict

*1.我明白那个.但是有一些代码有:

<script type="text/javascript">
(function($) {

$(document).ready(function() {

    jQuery.fn.fixEmail = function() {
    {
   return $(this).each(function() {
       var $s = $(this);                  
           ...code...
        }
}
</script>

我得到jQuery被使用因为noConflict.什么是参数$？

*2.在另一个功能中,他们使用

<script type="text/javascript">
jQuery(function(){
    var $ = jQuery;
    var cc = {
        mode : 'teaser',
        featureVisible : true,
        $loader : '<p class="loadingAnimation"><img height="32" src="' +
                config.xoImgUrl +
                '/images/ajax-loader.gif" width="32" /></p>',
                ....more code...
            }
}
</script>

所以他们从noConflict设置$ jQuery.但为什么？他们刚刚使用过jQuery吗？

*3.我想要使​​用的插件由以下内容初始化:

   var $j = jQuery.noConflict();
    var $ = {};
    $j(document).ready(function(){
        $j.history.init(pageload);
        $j("a[@rel='history']").click(function(){
            ...more code...
        });
    });

我理解noConflict的作用但是var $ = {}做了什么？

Answer 1

例1:

我想你错过了一些代码:

(function($) {

$(document).ready(function() {

    jQuery.fn.fixEmail = function() {
    {
   return $(this).each(function() {
       var $s = $(this);                  
           ...code...
        }
}
)(jQuery); //This line was missing in your code. 

让我们重新编写一下这段代码,以了解发生了什么.

function complicatedFunction($) {
          // the document.ready call goes here.
}

接下来,你会怎么称呼这个功能？

complicatedFunction(someObject);

所以在complexFunction $里面引用someObject.同意？

如果你写

complicatedFunction(jQuery);

然后在函数内部,$引用jQuery对象.所以里面的一切,complexFunction都可以使用'$',就像普通的jQuery用户一样.

回到原始代码,如果我们决定不命名这个函数,即使它匿名,你可以想象代码,如,

(function($) { })(jQuery);

您正在创建一个匿名函数,使用一个名为$的参数.你立即调用这个匿名函数传递jQuery对象.这样,您不会修改全局$对象,但匿名函数中的所有代码都像$一样可用.很酷,不是吗？:)

例2:

jQuery(function(){
        var $ = jQuery;
        var cc = {
                mode : 'teaser',
                featureVisible : true,
                $loader : '<p class="loadingAnimation"><img height="32" src="' +
                                config.xoImgUrl +
                                '/images/ajax-loader.gif" width="32" /></p>',
                ....more code...
            }
});

与示例1类似,我还没有看到这种编码风格.(我甚至不确定这是否有效)

无论如何,在传递给jQuery的匿名函数内部,您可以本地化$的使用而不影响其他代码.是的,他们可以简单地在任何地方使用jQuery对象,但这将是非常冗长的,不是吗？

例3:

var $ = {};

上面的行定义了一个空对象并将其赋值给变量$.

和做的一样

var $ = new Object();

这与使用两种不同语法定义数组的方式类似.

var items = [];  //same as var items = new Array();

有点历史

请记住,'$'没有任何固有的特殊之处.它是一个变量名称,就像其他任何名称一样.在早些时候,人们习惯使用document.getElementById编写代码.因为JavaScript区分大小写,所以在编写document.getElementById时出错是正常的.我应该资本'b'的'by'吗？我应该资助我的Id吗？你得到漂移.因为函数是JavaScript中的一等公民,所以您始终可以执行此操作

var $ = document.getElementById; //免于document.getElementById!

当Prototype库到达时,他们将它们的函数命名为'$',它获取DOM元素.几乎所有的JavaScript库都复制了这个想法.Prototype还引入了$$函数来使用CSS选择器选择元素.

jQuery还改编了$ function但扩展了它使它接受所有类型的"选择器"来获得你想要的元素.现在,如果您已经在项目中使用Prototype并想要包含jQuery,那么您将遇到问题,因为'$'可以引用Prototype的实现或jQuery的实现.这就是为什么jQuery可以选择noConflict,这样你就可以在项目中包含jQuery,它使用Prototype并慢慢迁移你的代码.我认为这对John来说是一次精彩的举动!:)