Sunday, 11 June 2017

19.05.2017

Friday.


First we download and extrect the jquery zip file.


⟹JQuery means:

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

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

➡jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

➡jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

➡The jQuery library contains the following features:

⇒HTML/DOM manipulation
⇒CSS manipulation
⇒HTML event methods
⇒Effects and methods
⇒AJAX
⇒Utilities

    ⟹Why we use jQuery?

    ➡There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.

    ➡Many of the biggest companies on the Web use jQuery, such as:

    ⇒Google
    ⇒Microsoft
    ⇒IBM
    ⇒Metflix

      ⟹jQuery Syntax

      ➡The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s).

      ➡Basic syntax is:

       $(selector).action()

      ➡A $ sign to define/access jQuery

      ➡A (selector) to "query (or find)" HTML elements

      ➡A jQuery action() to be performed on the element(s)
         
         
      ➡Examples:

      $(this).hide() - hides the current element.

      $("p").hide() - hides all <p> elements.

      $(".test").hide() - hides all elements with class="test".

      $("#test").hide() - hides the element with id="test".




      ⟹The Document Ready Event

       $(document).ready(function(){

         // jQuery methods go here...

      }); 

       

      ➡This is to prevent any jQuery code from running before the document is finished loading (is ready).

      ➡It is good practice to wait for the document to be fully loaded and ready before working with it.

      ➡This also allows you to have your JavaScript code before the body of your document, in the head section.



       $(function(){

         // jQuery methods go here...

      }); 



      ⟹jQuery Selectors

      ➡jQuery selectors allow you to select and manipulate HTML element(s).

      ➡jQuery selectors are used to "find" (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more.

      ➡It's based on the existing CSS Selectors, and in addition, it has some own custom selectors.

      ➡All selectors in jQuery start with the dollar sign and parentheses: $().



      ⟹The element Selector

      ➡The jQuery element selector selects elements based on the element name.
      You can select all <p> elements on a page like this:

        $(document).ready(function(){
          $("button").click(function(){
              $("p").hide();
          });
      });




      ⟹The #id Selector

      ➡The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.
       
      ➡An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

      ➡To find an element with a specific id, write a hash character, followed by the id of the HTML element:


       $(document).ready(function(){
          $("button").click(function(){
              $("#test").hide();
          });
      });



      ⟹The .class Selector

      ➡The jQuery class selector finds elements with a specific class.

      ➡To find elements with a specific class, write a period character, followed by the name of the class:


      $(document).ready(function(){
          $("button").click(function(){
              $(".test").hide();
          });
      });




      ⟹What are Events?

      ➡All the different visitor's actions that a web page can respond to are called events.

      ➡An event represents the precise moment when something happens.
      Examples:

       ⇒moving a mouse over an element
       ⇒selecting a radio button
       ⇒clicking on an element

        ⟹jQuery Syntax For Event Methods

        ➡In jQuery, most DOM events have an equivalent jQuery method.

        ➡To assign a click event to all paragraphs on a page, you can do this:

        $("p").click(function(){
          // action goes here!! });  




        Commonly Used jQuery Event Methods

        ⟹$(document).ready()

        The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the jQuery Syntax chapter.

        ⟹click()

        The click() method attaches an event handler function to an HTML element.
        The function is executed when the user clicks on the HTML element.

        The following example says: When a click event fires on a <p> element; hide the current <p> element:


         $("p").click(function(){
            $(this).hide();
        });



        ⟹dblclick()


         $("p").dblclick(function(){
            $(this).hide();
        });

         

        ⟹mouseenter()

        $("#p1").mouseenter(function(){
            alert("You entered p1!");
        });

            

         ⟹mouseleave()

          $("#p1").mouseleave(function(){
            alert("Bye! You now leave p1!");
        });

         

          mousedown()

         $("#p1").mousedown(function(){
            alert("Mouse down over p1!");
        });

         

          ⟹mouseup()

         $("#p1").mouseup(function(){
            alert("Mouse up over p1!");
        });

         

          ⟹hover()

         $("#p1").hover(function(){
            alert("You entered p1!");
        },
        function(){
            alert("Bye! You now leave p1!");
        });

         

        ⟹focus()

         $("input").focus(function(){
            $(this).css("background-color", "#cccccc");
        });

         

          blur()

         $("input").blur(function(){
            $(this).css("background-color", "#ffffff");
        });

         

        ⟹The on() Method

         $("p").on("click", function(){
            $(this).hide();
        }); 


        ..........................................................................

         

         

           

        No comments:

        Post a Comment

        Machine Learning Annotation Introduction

        Data annotation in Machine Learning is the process of annotating/ labeling data to categorize the dataset to identify by ML models. It can b...