Wednesday, August 12, 2015

JQuery note

jQuery Syntax

1. Basic syntax is: $(selector).action()
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".

2. It is good practice to wait for the document to be fully loaded and ready before working with it.
$(document).ready(function(){
   // jQuery methods go here...
});
The jQuery team has also created an even shorter method for the document ready event:
$(function(){
   // jQuery methods go here...
});

3. More Examples of jQuery Selectors
$("*") Selects all elements
$(this) Selects the current HTML element
$("p.intro") Selects all <p> elements with class="intro"
$("p:first") Selects the first <p> element
$("ul li:first") Selects the first <li> element of the first <ul>
$("ul li:first-child") Selects the first <li> element of every <ul>
$("[href]") Selects all elements with an href attribute
$("a[target='_blank']") Selects all <a> elements with a target attribute value equal to "_blank"
$("a[target!='_blank']") Selects all <a> elements with a target attribute value NOT equal to "_blank"
$(":button") Selects all <button> elements and <input> elements of type="button"
$("tr:even") Selects all even <tr> elements
$("tr:odd") Selects all odd <tr> elements

4. 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 (including HTML markup)
val() - Sets or returns the value of form fields
The jQuery attr() method is used to get attribute values.
four jQuery methods that are used to add new content:
append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements
remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element
$("p").css("background-color", "yellow");

5. sample list
http://www.w3schools.com/jquery/jquery_examples.asp

No comments:

Post a Comment