{"id":3674,"date":"2020-12-24T04:42:44","date_gmt":"2020-12-24T04:42:44","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=3674"},"modified":"2021-01-20T04:30:24","modified_gmt":"2021-01-20T04:30:24","slug":"basics-of-jquery","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/basics-of-jquery\/","title":{"rendered":"Basics of jQuery"},"content":{"rendered":"

jQuery is the javaScript library to shorten the javaScript code.
\n For example \u2013
\n\"code1\"\/<\/p>\n

Note – document.querySelector(\u201ctag\u201d):-<\/strong> It will select the 1st matched tag of the page.
\nIn jQuery, to select all elements with the same tag we use $ simply.
\nFor example \u2013<\/strong>
\n\"code2\"\/ <\/p>\n

Using jQuery in application<\/h2>\n

There are two ways to use jQuery – <\/p>\n

    \n
  1. We can download it and add its link in href tag<\/li>\n
  2. We can add its CDN<\/li>\n<\/ol>\n

    The preferred way to use jQuery<\/h3>\n

    We always prefer the CDN method because most of the systems have pre-installed jQuery from google, hence jQuery will be loaded from cache and our application would be faster in terms of loading.<\/p>\n

    \"code3\"\/<\/p>\n

    jQuery Syntax<\/h3>\n

    jQuery is for selecting html elements and performing actions on it.
    \n$(selector).action();<\/strong><\/p>\n

    For example –<\/strong>
    \n\"code4\"\/ <\/p>\n

    Selectors<\/h3>\n

    To select any HTML element for performing actions on it, we need a selector to select elements.
    \n#id selector<\/strong>
    \nIt is used to select elements on the basis of id. The id should be unique for every element on the whole page for correctly selecting the elements without any confusion.<\/p>\n

    Syntax <\/em>
    \nUse # in front of id
    \n\"code5\"\/<\/p>\n

    .class selector<\/h3>\n

    It is used to select elements on the basis of class. When we need to perform the same function on a group of elements, we give all those elements the same class name and then select on the basis of class to simultaneously perform an action on them.<\/p>\n

    Syntax<\/em>
    \n\"code6\"\/<\/p>\n

    Events<\/h3>\n

    Event is a piece of information, which holds what happened to the page or what the user did.
    \nFor example<\/strong> – a mouse click, mouse hover, selecting a radio button, etc.<\/p>\n

    We generally associate fire with events.
    \n\"code7\"\/<\/p>\n

    Adding effects\/Styling in jQuery \u2013<\/h3>\n

    Styling in jQuery is very flexible.
    \n$(\u201celementName\u201d).css(\u201cproperty\u201d, \u201cvalue\u201d);<\/code>
    \n\"code8\"\/<\/p>\n

    Now if you want to get the value of the property then simply pass a single parameter i.e., the property you want to retrieve the value.
    \n$(\u201celementName\u201d).css(\u201cproperty\u201d);<\/code>
    \n\"code9\"\/<\/p>\n

    To add class to elements \u2013<\/strong>
    \n$(\u201celementName\u201d).addClass(\u201cclassName\u201d);<\/code><\/p>\n

    To add multiple classes to the same elements \u2013<\/strong>
    \n$(\u201celementName\u201d).addClass(\u201cclassName1 className2 \u2026 n\u201d); \/\/ same quote, with space.<\/code><\/p>\n

    To remove class to elements \u2013<\/strong>
    \n$(\u201celementName\u201d).removeClass(\u201cclassName\u201d);<\/code><\/p>\n

    To check whether class is applied or not \u2013<\/strong>
    \n$(\u201celementName\u201d).hasClass(\u201cclassName\u201d);<\/code><\/p>\n

    Manipulating text with jQuery \u2013<\/strong>
    \n$(\u201celementName\u201d).text(\u201ctext\u201d):
    \n$(\u201celementName\u201d).html(\u201c<htmlTags>text<\/htmlTags\u201d):<\/code><\/p>\n

    Manipulating Attributes with jQuery \u2013<\/strong>
    \n$(\u201celementName\u201d).attr(\u201csrc\u201d, \u201cwww.yahoo.com\u201d);<\/code>
    \nIf you want to get an attribute list, you will pass only one parameter i.e., the name of the attribute.<\/p>\n

    Adding Event Listener \u2013<\/h3>\n

    $(\u201celementName\u201d).event(function(){
    \n \/\/whatever you want to do
    \n});<\/code>
    \nExample \u2013
    \n\"code10\"\/<\/p>\n

    Instead of clicking, we can use any of the events.
    \nWe have one more way of doing this is as \u2013
    \n$(\u201celementName\u201d).on(\u201cevent\u201d, function(){
    \n \/\/whatever you want to do
    \n});<\/code>
    \nExample \u2013
    \n\"code11\"\/<\/p>\n

    Chaining of Effects\/styling<\/strong>
    \nWe can simply chain effects one after another using dot(.)
    \n\"code12\"\/<\/p>\n

    Adding element through jQuery<\/h3>\n

    We can also add and remove element through jQuery without actually changing HTML<\/p>\n