jq的常用事件及其案例

Posted 2022-03-22 wangbiaohistory
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq的常用事件及其案例相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>授权</title>
    <script src="js/jq/jquery-3.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        p 
            border: #0d5aa7 2px dashed;
        
        textarea 
            resize: none;
            overflow: scroll;
            outline: none;
            overflow-y:auto;
        
        span
            background: #666666 2px fixed;
        
        imgborder: rebeccapurple solid 2px;padding: 1px
    </style>
</head>

<!--https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect-->
<form>
    <table>
        <tr>
            <td><p id="p1">我是p1</p></td>
            <td><p id="p2">我是p2</p></td>
            <td><p id="p3">我是p3</p></td>
            <td><p id="p4">我是p4</p></td>
        </tr>

        <tr>
            <td><input type="text" value="我是text1"/></td>
        </tr>

        <tr>
            <td><input id="span1" type="number" placeholder="keydown">我是span1</input></td>
            <td><span id="span2"></span>:key</td>
            <td><span id="span3"></span>:char</td>
            <td><span id="span4"></span>:code</td>
        </tr>
        <tr>
            <td><input id="span5" type="number" placeholder="keypress">我是span1</input></td>
            <td><span id="span6"></span>:key</td>
            <td><span id="span7"></span>:char</td>
            <td><span id="span8"></span>:code</td>
        </tr>
        <tr>
            <td><input id="span9" type="number" placeholder="keyup">我是span1</input></td>
            <td><span id="span10"></span>:key</td>
            <td><span id="span11"></span>:char</td>
            <td><span id="span12"></span>:code</td>
        </tr>

        <tr>
            <td>
                <div id="div1"><img src="img/lion.png"/></div>
            </td>
            <td>
                <h2 id="kkk">你你你</h2>
                <div id="div2">2222</div>
            </td>
            <td>
                <div id="div3">我是div3</div>
            </td>
        </tr>

        <tr>
            <td><input type="datetime-local"/>我是local1</td>
            <td><input type="datetime-local"/>我是local2</td>
            <td><input type="datetime-local"/>我是local3</td>
        </tr>


        <tr>
            <td><textarea id="ta1" rows="10" ; cols="30" ;>《傅雷家书》是2018年译林出版社重新出版的图书，作者是傅雷、朱梅馥，编者是傅敏。《傅雷家书》最早出版于1981年，《傅雷家书》的出版是当时轰动性的文化事件，三十多年来一直畅销不衰。它是傅雷夫妇在1954年到1966年5月 [1]  期间写给傅聪和儿媳弥拉的家信，由次子傅敏编辑而成。
这些家书开始于1954年傅聪离家留学波兰，终结至1966年傅雷夫妇“文革”中不堪凌辱，双双自尽。十二年通信数百封，贯穿着傅聪出国学习、演奏成名到结婚生子的成长经历，也映照着傅雷的翻译工作、朋友交往以及傅雷一家的命运起伏。傅雷夫妇非常细心，儿子的信都妥善收藏，重点内容则分类抄录成册。</textarea>
            </td>
            <td><textarea id="ta2" rows="10" ; cols="30" ;>《傅雷家书》是2018年译林出版社重新出版的图书，作者是傅雷、朱梅馥，编者是傅敏。《傅雷家书》最早出版于1981年，《傅雷家书》的出版是当时轰动性的文化事件，三十多年来一直畅销不衰。它是傅雷夫妇在1954年到1966年5月 [1]  期间写给傅聪和儿媳弥拉的家信，由次子傅敏编辑而成。
这些家书开始于1954年傅聪离家留学波兰，终结至1966年傅雷夫妇“文革”中不堪凌辱，双双自尽。十二年通信数百封，贯穿着傅聪出国学习、演奏成名到结婚生子的成长经历，也映照着傅雷的翻译工作、朋友交往以及傅雷一家的命运起伏。傅雷夫妇非常细心，儿子的信都妥善收藏，重点内容则分类抄录成册。</textarea>
            </td>
            <td><textarea id="ta3" rows="10" ; cols="30" ;>正是蒙古民族的历史和神秘，草原的广阔和浪漫，将本书的主人公、一个叫陈阵的北京青年带进了草原。很快，陈阵发现草原并不全是浪漫和自由。牧民们为了保护自己的财产必须和狼进行战斗。他亲眼目睹蒙古的女人和小孩与偷袭羊群的狼――像豹子一样大的狼――徒手搏斗。也曾误入狼群、并亲眼看见群狼怎样在头狼的指挥下，调兵遣将围猎几百只黄羊。但是，人却抢了狼储存的食物。为了报复人的贪婪，狼利用冬季风雪和夏季蚊灾的掩护，发动了两次大规模的偷袭军马群的残酷而壮烈的战役。于是人又被激怒了。来自于农耕民族的干部不顾蒙古牧民的反对，开始了大规模的围猎狼群的战斗。狼在死亡前的尊严和牺牲精神震撼了陈阵。陈阵和他的朋友亲自掏了一窝小狼，并且养了其中的一只。他要通过一只小狼的成长，探索狼的习性和狼的哲学。通过一系列的令人陶醉的有趣的故事，陈阵发现狼是动物中唯一不可驯服的、十分神秘的动物。比如，第一次面对食物或者面对大批食物的时候，会举行跑圈，类似现代宗教的感恩仪式或者祭祀；比如，狼一旦离开大地就会颤抖无力，又像希腊神话中的安泰。进而，陈阵又发现蒙古民族不仅将狼作为自己民族的图腾崇拜的对象，而且，死后又将自己的尸体放到狼出没的地方，实施“天葬”。蒙古牧民相信狼会将他们的灵魂带上“腾格里”（蒙语：天）。狼是蒙古人敬畏的敌人，也是他们相伴一生、甚至是来生的朋友。正是蒙古人带着狼的精神征服了差不多半个地球，开通了东西方商业贸易与文化的交流。 [2]
陈阵和他的来自于北京的青年朋友，因为狼的缘故和牧民融为一片。但是，他们无法阻挡来自于农耕文化和文革时期的错误政策对草原生态的破坏。他们首先用现代武器杀狼，将仅存的狼驱赶到边境外。进而，大片的开垦草原土地。几年以后，草原上鼠害横行，大片的草原沙化。在作品的最后，也就小说的尾声，来自于蒙古草原的沙尘暴已经遮天避日地肆虐北京，浮尘甚至飘过大海，在日本和韩国的天空游荡……
人类失去的不仅是草原不仅是狼，真正失去的是人与自然和谐共存的价值观；失去的是中华民族早期的图腾：自由、独立、顽强、勇敢的精神、永不屈服、决不投降的性格、意志和尊严。这是《狼图腾》的主题和作家悲怆的呼唤</textarea>
            </td>
        </tr>
    </table>

</form>
<fieldset id="checkBox">
    <legend>复选框</legend>
    ————爱 好：
    <label><input type="checkbox" name="" id="" value="1" data-par="上网" />上网，</label>
    <label><input type="checkbox" name="" id="" value="2" data-par="购物" />购物，</label>
    <label><input type="checkbox" name="" id="" value="3" data-par="玩游戏" />玩游戏，</label>
    <label><input type="checkbox" name="" id="" value="4" data-par="打球" />打球，</label>
    <label><input type="checkbox" name="" id="" value="5" data-par="旅游" />旅游，</label>
    <label><input type="checkbox" name="" id="" value="6" data-par="看电影" />看电影，</label>
    <label><input type="checkbox" name="" id="" value="7" data-par="旅游" />旅游，</label>
    <label><input type="checkbox" name="" id="" value="8" data-par="聊天" />聊天，</label>
    <label><input type="checkbox" name="" id="" value="9" data-par="听音乐" />听音乐，</label>
    <label><input type="checkbox" name="" id="" value="10" data-par="敲代码" />敲代码</label>
    <input type="button" id="checkedBtn" value="全 选" />
</fieldset>


<fieldset id="radioBox">
    <legend>单选框</legend>
    ————性 别：
    <label><input type="radio" name="single" id="" value="1" data-sex="先生" />先生，</label>
    <label><input type="radio" name="single" id="" value="2" data-sex="女士" />女士</label>
    <label><input type="radio" name="single" id="" value="3" data-sex="人妖" />人妖</label>
    <label><input type="radio" name="single" id="" value="4" data-sex="其他" />其他</label>

        
    ————下拉列表：
    <select id="selectBox">
        <option value="0" selected>--请选择--</option>
        <option  value="1">先生</option>
        <option value="2">女士</option>
        <option value="3">人妖</option>
        <option value="4">其他</option>
    </select>
</fieldset>


<fieldset>
    <legend>已选内容</legend>
    <section id="selectBok"></section>
    <input type="button" id="selectBtn" value="查看已选" />
</fieldset>

</body>
<script type="text/javascript">
    // on多个事件绑定不同函数
    $(function () 
        $("#p1").on(
            //鼠标点击
            mousedown: function ff2() 
                $("form").css("background-color", "red");
            ,
            //鼠标悬浮
            mouseover: function ff3() 
                $("form").css("background-color", "yellow");
            ,
            //鼠标点击后松开，鼠标不离开原来位置
            mouseup: function ff4() 
                $("form").css("background-color", "green");
            ,
            //鼠标离开
            mouseout: function ff5() 
                $("form").css("background-color", "blue");
            ,
        );
    );

    //多个事件绑定同一个函数
    $(function () 
        $("input[type=password]").on("blur focus", function () 
            console.log("#p2")
        );
    );

    //模拟点事件trigger匹配所有（只要点击#p3就相当于触发#p1的mouseover事件  #p2）
    $(function () 
        $("#p3").mousedown(function () 
            $("#p1,#p2").trigger("mouseover")
        );
    );

    $(function () 
        $("#p2").mouseover(function () 
            console.log("#p2的mouseover事件")
        );
        $("#p1").mouseover(function () 
            console.log("#p1的mouseover事件")
        );

    );

    //模拟点事件triggerHandler而且只影响第一个匹配元素，与函数顺序无关，事件触发顺序只与元素位置有关（只要点击#p4就相当于点击#p1 ）
    $(function () 
        $("#p4").mousedown(function () 
            $("#p2,#p1").triggerHandler("mouseover")
        );
    );

     //change事件触发
    $(function () 
        $(":text").change(function () 
            console.log("我被改变了")
        );
    );
   //keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
   // keypress：当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件；
  // keyup：当用户释放键盘上的字符键时触发。
    //触发先后顺序keydown》keypress》keyup
    /**
     * 在input元素上绑定keydown  keypress事件会发现一个问题：

     每次获取的内容都是之前输入的，当前输入的获取不到

     keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，
     得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，
     获得的是触发键盘事件后的文本
     *
     *
     * keydown  触发which
     * **/
    $("#span1").keydown(function (event) 
        $("#span2").html("Key: " + event.which);
        $("#span3").html(String.fromCharCode(event.charCode))
        $("#span4").html(String.fromCharCode(event.keyCode))
        console.log($(this).val())
    );
    $("#span5").keypress(function(event)
        $("#span6").html("Key: " + event.which);
        $("#span7").html(String.fromCharCode(event.charCode))
        $("#span8").html(String.fromCharCode(event.keyCode))
        console.log($(this).val())
    );
    $("#span9").keyup(function(event)
        $("#span10").html("Key: " + event.which);
        $("#span11").html(String.fromCharCode(event.charCode))
        $("#span11").html(String.fromCharCode(event.keyCode))
        console.log($(this).val())
    );
    /**
     jq在元素的后面添加内容的方法有三种，下面介绍下append、appendTo、after这三种方法。
     最简单的写法：
     $("selector").append(content);
     selector: 指定元素；
     content： 指定要插入的内容，可以是 字符、html标签、函数
     与第一种写法相反$("a").append(b);把b插入a中   $("a").appendTo(b);a插如b中
     append和appendTo是在元素的内容后进行继续添加，紧跟着添加
     不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
     $(content).appendTo(selector);
     after() 在元素的后面插入内容
     $(selector).after(content);
     三种方法的区别：
     after是在整个元素的后面进行的添加

     */


  //添加html标签
   $("img").on(‘mouseout‘,function(event)
        $("#div1").append("<p>我在后</p>");
    );

   //添加内容
    $("img").on("mouseover",function()
       $("#div1").append("我在前")
    );

    //添加function
    $("img").on(‘dblclick‘,function(event)
        $("#div1").append(function () 
            alert("我是函数哦")
        );
    );

    //appendTo
    $("#div2").dblclick(function()
        $("#kkk").appendTo("#div2");
    );

    //after
    $("#div3").click(function()
        $(this).after($("#div1"));
    );


    //全选
    $(document.body).on(‘click‘, ‘#checkedBtn‘, function()
        $(‘#checkBox‘).find(‘input‘).each(function(i)
            if($(this).prop(‘checked‘))//获取checked属性 并判断
                $(this).prop(‘checked‘,false); //修改设置为不选中状态
            else
                $(this).prop(‘checked‘,true);//修改设置为选中状态
                // $(this).attr("src","../img/aha.jpg")
            
        );
    );

    //获取已选内容
    $(document.body).on(‘click‘, ‘#selectBtn‘, function()
        var dom = ‘复选框<hr/>‘
        $(‘#checkBox‘).find(‘input‘).each(function(i)
            if($(this).prop(‘checked‘))
                dom += ‘value:[‘+ $(this).val() +‘]=>text：‘+ $(this).attr(‘data-par‘);
            
        );

        dom +=‘<br/>单选框<hr/>‘

        $(‘#radioBox‘).find(‘input‘).each(function(i)
            if($(this).prop(‘checked‘))
                dom += ‘value:[‘+ $(this).val() +‘]=>text：‘+ $(this).attr(‘data-sex‘);
            
        );

        dom +=‘<br/>下拉框<hr/>‘

        dom += ‘value:[‘+ $(‘#selectBox‘).val() +‘]=>text：‘+ $(‘#selectBox‘).find("option:selected").text();

        $(‘#selectBok‘).html(dom);
    );

var ss=[1,4,7,2,5,8,3,6,9];
var ddd="name":"wb","sex":0;
$(function () 
    $.each(ss,function(index,ele)
       console.log(index+":"+ele);
    );
    //js3.2.1没有foreach可以用  for in
    for(var key in ddd )
        console.log(key+":"+ddd[key]);
    
);
//forEach
$(function () 
    ss.forEach(function (value, index, ss) 
        console.log(value+":"+index)
    );
)
//     array.find(function(currentValue, index, arr),thisValue)
//
//     参数
//     参数     描述
//     function(currentValue, index,arr)     必需。数组每个元素需要执行的函数。
// 函数参数:
//     参数     描述
//     currentValue     必需。当前元素
//     index     可选。当前元素的索引值
//     arr     可选。当前元素所属的数组对象
//     thisValue     可选。 传递给函数的值一般用 "this" 值。
// 如果这个参数为空， "undefined" 会传递给 "this" 值
</script>
</html>
以上是关于jq的常用事件及其案例的主要内容，如果未能解决你的问题，请参考以下文章
JQuery笔记总结------事件细节JQ进阶常用方法
灵活多变vue常用小案例系列（如何避免把数据写死？）