Selector ( see the website for more details )
$ ("P")// Select Label
$ ("#test")// select ID
$ (". Class")// Select class
$ ("div p")// Select div under p
. First ();
. Last ();
. EQ (n);
. Filter (". Intro")
. Not (". Intro")
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 is 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 |
Event
$ ("P"). Click (function () {//action goes here!!});
Get Get
$ ("#test"). HTML () returns the HTML code of the tag
$ ("#test"). Text () returns the text of the label
$ ("#test"). Val () returns the label value
$ ("#test"). attr ("href") returns the Label property
Setting the Set
$ ("#test1"). Text ("Hello world!"); Set the text of the label
$ ("#test2"). HTML ("<b>hello world!</b>"); Set the HTML code for the label
$ ("#test3"). Val ("Dolly Duck"); Set the value of the label
$ ("#w3s"). attr ("href", "www"); Set the attr of a label
the way with the callback function
$ ("#w3s"). attr ({
"href": "Http://www.w3schools.com/jquery",
"title": "W3Schools jQuery Tutorial"
});
$ ("#w3s"). attr ("href", function (I,origvalue) {
return origvalue + "/jquery";
});
$ ("#test1"). Text (function (i,origtext) {
Return "Old text:" + origtext + "New Text:hello world! (Index: "+ i +") ";
});
adding elements
var txt1= "<p>Text.</p>"; Create text with HTML
var txt2=$ ("<p></p>"). Text ("text."); Create text with JQuery
var txt3=document.createelement ("P");
Txt3.innerhtml= "Text."; Create text with DOM
$ ("P"). Append ("<b>appended text</b>."); At the beginning
$ ("P"). Prepend ("<b>appended text</b>."); At the very end
$ ("img"). Before ("<b>Before</b>"); Previous position
$ ("img"). After ("<i>After</i>"); Next position
$ ("Body"). Append (TXT1,TXT2,TXT3); insert more than one at a time
$ ("img"). After (TXT1,TXT2,TXT3); insert more than one at a time
Delete Element
$ ("#div1"). Remove ();
$ ("#div1"). empty (); Delete all child elements
$ ("P"). Remove (". Italic"); Delete a specific element
Modify Style
$ ("H1,h2,p"). AddClass ("Blue");
$ ("div"). AddClass ("important");
$ ("H1,h2,p"). Removeclass ("Blue");
$ ("H1,h2,p"). Toggleclass ("Blue");
$ ("#div1"). AddClass ("Important blue"); Add multiple Styles
<style type= "Text/css" >
. Important
{
Font-weight:bold;
Font-size:xx-large;
}
. Blue
{
Color:blue;
}
</style>
$ ("P"). CSS ("Background-color"); Get Style
$ ("P"). css ({"Background-color": "Yellow", "font-size": "200%"}); Modify Style
JQuery Dimensions
$ ("#div1"). width ();
$ ("#div1"). Height ();
$ ("#div1"). Width (+) height (500);
JQuery traversing
Father relationship
$ ("span"). parent (); Direct Father
$ ("span"). Parents (); All Fathers
$ ("span"). Parentsuntil ("div")// father until ...
Child relationship
$ ("div"). Children (); There may be multiple
$ ("div"). Find ("span")// Locate a specific child that can be separated by several generations
Brotherly relationship
Siblings ()// above all brothers
Next ()// next brother
Nextall ()// under All brothers
Nextuntil ()// below until ...
Ajax
$ ("#div1"). Load ("Demo_test.txt"); Ajax Read content set to Div
$ ("#div1"). Load ("Demo_test.txt", function (RESPONSETXT,STATUSTXT,XHR) {
if (statustxt== "Success")
Alert ("External content Loaded successfully!");
if (statustxt== "error")
Alert ("Error:" +xhr.status+ ":" +xhr.statustext);
});