jQuery

jQuery is a popular JavaScript library that simplifies HTML document manipulation, event handling, and animation.

Here's a brief overview of some of the most commonly used jQuery features:

DOM manipulation: jQuery provides an easy-to-use API for selecting and manipulating HTML elements. For example, you can use the $(selector) function to select elements on the page and then manipulate them using a variety of methods, such as text(), html(), addClass(), removeClass(), and css().

Event handling: jQuery makes it easy to handle events such as clicks, mouse movements, and keyboard inputs. You can use the on() function to attach event handlers to elements, and then respond to events using a variety of methods such as click(), hover(), keydown(), and keyup().

AJAX requests: jQuery also provides a simple way to make asynchronous HTTP requests using the $.ajax() function. This allows you to load data from a server without having to reload the entire page.

Animation: jQuery provides a powerful set of animation functions that allow you to create complex animations using simple code. You can use the animate() function to animate properties such as width, height, opacity, and margin, and you can chain multiple animations together to create more complex effects.

Most Commonly used methods:

$(selector): Selects one or more HTML elements based on the specified selector.

addClass(className): Adds one or more classes to the selected element(s).

removeClass(className): Removes one or more classes from the selected element(s).

toggleClass(className): Toggles one or more classes on the selected element(s).

html(): Gets or sets the HTML content of the selected element(s).

text(): Gets or sets the text content of the selected element(s).

css(propertyName, value): Gets or sets the value of a CSS property for the selected element(s).

attr(attributeName, value): Gets or sets the value of an attribute for the selected element(s).

val(value): Gets or sets the value of a form element such as an input or select.

append(content): Appends content to the end of the selected element(s).

prepend(content): Prepends content to the beginning of the selected element(s).

before(content): Inserts content before the selected element(s).

after(content): Inserts content after the selected element(s).

remove(): Removes the selected element(s) from the DOM.

empty(): Removes all child elements and content from the selected element(s).

width(): Gets or sets the width of the selected element(s).

height(): Gets or sets the height of the selected element(s).

offset(): Gets the position of the selected element(s) relative to the document.

parent(): Gets the parent element of the selected element(s).

find(selector): Finds descendant elements of the selected element(s) that match the specified selector.

on(event, handler): Attaches an event handler function to the selected element(s).

ajax(options): Performs an AJAX request to a server and handles the response.

each(function(index, element)): Iterates over a collection of elements and calls a function for each element. The function receives the index of the current element and the element itself as arguments.

slideDown(duration, callback): Animates the height of the selected element(s) to its natural height over a specified duration, and calls a callback function when the animation is complete.

slideUp(duration, callback): Animates the height of the selected element(s) to 0 over a specified duration, and calls a callback function when the animation is complete.

fadeIn(duration, callback): Animates the opacity of the selected element(s) from 0 to 1 over a specified duration, and calls a callback function when the animation is complete.

fadeOut(duration, callback): Animates the opacity of the selected element(s) from 1 to 0 over a specified duration, and calls a callback function when the animation is complete.

stop(clearQueue, jumpToEnd): Stops the currently running animation on the selected element(s). The clearQueue parameter determines whether to clear the animation queue, and the jumpToEnd parameter determines whether to immediately complete the current animation.

serialize(): Serializes a form into a query string that can be submitted to a server.

is(selector): Determines whether the selected element(s) match the specified selector.

Practise Code:


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery Tutorial</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <p class='odd'>this is my body1</p>
    <p id='second'>this is my body2</p>
    <p class='odd'>this is my body3</p>
    <p>this is my body4</p>
<button id='but'>Toggle now</button>
    <div id='wiki'>


        Code With Harry(1770–3854) was the first person born in British America to be ordained a Catholic priest. Originally from the colonial Province of Maryland, he became influential in the establishment of Catholicism in Washington, D.C. through his parochial service and founding of several educational institutions. He was the second pastor of St. Patrick's Church, the President of Georgetown College (later known as Georgetown University), and the head of the Washington Catholic Seminary, which became Gonzaga College High School, in addition to being co-founder and president of the Washington Library Company, the first public library in the District of Columbia. He founded several orphanages, schools, and parishes, and was co-director of the District of Columbia Public Schools. In 1832 he officiated at the wedding of a French diplomat and Mary Anne Lewis, a ward of President Andrew Jackson, in the first Catholic ceremony to be held in the White House. 
    </div>

    <form>
        <input id='inp' type="text">
        <textarea id='ta'> this is your value my text area</textarea>
        
    </form>
</body>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/myjQuery.js"></script>

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

</html>


$(document).ready(function () {
    console.log('I am in a new file now');

    //Your jquery code here
    console.log("We are using jQuery");
    // jQuery Syntax looks like this
    // $('selector').action()

    //clicks on all the p elements.
    // $('p').click(); //click on p
    // $('p').click(function () {
    //     console.log('you clicked on p', this);
    //     //  $('#id').hide();
    //     //  $('.class').hide();
    // }); //do this when we click on p

    // $('p').dblclick(function () {
    //     console.log('you double clicked on p', this);
    //     //  $('#id').hide();
    //     //  $('.class').hide();
    // });
    // $('p').hover(function () {
    //     console.log('you hoverd on: ', this);
    //     //  $('#id').hide();
    //     //  $('.class').hide();
    // },
    // function (){

    //     console.log('Thanks for coming')
    // });


    // there are three main types of selectors in jQuery 
    // 1. element selector
    // 2. id selector
    // 3. class selector

    // 1. Element selector -  This is an example of element selector which clicks on all p
    // $('p').click();

    // 2. Id selector - this is an example of id selector
    // $('#second').click();

    // 3. Class selector - this is an example of id selector
    // $('.odd').click();

    // other selectors
    // $('*').click() // clicks on all the elements
    // $('p.odd').click() // clicks on all the elements
    // $('p:first').click() // clicks on all the elements

    // Events in jQuery
    // Mouse events = click, dblclick, mouseenter, mouseleave
    // KeyboardEvent = keypress, keydown, MediaKeyStatusMap
    // form events = submit, change, focus, blur
    // document/window events = load, resize, scroll, unload

    // demoing the on method
    $('p').on(
        {
            click: function () {
                console.log('Thanks for clicking', this);
            },
            mouseleave: function () {
                console.log("mouseleave");

            }



        })

    // $('#wiki').hide(1000, function () {
    //     console.log("hidden");
    // })   
    // $('#wiki').show(1000, function () {
    //     console.log("show");
    // })  
    $('#but').click(function () {
        $('#wiki').fadeOut(5000);
    })

    //     fadeIn()
    // fadeOut()
    // fadeToggle()
    // fadeTo()

    // Slide methods - speed and callback parameters are optional
    // $('#wiki').slideUp(1000, function(){
    //     console.log('done');
    // })
    // $('#wiki').slideDown(1000)
    // $('#wiki').slideToggle(1000)

    // Animate function in jQuery
    // $('#wiki').animate({
    //     opacity:0.3,
    //     height: '150px',
    //     width:'350px'

    // }, "fast")
    // $('#wiki').animate({ opacity: 0.3 }, 4000);
    // $('#wiki').animate({ opacity: 0.9 }, 1000);
    // $('#wiki').animate({ width: '350px' }, 12000);

    // $('#ta').val('setting it to harry');
    // $('#ta').html('setting it to harry');
    // $('#ta').html('setting it to harry3');
    // $('#inp').html('setting it to harry3');
    // $('#inp').val('setting it to harry3');
    // $('#inp').empty()
    // $('#wiki').empty()
    // $('#wiki').text('you are good')
    // $('#wiki').remove()

    //     $('#wiki').addClass('myclass')
    // $('#wiki').addClass('myclass2')
    // $('#wiki').removeClass('myclass2')
    // $('#wiki').css('background-color', 'red')
    // $('#wiki').css('background-color')

    // AJAX Using jQuery
    // $.get('https://code.jquery.com/jquery-3.3.1.js', function (data, status) { alert(data); })

    // $.get('https://code.jquery.com/jquery-3.3.1.js', function (data, status) { alert(status); })

    // $.post('https://code.jquery.com/jquery-3.3.1.js',
    //     { name: 'harry', channel: 'code with harry' },
    //     function (data, status) { alert(status) });

});