Query - Get Content and AttributesSet Attributes - text() -html() - val()
Three simple, but useful, jQuery methods for DOM manipulation is:
$("#btn1").click(function(){("Text: " + $("#test").text());)} $("#btn2").click(function(){"HTML: " + $("#test").html()); $("#btn1").click(function(){"Value: " + $("#test").val());
Get Attributes - attr()
$("button").click(function(){ $("#w3s").attr("href"));
Set Attributes
Set Attributes - text() -html() - val()
We will use the same three methods from the previous page to set content:
$("#btn1").click(function(){ $("#test1").text("Hello world!"); $("#btn2").click(function(){"#test2").html("<b>Hello world!</b>"); $("#btn3").click(function(){"#test3").val("Dolly Duck");
Set Attributes - attr()
$("button").click(function(){ $("#w3s").attr("href","http://www.w3schools.com/jquery");)}
|
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 |