Home > Developer > JavaScript
In this lecture, I will give a brief introduction to JQuery's selector, and how JQuery gets the value. Don't talk nonsense. paste the Code directly. Let's talk about things based on the DEMO.
Copy codeThe Code is as follows:
<% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "JQuery2.aspx. cs" Inherits = "JQuery_1.JQuery2" %>
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> </title>
<Script type = "text/javascript" src = "JS/jquery-1.3.2.min.js"> </script>
<Script type = "text/javascript">
Function btnclick (){
Var t1 = $ ("# txt1"). val ();
Alert (t1 );
}
</Script>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("# Btn2"). click (function (){
Var t1 = $ ("# txt1"). val ();
Alert (t1 );
});
});
</Script>
</Head>
<Body>
<Form id = "form1" runat = "server">
<Div>
<Input id = "txt1" type = "text"/>
<Input id = "btn" type = "button" value = "button" onclick = "btnclick ();"/>
<Input id = "btn2" type = "button" value = "button2"/>
</Div>
</Form>
</Body>
</Html>
From the first line of the code, we can see that this is actually An aspx page. In fact, it does not matter if we remove the first line, because JQuery is a JavaScript script and can also be run in htmL. Because I wrote JQuery with VS, I directly added the aspx page.
There are few items in the Code. There are two JavaScript scripts in the header. There is a text input box and two buttons in the body. One button has an onclick = "btnclick ();" event, and the other has no. From the running effect, the two buttons actually implement the same effect and are the content entered in the pop-up text box. Now let's analyze the two sections of JS
In the first section of JS, a user-defined function is called btnclick (). In this function, a variable t1 is defined using the var keyword. The value of T1 is obtained through the JQuery selector. $ ("# Txt1") creates a JQuery object. # The ID is used. If it is changed to name, no value is obtained. The val () method of $ ("# txt1") gets the value of the text box. $ ("# Txt1"). val () is equivalent to document. getElementById ("txt1"). value in JavaScript;
In the first Button, The onclick event executes the UDF In the first JS, so there is no onclick event in the second Button. How can we achieve the same effect as the first Button? Next we will analyze the second JS Code.
The second JS Code directly creates a JQuery document Object and calls the ready event of the document Object. The ready event is executed immediately after the DOM is loaded. In the ready event, a JQuery object $ ("# btn2") is created. From this object, we can see that JQuery selects the control with id btn2. The onclick (); method is called when $ ("# btn2") is created. This method achieves the same effect as Button 2. In the second section of the JS Code, if you put $ (document ). ready (function () {}); this event is removed and $ ("# btn2") is directly written "). click (function () {var t1 = $ ("# txt1 "). val (); alert (t1) ;}); then clicking the second Button will not have any effect.
This is the end of today's lecture. If you have any questions or need the source code, you can join the group: 34979719. In the next lecture, we will talk about the values and values of common controls.
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
