jquery Learning Notes

Source: Internet
Author: User

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);

});

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.