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".
$(document).ready(function(){
// jQuery methods go here...
});
$(function(){
// jQuery methods go here...
});
Selectors
Syntax | Description |
$("*") | 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 |
Events
Event Method | Description |
$(document).ready(function) | Binds a function to the ready event of a document |
$(selector).click(function) | Triggers, or binds a function to the click event of selected elements |
$(selector).dblclick(function) | Triggers, or binds a function to the double click event of selected elements |
$(selector).focus(function) | Triggers, or binds a function to the focus event of selected elements |
$(selector).mouseover(function) | Triggers, or binds a function to the mouseover event of selected elements |
For AJAX applications, JSON is faster and easier than XML:
Using XML
Using JSON
<h2>JSON Object Creation in JavaScript</h2> <p> Name: <span id="jname"></span><br> Age: <span id="jage"></span><br> Address: <span id="jstreet"></span><br> Phone: <span id="jphone"></span><br> <select </p> <script> var JSONObject = { "name": "John Johnson", "street": "Oslo West 16", "age": 33, "phone": "555 1234567" }; document.getElementById("jname").innerHTML = JSONObject.name document.getElementById("jage").innerHTML = JSONObject.age document.getElementById("jstreet").innerHTML = JSONObject.street document.getElementById("jphone").innerHTML = JSONObject.phone </script> |