Scribd Logo
Upload

Welcome to Scribd!

  • 5 views

    09 jQueryForm

    Uploaded by

    Set Sayoriama

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    09 jQueryForm

    Uploaded by

    Set Sayoriama
    5 views4 pages

    Original Title

    09.jQueryForm

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    5 views4 pages

    09 jQueryForm

    Uploaded by

    Set Sayoriama

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 4

    jQuery event - Các sự kiện trong jquery

    Jquery Events, Các sự kiện thường gặp trong jquery

    Nếu như trước đây bạn đã quen với các sự kiện trong javascript thuần thì nay bạn sẽ gặp lại nó
    trong jquery. Các sự kiện này được viết lại đơn giản ngắn gọn hơn và sử dụng thuận tiện hơn
    javascript thuần. 

    Trong jquery ta thường gặp 5 sự kiện ( Events ) như sau

    1, Jquery focus()

    Thực hiện một sự kiện khi ta click chuột vào các đối tượng như input, textarea, select 

    1 $("input,select,textarea").focus(function () {

    2    //Hành động

    3 });

    2. Jquery blur()

    Thực hiện một hành động nào đó khi con trỏ chuột thoát khỏi sự kiện focus(), hay nó là điều kiện
    trái lại của focus.

    1 $("input,select,textarea").blur(function () {

    2    //Hành động

    3 });

    3. Jquery change()

    Thực hiện một hành động nào đó khi dữ liệu của đối tượng thay đổi

    1 $("input,select,textarea").change(function () {

    2    //Hành động

    3 });

    4. Jquery select() 
    Thực hiện một hành động khi ta lựa chọn một đoạn text trong textfield hoặc textarea 

    1 $("input,select,textarea").select(function () {

    2    //Hành động

    3 });

    5. Jquery submit() 

    - Sự kiện jquery submit dùng để submit form

    1 $("form").submit(function () {

    2    //Form submit

    3 });

    - THỬ NGAY 

    <!DOCTYPE>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Jquery events</title>
    <style type="text/css">
    div{
     padding:16px;
    }
    .focus, .blur, .change, .select{
     color:white;
     border:1px solid red;
     background-color:blue;
     padding:8px;
     margin:8px;
    }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      
     // Focus
     $("input,select,textarea").focus(function () {
       $(this).after("<span class='focus'> focus() triggered! </span>");
       $("span").filter('.focus').fadeOut(4000);
        });
      
     // Blur
        $("input,select,textarea").blur(function () {
       $(this).after("<span class='blur'> blur() triggered! </span>");
       $("span").filter('.blur').fadeOut(4000);
        });
      
      // Change
        $("input,select,textarea").change(function () {
       $(this).after("<span class='change'> change() triggered! </span>");
       $("span").filter('.change').fadeOut(4000);
      
        });
      
     // Select
        $("input,textarea").select(function () {
       $(this).after("<span class='select'> select() triggered! </span>");
       $("span").filter('.select').fadeOut(4000);
      
        });
      
      // Submit
        $("form").submit(function () {
       alert('Form submitted!');
        });
    });
    </script>
    </head>
      
    <body>
    <form name="formsubmit" action="#">
      <div> TextBox :
        <input type="textbox" size="50"/>
      </div>
      <div>
        <label style="float:left">TextArea : </label>
        <textarea cols="30" rows="5"></textarea>
      </div>
      <div> Radio :
        <input name="sex" type="radio" value="Male" checked/>Male
        <input name="sex" type="radio" value="Female"/>Female
      </div>
      <div> CheckBox :
        <input type="checkbox" name="checkme"/>Check Me
      </div>
      <div> Country :
        <select id="country">
          <option value="China">China</option>
          <option value="United State">United State</option>
        </select>
      </div>
      <div>
        <input type="submit"/>
        <input type="reset"/>
      </div>
    </form>
    </body>
    </html>

    You might also like