Why did my jQuery stop accepting $ but this accepted "jQuery"?

Question

With that error code

<script>


$(function () {
    $('[data-toggle="popover"]').popover({
        html:true,
        animation: true,
        sanitize: false
    })
})


var slide_old = "slide_img0";
var slide = "efeito_slide";


$('#carouselExampleCaptions').on('slide.bs.carousel', function (ev) {
    var id = ev.to;
    switch (id) {
        case 0:

        $("." + slide_old).removeClass( slide )
        $(".slide_img0").addClass( slide );
        slide_old = "slide_img0";

        break;
        case 1:

        $("." + slide_old).removeClass( slide )
        $(".slide_img1").addClass( slide );
        slide_old = "slide_img1";

        break;
        case 2:

        $("." + slide_old).removeClass( slide )
        $(".slide_img2").addClass( slide );
        slide_old = "slide_img2";

        break;
        case 3:

        $("." + slide_old).removeClass( slide )
        $(".slide_img3").addClass( slide );
        slide_old = "slide_img3";

        break;
        default:
        break;
    }
})

But not this

<script>


    jQuery(function () {
        jQuery('[data-toggle="popover"]').popover({
            html:true,
            animation: true,
            sanitize: false
        })
    })


    var slide_old = "slide_img0";
    var slide = "efeito_slide";


    jQuery('#carouselExampleCaptions').on('slide.bs.carousel', function (ev) {
        var id = ev.to;
        switch (id) {
            case 0:

            jQuery("." + slide_old).removeClass( slide )
            jQuery(".slide_img0").addClass( slide );
            slide_old = "slide_img0";

            break;
            case 1:

            jQuery("." + slide_old).removeClass( slide )
            jQuery(".slide_img1").addClass( slide );
            slide_old = "slide_img1";

            break;
            case 2:

            jQuery("." + slide_old).removeClass( slide )
            jQuery(".slide_img2").addClass( slide );
            slide_old = "slide_img2";

            break;
            case 3:

            jQuery("." + slide_old).removeClass( slide )
            jQuery(".slide_img3").addClass( slide );
            slide_old = "slide_img3";

            break;
            default:
            break;
        }
    })

</script>

'Cause you’re making a mistake 'Cause it was just working perfectly?

Answer 1

It is good practice when using jQuery not to use directly $. There are some ways to reference $ just to avoid the mistakes you are having.

Using a shortcut

// Note que $jq pode ser qualquer nome de variável que você desejar.
var $jq = jQuery.noConflict();

// Veja o exemplo
$jq( '#link ').css( 'background', 'red' );

Using an IIFE

(function ( $ ) {
   // Dentro deste escopo $ é uma referência ao objeto jQuery
   $( '#link' ).css( 'background', 'red' );
})( jQuery );

Passing $ as argument in call jQuery( document ).ready()

jQuery( document ).ready(function ( $ ) {
   // Dentro deste escopo $ é uma referência ao objeto jQuery
   $( '#link' ).css( 'background', 'red' );
});

Using a shorter syntax than the previous

jQuery(function ( $ ) {
    // Dentro deste escopo $ é uma referência ao objeto jQuery
    $( '#link' ).css( 'background', 'red' );
});

But you must be wondering in which situation should I use each syntax?

• Option 1: Indicated when you own other libraries that also use $ (as prototype.js for example) and as the name fuctionality already says, this feature will avoid conflict between libraries.

• Option 2: Using a IIFE you create an internal scope where $ will only be accessible within that function. You can or should use this syntax when you do not want or do not want to wait for the gift to be fully loaded. For example, when you are sure that your script will be loaded after the(s) elements(s) you want to manipulate or you are sure that your script will be the last thing to load on the page.

• Options 3 and 4: When the action you want to perform in your script requires the DOM to be fully loaded.

Your changed code may look like code snippet below:

jQuery( document ).ready(function ( $ ) {
    var slide_old = "slide_img0";
    var slide = "efeito_slide";

    $('[data-toggle="popover"]').popover({
        html:true,
        animation: true,
        sanitize: false
    });   

    $('#carouselExampleCaptions').on('slide.bs.carousel', function (ev) {
        var id = ev.to;
        switch (id) {
            case 0:

            $("." + slide_old).removeClass( slide )
            $(".slide_img0").addClass( slide );
            slide_old = "slide_img0";

            break;
            case 1:

            $("." + slide_old).removeClass( slide )
            $(".slide_img1").addClass( slide );
            slide_old = "slide_img1";

            break;
            case 2:

            $("." + slide_old).removeClass( slide )
            $(".slide_img2").addClass( slide );
            slide_old = "slide_img2";

            break;
            case 3:

            $("." + slide_old).removeClass( slide )
            $(".slide_img3").addClass( slide );
            slide_old = "slide_img3";

            break;
            default:
            break;
        }
    });
});

Reference

• jQuery Summary-of-Ways-to-Reference-the-jquery-Function