jQuery事件学习笔记1

绿色
紫色
橙色

---

1.四种常见的注册方式

1.jQuery事件注册

1. 单个事件注册 需要分开写

$("div").click(function() {
                 $(this).css("background", "purple");
             });
             $("div").mouseenter(function() {
                 $(this).css("background", "skyblue");
             });

2. 事件处理 on 在匹配元素上绑定一个或者多个事件的处理函数 使用对象的方式

$("div").on({
                mouseenter: function() {
                    $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "orange");
                }
            }) 

2.2事件on另外一种写法

$("div").on("mouseenter mouseleave", function() {
                // alert(11);
                $(this).toggleClass("current");
            })

---

2.自动触发事件

• 元素.事件会触发元素默认行为

$("div").click();

• 元素.trigger("事件")会触发元素默认行为

$("input").trigger("focus");
$("div").trigger("click");

• 元素.triggerHandler("事件") 不会触发元素的默认行为

$("div").triggerHandler("click");
$("input").on("focus", function() {
                $(this).val("ninhao ");
            });
            $("input").triggerHandler("focus");

3.jQuery事件对象

• 与之前的webAPI 一样可参考webAPI

<script>
        $(function() {
            $(document).on("click", function() {
                console.log("点击了document");
            })
            $("div").on("click", function(event) {
                // console.log(event);
                console.log("点击了div");
                // 阻止冒泡
                event.stopPropagation();
            });
        })
    </script>

2.on绑定事件优势

• 可以绑定多个事件
• on可以实现事件委托（委派）
• on 可以给未来动态创建的元素绑定事件 之前的传统的单个事件不能实现给未来元素绑定事件

 $("ul").on("click", "li", function() {
                // 绑定事件是ul  触发事件是li
                // alert(1);
            });

            //on 可以给未来动态创建的元素绑定事件 之前的传统的单个事件不能实现给未来元素绑定事件
            $("ol").on("click", "li", function() {
                alert(22);
            });
            //创建ol里面的li
            var li = $("<li>我是未来的li</li>");
            $("ol").append(li);

发布微博简单案例

• 点击发布按钮增加元素li并且滑动显示
• 采用on的方式给元素li里面的a(删除)按钮绑定事件

<script>
        $(function() {
            // 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
            $(".btn").on("click", function() {
                    var li = $("<li></li>");
                    //点击发布按钮 增加ul里面的li 
                    li.html($(".txt").val() + "<a href='javascript:;'>删除</a>");
                    $("ul").prepend(li);
                    //让输入的内容滑动出来
                    li.slideDown();
                    //输入完内容之后让留言框为空
                    $(".txt").val("");
                })
                // 2.点击的删除按钮，可以删除当前的微博留言li
                /* $("ul a").click(function() {//此时的click不能给动态创建的a添加事件
                    alert(11);
                }) */
                //所以使用on给动态创建的元素绑定事件
            $("ul").on("click", "a", function() {
                // alert(22);
                $(this).parent().slideUp(function() {
                    $(this).remove();
                });
            });
        });
    </script>

---

3.jQuery事件委派的优点以及方式

---

4.绑定事件和解绑事件

on绑定事件

• 事件只触发一次用one绑定事件

$("p").one("click", function() {
                alert('p');
            })

off解绑事件

• 解除div身上的所有事件$("div").off();
• 解除div身上的click事件$("div").off("click");
• 解绑事件委托$("ul").off("click", "li");

---

jQuery 其他方法

jQuery拷贝对象

• 想要把某个对象拷贝给另外一个对象使用，使用$.extend();
• 把obj拷贝给targetObj targetObj本身没有内容

var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj);
            console.log(targetObj);

• 把obj拷贝给targetObj targetObj本身有内容,obj会覆盖原来的targetObj内容

var targetObj = {
                id: 0
            };
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj);
            console.log(targetObj)

• 把obj拷贝给targetObj obj有什么 targetObj 就会得到什么
• 浅拷贝 把原来的复杂数据类型的地址拷贝给了目标对象，修改目标对象会影响被拷贝对象。

var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
  $.extend(targetObj, obj);
            console.log(targetObj);
             targetObj.msg.age = 20;
            console.log(targetObj); //20
            console.log(obj); //20

• 深拷贝 完全克隆数据 不会覆盖原来的数据会保留targetObj里面的sex:‘男’,即不冲突的属性会合并到一起

var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var obj = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
$.extend(true, targetObj, obj);
console.log(targetObj);
// 修改被拷贝的对象
targetObj.msg.age = 20;
console.log(targetObj); //20
 console.log(obj); //18

多库共存

• jQuery使用$作为标志符，随着jQuery的流行，其他js库也会用$作为标识符，这样一起使用就会产生冲突；
• 客观需求 ：需要一个解决方案，让JQuery和其他js库不冲突，可以同时存在叫做多库共存
• 解决方案： 1.把里面的$统一用jQuery 2.允许用户自己更改名称

<script>
        $(function() {
            /* function $(ele) {
                return document.querySelector(ele);
            } */
            console.log($("div"));
            // 1.如果是$冲突就使用jQuery 
            // jQuery.each();
            // 2.让用户自己定义
            var suib = jQuery.noConflict();
            suib("span");
            console.log(suib("span"));
        })
    </script>

jQuery插件

jQuery功能有限，借助jQuery插件完成；
jQuery插件网址： 1.jQuery插件库：http://www.jq22.com/
2.jQuery之家 : http://www.htmleaf.com/

1.瀑布流

jQuery之间瀑布流案例：

1. 引入相关文件。(jQuery文件和插件文件)
2. 复制相关的html,css,js
   

2.图片懒加载

1.只加载显示用户看到的页面图片，当页面滑动到可视区域，再显示图片，可以减轻服务器加载负载

快速替换代码：ctrl+h

2.使用jQuery插件库Easyla<script src="js/EasyLazyload.min.js"></script>这句话必须放到DOM元素最后面
3.全屏滚动 fullpage.js
全屏滚动网站：http://github.com/alvarotrigo/fullPage.js
中文翻译网址:http://www.dowebok.com/demo/2014/77/
4.bootstrap JS 插件
需要拷贝须有bootstrap文件；
模态框有两种写法参考官方文档，使用id关联，
掌握bootstrap使用

案例toDoList

1. 2020.12.03 jQuery day03 18

案例第一步：

toDoList代码
jQuery元素尺寸，位置操作

(学习笔记记录，可能会有知识上的误解欢迎大佬指出错误嘻嘻🤭)

• 2020.12.05 jQuery day03 36