JQuery使用及基础原理解析相关笔记（三）

最新推荐文章于 2024-06-15 20:49:05 发布

jwllwj_2018

最新推荐文章于 2024-06-15 20:49:05 发布

阅读量237

点赞数

分类专栏： JS JQUERY 文章标签： JS JQUERY

本文链接：https://blog.csdn.net/jwlLWJ_2018/article/details/80872267

版权

JS 同时被 2 个专栏收录

52 篇文章 0 订阅

订阅专栏

JQUERY

11 篇文章 0 订阅

订阅专栏

1.jQuery的核心–所有版本：https://code.jquery.com/jquery/

2.jQuery属性操作：

◆设置属性：当前节点.attr(属性名,属性值);
◆获取属性：当前节点.attr(属性名);
◆移除属性：当前节点.removeAttr(属性名);
◆设置属性：当前节点.prop(属性名,属性值);
◆获取属性：当前节点.prop(属性名);

◆移除属性：当前节点.removeProp(属性名);

★使用attr对象对bool类型值得属性赋值时，其实并不会赋值true或者false，如果赋值为false则是undefined，如果是true则是非udefined，所以这样不好，可能会出现多次赋值后失灵无效，因为这种方式不适合操作bool类型值的属性的，于是一个新的专门针对true和false改进的方法诞生，是prop，操作方式和attr一模一样，但是是针对bool类型值得属性赋值的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery操作属性（attr和prop）</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            //对于特殊的属性 只能够使用一次   对于特殊的属性 不适合用
            $("button:eq(0)").click(function () {
                $(":checkbox").attr("checked",true);
                $(":text").attr("value",$(":checkbox").attr("checked"));
            });

            //对于特殊的属性 可以使用多次  这是对那些特殊点的属性专用的方法
            $("button:eq(1)").click(function () {
                $(":checkbox").prop("checked",true);
                $(":text").prop("value",$(":checkbox").prop("checked"));
            });
        })


    </script>
</head>
<body>
<button>attr绑定</button>
<button>prop绑定</button>
<input type="text">
<input type="checkbox">
</body>
</html>

★使用jQuery属性操作DIY:表格的全选与反选、文本框光标闪动

☆表格的全选与反选

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>jQuery使用prop实现表格全选反选</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        //需求1：选中头部的复选框后，身体部分的复选框也会被选中，
        //      取消选中头部的复选框后，身体部分的复选框也会被取消
        //需求2：当身体部分的复选框全部选中时，头部的复选框也会被选中，
        //      身体部分的复选框有一个没有被选中，头部的复选框就不会被选中

        //思路1：给头部复选框设置点击事件，让身体部分的复选框与头部的复选框的checked值同步
        //思路2：给身体部分的复选框设置单击事件，自己也是选中的，
        //      那么就让头部的复选框被选中，就判断被选中的复选框个数是否与身体部分的复选框个数一致，
        //      如果一致就选中头部的复选框，
        //      如果自己没有选中，就取消头部的复选框。

        //步骤：

        $(function () {
            //给头部复选框设置点击事件
            $("#j_cbAll").click(function () {
                //让身体部分的复选框与头部的复选框的checked值同步
                $("#j_tb :checkbox").prop("checked", $(this).prop("checked"));
            });

            $("#j_tb :checkbox").click(function () {
//                //如果自己也是选中的话
//                if ($(this).prop("checked")) {
//                    //判断被选中的复选框个数是否与身体部分的复选框个数一致
//                    if ($("#j_tb :checked").length === $("#j_tb :checkbox").length) {
//                        //如果一致就选中头部的复选框
//                        $("#j_cbAll").prop("checked", true);
//                    } else {//否则不选中
//                        $("#j_cbAll").prop("checked", false);
//                    }
//                } else {//如果自己没有选中 就取消头部的复选框
//                    $("#j_cbAll").prop("checked", $(this).prop("checked"));
//                }


                //优化上面的代码
                //如果自己被选中
                if (true === $(this).prop("checked")) {
                    //判断身体部分所有复选框都被选中了
                    if ($("#j_tb :checked").length !==
                            $("#j_tb :checkbox").length) {
                        $("#j_cbAll").prop("checked", false);

                        return;
                    }
                }
                //自己没有被选中 那头部的复选框也不会被选中，
                // 如果代码执行到这里了，自己也被选中了，那么说明所有的复选框都被选中了
                $("#j_cbAll").prop("checked", $(this).prop("checked"));

            });

        })


    </script>
</head>

<body>
<div class="wrap">
    <table>
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="j_cbAll"/>
            </th>
            <th>语言名称</th>
            <th>所属对象</th>
        </tr>
        </thead>
        <tbody id="j_tb">
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>JavaScript</td>
            <td>水晶女孩</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>css</td>
            <td>水晶女孩</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>html</td>
            <td>水晶女孩</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox"/>
            </td>
            <td>jQuery</td>
            <td>水晶女孩</td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

☆文本框光标闪动

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用jQuery制作动态输入文本的光标一闪一闪的动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-webkit-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        @-moz-keyframes blink {
            0%,
            100% {
                opacity: 1
            }
            50% {
                opacity: 0
            }
        }

        .wrap {
            width: 1000px;
            text-align: center;
            margin: 100px auto 0;
        }

        .wrap h1 {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight: 300;
        }

        .word {
            font-weight: 700;
        }

        .typed-cursor {
            opacity: 1;
            -webkit-animation: blink .7s infinite;
            -moz-animation: blink .7s infinite;
            animation: blink .7s infinite;
            display: none;
        }

        .saySection {
            margin-top: 50px;
        }

        .saySection input {
            font-size: 30px;
        }

        .saySection .txtSay {
            padding-left: 10px;
        }

        .saySection .btnSay {
            display: inline-block;
            padding: 0 20px;
            cursor: pointer;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //需求：在文本框中输入文本后点击确定按钮，立即展示文字动态输入的效果
        //思路：将文本框中的字符串通过循环的方式追加到 .word中
        //步骤：
        $(function () {
            var value = $("#inValue");
            var text = $(".word");
            var cursor = $(".typed-cursor");
            $("#btnSay").click(function () {


                //使用定时器之前先清除定时器
                clearInterval($("#btnSay").get(0).timer);
                var str = "";
                var txt = value.val();
                var i = 0;
                //激活动态光标
                cursor.show(500);
                $("#btnSay").get(0).timer = setInterval(function () {
                    str += txt[i];
                    text.text(str);
                    i++;
                    if (i === txt.length) {
                        clearInterval($("#btnSay").get(0).timer);

                        cursor.hide(500);
                    }
                }, 200);
            });
        })
    </script>
</head>
<body>
<div class="wrap">
    <h1>
        You want to say ： <span class="word"></span><span class="typed-cursor">|</span> ！
    </h1>
    <div class="saySection">
        <input type="text" id="inValue" class="txtSay"/>
        <input type="button" value="确定" id="btnSay" class="btnSay"/>
    </div>
</div>
</body>
</html>

3.表单选择器与表单对象属性选择器
◆表单选择器

:input //input标签
:text //文本框
:password  //密码框
:radio  //单选按钮
:checkbox //复选框
:submit //提交按钮
:image  //图片提交按钮
:reset //重置按钮
:button //按钮
:file //上传文件按钮
:hidden //隐藏文本域

◆表单对象属性选择器

:enabled //已经启用
:disabled //可以显示
:checked //已经选中
:selected  //已经选择

4.三种获取设置值的方法 val()、text()、html()
◆val()：主要是用来获取标签中允许拥有value的属性的值，几乎所有表单标签都有value属性值。
◆text()：主要用来获取标签对中的文本内容，其实就是原生js中的innerText和textContent的兼容。
◆html()：主要用来获取标签对中的文本内容或html标签文本，很像是原生js中的innerHTML。

★方法中不写参数就是获取值，方法中写参数就是设置值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的val、text、html方法</title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            var input=$("input");
            var div=$("div");
            var span=$("span");

            input.val("使用了value方法");
            span.text("<button>只能显示纯文本</button>")
            div.html("<button>我是一个按钮</button>")

            console.log(input.val());
            console.log(span.text());
            console.log(div.html());

        });

    </script>
</head>
<body>
<input type="text">
<div></div>
<span></span>
</body>
</html>

5.获取和设置宽高的方法 height()和width()
◆height()：只是单纯的获取css样式中的height属性值，与padding和border以及margin无关。
◆width()：只是单纯的获取css样式中的width属性值，与padding和border以及margin无关。

★方法中不写参数就是获取值（获取的值为纯数字），方法中写参数就是设置值，设置值的方式可以是纯数字，参数为纯数字时默认像素为单位，参数也可以是字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的height()与width()</title>
    <style type="text/css">
        .box {
            width: 150px;
            height: 150px;
            background-color: #a05;
            padding:20px;
            margin:100px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function () {
            $(".box").html(
                    "<h4>width():"+($(".box").width())+"</h4>" +
                    "<h4>height():"+($(".box").height())+"</h4>"+
                            "<h4>只是获取css样式中width属性值与height属性值</h4>"
            )
        })

    </script>
</head>
<body>
<div class="box"></div>
</body>
</html>

6.获取定位的距离

◆

offset().top

表示距离浏览器起始点（0，0）点的y轴的距离，和无论有没有定位（maring的属性值也算），并且offset().top获取的都是针对浏览器起始点，与js原生属性offsetTop不一样，由于无论有没有定位都是针对浏览器的起始点。

◆

offset().left

表示距离浏览器起始点（0，0）点的x轴的距离，和无论有没有定位（maring的属性值也算），并且offset().left获取的都是针对浏览器起始点，与js原生属性offsetLeft不一样。

★offset()还可以赋值，如

offset({left:200,top:200})

，赋值的时候其实就是设置定位时的left和top属性值;，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），从而得到真正的定位坐标属性left和top值，然后再进行设置。

◆

position().top

表示距离父级非静态定位的盒子的y轴距离，这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。

◆

position().left

表示距离父级非静态定位的盒子的x轴距离，这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关，可能会与父容器的margin-left值相关联。

◆

scrollTop()

表示距离元素被卷去的距离，用法$(document).scrollTop()，相当于之前封装的scroll方法一样scroll().scrollTop()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。

◆

scrollLeft()

表示距离元素被卷去的距离，用法$(document).scrollLeft()，相当于之前封装的scroll方法一样scroll().scrollLeft()，如果你像获取元素被卷去的距离，可以让元素产生滚动条，这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，前提条件是，子容器要大于父容器。

★scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的

function scroll(){
return {
            scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
            scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
        }
}

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的offset()、position()、scrollTop()、scrollLeft()</title>
    <style>
        body {
            margin:20px;
            height: 5000px;
        }
        div {
            width: 150px;
            height: 150px;
            margin: 100px;
            background-color: #a05;

        }

    </style>
    <script src="jquery-1.11.1.js"></script>

    <script>
        $(function () {
            //获取定位的距离

            // offset().top：表示距离浏览器起始点（0，0）点的y轴的距离，
            // 和无论有没有定位（maring的属性值也算），
            // 并且offset().top获取的都是针对浏览器起始点，
            // 与js原生属性offsetTop不一样。
            console.log('$("div").offset().top：' + ($("div").offset().top));


            //offset().left：表示距离浏览器起始点（0，0）点的x轴的距离，
            // 和无论有没有定位（maring的属性值也算），
            // 并且offset().left获取的都是针对浏览器起始点，
            // 与js原生属性offsetLeft不一样。
            console.log('$("div").offset().left：' + ($("div").offset().left));


            //offset()还可以赋值，如offset({left:200,top:200})，
            // 赋值的时候其实就是设置定位时的left和top属性值;
            //，但是实际上它会和当前的位置上的坐标值进行计算（和margin的属性值进行减法运算），
            // 从而得到真正的定位坐标属性left和top值,然后再进行设置。

            $("div").offset({left: 300, top: 300});

            //position().top：表示距离父级非静态定位的盒子的y轴距离，
            // 这个方法其实就是获取定位时设置的top属性值而已与其它属性值无关。
            console.log($("div").position().top);

            //position().left：表示距离父级非静态定位的盒子的x轴距离，
            // 这个方法其实就是获取定位时设置的left属性值而已与其它属性值无关,
            // 可能会与父容器的margin-left值相关联。
            console.log($("div").position().left);


            //scrollTop()：表示距离元素被卷去的距离，
            // 用法$(document).scrollTop()，
            // 相当于之前封装的scroll方法一样scroll().scrollTop()，
            // 如果你像获取元素被卷去的距离，可以让元素产生滚动条，
            // 这样就能够获取了，使用overflow:auto;获取overflow:scroll;
            // 来产生滚动条，前提条件是，子容器要大于父容器。

            //scrollLeft()：表示距离元素被卷去的距离，
            // 用法$(document).scrollLeft()，
            // 相当于之前封装的scroll方法一样scroll().scrollLeft()，
            // 如果你像获取元素被卷去的距离，可以让元素产生滚动条，
            // 这样就能够获取了，使用overflow:auto;获取overflow:scroll;来产生滚动条，
            // 前提条件是，子容器要大于父容器。
            //scrollTop()方法与scrollLeft()方法其实不光可以获取并且还可以设置，
            // 内部调用了window.moveTo(x,y)的方法，不光可以$(document).scrollLeft()，
            // 也可以是$(window).scrollLeft()，是一样的，因为自己封装scroll()时就是这样子的【
//        function scroll(){
//            return {
//                scollLeft: window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft,
//                scollTop: window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop
//            }
//        }

            //设置页面被卷去的距离时，前提是 页面要有滚动条
            $("button").click(function () {

                $(document).scrollTop(1000);
            });
        })
    </script>
</head>
<body>
<button>scrollTop(1000)</button>
<div></div>
</body>
</html>

7.jQuery事件机制
◆jQuery的事件机制，指的是：jQuery对javascript操作dom事件的封装，包括了：事件绑定、事件解绑、事件触发。

◆jQuery事件的发展历程：简单事件绑定-->bind事件绑定-->delegate事件绑定-->on事件绑定（on最优秀，因为bind、delegate内部就是使用的on，所以on是最好的）

8..事件绑定的四种方式（其实只有两种方式一种非事件委托的方式、一种事件委托的方式）
◆简单事件绑定

$(".box").click(function(){}); //这种放式最为简单了，可以多次绑定，不会被后面绑定的相同的事件层叠掉，一次只能够绑定一个事件，并且无法以指定父容器的方式给子元素绑定事件，也就是说不会进行事件委托了。

◆bind事件绑定

$(".box").bind("click dbclick",function(){});//这种方式要比简单事件绑定复杂一点，但是在jQuery1.7版本后不再使用了，不仅有简单事件绑定的所有优点，并且至此多事件绑定，但是依旧不能进行事件委托，因为事件委托的方式仅仅是需要依赖父容器的。

◆delegate事件绑定

◇非事件委托的方式

$(".box").delegate(null,"click dbclick",function(){});//这种方式与bind事件绑定一样的，实际上无论是bind还是delegate内部使用的都是on事件绑定。

◇事件委托的方式绑定事件

$(document).delegate(".box","click dbclick",function(){});//这种方式属于事件委托的方式绑定事件

◆on事件绑定

◇非事件委托的方式

$(".box").on("click dbclick",{age:20},function(){});//非事件委托的方式绑定事件，bind与delegate还有on都是一样的，只不过参数有点区别而已。

◇事件委托的方式绑定事件

$(document).on("click dbclick",".box",{age:20},function(){});//事件委托的方式绑定事件，推荐使用这种，最好用了，{age:20}表示事件绑定时传递一个数据进去，然后事件触发后，可以在内部获取这个数据，但是绑定的时候function(event){}，方法的参数里面要加一个event或者其它形参，然后在方法内部可以使用 event.data的方式获取你传递进去的数据。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件绑定四种方式</title>
    <style type="text/css">

        div {
            width: 300px;
            height: 300px;
            background-color: #a05;
            margin: 50px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function () {
            /*
             * 事件绑定的四种方式（其实只有两种方式  一种非事件委托的方式、一种事件委托的方式  ）
             * */

            /第一种方式  简单事件绑定 \\\\\
            // 绑定相同的事件时不会被层叠掉，
            // 因为内部有一个事件队列存着这些事件
            $("div").click(function () {
                console.log("简单事件绑定：触发了div的单击事件1");
            })
            $("div").click(function () {
                console.log("简单事件绑定：触发了div的单击事件2");
            })

            /第二种方式  bind事件绑定 \\\\\
            // 每次都可以绑定多个事件，
            // 并且绑定相同的事件不会被层叠掉
            $("div").bind("click dblclick", function () {
                console.log("bind事件绑定：单击和双击都会触发这个事件1");
            })
            $("div").bind("click dblclick", function () {
                console.log("bind事件绑定：单击和双击都会触发这个事件2");
            })

            /第三种方式  delegate事件绑定 \\\\\
            // 每次可以绑定多个实际那，
            // 并且绑定相同的事件不会被层叠掉
            // 还可以指定的给父容器里的子容器绑定事件
            // 并且还是以事件委托的方式来进行绑定的
            // 当你动态添加新的元素时，
            // 那个元素如果符合要求的话也会有这个被绑定的事件方法，
            // 所以更加的准确灵活健壮稳定了
            $(document).delegate("div", "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件1");
            })

            $(document).delegate("div", "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件2");
            })


            $("div").delegate(null, "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件3");

            })

            //添加新的div  新的div也会有事件
            $("button").click(function () {
                $("<div>新</div>").appendTo($(document).find("body"));
            });

            /第四种方式  on事件绑定 \\\\\
            //其实无论是bind事件绑定还是delegate事件绑定，
            //其实内部都是使用的on事件绑定
            //on事件绑定的方式是最优秀的
            //on事件还是传递数据进去
            $(document).on("click dbclick","div",{name:"xf"},function(event){
                console.log("on事件绑定：单击和双击都会触发这个事件1，传递的数据为："+event.data.name);
            });
            $(document).on("click dbclick","div",{name:"xf"},function(event){
                console.log("on事件绑定：单击和双击都会触发这个事件2，传递的数据为："+event.data.name);
            });
            $("div").on("click dbclick", {name: "xf"}, function (event) {
                console.log("on事件绑定：单击和双击都会触发这个事件3，传递的数据为：" + event.data.name);
            })
        });
    </script>
</head>
<body>
<button>添加一个div</button>
<div></div>
</body>
</html>

9.事件解绑的两种方式（非事件委托的方式与事件委托的方式）

◆事件绑定的方式有四种分别是简单事件绑定、bind事件绑定、delegate事件绑定（支持事件委托）、on事件绑定(支持事件委托)
◆由于这几种方式绑定事件都不会被层叠掉，非指定父容器给子容器（非事件委托）的简单事件绑定、bind事件绑定、delegate、on事件绑定可以使用对象.unbind()、对象.undelegate()、对象.off()来解绑

$("div").unbind();
$("div").undelegate();
$("div").off();

，如果指定父容器给子容器（事件委托）的delegate和on事件绑定可以使用相应的undelegate()和off()方式来解绑

$(document).undelegate("div","click dbclick");//解绑指定的元素的指定事件
$(document).off("click dbclick","div");//解绑指定的元素的指定事件
$(document).off("","div"); //解除指定元素的全部事件

◆事件解绑不仅仅可以解绑全部事件，也可以针对性的解绑某一个事件，获取某一个事件中的某一个方法，但是你绑定事件的时候，方法不能是匿名函数，不然找不到指针地址，当不解绑全部事件时，怎么绑定的就怎么解绑，参数差不多，如

//绑定
$(document).delegate(".box","click blur keydown",function(e){
//事件驱动程序
})
//解绑
$(document).undelegate(".box","click");

★使用bind绑定事件会存在bug，例如双击事件的绑定是无法解除的，必须使用全部解绑的方式

◇ $("div").unbind();

才能够解绑。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件解绑三种方式</title>
    <style type="text/css">

        div {
            width: 300px;
            height: 300px;
            background-color: #a05;
            margin: 50px;

        }

    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //这个入口函数中是事件绑定的入口函数
        $(function () {

            /*
             * 事件绑定的四种方式（其实只有两种方式  一种非事件委托的方式、一种事件委托的方式  ）
             * */


            /第一种方式  简单事件绑定 \\\\\
            // 绑定相同的事件时不会被层叠掉，
            // 因为内部有一个事件队列存着这些事件
            $("div").click(function () {
                console.log("简单事件绑定：触发了div的单击事件1");
            })
            $("div").click(function () {
                console.log("简单事件绑定：触发了div的单击事件2");
            })

            /第二种方式  bind事件绑定 \\\\\
            // 每次都可以绑定多个事件，
            // 并且绑定相同的事件不会被层叠掉
            $("div").bind("click dblclick", function (e) {
                console.log("bind事件绑定：单击和双击都会触发这个事件1" + e.type);
            })
            $("div").bind("click dblclick", function (e) {
                console.log("bind事件绑定：单击和双击都会触发这个事件2" + e.type);
            })

            /第三种方式  delegate事件绑定 \\\\\
            // 每次可以绑定多个实际那，
            // 并且绑定相同的事件不会被层叠掉
            // 还可以指定的给父容器里的子容器绑定事件
            // 并且还是以事件委托的方式来进行绑定的
            // 当你动态添加新的元素时，
            // 那个元素如果符合要求的话也会有这个被绑定的事件方法，
            // 所以更加的准确灵活健壮稳定了
            $(document).delegate("div", "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件1");
            })

            $(document).delegate("div", "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件2");
            })

            $("div").delegate(null, "click dbclick", function () {
                console.log("delegate事件绑定：单击和双击都会触发这个事件3");

            })

            //添加新的div  新的div也会有事件
            $("button").click(function () {
                $("<div>新</div>").appendTo($(document).find("body"));
            });

            /第四种方式  on事件绑定 \\\\\
            //其实无论是bind事件绑定还是delegate事件绑定，
            //其实内部都是使用的on事件绑定
            //on事件绑定的方式是最优秀的
            //on事件还是传递数据进去
            $(document).on("click dbclick", "div", {name: "xf"}, function (event) {
                console.log("on事件绑定：单击和双击都会触发这个事件1，传递的数据为：" + event.data.name);
            });
            $(document).on("click dbclick", "div", {name: "xf"}, function (event) {
                console.log("on事件绑定：单击和双击都会触发这个事件2，传递的数据为：" + event.data.name);
            });
            $("div").on("click dbclick", {name: "xf"}, function (event) {
                console.log("on事件绑定：单击和双击都会触发这个事件3，传递的数据为：" + event.data.name);
            })
        });

        //这个入口函数中是事件解绑的入口函数
        $(function () {

            /**
             * 事件解绑的两种方式 （非事件委托的方式与事件委托的方式）
             * */

            //第一种事件解绑的方式  非事件委托的方式
            //注意：bind事件绑定方式存在bug  例如dbclick无法解除,
            // 必须使用全部解绑的方式：$("div").unbind();才能够解绑。
            //解除该元素的指定事件
//            $("div").unbind("dbclick click");
            //解除该元素的全部事件
//            $("div").unbind();
//            $("div").off();

            //第二种事件解绑的方式 事件委托的方式
            // 可以解除 指定父容器给子容器的delegate和on事件绑定
            //解除指定元素的指定的事件
//            $(document).undelegate("div", "click dbclick");
//            $(document).off("click dbclick", "div");

            //解除指定元素的全部事件
//            $(document).off("","div");
        })

    </script>
</head>
<body>
<button>添加一个div</button>
<div></div>
</body>
</html>

10.事件触发的三种方式
◆事件触发的第一种方式其实就是简单事件绑定时方法不要参数，如

$(".box").click();
$(".box").dbclick();

，这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现。

◆事件触发的第二种方式使用

$(".box").trigger("click dbclick");

，可以同时触发多个事件，其实也可以传递叫data的数据进去，但是不常用，因为on绑定事件的方式已经传递了data，这种方式会触发浏览器的默认行为，如超链接的点击事件会进行默认跳转。

◆事件触发的第三种方式使用

$(".box").triggerHandler("click dbclick");

，其实和第二种触发方式相比只有一个区别，就是这种方式不会触发浏览器的默认行为，相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，然后超链接不跳转了，文本框不会显示获取焦点后的样式变化的表现，有一个缺点，就是不支持事件委托的方式绑定的事件。

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件触发的三种方式</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            margin: 50px;
        }


    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            $(".box").on("focus", "input", function () {
                console.log(("触发了文本框的获取焦点事件"));

            });

//            $("input").focus(function () {
//                console.log(("触发了文本框的获取焦点事件"));
//            });


            //第一种触发方式
            // 简单事件绑定时方法不要参数
            // 这种方式会触发浏览器的默认行为，例如文本框获取焦点后会有样式的变化之类的表现
            $("button:eq(0)").on("click", {}, function (e) {
                $("input").focus();
            });

            //第二种触发方式
            // 可以同时触发多个事件，
            // 其实也可以传递叫data的数据进去，
            // 但是不常用，
            // 因为on绑定事件的方式已经传递了data，
            // 这种方式会触发浏览器的默认行为，
            // 如超链接的点击事件会进行默认跳转
            $("button:eq(1)").on("click", {}, function (e) {
                $("input").trigger("focus");
            });

            //第三种触发方式
            //其实和第二种触发方式相比只有一个区别，
            // 就是这种方式不会触发浏览器的默认行为
            // 相当于执行完了事件中的方法后会取消默认的行为比如return false之类的，
            // 然后超链接不跳转了，
            // 文本框不会显示获取焦点后的样式变化的表现
            //有一个缺点， 就是不支持事件委托的方式绑定的事件
            $("button:eq(2)").on("click", {}, function (e) {
                $("input").triggerHandler("focus");
            });

        })

    </script>
</head>
<body>
<button>对象.focus()</button>
<button>对象.trigger("focus")</button>
<button>对象.triggerHandler("focus")</button>
<div class="box">
    <input type="text">
</div>
</body>
</html>

11.jQuery事件对象的常用属性

◆常用属性

event.data//传递事件处理程序的额外数据
event.currentTarget//等同与this，当前的dom对象
event.pageX//鼠标相对与页面文档x轴的坐标值
event.pageY//鼠标相对与页面文档y轴的坐标值
event.target//触发事件源，不一定绝对等于this，因为可能会是事件委托
event.stopPropagation()//阻止事件冒泡
event.preventDefault()//阻止默认行为
event.type//事件类型：click，dbclick...
event.which//鼠标的按键类型：左边1 中间2 右边3
event.keyCode//键盘按键代码

★

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的事件对象的常用属性</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: #0f0;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {

            $(".box").on("click", {}, function (event) {
                console.log("传递事件处理程序的额外数据："+event.data);   //传递事件处理程序的额外数据
                console.log("等同与this，当前的dom对象:"+event.currentTarget);  //等同与this，当前的dom对象
                console.log("鼠标相对与页面文档x轴的坐标值:"+event.pageX);  //鼠标相对与页面文档x轴的坐标值
                console.log("鼠标相对与页面文档y轴的坐标值:"+event.pageY);   //鼠标相对与页面文档y轴的坐标值
                console.log("触发事件源，不一定绝对等于this，因为可能会是事件委托:"+event.target);  //触发事件源，不一定绝对等于this，因为可能会是事件委托
                console.log("阻止事件冒泡:"+event.stopPropagation());   //阻止事件冒泡
                console.log("阻止默认行为:"+event.preventDefault());     //阻止默认行为
                console.log("事件类型："+event.type);   //事件类型：click，dbclick...
                console.log("鼠标的按键类型："+event.which);   //鼠标的按键类型：左边1中间2右边3
                console.log("键盘按键代码:"+event.keyCode);   //键盘按键代码
            })
        })
    </script>
</head>
<body>
<div class="box"></div>
</body>
</html>

12.使用jQuery来DIY：表单文本框回车换行并选中、按键后指定区域变色

◆按回车就让文本框的焦点移动到下一个文本框中，使用的是文本框的keydown事件，判断event.keyCode码，如果是回车键的码，那么就将焦点移动到下一个文本框中，使用的是focus()，或者select方法也行，focus只是让下一个文本框获得焦点，而select方法会让下一个文本框获取焦点的同时选中下一个文本框中的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery制作表单文本框回车换行并选中</title>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //需求1：当文本框中按下回车按钮，将自动把广告移动到下一个文本中去
        //需求2：移动到下一个文本框中时，如果下一个文本框不为空，则自动选中

        //思路：设置每一个文本框的按键按下的事件， keydown
        // 判断按键的码，如果是回车，就让下一个文本框获取焦点 focus()
        // 下一个文本框中如果有值，就让下一个文本框中的值被选中 select()

        //步骤：

        $(function () {
            $(":text").on("keydown", {}, function (event) {
//                console.log(event.keyCode);

                //是否是按下了回车键
                if (event.keyCode === 13) {
//                    $(this).next().next().next().focus();//获取焦点
                    $(this).next().next().next().select();//选中
                }
            })
        })
    </script>
</head>
<body>
<input type="text" value="请输入文本1"><br><br>
<input type="text" value="请输入文本2"><br><br>
<input type="text" value="请输入文本3"><br><br>
<input type="text" value="请输入文本4"><br><br>
<input type="text" value="请输入文本5"><br><br>
<input type="text" value="请输入文本6"><br><br>
<input type="text" value="请输入文本7"><br><br>
<input type="text" value="请输入文本8"><br><br>
<input type="text" value="请输入文本9"><br><br>
</body>
</html>

◆按键后指定区域变色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery制作按键变色的效果</title>
</head>
<style>
    .wrap {
        width: 400px;
        height: 400px;
        margin: 100px auto 0;
    }

    .wrap h1 {
        text-align: center;
    }

    .wrap div {
        width: 400px;
        height: 300px;
        background: pink;
        font-size: 30px;
        text-align: center;
        line-height: 300px;
    }
</style>
<script src="jquery-1.11.1.js"></script>
<script>

    //需求：当按下 r键时 在改变div的背景色为红色 并且在span中打印 keyCode
    //思路：使用switch判断 keycode码 ，使用keydown事件  获取event.keyCode

    //步骤：

    $(function () {

        $(document).on("keydown", {}, function (event) {

            switch (event.keyCode) {
                case 80 :
                    setEle("pink", event.keyCode)
                    break;
                case 66:
                    setEle("blue", event.keyCode)
                    break;
                case 79:
                    setEle("orange", event.keyCode)
                    break;
                case 82:
                    setEle("red", event.keyCode)
                    break;
                case 89:
                    setEle("yellow", event.keyCode)
                    break;
                default :
                    alert("系统没有这个颜色！！！");
                    break;
            }
        })

        /**
         * 功能：设置背景色和指示文本
         * @param bgcolor
         * @param text
         */
        function setEle(bgcolor, text) {
            $("#bgChange").css("background-color", bgcolor);
            $("#keyCodeSpan").text(text);
        }
    })
</script>
</head>
<body>
<div class="wrap">
    <h1>按键改变颜色</h1>
    <div id="bgChange">
        keyCode为：
        <span id="keyCodeSpan">80</span>
    </div>
</div>
</body>
</html>

13.链式编程与隐式迭代的原理

◆简单原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链式编程与隐式迭代的原理</title>
</head>
<body>

<script>
    /*
     * 链式编程的原理是，最后都会return this，但是通常情况下，
     *只有设置的操作才能把链式编程延续下去。因为获取操作的时候，
     *或返回获取到的值，所以无法返回this，于是乎，
     *可以使用end()，找到当前链最近的一次断链之前的对象，
     *也就是说，如果没有返回之前那个this，
     *可以通过end()方法获取到之前获取到的那个this。
     */



    /*
     * 隐式遍历是因为内部对jQuery对象进行了循环操作，
     *实际上jQuery对象都是一个伪数组对象，
     *jQuery中有显式遍历的方式，
     *each和map方法，遍历的操作方式和数组的forEach与map方法类似，
     *内部获取到的每一个元素也是原生js的dom对象。
     */

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

◆jQuery来DIY：五角星评价

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery制作五角星评价</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

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

        .comment li {
            float: left;
            cursor: pointer;
        }

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

        //需求1：当鼠标移入到某一个五角星上时，
        // 那个五角星及之前的五角星都会是亮的
        // 那个五角星之后的五角星都是不亮的

        //需求2：当鼠标点击后，
        // 鼠标再移出时，
        // 让原来那个点击的五角星及之前的五角星变亮，
        // 那个点击的五角星之后的不亮

        //思路1：给每一个五角星绑定鼠标移入事件，
        // 鼠标移入时，
        // 让当前五角星是亮的，
        // 然后再让之前的五角星亮
        // 最后让鼠标移入的五角星之后的五角星不亮

        //思路2：给每一个五角星绑定鼠标点击事件，
        // 单击后添加一个类，
        // 然后让所在的类及之前的五角星都是亮的，
        // 最后让这个类之后的五角星都是不亮的。


        //步骤：



        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 实心五角星



            //鼠标移入五角星
            $(".comment>li").on("mouseenter",{}, function () {
                //当前五角星及之前的五角星都变亮，之后的五角星不亮  end()补链
                $(this).text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            })

            //鼠标移出五角星
            $(".comment>li").on("mouseleave",{},function(){
                //当前的五角星不亮，之前的五角星也不亮            end()补链
                $(this).text(wjx_none).prevAll().text(wjx_none).end().nextAll().text(wjx_none);
            })

            //鼠标点击五角星
            $(".comment>li").on("click",{}, function () {
                $(this).addClass("current").siblings().removeClass("current");
            })


            //鼠标移出所有五角星
            $(".comment").on("mouseleave",{}, function () {
                //                                                end()补链
                $(".current").text(wjx_sel).prevAll().text(wjx_sel).end().nextAll().text(wjx_none);
            })
        })
    </script>
</head>
<body>
<ul class="comment">
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
    <li>☆</li>
</ul>
</body>
</html>

◆显式遍历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery的显式遍历</title>
    <style>
        li {
            width: 200px;
            height: 200px;
            margin: 20px;
            float: left;
            list-style: none;
            text-align: center;
            font: 50px/200px "simsun";
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>

        $(function () {

            //jQuery中有显式遍历的方式，each和map方法，
            // 遍历的操作方式和数组的forEach与map方法类似，
            // 内部获取到的每一个元素也是原生js的dom对象
            $("li").each(function (index,element) {
                $(element).css("opacity",(index+1)/10);
                $(element).addClass("index:"+index);
            });
        })
    </script>
</head>
<body>
<ul>
    <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>

14.解决多库共存方法

◆当引入jQuery的多个版本库时，无论使用$还是jQuery，其实都是在使用最后一个引入的jQuery版本库，可以通过打印jQuery的版本号来确定

console.log($.fn.jquery);console.log(jQuery.fn.jquery);

◆如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，可以使用

$.noConflict()

，然后你就可以通过调用$符号使用上一个jQuery版本库了，而当前这一个版本库你可以使用jQuery单词来调用

◆如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，可以使用

var customer=$.noConflict(true);

，然后当前这个jQuery版本库就能够通过调用customer单词来使用了，而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存。

◆jQuery版本库的多版本库的引入都是从低到高的引入，不推荐从高到低的引入。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决jQuery多库共存的问题</title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>

        /*
         *解决多库共存方法
         1.当引入jQuery的多个版本库时，无论使用$还是jQuery，
           其实都是在使用最后一个引入的jQuery版本库，
           可以通过打印jQuery的版本号来确定
           （console.log($.fn.jquery);console.log(jQuery.fn.jquery);）
         2.如果你想放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库的话，
           可以使用$.noConflict()，
           然后你就可以通过调用$符号使用上一个jQuery版本库了，
           而当前这一个版本库你可以使用jQuery单词来调用
         3.如果你想放弃$符号与jQuery单词的使用权而改用其它自定义的单词时，
           可以使用var customer=$.noConflict(true);，
           然后当前这个jQuery版本库就能够通过调用customer单词来使用了，
           而$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，
           但是可以通过连续的这种方式，
           实现真正的n个版本的jQuery版本库共存。
         4.jQuery版本库的多版本库的引入都是从低到高的引入，
           不推荐从高到低的引入。
         */

        //1.打印jQuery的版本号
//        console.log($.fn.jquery);//1.11.1 最后引入的jquery版本库

        //2.放弃$的使用权然后将$符号使用权转交给上一个引入的jQuery版本库
//        $.noConflict();
//        console.log($.fn.jquery);//1.8.2 $符号给 最后一个引入的jQuery版本库的上一个引入的jQuery版本库使用了
//        console.log(jQuery.fn.jquery);//1.11.1  jQuery单词还可以使用 ，可以用来调用最后一个引入的jQuery版本库

        //放弃$符号与jQuery单词的使用权而改用其它自定义的单词
        var customer= $.noConflict(true);
        console.log(customer.fn.jquery);//1.11.1
        console.log($.fn.jquery);//1.8.2
        console.log(jQuery.fn.jquery);//1.8.2

        //说明：$.noConflict(true)这种方式改变使用权的调用符号，让多个jQuery版本库共存
        //例如；$符号与jQuery单词的使用权归上一个引入的jQuery版本库使用了，
        // 但是可以通过连续的这种方式，实现真正的n个版本的jQuery版本库共存

    </script>
</head>
<body>

</body>
</html>

15.JS扩展方法与JQuery扩展方法的区别

◆原生js使用原型的方式是：

object.prototype.functionName=function(){}

◆jQuery使用原型的方式是：

$.fn.functionName=function(){}

，其实都差不多，只不过前者是给对象扩展方法，后者是给伪数组扩展方法。

16.使用jQuery的插件来DIY：动态改变颜色、图片懒加载

◆动态改变颜色：jquery.color.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解决jQuery的animate()无法改变颜色的问题（使用color插件）</title>
    <style type="text/css">
        .box {
            width: 400px;
            height: 400px;
            /*border: 1px solid #000;*/
            background-color: black;
            margin:100px;
            
        }
        
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery.color.js"></script>
    <script>

      $(function () {
          
          $("button:eq(0)").on("click",{}, function () {
              $(".box").animate({backgroundColor:"#f00"},2000);

          })
          $("button:eq(1)").on("click",{}, function () {
              $(".box").animate({backgroundColor:"#0f0"},2000);

          })
          $("button:eq(2)").on("click",{}, function () {
              $(".box").animate({backgroundColor:"#00f"},2000);

          })
          $("button:eq(3)").on("click",{}, function () {
              $(".box").animate({backgroundColor:"#fff"},2000);

          })
          $("button:eq(4)").on("click",{}, function () {
              $(".box").animate({backgroundColor:"#000"},2000);

          })
      })


    </script>
</head>
<body>
<button>变红色</button>
<button>变绿色</button>
<button>变蓝色</button>
<button>变白色</button>
<button>变黑色</button>
<div class="box">
</div>
</body>
</html>

◆图片懒加载：jquery.lazyload.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用jQuery的lazyload插件进行图片懒加载</title>
    <style type="text/css">
        div {
            height: 2000px;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery.lazyload.js"></script>
    <script>
        $(function () {
            //懒加载调用

            //使用插件：1.引包。(必须在jquery之下)   2.通过调用方法实现功能，而参数的不同，功能也可能不同。
            $(".lazy").lazyload();
        })
    </script>
</head>
<body>
<div></div>
<!--<img src="images/02.jpg">-->
<img class="lazy" data-original="images/02.jpg" width="640" height="480">
</body>
</html>

17.自己制作JQuery简单插件：

◆jquery的1.xx版本是支持IE678等低版本的浏览器的，而jquery的2.xx版本是不支持IE678等低版本的浏览器的

◆自己做的jquery插件.js

$(function () {

    /*
    设置颜色
     */
    $.fn.setColor= function () {
        console.log(this);
        $(this).css({"background-color":"#a05"});
    }

    /*
    设置大小
     */
    $.fn.setSize= function (size) {
        $(this).css({width:size,height:size})
    }
})

◆使用自己做的jQuery插件：原理就是先引入JQuery，然后给JQuery扩展方法，最后就是你直接调用自己给JQuery扩展的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用自己做的jQuery插件</title>
    <style type="text/css">

        div {
            width: 300px;
            height: 300px;
            margin:50px;
        }

    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="19.自己做的jquery插件.js"></script>
    <script>
        $(function () {
            //使用自己写的插件中的方法
            $("div").setColor();
            $("div").setSize(500);

            /*
            *原生js使用原型的方式是：
            * object.prototype.functionName=function(){}，
            * jQuery使用原型的方式是：$.fn.functionName=function(){}，
            * 其实都差不多，只不过前者是给对象扩展方法，
            * 后者是给伪数组扩展方法。
             */
        })
    </script>
</head>
<body>
<div></div>
</body>
</html>

jwllwj_2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery使用及基础原理解析相关笔记（三）

1.jQuery的核心–所有版本：https://code.jquery.com/jquery/2.jQuery属性操作：◆设置属性：当前节点.attr(属性名,属性值);◆获取属性：当前节点.attr(属性名);◆移除属性：当前节点.removeAttr(属性名);◆设置属性：当前节点.prop(属性名,属性值);◆获取属性：当前节点.prop(属性名);◆移除属性：当前节点.removePro...
复制链接

扫一扫

专栏目录