jQuery

What is jQuery?
jQuery is a concise and fast JavaScript library that can be used to simplify event handling, HTML document traversing, Ajax interactions and animation for speedy website development.


jQuery Syntax

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 elements(s)

Examples :

1. $ (this).hide() - hides the current elements.
2. $ ("p").hide() - hides all <p> elements.
3. $ (".test").hide() - hides all elements with class="test".
4. $ ("#test").hide() - hides the elements with id="test".

Commonly Used jQuery Event Methods

1. $(document).ready()
2. click()
3. dblclick()
4. mouseenter()
5. mouseleave()
6. mousedown()
7. mouseup()
8. hover()
9. focus()
10. blur()
11. on()

Examples :

<script>

$(document).ready(function(){

      $("p").click(function(){

            $(this).hide();

      });

});

< /script>

jQuery Effects

• jQuery Hide/Show

1. hide()
2. show()
3. toggle()

           Examples :
                                <script>
                                $(document).ready(function(){
                                     $("#hide").click(function(){
                                          $("p").hide();
                                     });
                                     $("#show").click(function(){
                                          $("p").show();
                                     });
                                     $("#toggle").click(function(){
                                          $("p").toggle();
                                     });
                                 });
                                 </script>

• jQuery Fade

1. fadeIn()
2. fadeOut()
3. fadeToggle()
4. fadeTo()

                  Examples :

                                      <script>

                                      $(document).ready(function(){

                                          $("button").click(function(){

                                              $("#div1").fadeIn();

                                              $("#div2").fadeIn("slow");

                                              $("#div3").fadeIn(3000);

                                           });

                                      });

                                      </script>

• jQuery Slide

1. slideDown()
2. slideUp()
3. slideToggle()

                       Examples :

                                           <script> 

                                           $(document).ready(function(){

                                                $("#flip").click(function(){

                                                     $("#panel").slideDown("slow");

                                                });

                                           });

                                           </script>

• jQuery Animate

                    Examples :

                                        <script> 

                                        $(document).ready(function(){

                                             $("button").click(function(){

                                                  $("div").animate({left: '250px'});

                                             });

                                        });

                                        </script> 

• jQuery stop()

                     Examples :

                                         <script> 

                                         $(document).ready(function(){

                                              $("#flip").click(function(){

                                                  $("#panel").slideDown(5000);

                                             });

                                             $("#stop").click(function(){

                                                   $("#panel").stop();

                                             });

                                         });

                                         </script>

• jQuery Callback

                     Examples : 

                                         <script>

                                         $(document).ready(function(){

                                           $("button").click(function(){

                                             $("p").hide(1000);

                                             alert("The paragraph is now hidden");

                                           });

                                         });

                                         </script>

jQuery HTML 

jQuery Get 

Three simple, but useful, jQuery methods for DOM manipulation are : 

• text ( ) -  Sets or returns the text content of selected elements.
• html ( ) - Sets or returns the content of selected elements.
• val ( ) -  Sets or returns the value of form fields.

Example :

 <script>

$(document).ready(function(){

  $("#btn1").click(function(){

    alert("Text: " + $("#test").text());

  });

  $("#btn2").click(function(){

    alert("HTML: " + $("#test").html());

  });

});

</script>

                                               

jQuery Add

We will look at four jQuery methods that are used to add new content :

• append ( ) -  Inserts content at the end of the selected elements.

Example :    $("p").append("append");

• prepend ( ) -  Inserts content at the beginning of the selected elements.

Example : $("p").prepend("prepend");

• after ( ) -  Inserts content after the selected elements.

Example :  $("img").after("after");

• before ( ) -  Inserts content before the selected elements.

Example :  $("img").before("before");

jQuery Remove

To remove elements and content, there are mainly two jQuery methods :

• remove ( ) -  Removes the selected element.

Example :  $("#div1").remove();

• empty ( ) -  Removes the child elements from the selected element.

Example :  $("#div1").empty();

jQuery CSS Classes

jQuery has several methods for CSS manipulation. We will look at the following methods :

• addclass ( ) -  Adds one or more classes to the selected elements.

Example :  $("button").click(function(){

                     $("#div1").addClass("add");
                  });

• removeclass ( ) -  Removes one or more classes from the selected elements.

Example :  $("button").click(function(){
                     $("h1, h2, p").removeClass("blue");
                  });

• toggleclass ( ) -  Toggles between adding/removing classes from the selected elements.

Example :  $("button").click(function(){

                      $("h1, h2, p").toggleClass("blue");
                  });

• css ( ) -  Sets or returns the style attribute.

Example :  $("p").css("background-color", "yellow");

jQuery Dimension

jQuery has several important methods for working with dimensions :

• width ( )
• height ( )
• innerWidth ( )
• innerHeight ( )
• outerWidth ( )
• outerHeight ( ) 

Simple Present Tense

The simple present (also called present simple or present indefinite) is a verb tense which is used to show repetition, habit or generalization. Less commonly, the simple present can be used to talk about scheduled actions in the near future and, in some cases, actions happening now.

Simple Present Forms

The simple present is just the base form of the verb. Questions are made with do and negative forms are made with do not.

• Statement: You speak English.
• Question: Do you speak English?
• Negative: You do not speak English.

In the third person singular, -s or -es is added. Questions are made with does and negative forms are made with does not.

• Statement: He speaks English.
• Question: Does he speak English?
• Negative: He does not speak English.

Examples :

Positive sentence 

• Subject + Mainverb + Object

1. The sun sets in the west.
2. I listen to News daily.
3. We produce lasers for cosmetic surgery.
4. They move into their new home next week.
5. He likes music.
6. He works in a school.
7. She sleeps at 10.30pm.
8. They play football in the playground.

JavaScript

What is JavaScript?

• JavaScript is a Scripting Language.
• JavaScript is programming code that can be inserted into HTML pages.
• All modern HTML pages are using JavaScript. 
• JavaScript code can be executed by all modern web browsers.    

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.
• Writing into the HTML output using document.write().
• Writing into an alert box, using window.alert().
• Writing into the browser console, using console.log(). 

Example

<html>
       <body>
                   <h1>My First Example</h1>
                   <p>My First Style</p>
                   <script>
                    document.getElementById("demo").innerHtml= 5+6;   //innerHTML
                    document.write(5+6);                                                //document.write
                    window.alert(5+6);                                                         //window.alert
                    console.log(5+6);                                                           //console.log
                   </script>

        </body>
</html>


JavaScript Keywords

         Keywords                                               Description

1. break                           Terminates a switch or a loop
2. continue                       Jumps out of a loop and starts at the top
3. debugger                     Stops the execution of JavaScript, and calls                                                      the debugging function
4. do...while                     Executes a block of statements, and repeats                                                    the block, while a condition is true
5. for                                Marks a block of statements to be executed,                                                    as long a condition is true
6. function                        Declares a function
7. if...else                          Marks a block of statement to be executed,                                                     depending on a condition
8. return                           Exits a function
9. switch                           Marks a block of statement to be executed,                                                     depending on different cases
10. try...catch                     Implements error handling to a block of statements
11. var                                Declares a variable                                                       

JavaScript Comments

• Single line comments start with //
• Multi-line comments start with /* and end with */

External JavaScript Advantages

• It Separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads

JavaScript Arithmetic Operators

Operator                    Description

      +                   Addition

        -                          Subtraction

       *                          Multiplication

        **                  Exponentiation

         /                   Division

        %                 Modulus

        ++                 Increment

        --                  Decrement

         &                  AND

          ~                 NOT

       ^                  XOR

         <<                       Zero fill left shift

         >>                Signed right shift

        >>>              Zero fill right shift

Creating an Array
      Using an Array literal is the easiest way to create a JavaScript Array.
         Syntax :
               Type :- 01
                           var array_name=[item1,item2,....]
               Type :- 02
                           var array_name=new Array(item1,item2,....)
Array Elements

1. Popping - pop() - This method removes the last element from an array.
2. Pushing - push() - This method adds a new element to an array(at the end).
3. Shifting - shift() - This method removes the first array element and "shifts" all other elements to alower index.
4. Unshifting - unshift() - This method adds a new element to an array (at the beginning), and "unshifts" older elements.
5. Deleting - delete - Since JavaScript arrays are objects, elements can be deleted by using the JavaScript operator delete.
6.  Splicing - splice() - This method can be used to add new items to an array.
7. Concatenating - concat() - This method creates to a new array by merging (concatenating) existing  arrays.
8. Slicing - slice() - This method slices out a piece of an array into a new array.
9. Sorting - sort() - This method sorts an array alphabetically.
10. Reversing - reverse() - This method reverses the elements in an array.
11. Maximum - math.max.apply() - You can use math.max.apply to find the highest number in an array.
12. Minimum - math.min.apply() - You can use math.min.apply to find the lowest number in an array.  

 JavaScript supports different kinds of loops

• for - loops through a block of code a number of times
• for/in - loops through the properties of an object
• for/of - loops through the values of an iterable object
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is true