JQuery3 accesses and controls dom objects, and jquery3dom objects
3. Control dom objects
The following is an example of the Code (I have spent a lot of effort debugging, and it is not so easy to jump from c ++ to Java). Pay special attention to the following: all characters in the Code must contain symbols in English. jsp, JavaScript, and css are case-insensitive. SQL is the only thing the case-insensitive person knows, $ (# Object id) is used when jQuery calls a dom object. Do not forget.
Provides a better debugging method. You want to add alert (...) to JavaScript (...) determine where the program can arrive, where the focus is, whether C ++ or Java debugging methods are the same.
$ (Function (); it is $ (document ). ready (function (){...}) is to load the page and then execute... code. is the most important sentence in jq, basically required. the code for loading and executing all pages must be written in.
Finally, in Javascript, you need to go to <script type = "test/javascript"> function btnClick (){...} </script> then <input id = "button1" type = "button" value = "Submit" class = "btnCss" onClick = "btnClick ();"/>; however, jQuery makes it easier: $ (function () {$ ("# button1 "). click (function () {}}); and onClick = "btnClick ();" No need to write
<! DOCTYPE html>
<Html>
<Head>
<Title> Accordion Menus </title>
<Style type = "text/css">
. DivFrame {width: 260px; border: solid 1px #666; font-size: 10pt}
. DivTitle {background-color: # eee; padding: 5px}
. DivContent {padding: 8px; font-size: 9pt}
. DivTip {width: 244px; border: solid 1px #666;
Padding: 8px; font-size: 9pt;
Margin-top: 5px; display: none}
. TxtCss {border: solid 1px # ccc}
. DivBtn {padding-top: 5px}
. DivBtn. btnCss {border: solid 1px #535353; width: 60px ;}
</Style>
<Script language = "javascript" src = "jquery-2.1.1.js"> </script>
<Script language = "JavaScript" type = "text/javascript">
$ (Function (){
$ ("# Button1"). click (function (){
// Obtain the value of the text box
Var oTxVaule = $ ("# Text1"). val ();
// Obtain the single button Value
Var oRdoValue = $ ("# Radio1"). is (": checked ")? "Male": "female ";
// Obtain the value of the check box button
Var oChkValue = $ ("# Checkbox1"). is (": checked ")? "Married": "Unmarried ";
// Display the prompt text elements and content
$ ("# DivTip" ).css ("display", "block" ).html (oTxVaule + "<br>" + oRdoValue + "<br>"
+ OChkValue );
Alert (oChkValue );
});
});
</Script>
</Head>
<Body>
<Div class = "divFrame">
// Introduce the divTitle class of CSS
<Div class = "divTitle"> enter the following information </div>
<Div class = "divContent">
// Set the id of the text box to Text1. If jQuery calls the text box, use $ (# Text1)
Name: <input id = "Text1" type = "text" class = "tstCss"/> <br/>
Gender: <input id = "Radio1" name = "radoSex" type = "radio" value = "male"/> male <br/>
<Input id = "Radio2" name = "radoSex" type = "radio" value = "female"/> female <br/>
Marital status: <input id = "CheckBox1" type = "checkbox"/>
<Div class = "divBtn"> <input id = "button1" type = "button" value = "Submit" class = "btnCss"/>
</Div>
</Div>
</Div>
<Div id = "divTip" class = "divTip"> </div>
</Body>
</Html>
Again, this supplement is completely the result of the opposite, <script language = "javascript" src = "jquery-2.1.1.js"> </script> This statement imports the jQuery Library to the current page, I was wondering if I could put my own js into a single js file so that the jQuery library could still be called? After testing, my ideas are correct:
Step 1: <script language = "javascript" src = "jquery-2.1.1.js"> </script>
<Script type = "text/javascript" src = "script03.js"> </script>
Step 2: $ (function (){
$ ("# Button1"). click (function (){
// Obtain the value of the text box
Var oTxVaule = $ ("# Text1"). val ();
// Obtain the single button Value
Var oRdoValue = $ ("# Radio1"). is (": checked ")? "Male": "female ";
// Obtain the value of the check box button
Var oChkValue = $ ("# Checkbox1"). is (": checked ")? "Married": "Unmarried ";
// Display the prompt text elements and content
$ ("# DivTip" ).css ("display", "block" ).html (oTxVaule + "<br>" + oRdoValue + "<br>"
+ OChkValue );
Alert (oChkValue );
});
// ANOTHER METHOD
$ ("# DivColor"). click (function (){
$ (This). toggleClass ("divClick" ).html ("style after clicking ");
});
}); I think so for the specific reason: through step 1, jQuery and js are put into the same page, and they are integrated with other jsp information, of course, js can call the jQuery library.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
