jQuery笔记7-事件和插件

最新推荐文章于 2022-11-13 16:56:45 发布

blog12138

最新推荐文章于 2022-11-13 16:56:45 发布

阅读量111

点赞数

分类专栏： JQ 文章标签： jQuery

本文链接：https://blog.csdn.net/Zzzpiu/article/details/110382423

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

1.元素绑定多个事件
2.bind()的另一种写法及操作
3.on绑定事件
4.demo动态添加表格
5.解绑事件
6.事件解绑的问题
7.事件触发
8.浏览器的默认事件
9.事件对象
10.获取键盘按下的值(keydown事件)
11.事件冒泡
12.取消浏览器的默认事件
13.链式编程原理
14.评分demo
15.each遍历
16.$变成了变量

1.元素绑定多个事件

三种方式:

一个一个绑定
链式编程
bind()方法
demo:鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素绑定多个事件</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框
            //鼠标进入
            // $("#btn").mouseover(function () {
            //     $(this).css("backgroundColor","red");
            // });
            // //鼠标离开
            // $("#btn").mouseout(function () {
            //     $(this).css("backgroundColor","");
            // });
            // $("#btn").click(function () {
            //     alert("弹框");
            // });

            //链式编程
            // $("#btn").mouseover(function () {
            //     $(this).css("backgroundColor","red");
            // }).mouseout(function () {
            //     $(this).css("backgroundColor","");
            // }).click(function () {
            //     alert("弹框");
            // });

            //bind()方法可以为元素同时绑定多个事件
            $("#btn").bind({"click":function () {
                    alert("弹框");
                },"mouseover":function () {
                    $(this).css("backgroundColor","red");
                },"mouseout":function () {
                    $(this).css("backgroundColor","");
                }});
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

2.bind()的另一种写法及操作

$(function () {
            //为按钮注册鼠标进入和离开的事件
            var i = 0;
            $("#btn").bind("mouseover mouseout",function () {
                i++;
                console.log(i);
            });
        });

3.on绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        //通过on为按钮绑定点击的事件,创建一个p标签加入到div中,通过on的方式为div中的p绑定点击事件
        $(function () {
            $("#btn").on("click",function () {
                //创建p添加到div中
                $("#dv").append($("<p>这是一个p</p>"));
                //为div中的p标签绑定事件
                /*
                * on方法： 两个参数:1事件的名字,2事件处理函数
                * on方法:三个参数: 1,事件的名字, 2.要绑定事件的元素--p,3事件处理函数
                * on是父级元素调用,目的:为子级元素去绑定事件
                *
                * */

                // $("#dv").on("click","p",function () {
                //     alert("我被点了");
                // });
                $("p").click(function () {
                   alert("hello");
                });
            });
        });

    </script>
    <script>
        /*
        *
        * 绑定事件:
        * bind:
        * 绑定多个事件
        * 参数:{"事件的类型":事件处理函数,....}
        * delegate
        * 参数:父级元素.delegate("子级元素","事件类型",事件处理函数)
        * on
        * 参数:父级元素.on("事件类型","子级元素",事件处理函数);
        *
        *
        * */
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>

4.demo动态添加表格

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="checkDemo.css"/>
    <script src="../../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //点击按钮,显示遮挡层和对话框
            //添加数据
            $("#j_btnAddData").click(function () {
                $("#j_mask").css("display","block");
                $("#j_formAdd").css("display","block");
            });
            //关闭
            $("#j_hideFormAdd").click(function () {
                $("#j_mask").css("display","none");
                $("#j_formAdd").css("display","none");
            });
            //真正的添加数据
            $("#j_btnAdd").click(function () {
                //获取课程  j_txtLesson
                var lesson=$("#j_txtLesson").val();
                //获取学院  j_txtBelSch
                var belSch=$("#j_txtBelSch").val();
                //创建行--拼接字符串,添加到tbody中
                $("<tr><td>"+lesson+"</td><td>"+belSch+"</td><td><a href='javascrip:;' class='get'>GET</a></td></tr>").appendTo($("#j_tb"));
                //隐藏遮挡层和对话框
                $("#j_mask").css("display","none");
                $("#j_formAdd").css("display","none");
                $("#j_txtLesson").val("");//清空课程的文本框
            });
            //获取tbody中应用.get类样式的元素,绑定点击事件
            //如果元素是动态添加的,那么非常推荐用on的方式为动态添加的元素绑定事件
            $("#j_tb").on("click",".get",function () {
                $(this).parent().parent().remove();//删除tr
            });
        });
    </script>
</head>
<body>
<!--初始化表格-->
<div class="wrap">
    <div>
        <input type="button" value="添加数据" id="j_btnAddData" class="btnAdd"/>
    </div>
    <table>
        <thead>
        <tr>
            <th>课程名称</th>
            <th>所属学院</th>
            <th>已学会</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>JavaScript</td>
            <td>XXX学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>css</td>
            <td>YYY-学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>html</td>
            <td>ZZZ-学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        <tr>
            <td>jQuery</td>
            <td>XXX-学院</td>
            <td><a href="javascrip:;" class="get">GET</a></td>
        </tr>
        </tbody>
    </table>
</div>
<!--动态添加模态框-->
<div id="j_mask" class="mask"></div>
<div id="j_formAdd" class="form-add">
    <div class="form-add-title">
        <span>添加数据</span>

        <div id="j_hideFormAdd">x</div>
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtLesson">课程名称：</label>
        <input class="txt" type="text" id="j_txtLesson" placeholder="请输入课程名称">
    </div>
    <div class="form-item">
        <label class="lb" for="j_txtBelSch">所属学院：</label>
        <input class="txt" type="text" id="j_txtBelSch" value="">
    </div>
    <div class="form-submit">
        <input type="button" value="添加" id="j_btnAdd">
    </div>
</div>
</body>
</html>

5.解绑事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <!--<script>
        // 方法一:
        $(function () {
            //第一个按钮通过on的方式绑定点击事件
            $("#btn1").on("click", function () {
                alert("我被点了");
            });
            //第二个按钮把第一个按钮的点击事件解绑
            $("#btn2").on("click", function () {
                //off()参数:要解绑的事件的名字
                $("#btn1").off("click");//解绑事件
            });
        });
    </script>-->
    <!--<script>
        // 方法二
        $(function () {
            // 第一个按钮bind绑定事件
           $("#btn1").bind("click",function () {
               alert("我又被点了");
           });
           //第二个按钮unbind解绑事件
           $("#btn2").bind("click",function () {
               $("#btn1").unbind("click");//解绑事件的方法
           });
        });
    </script>-->
    <script>
        // 方法三
        $(function () {
            //点击第一个按钮为div中p绑定点击事件
            $("#btn1").click(function () {
                $("#dv").delegate("p","click",function () {
                    alert("我被点了");
                });
            });
            //点击第二个按钮为div中p解除绑定事件
            $("#btn2").click(function () {
                $("#dv").undelegate("p","click");//解绑
            });
        });
    </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
    <p>这是div中的一个p标签</p>
</div>
</body>
</html>

6.事件解绑的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>

    <script>

        $(function () {
            //为div和p都绑定点击事件
//            $("#dv>p").click(function () {
//                alert("p被点了");
//            });
            $("#dv").delegate("p","click",function () {
                alert("p被点了");
            });
            $("#dv").click(function () {
                alert("div被点了");
            });
            $("#btn1").click(function () {
                // $("#dv").off("click");
                //下面的代码是把子级元素的点击事件解绑了,父级元素的点击事件还存在
                //$("#dv").off("click","**");
                $("#dv").off();//移除父级元素和子级元素的所有的事件
            });
            //如果说父级元素和子级元素都是通过正常的方式绑定事件,如果通过off解绑的时候,父级元素的事件解绑了,子级元素的事件没有解绑
            //但是:如果子级元素是通过父级元素调用delegate的方式绑定的事件,父级元素使用off方式解绑事件,这个时候父级元素和子级元素的相同的事件都会被解绑
        });

        /*建议bind和unbind使用,on和off使用*/
    </script>
</head>
<body>
<input type="button" value="绑定事件" id="btn1"/>
<input type="button" value="解绑事件" id="btn2"/>
<div id="dv">
    <p>这是div中的一个p标签</p>
</div>
</body>
</html>

7.事件触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn1").click(function () {
                $(this).css("backgroundColor","red");
            });
            //点击第二个按钮调用第一个按钮的点击事件---触发第一个按钮的点击事件
            $("#btn2").click(function () {
                //触发事件--3三种方式
                //$("#btn1").click();
                //trigget()方法中需要写上触发事件的名字
                //$("#btn1").trigger("click");//触发事件
                $("#btn1").triggerHandler("click");//触发事件
            });
        });
    </script>
</head>
<body>
<input type="button" value="第一个按钮" id="btn1"/>
<input type="button" value="第二个按钮" id="btn2"/>
</body>
</html>

8.浏览器的默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#btn").click(function () {
                //触发文本框的获取焦点的事件
                //$("#txt").focus();
                //$("#txt").trigger("focus");
                $("#txt").triggerHandler("focus");
                $("#sp").text("文本框获取到焦点了");
                //第一种触发事件的方式和第二种触发事件的方式是相同的,都会触发浏览器默认的事件(光标在文本框中闪烁)
                //第三种触发事件的方式不会触发浏览器的默认事件
            });
        });
    </script>
</head>
<body>
<input type="button" value="触发事件" id="btn"/>
<input type="text" value="" id="txt"/>
<span id="sp"></span>
</body>
</html>

9.事件对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            //为div中的按钮绑定事件,获取事件对象中内容
            $("#dv").on("click","input",function (event) {
                //获取函数在调用的时候,有几个参数
                //console.log(arguments[0]);
                console.log(event);
                //event.delegateTarget----->div--->谁代替元素绑定的事件--div
                //event.currentTarget----->input--->真正是谁绑定的事件
                //event.target---->input----触发的事件
            });
        });
    </script>
</head>
<body>
<div id="dv">
    <input type="button" value="按钮" id="btn"/>
</div>

</body>
</html>

10.获取键盘按下的值(keydown事件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 100px;
            background-color: pink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $(document).keydown(function (e) {
                var keyCode=e.keyCode;//键盘按下后的键对应的键值
                console.log(keyCode);
            });
        });
    </script>
</head>
<body>
<div id="dv"></div>
</body>
</html>

11.事件冒泡

事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv1{
            width: 300px;
            height: 250px;
            background-color: red;
        }
        #dv2{
            width: 250px;
            height: 200px;
            background-color: green;
        }
        #dv3{
            width: 200px;
            height: 150px;
            background-color: blue;
        }
    </style>
    <script src="../jquery-1.12.2.js">
    </script>
    <script>
        //事件冒泡:元素中有元素,这些元素都有相同的事件,一旦最里面的元素的事件触发了,外面的所有的元素的相同的事件都会被触发
        //元素A中有一个元素B,A和B都有点击事件,B点击事件触发,A点击事件自动触发
        //取消事件冒泡
        //jQuery中  return false
        $(function () {
            $("#dv1").click(function () {
                alert("dv1被点了"+$(this).attr("id"));
            });
            $("#dv2").click(function () {
                alert("dv2被点了"+$(this).attr("id"));
                //$("body").css("backgroundColor","black");
            });
            $("#dv3").click(function () {
                alert("dv3被点了"+$(this).attr("id"));
                // return false;//取消事件冒泡
            });
        });
    </script>
</head>
<body>
<div id="dv1">
    <div id="dv2">
        <div id="dv3"></div>
    </div>
</div>
</body>
</html>

12.取消浏览器的默认事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $("#ak").click(function () {
                alert("超链接被点了");
                //取消超链接的默认的点击事件
                return false;
            });
        });
    </script>
</head>
<body>
<a href="http://www.itcast.cn" id="ak">传智播客</a>
</body>
</html>

13.链式编程原理

前一个方法返回了当前对象,所以实现了链式编程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        function Student(name) {
            this.name=name;
            this.sayHi=function (name) {
                if(name){
                    console.log("俺是"+name);
                    return this;
                }else{
                    console.log("我的名字叫"+this.name);
                }
//                console.log("我的名字叫"+this.name);
//                return this;//把当前对象返回
            };
            this.eat=function () {
                console.log("我就是喜欢吃大蒜+榴莲+臭豆腐");
            };
        }
        var stu=new Student("小明");
        stu.sayHi().eat();
        //var stu=new Student("小黑");
        //.html()
        //stu.sayHi().eat();
        //        stu.sayHi();
        //        stu.eat();
    </script>
</head>
<body>
</body>
</html>

14.评分demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .comment {
            font-size: 40px;
            color: yellow;
        }

        .comment li {
            float: left;
        }

        ul {
            list-style: none;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>

        $(function () {
            $(".comment>li").mouseover(function () {
                $(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
            }).mouseout(function () {
                $(".comment").find("li").text("☆");
                $(".comment>li[index=1]").text("★").prevAll("li").text("★");
            }).click(function () {
                //注意这里添加了一个index属性值为1到当前点击的元素上,上面鼠标移除事件的第二行才会生效
                $(this).attr("index","1").siblings("li").removeAttr("index");
            });
        });

    </script>
</head>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>

15.each遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            width: 100px;
            height: 100px;
            background-color: green;
            list-style-type: none;
            float: left;
            margin-left: 10px;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
       $(function () {
           //页面加载后,让每个li的透明度发生改变
           //不同的元素不同的设置方式--each方法
           $("#uu>li").each(function (index,element) {
               //第一个参数是索引,第二个参数是对象
               //console.log(arguments[0]+"====="+arguments[1]);
               $(element).css("opacity",(index+1)/10);
           });
       });
    </script>
</head>
<body>
<ul id="uu">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>
</body>
</html>

16.$变成了变量

当$变成了变量不能使用$作为jQuery的对象了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.12.2.js"></script>
    <script>
        //让jquery对$对象进行释放控制权
        //方法一:
        //        var xy=$.noConflict();
        //        //从此以后xy就是曾经的$---一毛一样的
        //        var $=100;//$原本是对象--->变量
        //        xy(function () {
        //            xy("#btn").click(function () {
        //                alert("哈哈,我又变帅了");
        //            });
        //        });
        // 方法二
        var $=100;//$原本是对象--->变量
        jQuery(function () {
            jQuery("#btn").click(function () {
                alert("哈哈,我又变帅了");
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
</body>
</html>

blog12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记7-事件和插件

文章目录1.元素绑定多个事件2.bind()的另一种写法及操作1.元素绑定多个事件三种方式:一个一个绑定链式编程bind()方法demo:鼠标进入到按钮中背景颜色为红色,离开后颜色为默认,点击按钮,弹出对话框<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素绑定多个事件</title> <scr
复制链接

扫一扫

专栏目录