JQuery DOM Operations
JQuery provides a series of DOM-related methods that make it easy to access and manipulate elements and attributes.
The DOM defines the criteria for accessing HTML and XML documents:
Get Content-text (), HTML (), and Val ()
Text ()-Sets or returns the text content of the selected element
HTML ()-Sets or returns the contents of the selected element (including HTML tags)
Val ()-Sets or returns the value of a form field
Example 1:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Scriptsrc= "/jquery/jquery-1.11.1.min.js"></Script>5 <Script>6 $ (document). Ready (function(){7 $("#btn1"). Click (function(){8 Alert ("Text:" + $("#test"). text ()); / * Returns the text content of the selected element * /9 });Ten $("#btn2"). Click (function(){ One Alert ("HTML:" + $("#test"). HTML ()); /* Returns the contents of the selected element (including HTML tags) */ A }); - }); - </Script> the </Head> - - <Body> - <PID= "Test">This is in the paragraph<b>Bold body</b>Text.</P> + <ButtonID= "BTN1">Display text</Button> - <ButtonID= "BTN2">Display HTML</Button> + </Body> A at </HTML>
Example 2:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <Scriptsrc= "/jquery/jquery-1.11.1.min.js"></Script>5 <Script>6 $ (document). Ready (function(){7 $("Button"). Click (function(){8 Alert ("Value:" + $("#test"). Val ()); / * Returns the value of the form field * /9 });Ten }); One </Script> A </Head> - - <Body> the <P>Name:<inputtype= "text"ID= "Test"value= "Mickey Mouse"></P> - <Button>Display value</Button> - </Body> - + </HTML>
JQuery-Get content and properties