Jquery高级

最新推荐文章于 2024-04-27 18:00:34 发布

troysps

最新推荐文章于 2024-04-27 18:00:34 发布

阅读量877

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/troysps/article/details/80296953

版权

Jquery 高级

什么是事件:

事件是可以被 JavaScript 侦测到的行为
比如:
JavaScript 创建动态页面。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。
比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。

jquery事件

focus事件 获取焦点事件 一般不在这个事件上绑定函数 一般作为让输入框自动
或焦点的方式使用 写法 $input.focus()
mouseover 和 mouseout 鼠标移入移出事件 移入子元素会触发
mouseenter和mouseleave 鼠标移入移出事件 移入子元素不会触发
hover事件用法
hover() 同时为mouseenter和mouseleave事件指定处理函数
$input.hover(function(){mouseenter的操作}, function(){mouseleave的操作})

focus 焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $input = $("#input01");

            // 一般不再focus绑定函数
            // $input.focus(function(){
            //     alert("获得焦点");
            // })

            // focus 一般用在让input输入框默认获取焦点
            $input.focus();

            // 让输入框默认获得焦点
            $input.blur(function () { 
                alert("来啊 输入啊 憋走")
             });
         })
    </script>
</head>
<body>
    <input type="text" id="input01">
</body>
</html>

jquery 事件冒泡

原理:元素发生事件后 会将这个事件传递给父级 父级还会网上传递 一直传递到最顶级标签
一般最顶级标签写成$document

允许多个操作被集中处理 (把事件处理器添加到一个父级元素中) 避免把事件处理器添加到多个子级元素上
它还可以让你在对象层的不同级别捕获事件

发生事件和绑定函数是两码事
例如标签 .grandfather>.father>.son
son标签发生事件(绑定函数 发生事件) -- 传递到father标签(没有发生函数) -- .grandfather(绑定函数 发生事件) 
结果 son发生 father发生(但是没有表现) grandfather发生

阻止事件冒泡:
    return false；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .grandfather{
            width: 300px;
            height: 300px;
            background: orange;
            position: relative;
        }
        .father{
            width: 100px;
            height: 100px;
            background: red;

        }
        .son{
            width: 50px;
            height: 50px;
            background: green;
            position: absolute;
            left: 0px;
            top: 400px;
        }
    </style>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $son = $(".son");

            $(".son").click(function(){
                alert("1");
                // 阻止事件冒泡的简略写法
                return false;
            });

            $(".father").click(function(event){
                alert("2");
                // 阻止事件冒泡的完整写法
                event.stopPropagation();
            });

            $(".grandfather").click(function(){
                alert("3");
            });


            // 事件冒泡 不断的传递给父级
            $(document).click(function () { 
                alert("4");
             });

         })
    </script>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son"></div>
        </div>
    </div>
</body>
</html>

练习使用事件冒泡写弹框

了解事件冒泡的传递机制
了解事件阻止的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/main.css">
    <title>Document</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
           // 标签绑定点击事件 点击 -- 展示
            $("#btn01").click(function () { 
                $(".pop_main").show();
                return false;
             });
            // 标签绑定点击事件 点击 -- 隐藏
            $("#shutoff").click(function () { 
                $(".pop_main").hide();
             });
        // 标签绑定点击事件 点击 -- 隐藏
            $(document).click(function () { 
                setTimeout(function () { 
                    $(".pop_main").hide();
                 }, 0)
             });
             // 标签绑定点击事件 点击 -- 中断冒泡
            $(".pop_con").click(function () { 
                return false;
             })


        })
    </script>
</head>
<body>
    <input type="button" value="弹出弹框" id="btn01">
    <div class="pop_main" id="pop">
        <div class="pop_con">
            <div class="pop_title">
                <h3>系统提示</h3>
                <a href="#" id="shutoff">×</a>
            </div>
            <div class="pop_detail">
                <p class="pop_text">亲！请关注近期的优惠活动！</p>
            </div>
            <div class="pop_footer">

            </div>
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>

jquery事件委托

原理:利用事件冒泡的特性 将事件绑定在父级上 子级发生的事件都会冒泡到父级 
父级通过判断子级的特征 给与特定的操作
机制: 父级绑定事件 子级一旦发生事件 首先找到父级 父级执行事件 并且返回到子级
$(this) 指的是当前冒泡的子级 
写法:$ul.delegate("li", "click", function(){  $(this)  })
利用冒泡的原理 将事件加到父级 通过判断事件来源的子集 执行相应得操作
事件委托可以极大的减少事件绑定次数 提高性能
让新加入的子元素也可以拥有相同的操作

delegate
和原生方法相比 性能高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $li = $(".list li")
            var $ul = $(".list")
            alert($li.length)

            /*
            $li.click(function () { 
                $(this).css({'background':'red'})

             });
             */

            //  上面的写法性能不高
            $ul.delegate("li", "click", function () { 
                // $(this) 指的是发生事件冒泡的子级
                $(this).css({"background":"red"})
             })




         })
    </script>
</head>
<body>
    <ul class="list">
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
        <li>fuck</li>
    </ul>
</body>
</html>

DOM操作

html方法的性能高
也叫节点操作 改变html的标签结构
    -移动现有标签的位置
    -将新创建的标签插入到现有的标签中

移动或者插入标签的方法
    append appendTo    主语和宾语要搞清楚
    prepend prependTo
    after insertAfter
    before insertBefore
删除标签
    remove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.min.js"></script>
    <script>
        $(function () { 
            var $h01 = $("#h01");
            var $div = $(".div1");
            var $h02 = $("#h02");
            var $div2 = $("#div2");

            // append 当前元素里面的后面要放另外一个元素
            $div.append($h01);

            // appendTo 当前元素要放到另外一个元素里面的后面
            $h01.appendTo($div);

            // prepend 当前元素的里面的前面要放另外一个元素
            $div.prepend($h02);

            // prependTo 当前元素要放到另外一个元素的里面的前面
            $h02.prependTo($div);

            // after 当前元素的外面的后面要放另外一个元素
            $div.after($div2);

            // insertAfter 当前元素要放到另外一个元素的外面的后面
            $div2.insertAfter($div);


            // 创建新标签 
            var $div3 = $("<div>");  // 创建一个新的div
            var $div4 = $("<div>新创建的div</div>");
            // before 当前元素的外面的前面要放另一个元素
            $div.before($div3);

            // insertBefore 当前元素要放到另外一个元素的外面的前面
            $div3.insertBefore($div);
            $div4.insertBefore($div);


            // remove 删除标签
            $("#div1").remove();

            // 删除标签
            $div3.remove()

         })
    </script>
</head>
<body>
    <h3 id="h01">这是div外面的h3标签</h3>
    <h1 id="h02">这是div外面的h1标签</h1>
    <div id="div2">这是div上面的div</div>
    <div class="div1">
        <h2>这是div里面的h2
        </h2>
        <p>这是div里面的p</p>
    </div>
</body>
</html>

用事件委托编写可以增删改的list

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style type="text/css">
        .list_con{
            width:600px;
            margin:50px auto 0;
        }
        .inputtxt{
            width:550px;
            height:30px;
            border:1px solid #ccc;
            padding:0px;
            text-indent:10px;           
        }
        .inputbtn{
            width:40px;
            height:32px;
            padding:0px;
            border:1px solid #ccc;
        }
        .list{
            margin:0;
            padding:0;
            list-style:none;
            margin-top:20px;
        }
        .list li{
            height:40px;
            line-height:40px;
            border-bottom:1px solid #ccc;
        }

        .list li span{
            float:left;
        }

        .list li a{
            float:right;
            text-decoration:none;
            margin:0 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () { 
            var $txt = $("#txt1");
            var $btn = $("#btn1");
            var $ul = $("#list");


            $btn.click(function () { 
                var sVal = $txt.val();
                $txt.val("");


                if(sVal==''){
                    alert("请输入计划内容");
                    return;
                }

                var $li = $('<li><span>'+ sVal + '</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>')

                $ul.append($li)

                 })

                // 通过事件委托方式来处理每个a标签的事件
                $ul.delegate("a", "click", function(){
                    var sHandler = $(this).prop("class");

                    // alert(sHandler);
                    if(sHandler=='del'){
                        $(this).parent().remove();
                    }
                    if(sHandler=='up'){
                        // alert($(this).parent().prev().length())
                        if($(this).parent().prev().length()==0){
                            alert('到顶了');
                            return;
                        }
                        $(this).parent().insertBefore($(this).parent().prev())
                    }
                    if(sHandler=='down'){
                        if($(this).parent().next().length==0){
                            alert("到底了");
                            return;
                        }
                        $(this).parent().insertAfter($(this).parent().next());
                    }
                })


         })

    </script>   
</head>
<body>

    <div class="list_con">
    <h2>To do list</h2>
        <input type="text" name="" id="txt1" class="inputtxt">
        <input type="button" name="" value="增加" id="btn1" class="inputbtn">

        <ul id="list" class="list">

            <li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
            <li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

        </ul>

    </div>
</body>
</html>

Javascript对象

javascript中的基本数据类型是一种复合值，它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。即属性的无序集合。

可以理解为键值对 
创建对象的两种方法

第一种
    var person1 = new Object();
    顶级object对象 创建对象

第二种
    直接量的方式创建对象
    ver person2 = {
        name:'rose',
        age:18;
        sayName:function(){
            alert("my name is" + this.name);
            }
        }
    调用属性和方法
    alert(person2.age);
    person2.sayName();

\\ 创建对象的两种方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 通过对象直接量来创建对象
        var person = {
            name:"tom",
            age:18,
            showname:function(){
                alert('我的名字是:'+this.name);
                return;

            },
            showage: function(){
                alert('我的年龄是:'+this.age);
                return ;
            }
        }

        // 调用对象的属性和方法 
        alert(person.name);
        alert(person.showname());
        alert(person.showage())
    </script>
</head>
<body>

</body>
</html>

json对象

JSON 语法是 JavaScript 对象表示法语法的子集。
同样是一种数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        var data01 = {
            "name":"tom",
            "age":18,

        }
        /*
        alert(data01.age);
        alert(data01.name);
        */
        var data02 = [
            {"name": "jack", "age":19},
            {"name": "rose", "age":23}
        ]
        alert(data02[0].name)
    </script>
</head>
<body>

</body>
</html>

ajax

解决什么问题
--JavaScript 安全性考虑不能直接读写数据库
ajax 
    通过前后台配合的技术
    jquery封装为一个函数$.ajax()
    可以直接用这个函数来执行ajax请求
    需要在服务器环境下运行

--相当于中间件 
ajax需要在服务器环境下运行。
$.ajax使用方法

常用参数：
1、url 请求地址
2、type 请求方式，默认是'GET'，常用的还有'POST'
3、dataType 设置返回的数据格式，常用的是'json'格式，也可以设置为'html'
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步，默认值是'true'，表示异步

与ajax相关的概念：
同步和异步

现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序中的同步指的是现实生活中的异步。
局部刷新和无刷新

ajax可以实现局部刷新，也叫做无刷新，无刷新指的是整个页面不刷新，只是局部刷新，ajax可以自己发送http请求，不用通过浏览器的地址栏，所以页面整体不会刷新，ajax获取到后台数据，更新页面显示数据的部分，就做到了页面局部刷新。
数据接口

数据接口是后台程序提供的，它是一个url地址，访问这个地址，会对数据进行增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。

troysps

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery高级

Jquery 高级什么是事件:事件是可以被 JavaScript 侦测到的行为比如:JavaScript 创建动态页面。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。jquery事件focus事件获取焦点事件一般不...
复制链接

扫一扫