Scribd Logo
Upload

Welcome to Scribd!

  • 6 views

    Jquery

    Uploaded by

    Haseeb Awan
    jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Jquery

    Uploaded by

    Haseeb Awan
    6 views7 pages
    jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

    Original Description:

    jquery .

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    6 views7 pages

    Jquery

    Uploaded by

    Haseeb Awan
    jQuery is a JavaScript library that simplifies HTML document traversal, manipulation, event handling, and AJAX interactions. It provides efficient ways to write JavaScript code that works across browsers. The document includes code for an index.html file and myjQuery.js file, which contains jQuery code examples like selecting elements, handling events, animating elements, and making AJAX requests.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 7

    =============

    Jquery::

    =============

    jQuery is a fast, lightweight JavaScript library designed to simplify HTML document traversal,
    manipulation, event handling, and AJAX interactions. It provides a simplified and efficient way to write
    JavaScript code that works seamlessly across different web browsers.

    Code:

    ===================

    index.html

    ===================

    <!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)

    </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>

    =============

    myjQuery.js

    =============

    $(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) });

    });

    You might also like