zoukankan      html  css  js  c++  java
  • 5.1 jQuery基础

    1. jquery.com 下载

        api.jQuery.com 查看api  important!!!

    2. 绑定事件

        http://api.jquery.com/category/events/

      bind():attach a handler to an event, As of jQuery 1.7, the .on() method is the preferred method for attaching event handlers to a document

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script src="jquery-2.1.3.min.js"></script>
        <script src="myJs.js"></script>
    </head>
    <body>
        <button id="btn">Click</button>
    </body>
    </html>
    /**
     * Created by Administrator on 2015/2/18.
     */
    $(document).ready(function () {
        $("#btn").on("click",clickhandler1);
        $("#btn").on("click",clickhandler2);
        $("#btn").off("click",clickhandler1);
    });
    
    function clickhandler1(e){
        console.log("clickhandler1");
    }
    function clickhandler2(e){
        console.log("clickhandler2");
    }

      

    3. 触发 trigger

      Trigger():Execute all handlers and behaviors attached to the matched elements for the given event type.

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script src="jquery-2.1.3.min.js"></script>
        <script src="myJs.js"></script>
    </head>
    <body>
        <button>button1</button>
        <button>button2</button>
        <div><span>1</span> button1 clicks</div>
        <div><span>1</span> button2 clicks</div>
    </body>
    </html>
    $(document).ready(function () {
        $("button:first").click(function(){ 
            update($("span:first"));  //选择第一个span对象
        });
        $("button:last").click(function(){
            $("button:first").trigger("click");  //触发所有的button1 click事件
            update($("span:last"));
        });
    });
    
    function update(j){
        var n = parseInt(j.text(), 10);
        j.text(n+1);
    }

      点击button2会同时触发点击button1事件

      

     

    4. 回调函数

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>jQuery</title>
        <script src="jquery-2.1.3.min.js"></script>
        <script src="myJs.js"></script>
    </head>
    <body>
    <button>button1</button>
    <p>测试显示或隐藏</p>
    </body>
    </html>
    /**
     * Created by Administrator on 2015/2/18.
     */
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide(1000, function(){
                alert("动画完毕就会执行回调函数");
            });
        });
    });

    5. 追加

    function appendText()
    {
      var txt1="<p>Text.</p>";               // 以 HTML 创建新元素
      var txt2=$("<p></p>").text("Text.");   // 以 jQuery 创建新元素
      var txt3=document.createElement("p");  // 以 DOM 创建新元素
      txt3.innerHTML="Text.";
      $("p").append(txt1,txt2,txt3);         // 追加新元素
    }

      

      

  • 相关阅读:
    MySQL中遍历查询结果的常用API(c)
    MySQL :LAST_INSERT_ID()函数总结
    安装Mysql时提示尚未安装Python 解决方案
    pthread_cond_broadcast & pthread_cond_signal
    vs 搭配 Linux 开发
    不同宿主的iterator不能进行比较
    error C2338: No Q_OBJECT in the class with the signal (NodeCreator.cpp)
    c++ 中全局/静态存储区的内存污染问题
    TCP与UDP各自优缺点与区别
    简单理解进程与线程
  • 原文地址:https://www.cnblogs.com/iMirror/p/4295763.html
Copyright © 2011-2022 走看看