jQuery Syntax

Next ❯Ways To Add

jQuery syntax consists of a selector and a action method

  • turned_in_notSyntax
    $(selector).action();

    OR

    jQuery(selector).action();
    • $ sign is used as the shorter identifier instead of jQuery
    • Action methods are predefined, you will get to know in coming section
Example:
  • turned_in_notSyntax Sample
  • trending_downSyntax Description
    • $ : Sign to define jQuery
    • Selector : Elements you want select for an action
    • Action : Action you want to perform using defined methods
    • Don't forget to end your jQuery codes with semi-colon ( ; )

    • Note! All Selector are declared inside double quote (" ") except this selector
      For Example:
      • $(this).slideToggle();
    • well, this Selector selects current element

jQuery Declaration

To write your jQuery codes inside Document Ready Event

  • turned_in_notReady Event
    $(document).ready(function(){

   // Your jQuery codes...

});
  • label_outlineShorter form of Ready Event
    $(function(){

   // Your jQuery codes...

});
  • The Ready Event runs your code written inside it, when your document is fully loaded
  • Note! It's not mandatory to write your codes inside Ready Event
  • Tips! Well, It's good practice to write your codes inside Ready Event until and unless you want your code to be run while loading your web page or before it
Example:
  • turned_in_notReady Event
    $(document).ready(function(){
  $("p").css("color","red");
});

    OR

    $(function(){
  $("p").css("color","red");
});
    • The above codes colors all <p> element text to red
    • The both code above do the same thing, it's your choice you can use any one, Normal Ready Event or the shorter one

jQuery Comments

Mainly helpful to the programmer or can say developer for modifications if required later, used to explain the code

  • All JavaScript library have same syntax for comment
  • Ignored by browsers
Example:
  • turned_in_notSingle Line Comment
    $(document).ready(function(){
   //This is a single-line comment..
  $("p").css("color","red");
});
  • label_outlineMulti Line Comment
    $(document).ready(function(){
   /* This is 
   a multi-line
   comment..*/
  $("p").css("color","red");
});

  • Ways To Add
❮ Prev Introduction
Next ❯Ways To Add
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯