Home > Others

JQuery practice (1) ---- repost the blog

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
JQuery practice (a) From the ITCAST saw a jQuery practice video (http://www.itcast.net/portal/courses/unit/198), currently do not use money, huh, I saw it last night, I think it is very good, then recorded, for future review !!!
The JQuery practice course is a series of courses. It introduces how to use JQuery to quickly develop AJAX front-end applications by means of hands-on practices of each course and examples. It also introduces HTML in front-end development, knowledge about CSS and Javascript and solutions to cross-browser differences.
In the first lesson, I not only talked about the installation and reference of some environments, but also talked about a simple user verification using jQuery's AJAX function. The video uses JAVA, so I changed him.. NET version.
Because this is a series of courses, I set up a jQueryTest project in VS to specialize in these instances. For classification, I set up css, js, handler, the images folder is used to store different files. Here, all my servers use general handlers and are stored in the handler folder. After the source code is complete, I will upload them.
The changes are also added to the instance, and jQuery is also used to implement the switchover. The Code is as follows:
The first is the code of the HTML page file. It is very simple. There are two text boxes and one button. Here I use ID to name all the buttons: Source code Copy (IE valid) Print About
  1. <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "userlogin. aspx. cs" Inherits = "userlogin" %>
  3. <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <HtmlXmlns = "http://www.w3.org/1999/xhtml">
  6. <HeadRunat = "server">
  7. <Title>AJAX User Login</Title>
  8. <MetaHttp-equiv = "Content-Type" content = "text/html; charset = UTF-8">
  9. <LinkHref = "css/userlogin.css" rel = "stylesheet" type = "text/css"/>
  10. <ScriptSrc = "js/jquery. min. js" type = "text/javascript"> </Script>
  11. <ScriptSrc = "js/userlogin. js" type = "text/javascript"> </Script>
  12. </Head>
  13. <Body>
  14. <FormId = "form1" runat = "server">
  15. Enter the User Name:<InputType = "text" id = "userName" class = "notValue"/> <Br />
  16. Enter the password:<InputType = "password" id = "userPassword" class = "notValue"/> <Br />
  17. <InputType = "button" value = "login" id = "btnLogin"/>
  18. <DivId = "mes"> </Div>
  19. </Form>
  20. </Body>
  21. </Html>
<% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "userlogin. aspx. cs" Inherits = "userlogin" %> <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

There is no value in the opening box. The notvalueformat is supported. The source code of the Sample Table file userlogin.css is as follows:Source codeCopy (IE valid)PrintAbout


 
    
 
  
  1. . HasValue {/* style when the text box has a value */
    2. 
 
  
  2. Border: 1px solid # 9EC9FF;
    3. 
 
  
  3. }
    4. 
 
  
  4. 
 
  
  5. . NotValue {/* style when there is no value in the text box */
    6. 
 
  
  6. Border: 1px solid # f00;
    7. 
 
  
  7. Background: url (../images/userVerify.gif) repeat-x bottom;
    8. 
 
  
  8. }
    9. 

 


. HasValue {/* style when the text box has a value */border: 1px solid # 9EC9FF ;}. notValue {/* style when there is no value in the text box */border: 1px solid # f00; background: url (.. /images/userVerify.gif) repeat-x bottom ;}


The next step is to compile the JS file. The following is the source code of userlogin. js:Source codeCopy (IE valid)PrintAbout


 
    
 
  
  1. $ (Document). ready (function () {// after loading the page, execute this function, which is equivalent to adding onload = ....
    2. 
 
  
  2. // Register the logon button and click the event
    3. 
 
  
  3. $ ("# BtnLogin"). click (function (){
    4. 
 
  
  4. // Obtain text box content and perform second transcoding to prevent Chinese garbled characters
    5. 
 
  
  5. Var userName = encodeURI ($ ("# userName"). val ()));
    6. 
 
  
  6. Var userPassword = encodeURI ($ ("# userPassword"). val ()));
    7. 
 
  
  7. // Determine whether the text box contains content
    8. 
 
  
  8. If (userName = ""){
    9. 
 
  
  9. Alert ("Enter the user name! ");
    10. 
 
  
  10. Return;
    11. 
 
  
  11. }
    12. 
 
  
  12. If (userPassword = ""){
    13. 
 
  
  13. Alert ("enter the password! ");
    14. 
 
  
  14. Return;
    15. 
 
  
  15. }
    16. 
 
  
  16. // Send data through AJAX
    17. 
 
  
  17. $. Get ("handler/userlogin. ashx? Username = "+ userName +" & userpassword = "+ userPassword, null, function (data ){
    18. 
 
  
  18. $ ("# Mes"). text (data );
    19. 
 
  
  19. });
    20. 
 
  
  20. });
    21. 
 
  
  21. 
 
  
  22. // Register the keyboard button event in the text box
    23. 
 
  
  23. $ ("# UserName"). keyup (function (){
    24. 
 
  
  24. // Alert ($ ("# userName"). val ());
    25. 
 
  
  25. If ($ ("# userName"). val ()! = ""){
    26. 
 
  
  26. // If the content in the text box is not empty, switch the style to hasValue.
    27. 
 
  
  27. $ ("# UserName"). removeClass ("notValue"). addClass ("hasValue ");
    28. 
 
  
  28. } Else {
    29. 
 
  
  29. $ ("# UserName"). removeClass ("hasValue"). addClass ("notValue ");
    30. 
 
  
  30. }
    31. 
 
  
  31. });
    32. 
 
  
  32. 
 
  
  33. $ ("# UserPassword"). keyup (function (){
    34. 
 
  
  34. If ($ ("# userPassword"). val ()! = "" & $ ("# UserPassword"). val ()! = Null ){
    35. 
 
  
  35. // If the content in the text box is not empty, switch the style to hasValue.
    36. 
 
  
  36. $ ("# UserPassword"). removeClass ("notValue"). addClass ("hasValue ");
    37. 
 
  
  37. } Else {
    38. 
 
  
  38. $ ("# UserPassword"). removeClass ("hasValue"). addClass ("notValue ");
    39. 
 
  
  39. }
    40. 
 
  
  40. });
    41. 
 
  
  41. });
    42. 

 


$ (Document ). ready (function () {// After the page is loaded, execute this function, which is equivalent to adding onload = .... // click the event $ ("# btnLogin") When registering the logon button "). click (function () {// obtain the content of the text box and transcode it twice to prevent Chinese garbled var userName = encodeURI ($ ("# userName "). val (); var userPassword = encodeURI ($ ("# userPassword "). val (); // determines whether the text box contains content if (userName = "") {alert ("Enter the user name! "); Return;} if (userPassword =" ") {alert (" enter the password! "); Return;} // AJAX sends data $. get (" handler/userlogin. ashx? Username = "+ userName +" & userpassword = "+ userPassword, null, function (data) {$ (" # mes "). text (data) ;}); // register the keyboard button event of the text box $ ("# userName "). keyup (function () {// alert ($ ("# userName "). val (); if ($ ("# userName "). val ()! = "") {// If the content in the text box is not empty, switch the style to hasValue $ ("# userName "). removeClass ("notValue "). addClass ("hasValue");} else {$ ("# userName "). removeClass ("hasValue "). addClass ("notValue") ;}}); $ ("# userPassword "). keyup (function () {if ($ ("# userPassword "). val ()! = "" & $ ("# UserPassword"). val ()! = Null) {// If the content in the text box is not empty, switch the style to hasValue $ ("# userPassword "). removeClass ("notValue "). addClass ("hasValue");} else {$ ("# userPassword "). removeClass ("hasValue "). addClass ("notValue ");}});});


There is nothing to say about the above JS code. You only need to take some time to check the jQuery API documentation. I will put the parameters required for jQuery in the attachment, including the jQuery Chinese API, jQuery version 1.2.6, CSS Reference Manual, and DHTML reference manual. Note that when you open the downloaded CHM file, in my SP3 SP3 window, a "open file-Security Warning" dialog box is displayed. I Want To deselect the "always ask before opening this file" in the dialog box, otherwise, you will not be able to see any content after opening it!
The above is a small example of the first lesson. I will go back from work tonight to continue reading the second lesson. Hey, hey !!!


 
    
 
  
  • When the source code is _ use vsto open the website, it can be _.rar (21.7 KB)
    • 
 
  
  • 

 


 
    
 
  
  • Jqueryreference data .rar (6 MB)
    • 

 


 

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More