jQuery CheatSheet

jQuery is a JavaScript library designed to simplify HTML DOM tree traversal and manipulation, as well as event handling, CSS animation, and Ajax.

jQuery is a lightweight, "write less, do more", JavaScript library.

jQuery has plugins for almost any task

The purpose of jQuery is to make it much easier to use JavaScript on your website.

It is free, open-source software using the permissive MIT License.

<!-- google api -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

$("button").click(() => {
    $(":button").css("background-color", "green");
});


// Combining selectors
$("selector1, selector2 ... selectorn")

$(document).ready(function () {
    $("button").click(function () {
        $('p').css({
            color: 'yellow',
            backgroundColor: 'red',
            fontSize: '50px'
        });
    });
});


// jQuery addClass
$("button").click(function () {
    $("p:first").addClass("active");
});


// jQuery removeClass
$("button").click(function () {
    $("h1").removeClass("page-header");
    $("p").removeClass("hint highlight");
});


// jQuery toggleClass
$('.choice').toggleClass('highlighted');

// <span>Hello</span>
$('span').after('<p>bestforstudy.com</p>');
// Output: <span>Hello,</span><p>bestforstudy.com</p>


// <span>Welcome to bestforstudy.com</span>
$('span').wrap('<p></p>');
// Output: <p><span>Welcome to bestforstudy.com</span></p>


// <p>Welcome to </p>
$("p").append("<b>bestforstudy.com</b>.");
// Output: Welcome to bestforstudy.com


$('<span>Hello World</span>').replaceAll('p');
// Output: <p>Hello World</p>

// Mouse "Click" Event Example
$('#helloButton').on('click', () => {
    alert('Hello Wellcome to bestforstudy.com !!!');
});


// Keyboard 'keyup' event Example
$('#messageButton').on('keyup', () => {
    alert('Hello Wellcome to bestforstudy.com !!!');
});
  

//   Scroll event
$('#scrollButton').on('scroll', () => {
    console.log("We are scrolling")
});

$('#helloButton').on('click', event => {
  alert('Hello Wellcome to bestforstudy.com !!!');
  $(event.currentTarget).hide();
});

$('#exampleButton').on('mouseenter', () => {
    console.log("Menu is showing");
    $('#menu').show();
}).on('mouseleave', () => {
    console.log("Menu is hiding");
    $('#menu').hide();
});

$( "p" ).click(function( event ) {
    event.stopPropagation();

    // Do something
    console.log("Your logic will be here...")
});

// fadeIn effect
$('#effectButton').on('click', () => {
    $('#effectMenu').fadeIn();
});

// faceOut effect
$('#effectButton').on('click', () => {
    $('#effectMenu').fadeOut();
});

// toggle
$("#clickme").click(function() {
    $("#book").toggle( "slow", function() {
        // Animation complete.
    });
});

// animate
$("button").click(function(){
    $("#box").animate({height: "100px"});
});