jquery的相关知识

最新推荐文章于 2022-12-22 23:23:59 发布

奈何故里无故人

最新推荐文章于 2022-12-22 23:23:59 发布

阅读量148

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_46910841/article/details/107497279

版权

一、jquery

jquery是一个轻量级的js库

优点：

1、写得少，做的多；

2、强大的元素选择器，使用的是css1-css3所有选择器；

3、它简化了dom操作，优化了事件机制

1.1使用jquery

标识符$；jquery()执行。要使用jquery，要先引入jquery的库，如果元素初始化了，直接写jquery代码；如果元素未初始化，写dom加载完成事件。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script src="./js/jquery-1.9.1.js"></script>
</head>
<body>
<script>
    $(window).ready(function(){
        console.log("dom加载完成")
    });
    //简写
    $(function(){
        console.log("这就是简写")
    })
</script>
</body>
</html>

结果：

二、jquery选择器

2.1 class、id、*、element选择器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    /*
    * jquery  dom元素获取返回的集合类型
    * 选择器
    * dom元素获取
    * */
    console.log($("*"));
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#ts"));
    console.log($("#ts,#ts1"));
   
</script>
</body>
</html>

结果：

2.2 ul，li

由于网页结果不好展示，我把意思注释到代码里面

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        button{
            display: none;
        }
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
    <li>1</li>
    <li class="child">2
    <ul>
        <li>2-1</li>
        <li>2-2</li>
        <li>生活糟糕透顶</li>
    </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
    /*
    * jquery  dom元素获取返回的集合类型
    * 选择器
    * dom元素获取
    * */
    /*console.log($("*"));
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#ts"));
    console.log($("#ts,#ts1"));*/
    console.log($("ul li"));
    console.log($("ul.menu>li")); 
    console.log($("ul.menu>li:nth-child(1)+li"));  //：nth-child() 匹配其父元素下的第n个子或奇偶元素
    console.log($("ul.menu>li:nth-child(1)~li"));
    console.log($("ul.menu>li:first"));
    console.log($("ul.menu>li:first-child"));
    console.log($("ul.menu>li:not(.child)"));  //：not() 去除所有与给定选择器匹配的元素
    console.log($("ul.menu>li:even"));    //:even 匹配所有索引值为偶数的元素，从 0 开始计数
    console.log($("ul.menu>li:odd"));    //:odd   匹配所有索引值为奇数的元素，从 0 开始计数
    console.log($("ul.menu>li:eq(1)")); //:eq()   匹配一个给定索引值的元素
    console.log($(".menu>li:lt(2)"));  //lt()      匹配所有小于给定索引值的元素
    console.log($(".menu>li:gt(2)")); //gt()      匹配所有大于给定索引值的元素
</script> 
</body>
</html>

结果：

2.3 基本（header、：focus、：root、）内容（contains()、：empty、：has、：parent、）可见性的（：visible、：hidden）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input:focus{
            color: yellowgreen;
        }
        button{
            display: none;
        }
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
    <li>1</li>
    <li class="child">2
    <ul>
        <li>2-1</li>
        <li>2-2</li>
        <li>生活糟糕透顶</li>
    </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li></li>
</ul>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<input type="text">

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    /*
    * jquery  dom元素获取返回的集合类型
    * 选择器
    * dom元素获取
    * */
    /*console.log($("*"));
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#ts"));
    console.log($("#ts,#ts1"));
    console.log($("ul li"));
    console.log($("ul.menu>li"));
    console.log($("ul.menu>li:nth-child(1)+li"));
    console.log($("ul.menu>li:nth-child(1)~li"));
    console.log($("ul.menu>li:first"));
    console.log($("ul.menu>li:first-child"));
    console.log($("ul.menu>li:not(.child)"));//去除所有与给定选择器匹配的元素
    console.log($("ul.menu>li:even"));//匹配所有索引值为偶数的元素，从 0 开始计数
    console.log($("ul.menu>li:odd"));//匹配所有索引值为奇数的元素，从 0 开始计数
    console.log($("ul.menu>li:eq(1)"));//匹配一个给定索引值的元素
    console.log($(".menu>li:lt(2)"));//匹配所有小于给定索引值的元素
    console.log($(".menu>li:gt(2)"));//匹配所有大于给定索引值的元素*/


    console.log($("body :header"));//匹配如 h1, h2, h3之类的标题元素

    $("input").focus();
    console.log($("body:focus"));//默认获得焦点
    console.log($(":root"));//选择该文档的根元素

    console.log($("ul>li:contains(生活)"));//匹配包含给定文本的元素

    console.log($("div:empty"));

    console.log($("ul.menu:has(.child)"));//保留包含特定后代的元素，去掉那些不含有指定后代的元素。

    console.log($("div:parent")); //匹配的元素必须有子元素或者 内容

    console.log($(":visible"));//匹配所有的可见元素
    console.log($(":hidden"));//匹配所有不可见元素，或者type为hidden的元素
    console.log($("input[type]"));
    console.log($("input[type='text']"));
    console.log($("input[type^='t']"));//属性值是以t开头的
    console.log($("input[type$='t']"));//属性值是以t结尾的
    console.log($("input[type*='x']"));//属性值是含有t的
    console.log($("input[type][class][id]"));//同时含有type、class、id、属性

</script>
</body>
</html>

结果：

2.4 子元素（：first-child、：first-of-type、：last-child、：last-of-type、：nth-child、：nth-last-child（）、：nth-last-of-type（）、：nth-of-type（））

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input:focus{
            color: yellowgreen;
        }
        button{
            display: none;
        }
    </style>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button class="btn" id="ts">按钮</button>
<button id="ts1">按钮</button>
<ul class="menu">
    <li>1</li>
    <li class="child">2
    <ul>
        <li>2-1</li>
        <li>2-2</li>
        <li>生活糟糕透顶</li>
    </ul>
    </li>
    <li>3</li>
    <li>4</li>
</ul>
<ul>
    <li></li>
</ul>
<h1>111</h1>
<h2>222</h2>
<h3>333</h3>
<input type="text">
<div>

</div>
<ul id="nav">
    <li>1</li>
    <p>2</p>
    <li>3</li>
    <p>4</p>
    <li>5</li>
    <p>6</p>
    <li>7</li>
    <p>8</p>
</ul>

<script src="js/jquery-3.4.1.min.js"></script>
<script>
    /*
    * jquery  dom元素获取返回的集合类型
    * 选择器
    * dom元素获取
    * */
    /*console.log($("*"));
    console.log($("button"));
    console.log($(".btn"));
    console.log($("#ts"));
    console.log($("#ts,#ts1"));
    console.log($("ul li"));
    console.log($("ul.menu>li"));
    console.log($("ul.menu>li:nth-child(1)+li"));
    console.log($("ul.menu>li:nth-child(1)~li"));
    console.log($("ul.menu>li:first"));
    console.log($("ul.menu>li:first-child"));
    console.log($("ul.menu>li:not(.child)"));//去除所有与给定选择器匹配的元素
    console.log($("ul.menu>li:even"));//匹配所有索引值为偶数的元素，从 0 开始计数
    console.log($("ul.menu>li:odd"));//匹配所有索引值为奇数的元素，从 0 开始计数
    console.log($("ul.menu>li:eq(1)"));//匹配一个给定索引值的元素
    console.log($(".menu>li:lt(2)"));//匹配所有小于给定索引值的元素
    console.log($(".menu>li:gt(2)"));//匹配所有大于给定索引值的元素


    console.log($("body :header"));//匹配如 h1, h2, h3之类的标题元素

    $("input").focus();
    console.log($("body:focus"));//默认获得焦点
    console.log($(":root"));//选择该文档的根元素

    console.log($("ul>li:contains(生活)"));

    console.log($("div:empty"));

    console.log($("ul.menu:has(.child)"));//保留包含特定后代的元素，去掉那些不含有指定后代的元素。

    console.log($("div:parent")); //匹配的元素必须有子元素或者 内容

    console.log($(":visible"));//匹配所有的可见元素
    console.log($(":hidden"));//匹配所有不可见元素，或者type为hidden的元素
    console.log($("input[type]"));
    console.log($("input[type='text']"));
    console.log($("input[type^='t']"));
    console.log($("input[type$='t']"));
    console.log($("input[type*='x']"));
    console.log($("input[type][class][id]"));*/

    console.log($("#nav>li:first-child"));//匹配第一个子元素
    console.log($("#nav>li:last-child"));//获取最后个元素
    console.log($("#nav>li:first-of-type"));//选择所有相同的元素名称的第一个兄弟元素。
    console.log($("#nav>li:last-of-type"));//选择的所有元素之间具有相同元素名称的最后一个兄弟元素。
    console.log($("#nav>li:nth-child(3)"));//匹配其父元素下的第N个子或奇偶元素
    console.log($("#nav>li:nth-last-child(2)"));//选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
    console.log($("#nav>li:nth-of-type(2)"));//选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
    console.log($("#nav>li:nth-last-of-type(2)"));//选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
</script>
</body>
</html>

结果：

2.5 表单以及表单对象属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        input:focus{
            color: yellowgreen;
        }
        button{
            display: none;
        }
    </style>
</head>
<body>
<input type="text" id="user" class="ipt"/>
<input type="text"/>
<input disabled type="password"/>
<input type="image"/>
<input disabled type="file"/>
<input type="submit"/>
<input  type="reset"/>
<input type="button"/>
<input type="checkbox" checked/>
<input type="checkbox"/>
<input type="radio" checked/>
<input type="radio"/>
<textarea></textarea>
<select>
    <option value="">选择</option>
    <option value="">榆林</option>
    <option value="" selected>西安</option>
</select>


<script src="js/jquery-3.4.1.min.js"></script>
<script>
    console.log($(":input"));//:input 匹配所有 input, textarea, select 和 button 元素
    console.log($(":text"));// :text 匹配所有的单行文本框
    console.log($(":password"));// :password 匹配所有密码框
    console.log($(":radio"));// :radio 匹配所有单选按钮
    console.log($(":checkbox"));// :checkbox 匹配所有复选框
    console.log($(":submit"));// :submit 匹配所有提交按钮
    console.log($(":reset"));// :reset 匹配所有重置按钮
    console.log($(":file"));//:file 匹配所有文件域
    console.log($(":image"));// :image 匹配所有图像域


    console.log($("input:disabled"));// :disabled 匹配所有不可用元素
    console.log($("input:enabled"));// :enabled 匹配所有可用元素
    console.log($("input[type=radio]:checked"));// :checked 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
    console.log($("select>option:selected"));// :selected 匹配所有选中的option元素
</script>
</body>
</html>

结果：

三属性操作

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 1px solid #000;
        }
        .box{
            width: 100px;
            height: 100px;
        }
        .box1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
<input type="text" id="ipt" value="110" class="info"/>
<input type="text" id="ipt1" value="2017" class="info"/>
<input type="checkbox" class="ckbox"/>篮球
<input type="checkbox" class="ckbox"/>足球
<input type="checkbox" class="ckbox"/>乒乓球
<button id="fbtn">反选</button>
<div class="box  block"></div>
<input type="text" id="list"/>
<div class="content"></div>
<input type="checkbox" class="hobby" value="a"/>篮球
<input type="checkbox" class="hobby" value="b"/>足球
<input type="checkbox" class="hobby" value="c"/>羽毛球
<script src="js/jquery-1.9.1.js"></script>
<script>
    //属性

    /* * 获取或者设置属性的值
     *
     * jquery 里面可以进行一堆操作
     * */
    // attr（）：获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
    /*console.log($("#ipt").attr("value"));
   $("#ipt").attr("value", "456");

     //回调函数写法
     $("#ipt").attr("value", function (index, val) {
     console.log(index, val);
     return val * val;
     });
 console.log($(".info").attr("value"));
 
      
       //removeAttr 从每一个匹配的元素中删除一个属性
     $("#ipt").removeAttr("value");


// prop （）获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性。
 / !*console.log($("#ipt1").prop("value"));
     $("#ipt1").prop("value","abc");
    $("#ipt1").prop("value",function (index,val){
     console.log(index,val);
     return val+"m";
     });*!/

//removeProp（）用来删除由.prop()方法设置的属性集
     /!*  $("#ipt1").removeProp("value");//
     $("#ipt1").removeAttr("value");*!/

    
     //自定义属性
     $("#ipt1").attr("data-index",0);
     console.log($("#ipt1").attr("data-index"));
     $("#ipt1").removeAttr("data-index");

     $("#ipt1").prop("data-page",1);
     console.log($("#ipt1").prop("data-page"));
     $("#ipt1").removeProp("data-page");
     console.log($("#ipt1").prop("data-page"));

     $("#fbtn").click(function (){
     $(".ckbox").each(function (index){
     console.log(!undefined);
     $(this).prop("checked",!$(this).prop("checked"));
     });
     });


     //class 属性操作
      //为每个匹配的元素添加指定的类名。
     $(".block").addClass("box1 user");
     //从每一个匹配的元素中删除一个属性
      $ (".block").removeClass("user");
     //toggleClass  类别切换
     $(".block").toggleClass("box");
     $(".block").toggleClass("box");

     $(".block").addClass(function (index,elec){
     return "data";
     })
     $(".block").removeClass(function (index,elec){
     console.log(index,elec);
     return "data";
     });
     $(".block").toggleClass(function (index,elec){
     console.log(index,elec);
     return "user";
     },false);


     //文本或者值操作
     //html()  获取或者设置元素的内容值
     //text()  获取或者设置元素的文本值
     //val()   获取或者设置元素value
     $(".content").html("<span>123</span>");
     $(".content").text("<span>123</span>");

     console.log($(".content").html());
     console.log($(".content").text());

     $(".content").html(function (index,val){
     console.log(index,val);
     return "不知道"
     });
     $(".content").text(function (index,val){
     console.log(index,val);
     return "text"
     });

     //值操作
     //val   获取或者设置value
     $("#list").val("。。。。");
     console.log($("#list").val());
     $("#list").val(function (index,val){
     console.log(index,val);
     return "换值";
     });*/

    /*$(".hobby").val(["a","","c"]);*/

    $(".hobby").eq(0).val(["a"]);

</script>
</body>
</html>

结果：

四、css操作

css（）获取或设置元素的css，jquery里面可以进行链式操作；

例如：

$("#box").css("width","200px").css("height","200px").css("border","1px solid #000");

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            position: relative;
        }
        .list{
            width: 200px;
            height: 200px;
            overflow: scroll;
            border: 5px solid #000;
            padding: 10px;
            margin: 10px;
        }
        .block{
            width: 500px;
            height: 500px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div id="box"></div>
<div class="list">
    <div class="block"></div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script>
    $("#box").css({
        width:"100px",
        height:"100px",
        border:"1px solid #000",
        backgroundColor:"red"
    });
    console.log($("#box").css("border"));
    //offset  相对适口的偏移
    console.log($("#box").offset());
    //position  相对父元素的偏移
    //父元素  相对定位
    console.log($("#box").position());
    //scrollTop 获取或设置元素的上滑距
    console.log($(".list").scrollTop());
    $(".list").scrollTop(100);
    console.log($(".list").scrollLeft());
    $(".list").scrollLeft(100);
    /*
     * width()   设置或获取
     * */
    //$(".list").width(300);
    console.log($(".list").width());
    //$(".list").height(300);
    console.log($(".list").height());

    console.log($(".list").innerHeight());
    console.log($(".list").innerWidth());

    console.log($(".list").outerWidth(true));
    console.log($(".list").outerHeight());
</script>
</body>
</html>

结果：

五、文档处理

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="box">内部插入</div>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>
<button class="btn">按钮</button>

<span class="sp">1</span>
<span class="sp">2</span>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
     * 文档处理
     *
     * jquery创建dom
     *内部插入
     * */
    var ele=$("<span>span</span>");
    console.log(ele);
    $("#box").append("<span>123</span>");
    $("#box").append(ele);
    var ele1=$("<span>span1</span>");
    console.log(ele1);
    ele1.appendTo($("#box"));

    //追加到内容之前
    $("#box").prepend("abc");
    var ele2=$("<span>span2</span>");
    $("#box").prepend(ele2);
    var ele3=$("<span>span3</span>");
    ele3.prependTo($("#box"));


    $("#box").append(function (index,html){
        console.log(index,html);
        return "1111";
    });

    /*
     *外部插入
     * */
    $("#box").after("123");
    //"<span>123</span>".insertAfter($("#box"));
    $("<span>123</span>").insertAfter($("#box"));

    $("#box").after(function (index){
        return "456"
    });


    $("#box").before($("<h1>123</h1>"))
    $("<h1>123</h1>").insertBefore($("#box"));
    $("#box").before(function (index){
        return $(this);
    });

    /*
     * 包裹
     * */
    $("#box").wrap("<div></div>");

    $("#box").unwrap();

    //$(".btn").wrap("<div></div>");
    $(".btn").wrapAll("<div></div>");

    $(".btn").wrapInner("<span></span>");

    $(".btn").replaceWith("<input type='button' class='btn'/>");
    $("<button class='btn'></button>").replaceAll($(".btn"));

    //清空
    $("#box").empty();


    $(".btn").eq(2).remove();
    //$(".btn").remove();

    $(".btn").eq(2).addClass("but");

    $(".btn").remove(".but");



    $(".sp").eq(1).detach();
    console.log($(".sp"));


    /*
     * 克隆
     *
     * 默认false   只克隆元素
     *
     * true  事件处理函数  克隆
     * */
    $(".sp").eq(0).click(function (){
        console.log(1);
    });
    $(".sp").eq(0).clone(true).appendTo($("body"));

    /*
     * $(this)  this     两者相互转化
     * */

</script>
</body>
</html>

结果：

六筛选

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            position: fixed;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li class="li3">3</li>
    <p>31</p>
    <p>32</p>
    <p>33</p>
    <li class="li4">4</li>
    <li><span class="sps">5</span></li>
    <li class="li6"><span class="sp">6</span><span class="sp1">61</span></li>
    <li>7</li>
</ul>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
     * 筛选
     * */
    //过滤
    console.log($("ul>li").eq(0));
    console.log($("ul>li").eq(-1));//注意  倒着找  从-1

    console.log($("ul>li").first());
    console.log($("ul>li").last());
    //直接写名称
    console.log($("ul>li").hasClass("li4"));
    console.log($("ul>li").is(".li4"));

    $("ul>li").each(function (index) {
        if ($(this).hasClass("li4")) {
            console.log($(this));
        }
    });


    console.log($("ul>li").filter(".li4"));
    console.log($("ul>li").filter(function (index) {
        if ($(this).is(".li4")) {
            return $(this);
        }
    }));

    console.log($("ul>li").is(function (index) {
        if ($(this).hasClass("li4")) {
            return true;
        }
    }));

    console.log($("ul>li"));
    console.log($("ul>li").map(function (index, obj) {
        //obj  是原生的js对象
        ;
        return $(obj).text();
    }));


    console.log($("ul>li").has(".sp"));


    console.log($("ul>li").not(".li4"));
    console.log($("ul>li").not($("ul>li").has(".sp")));
    console.log($("ul>li").not(function (index, obj) {
        if ($(obj).is(".li4")) {
            return obj;
        }
    }));


    console.log($("ul>li").slice(0, 2));


    //查找
    //children()  不带参 获取元素的所有子集
    console.log($("ul>li").children());
    console.log($("ul>li").children(".sps"));

    console.log($("li:first").parent());
    console.log($("li:first").parents("body"));


    console.log($("ul").find(".li4"));


    console.log($(".li4").next());
    console.log($(".li4").nextAll(".li6"));
    console.log($(".li4").prev());
    console.log($(".li4").prevAll());

    console.log($("ul>li:nth-child(3)").nextUntil(".li4", "p"));
    console.log($("ul>li:nth-child(3)").nextAll());


    console.log($(".li4").offsetParent());

    console.log($(".li4").siblings());
    console.log($(".li4").siblings(".li6"));


    console.log($(".li6").add($(".li3")));

    console.log($(".li6").add("<span>123</span>"));


    console.log($(".li6").nextAll().addBack("li"));


    console.log($(".li6").contents('.sp1'));

    console.log($(".li6").find(".sp1").end());
</script>
</body>
</html>

结果：

七事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<div class="box">
    <button id="btn">按钮</button>
</div>
<button class="btn">按钮</button>
<script src="js/jquery-1.9.1.js"></script>
<script>
    /*
     * 事件
     * dom加载完成
     * */
    $(document).ready(function (){
        console.log("dom准备就绪");
    });

    /*
     * 普通事件
     *
     * 给事件处理函数传递的参数   在  event.data  属性上
     * */

    /*$(".box").click("user",function (e){

     }).mouseenter(function (){
     console.log("进入");
     }).mouseleave(function (){
     console.log("离开");
     });


     //事件切换   mouseover mouseout
     $(".box").hover(function (){
     console.log("悬停");
     },function (){
     console.log("离开");
     });*/


    /*
     * 事件处理
     * */
    $(".btn").bind("click",1,function (e){
        console.log("点击事件绑定", e.data);
    }).bind("mouseover",function (){
        console.log("mouseover事件");
    }).mouseleave(function (){
        //移除事件
        //unbind  不带参全部事件移除
        //指定事件移除
        //$(this).unbind();
        $(this).unbind("mouseover");
    });


    /*
     * 绑定事件
     * */
    /* $(".box").on("click",function (){
     console.log("on  click");
     });*/
    /* $(".box").on("click",1,function (e){
     console.log("on  click", e.data);
     });*/
    //用on 写事件委托

    //off  可以委派移除
    //不带参  全部移除
    //  也可以过滤移除
    $(".box").on("click","#btn",function (e){
        console.log("on  click", e.delegateTarget,$(this));  //delegateTarget   委派元素
    }).on("mouseover",function (){
        console.log("悬停");
    }).on("mouseleave",function (){
        //$(this).off("click","#btn");
        $(this).off("mouseover");
    });

    //one   绑定一次性事件

    $(".box").one("mousedown",1,function (e){
        console.log("mousedown", e.data);
    });

    //  trigger    触发指定事件
    $(window).on("keydown",function (e,a){
        console.log("按键", a);
    }).trigger("keydown",1);


    $(".box").on("user-key",function (e,a){
        console.log("自定义事件",a);
    }).trigger("user-key",1);



    $(".box").click(function (){
        console.log("box");
    });
    $("#btn").click(function (e,a){
        console.log("btn",a);

        //e.originalEvent.cancelBubble=true;
        //return false;
        //e.stopPropagation();
    }).triggerHandler("click",1);

    /*
     * 事件参数
     * */

    $("#btn").click(function (e){
        console.log(e);
    })
</script>
</body>
</html>

结果：

奈何故里无故人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery的相关知识

jquery:jquery是一个轻量级的js库优点：1、写得少，做的多；2、强大的元素选择器，使用的是css1-css3所有选择器；3、它简化了dom操作，优化了事件机制使用jquery 标识符$；jquery()执行。要使用jquery，要先引入jquery的库，如果元素初始化了，直接写jquery代码；如果元素未初始化，写dom加载完成事件。<!DOCTYPE html><html><head lang="en"> &lt
复制链接

扫一扫