Jquery (second operation HTML element)

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "
pageencoding= "UTF-8"%>
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= "/js/jquery.js" ></script>
<title>jquery Operation Dom</title>
<style type= "Text/css" >
. Important
{
Font-weight:bold;
Font-size:xx-large;
}
. Blue
{
Color:blue;
}
</style>
<!--get content:
Text ()--Sets or returns the textual content of the selected element;
HTML ()-Sets or returns the contents of the selected element (including HTML markup);
Val ()-Sets or returns the value of the form field-->
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
Alert ($ ("#test"). Text ());
});
$ ("#btn2"). Click (function () {
Alert ($ ("#test"). html ());
});
$ ("#hrefs"). Click (function () {
Alert ($ ("#runoob"). attr ("href"));
});
});
Callback functions for/*text (), HTML (), and Val ():
* The callback function consists of two parameters: the subscript of the selected element and the original old value, and then returns the desired string with the new value of the function
*/
$ (document). Ready (function () {
$ ("#btn1"). Click (function () {
$ ("#test1"). Text (function (i, origtext) {
Return "Old text:" + Origtext + "new text:" + i;
});
});
$ ("#btn2"). Click (function () {
$ ("#test2"). HTML (function (I, origtext) {
Return "Old HTML:" + Origtext + "New HTML:" + i;
});
});


$ ("#btn3"). Click (function () {
$ ("#test3"). Val ("Val value");


});
});
Use attr to change its value
$ (document). Ready (function () {
$ ("#hrefs"). Click (function () {
$ ("#runoob"). attr ("href", "http://www.baidu.com");
});
});
attr callback function
$ (document). Ready (function () {
$ ("#hrefs"). Click (function () {
$ ("#runoob"). attr ("href", function (i, origvalue) {
return origvalue + "/jquery";
});
});
});
/*jquery four ways to add new elements:
1, append ()--> is then inserted at the end of the selected element; 2, prepend ()--> inserted in the development of the selected element
3, after ()--> again after the selection of elements inserted content; 4, before before the selected element is prepared
*/
$ (document). Ready (function () {
$ ("#btest1"). Click (function () {
var txt1=$ ("<p></p>"). Text ("Create text using jquery");
var txt2=document.createelement ("P");
Txt2.innerhtml= "Append multiple DOM elements";
var txt3= "<p> using text stitching </p>";
$ ("H1"). Append ("$ ("H1"). Append (TXT1,TXT2,TXT3);
});
$ ("#sethtml"). Click (function () {
$ ("H1"). Prepend ("});
})
Before, after inserting
$ (document). Ready (function () {
$ ("#btest1"). Click (function () {
var txt1=$ ("<p></p>"). Text ("Create text using jquery");
var txt2=document.createelement ("P");
Txt2.innerhtml= "Append multiple DOM elements";
var txt3= "<p> using text stitching </p>";
$ ("H1"). Append ("$ ("H1"). before (TXT1,TXT2,TXT3);
});
$ ("#sethtml"). Click (function () {
$ ("H1"). After ("});
});
The deletion of the element removes the entire deletion; empty clears the contents
$ (document). Ready (function () {
$ ("#testClass"). Click (function () {
$ ("H1"). Remove (". Testappend");
});

});
jquery Operations CSS Element Removeclass ()
$ (document). Ready (function () {
$ ("#testCss"). Click (function () {
$ ("P,h1,h2"). AddClass ("Blue");
$ ("button"). AddClass ("important");
$ ("P,h1,h2"). Toggleclass ("Blue");
});
});
CSS () returns one or more styles belonging to the set or return element; Syntax: CSS ("propertyname", "value");
Set multiple properties css ({"PropertyName": "Value", "PropertyName": "Value",...});
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). CSS ("Background-color", "Blue");
$ ("P"). css ({"Background-color": "Yellow", "font-size": "200%"});
});
});
jquery seek width () and height () method
$ (document). Ready (function () {
$ ("#querySize"). Click (function () {
var txt= "";
txt+= "div Height:" +$ ("#divss"). Width () + "div width:" +$ ("#divss"). Height ();
$ ("#divss"). HTML (TXT);

});
});


</script>
<body>
<div>
<p id= "Test" >
This is the <b> bold </b> text in the paragraph.
</p>
<button id= "BTN1" > Display text </button>
<button id= "BTN2" > Show html</button>
<p>
<a href= "http://www.runoob.com" id= "Runoob" > Rookie Tutorials </a>
</p>
<button id= "HREFs" > show the value of the href attribute </button>


<p id= "Test1" > This is a paragraph. </p>
<p id= "Test2" > this is another paragraph. </p>
<div id= "Divss" >
<p>
Input box: <input type= "text" id= "Test3" value= "Rookie Tutorial" >
</p>
</div>


&LT;H1 class= "Testappend" > Test Append Method <button id= "Btest1" >append</button>
<button id= "sethtml" >prepend</button>
<button id= "SetValue" > Set value </button>
<button id= "Setbess" > Add text </button>
<a href= "http://www.runoob.com" id= "Runoob" > Rookie Tutorials </a>
<button id= "HREFs" > Modify href value </button>
<p> Click on the button to see if the link address changes. </p>
<button id= "TestClass" > Test Remove Method </button>
<button id= "testcss" >jquery operation Css</button>
<button id= "querysize" >jquery operation Css</button>
</body>

Figure size Look: