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);         // 追加新元素
    }

      

      

  • 相关阅读:
    运行一个内核模块
    ubuntu下解析udt数据包
    在脚本中使用export导出变量值
    安卓手机已保存WiFi密码查看助手(开源)
    hashmap先按照value从大到小排序,value相等时按照key从小到大排序
    python画柱状图并且输出到html文件
    匀速圆周运动向心加速度推导
    简单证明圆锥体积为三分之一圆柱
    排列组合的一些公式及推导(非常详细易懂)
    相同字符串问题_题解
  • 原文地址:https://www.cnblogs.com/iMirror/p/4295763.html
Copyright © 2011-2022 走看看