jQuery学习第三天

在这里插入图片描述

1.事件注册

语法

 element.事件(function(){})

例如

 $("div").click(function(){})

2. jQuery事件处理

2.1 事件处理on（）绑定事件

语法

 element.on(events,[selector],[data],fn)

events:触发事件，事件之间用逗号隔开
selector:选择选择器元素的后代
date:传给fn的事件对象
fn：事件处理函数

2.1.1 绑定多个事件

 $(“div”).on({
     mouseover: function(){}, 
    mouseout: function(){},
    click: function(){}
});

2.1.2 多个事件，相同处理程序

 $(“div”).on(“mouseover mouseout”, function() {
     $(this).toggleClass(“current”);
 });

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            height: 200px;
            width: 200px;
            background-color: pink;
        }
        
        .current {
            background-color: blue;
        }
    </style>
</head>
 
<body>
    <div class="one"></div>
    <div class="two"></div>
    <script>
        $(function() {
            // 1.事件绑定，绑定多个事件
 
            $(".one").on({
                click: function() {
                    $(this).css({
                        "backgroundColor": "skyblue"
                    })
                },
 
                "mouseout mouseover": function() {
                    $(this).toggleClass("current");
                }
 
            })
 
            // 多个事件，一个回调函数
            $(".two").on({
                "mouseout mouseover": function() {
                    $(this).toggleClass("current");
                }
            })
 
 
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2.2 事件委派

使用on处理事件，给父元素绑定事件，子元素作为触发事件源，子元素的事件冒泡到父元素
使用selector参数：触发的子代事件源

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
 
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <ul>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
    </ul>
 
    <script>
        $(function() {
            // 1.给父元素绑定事件，而子元素为子代触发源，冒泡：事件委派
 
            $("ul").on("click", "li", function(e) {
                // alert("弹框");
                // $(this)为触发源li，而不是绑定事件的ul
                console.log($(this));
 
                $(this).css({
                    color: "red"
                })
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2.3 动态绑定事件

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <ol>
 
    </ol>
 
    <script>
        $(function() {
            // 1.后面创建的元素也可以绑定事件
 
            // 1.普通方法
 
            // $("ol li").click(function() {
            //     alert(111);
            // })
 
            // 2.on事件方法,li需要写在触发源上
 
            // $("ol li").on({
            //     "click": function() {
            //         alert(111);
            //     }
            // })
 
            $("ol").on("click", "li", function() {
                alert(111)
            })
 
            var li1 = $("<li>我是一个li标签</li>");
 
            $("ol").append(li1);
        })
    </script>
</body>
 
</html>

普通方法效果图

在这里插入图片描述

on方法动态绑定

在这里插入图片描述

发布留言案例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li {
            width: 600px;
            height: 30px;
            background-color: pink;
            line-height: 30px;
            padding: 3px;
            margin: 10px;
        }
        
        a {
            float: right;
        }
    </style>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <input type="text" placeholder="请输入留言"><button>发布</button>
    <ul>
 
    </ul>
 
    <script>
        $("button").on("click", function() {
            if ($("input").val() == "") {
                alert("输入不能为空");
            } else {
                // 添加li标签
                var li = $("<li>" + $("input").val() + "<a href='#'>删除</a></li>");
                $("ul").prepend(li);
            }
        })
 
        // 动态绑定事件
        $("ul").on("click", "li a", function() {
            $(this).parent("li").remove();
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2.4 off（）解绑事件

off()方法可以移除通过on（）方法添加的事件处理程序
解绑所有事件

 $("div").off()

解绑某个事件

 $("p").off("click")

解绑事件委托

 $("ul").off("click","li")

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
    <div class="one"></div>
    <div class="two"></div>
    <ul>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
        <li>我是一个li标签</li>
    </ul>
 
    <script>
        $(function() {
            // 第一个div绑定事件
            $(".one").on({
                    click: function() {
                        console.log("one被点击了");
                    },
 
                    mouseover: function() {
                        console.log("鼠标移入one中");
                    }
                })
                // 第二个div绑定事件
            $(".two").on({
                    click: function() {
                        console.log("two被点击了");
                    },
 
                    mouseover: function() {
                        console.log("鼠标移入two中");
                    }
                })
                // 事件委托
            $("ul").on("click", "li", function() {
                alert("弹框");
            })
 
            // 移除第一个div的所有事件绑定
 
            $(".one").off();
 
            // 移除第二个div标签的某个事件绑定
 
            $(".two").off("mouseover");
 
            // 移除ul的事件委托
 
            $("ul").off("click", "li");
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

one 绑定事件，只触发一次，之后不触发

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div>我是一个div</div>
    <script>
        $(function() {
            // one绑定事件，只触发一次
 
            $("div").one("click", function() {
                alert("one");
            })
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

2.5 自动触发事件

元素.事件()，会触发默认行为

 element.click()

元素.trigger(“事件类型”),会触发默认行为

 element.trigger("type")

元素.triggerHander(“事件类型”),不会触发默认行为

 element.triggerHander("focus")

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <input type="text">
    <script>
        $(function() {
 
            // 绑定事件
            $("input").on("focus", function() {
 
                    $(this).val("hello");
                })
                //  1.element.focus()，// 值变化后有光标闪烁
                // $("input").focus();
 
            // 2.element.trigger(type),值变化后也有闪烁
 
            $("input").trigger("focus");
 
            // 3.element.triggerHandle(type)，阻止默认行为（光标闪烁）
            // $("input").triggerHandler("focus");
 
 
        })
    </script>
</body>
 
</html>

有默认行为

在这里插入图片描述

无默认行为

在这里插入图片描述

3.jQuery事件对象

事件被触发，就会有事件对象

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
 
<body>
    <div></div>
    <script>
        $(function() {
            // 事件冒泡
 
            $(document).on("click", function() {
                console.log("点击了doc");
            })
 
            $("div").on("click", function(e) {
                console.log(e);
                console.log("点击了div");
 
                // 阻止冒泡
 
                e.stopPropagation();
            })
        })
    </script>
</body>
 
</html>

冒泡效果图

在这里插入图片描述

阻止冒泡效果图

4. jQuery拷贝对象

将某个对象拷贝（合并）给另外一个对象使用
语法

 $.extend([deep],target,object1,[objectN])

deep:如果设置为true，为深拷贝，如果为false，浅拷贝
target:拷贝到的目标对象
object1:待拷贝到目标对象的对象1
objectN:待拷贝到目标对象的对象N
浅拷贝在拷贝复杂数据类型时，是拷贝地址
深拷贝在拷贝复制数据类型时，是拷贝对象

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <script>
        $(function() {
 
            var target = {
                name: 200,
            };
 
            var target1 = {
                name: 200,
                msg: {
                    id: 100
                }
            }
 
            var object1 = {
                name: 18,
                age: 11,
                msg: {
                    address: "666"
                }
            };
 
            // 浅拷贝
 
            $.extend(target, object1);
 
            console.log(target);
            console.log(object1);
 
 
            // 深拷贝
 
            $.extend(true, target1, object1);
 
            console.log(target1);
            console.log(object1);
 
 
 
 
        })
    </script>
</body>
 
</html>

效果图

在这里插入图片描述

注意点：深拷贝和浅拷贝的区别

在这里插入图片描述

5. 多库共存

问题描述
- jQuery使用 $作为标示符，随着 j Q u e r y 的流行，其他 j s 库也会用这个$ 作为标识符，这样一起使用会引起冲突
解决方案
- 把里面的$符号统一改为jQuery
- jQuery变量规定新的名称:$.noConflict()
```
 var xx=$.noConflict()
```

示例

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery.min.js"></script>
</head>
 
<body>
    <div></div>
    <script>
        // 比如一个其他库，使用$作为函数名称
 
        function $(ele) {
            return document.querySelector(ele);
        }
 
        // 在使用$(jQuery的方法时会报错)
 
        // $.each();
 
        // 1.解决方法1    改成jQuery标识符
        // jQuery.each();
 
        // 解决方法二   自定义标识符
 
        var newName = jQuery.noConflict();
 
        console.log(newName("div"));
    </script>
</body>
 
</html>

冲突效果图

在这里插入图片描述

第一种方法

在这里插入图片描述

第二种方法

在这里插入图片描述

6.jQuery插件

网站
- <jQuery插件库-收集最全最新最好的jQuery插件 (jq22.com)>
- <jQuery之家-自由分享jQuery、html5、css3的插件库 (htmleaf.com)>
使用方法
- 引入css，js
- 复制相应的html结构

6.1 瀑布流插件

下载地址

在这里插入图片描述

 <!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>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <style type="text/css">
        #gallery-wrapper {
            position: relative;
            max-width: 75%;
            width: 75%;
            margin: 50px auto;
        }
        
        img.thumb {
            width: 100%;
            max-width: 100%;
            height: auto;
        }
        
        .white-panel {
            position: absolute;
            background: white;
            border-radius: 5px;
            box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
            padding: 10px;
        }
        
        .white-panel h1 {
            font-size: 1em;
        }
        
        .white-panel h1 a {
            color: #A92733;
        }
        
        .white-panel:hover {
            box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
            margin-top: -5px;
            -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all 0.3s ease-in-out;
            -o-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
        }
    </style>
 
</head>
 
<body>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="images/P_000(1).jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_001.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_002.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_003.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_004.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="images/P_005.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_006.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
        <article class="white-panel">
            <img src="images/P_007.jpg" class="thumb">
            <h1><a href="#">我是轮播图片1</a></h1>
            <p>里面很精彩哦</p>
        </article>
    </section>
 
    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/pinterest_grid.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#gallery-wrapper").pinterest_grid({
                no_columns: 3,
                padding_x: 15,
                padding_y: 10,
                margin_bottom: 50,
                single_column_breakpoint: 700
            });
 
        });
    </script>
 
</body>
 
</html>

效果图

6.2 图片懒加载插件

下载地址

在这里插入图片描述

效果图

7.一个综合案例

仿制todolist
css文件

 body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background: #CDCDCD;
}
 
header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, 0.98);
}
 
section {
    margin: 0 auto;
}
 
label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #DDD;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
 
header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
    border: none
}
 
input:focus {
    outline-width: 0
}
 
h2 {
    position: relative;
}
 
span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #E6E6FA;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}
 
ol,
ul {
    padding: 0;
    list-style: none;
}
 
li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}
 
p {
    margin: 0;
}
 
li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    line-height: 14px;
    text-indent: 5px;
    font-size: 14px;
}
 
li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629A9C;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
}
 
ol li {
    cursor: move;
}
 
ul li {
    border-left: 5px solid #999;
    opacity: 0.5;
}
 
li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #FFF;
    background: #CCC;
    line-height: 14px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}
 
footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}
 
footer a {
    color: #666;
    text-decoration: none;
    color: #999;
}
 
@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}
 
@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

html和css

 <!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>ToDoList—最简单的待办事项列表</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
 
</head>
 
<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">
 
        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">
 
        </ul>
 
 
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
 
    <script>
        $(function() {
 
 
            // 存储到localstroage的对象
            var todolist = [
 
            ];
 
            // 页面刷新时加载
            flesh();
 
            // 今日任务输入框获得焦点，且输入回车保存数据
            $("#title").on("focus", function() {
                $(document).on("keypress", function(e) {
                    if (e.keyCode == 13) {
                        // alert(11);
                        // 创建一个任务的对象
                        var todoObj = {};
                        todoObj.test = $("#title").val();
                        todoObj.done = false;
                        // 任务对象加入数组
                        todolist.push(todoObj);
 
                        console.log(todoObj);
                        // 存储到localstorage
                        localStorage.setItem("todolist", JSON.stringify(todolist));
                        // 刷新页面
                        flesh();
                    }
                })
            })
 
            // 切换正在运行和已经完成的任务
            function mytog(done1, now) {
                var text = now.parent("li").text();
                var num = 0;
                console.log(1);
                /* 
                    可优化的遍历操作
                */
                $.each(todolist, function(index, ele) {
 
                        if (ele.test == text) {
                            num = index;
                            console.log(num);
                            return false;
                            // break;
                        }
 
                    })
                    // console.log(index);
                todolist[num].done = done1;
                // console.log(todolist);
                // now.prop("checked", true);
                localStorage.setItem("todolist", JSON.stringify(todolist));
                flesh();
            }
 
 
            // 删除任务
            function del(now) {
                var text = now.parent("li").text();
                var num = 0;
                console.log(1);
                /* 
                    可优化的遍历操作
                */
                $.each(todolist, function(index, ele) {
 
                        if (ele.test == text) {
                            num = index;
                            console.log(num);
                            return false;
                            // break;
                        }
 
                    })
                    // console.log(index);
                    // 删除数组元素
                todolist.splice(num, 1);
                // todolist[num].done = done1;
                // console.log(todolist);
                localStorage.setItem("todolist", JSON.stringify(todolist));
                flesh();
            }
 
            // 切换完成
            $("ol").on("click", "li input", function() {
                var now = $(this);
                mytog(true, now);
            })
 
            // 切换未完成
            $("ul ").on("click", "li input", function() {
                var now = $(this);
                mytog(false, now);
            })
 
            // 删除操作
            $("ul").on("click", "li a", function() {
                del($(this));
            })
 
            $("ol").on("click", "li a", function() {
                del($(this));
            })
 
 
 
            // 刷新屏幕
            function flesh() {
                if (localStorage.getItem("todolist")) {
                    todolist = JSON.parse(localStorage.getItem("todolist"));
                } else {
                    todolist = [];
                }
 
                var cntTrue = 0;
                var cntFalse = 0;
                $("ol").html("");
                $("ul").html("");
 
                /* 
                
                        这部分可以有更好的方法，给每个创建的li标签中的a标签添加对应对象的索引号
                        可以简化上方的遍历找索引号的操作
                
                */
                $.each(todolist, function(index, ele) {
 
                    if (ele.done == false) {
                        // 创建新的li标签
                        var li = $("<li><input type='checkbox'>" + ele.test + "<a href='#'></a></li>");
                        $("ol").append(li);
                        cntFalse++;
                        $("h2 span#todocount").html(cntFalse);
                    } else if (ele.done == true) {
                        // 创建已经完成的li标签
                        var li = $("<li><input type='checkbox' checked>" + ele.test + "<a href='#'></a></li>");
                        $("ul").append(li);
                        cntTrue++;
                        $("h2 span#donecount").html(cntTrue);
                    }
                })
 
                if (cntTrue == 0) {
                    $("h2 span#donecount").html("");
                }
 
                if (cntFalse == 0) {
                    $("h2 span#todocount").html("");
 
                }
            }
 
 
 
        })
    </script>
 
 
</body>
 
</html>

效果图

在这里插入图片描述

注意点

绑定事件时注意动态绑定，因为li标签的存在时有时无，必须使用on绑定事件
必须要用ul（常驻）绑定事件

 $("ol").on("click", "li input", function() {
                var now = $(this);
                mytog(true, now);
            })

posted @ 2022-03-03 20:34 凌歆阅读(14) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· jQuery学习第一天（下）

· jQuery学习第一天（上）

· day03 - jQuery

· JavaScript库-jQuery

· jQuery 事件对象

公告

昵称：凌歆
园龄： 2年1个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

jQuery学习第三天

jQuery学习第三天

文章目录

1.事件注册

2. jQuery事件处理

2.1 事件处理on（）绑定事件

2.1.1 绑定多个事件

2.1.2 多个事件，相同处理程序

示例

2.2 事件委派

示例

2.3 动态绑定事件

发布留言案例

2.4 off（）解绑事件

示例

one 绑定事件，只触发一次，之后不触发

2.5 自动触发事件

示例

3.jQuery事件对象

示例

4. jQuery拷贝对象

示例

注意点：深拷贝和浅拷贝的区别

5. 多库共存

示例

6.jQuery插件

6.1 瀑布流插件

6.2 图片懒加载插件

7.一个综合案例

注意点

公告

搜索

常用链接

我的标签

随笔分类 (68)

随笔档案 (142)

阅读排行榜

	$(“div”).on({
	mouseover: function(){},
	mouseout: function(){},
	click: function(){}
	});

	$(“div”).on(“mouseover mouseout”, function() {
	$(this).toggleClass(“current”);
	});

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="./jquery.min.js"></script>
	<style>
	div {
	height: 200px;
	width: 200px;
	background-color: pink;
	}

	.current {
	background-color: blue;
	}
	</style>
	</head>

	<body>
	<div class="one"></div>
	<div class="two"></div>
	<script>
	$(function() {
	// 1.事件绑定，绑定多个事件

	$(".one").on({
	click: function() {
	$(this).css({
	"backgroundColor": "skyblue"
	})
	},

	"mouseout mouseover": function() {
	$(this).toggleClass("current");
	}

	})

	// 多个事件，一个回调函数
	$(".two").on({
	"mouseout mouseover": function() {
	$(this).toggleClass("current");
	}
	})


	})
	</script>
	</body>

	</html>

	body {
	margin: 0;
	padding: 0;
	font-size: 16px;
	background: #CDCDCD;
	}

	header {
	height: 50px;
	background: #333;
	background: rgba(47, 47, 47, 0.98);
	}

	section {
	margin: 0 auto;
	}

	label {
	float: left;
	width: 100px;
	line-height: 50px;
	color: #DDD;
	font-size: 24px;
	cursor: pointer;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	header input {
	float: right;
	width: 60%;
	height: 24px;
	margin-top: 12px;
	text-indent: 10px;
	border-radius: 5px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
	border: none
	}

	input:focus {
	outline-width: 0
	}

	h2 {
	position: relative;
	}

	span {
	position: absolute;
	top: 2px;
	right: 5px;
	display: inline-block;
	padding: 0 5px;
	height: 20px;
	border-radius: 20px;
	background: #E6E6FA;
	line-height: 22px;
	text-align: center;
	color: #666;
	font-size: 14px;
	}

	ol,
	ul {
	padding: 0;
	list-style: none;
	}

	li input {
	position: absolute;
	top: 2px;
	left: 10px;
	width: 22px;
	height: 22px;
	cursor: pointer;
	}

	p {
	margin: 0;
	}

	li p input {
	top: 3px;
	left: 40px;
	width: 70%;
	height: 20px;
	line-height: 14px;
	text-indent: 5px;
	font-size: 14px;
	}

	li {
	height: 32px;
	line-height: 32px;
	background: #fff;
	position: relative;
	margin-bottom: 10px;
	padding: 0 45px;
	border-radius: 3px;
	border-left: 5px solid #629A9C;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
	}

	ol li {
	cursor: move;
	}

	ul li {
	border-left: 5px solid #999;
	opacity: 0.5;
	}

	li a {
	position: absolute;
	top: 2px;
	right: 5px;
	display: inline-block;
	width: 14px;
	height: 12px;
	border-radius: 14px;
	border: 6px double #FFF;
	background: #CCC;
	line-height: 14px;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	font-size: 14px;
	cursor: pointer;
	}

	footer {
	color: #666;
	font-size: 14px;
	text-align: center;
	}

	footer a {
	color: #666;
	text-decoration: none;
	color: #999;
	}

	@media screen and (max-device-width: 620px) {
	section {
	width: 96%;
	padding: 0 2%;
	}
	}

	@media screen and (min-width: 620px) {
	section {
	width: 600px;
	padding: 0 10px;
	}
	}

	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>ToDoList—最简单的待办事项列表</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.min.js"></script>

	</head>

	<body>
	<header>
	<section>
	<label for="title">ToDoList</label>
	<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
	</section>
	</header>
	<section>
	<h2>正在进行 <span id="todocount"></span></h2>
	<ol id="todolist" class="demo-box">

	</ol>
	<h2>已经完成 <span id="donecount"></span></h2>
	<ul id="donelist">

	</ul>


	</section>
	<footer>
	Copyright © 2014 todolist.cn
	</footer>

	<script>
	$(function() {


	// 存储到localstroage的对象
	var todolist = [

	];

	// 页面刷新时加载
	flesh();

	// 今日任务输入框获得焦点，且输入回车保存数据
	$("#title").on("focus", function() {
	$(document).on("keypress", function(e) {
	if (e.keyCode == 13) {
	// alert(11);
	// 创建一个任务的对象
	var todoObj = {};
	todoObj.test = $("#title").val();
	todoObj.done = false;
	// 任务对象加入数组
	todolist.push(todoObj);

	console.log(todoObj);
	// 存储到localstorage
	localStorage.setItem("todolist", JSON.stringify(todolist));
	// 刷新页面
	flesh();
	}
	})
	})

	// 切换正在运行和已经完成的任务
	function mytog(done1, now) {
	var text = now.parent("li").text();
	var num = 0;
	console.log(1);
	/*
	可优化的遍历操作
	*/
	$.each(todolist, function(index, ele) {

	if (ele.test == text) {
	num = index;
	console.log(num);
	return false;
	// break;
	}

	})
	// console.log(index);
	todolist[num].done = done1;
	// console.log(todolist);
	// now.prop("checked", true);
	localStorage.setItem("todolist", JSON.stringify(todolist));
	flesh();
	}


	// 删除任务
	function del(now) {
	var text = now.parent("li").text();
	var num = 0;
	console.log(1);
	/*
	可优化的遍历操作
	*/
	$.each(todolist, function(index, ele) {

	if (ele.test == text) {
	num = index;
	console.log(num);
	return false;
	// break;
	}

	})
	// console.log(index);
	// 删除数组元素
	todolist.splice(num, 1);
	// todolist[num].done = done1;
	// console.log(todolist);
	localStorage.setItem("todolist", JSON.stringify(todolist));
	flesh();
	}

	// 切换完成
	$("ol").on("click", "li input", function() {
	var now = $(this);
	mytog(true, now);
	})

	// 切换未完成
	$("ul ").on("click", "li input", function() {
	var now = $(this);
	mytog(false, now);
	})

	// 删除操作
	$("ul").on("click", "li a", function() {
	del($(this));
	})

	$("ol").on("click", "li a", function() {
	del($(this));
	})



	// 刷新屏幕
	function flesh() {
	if (localStorage.getItem("todolist")) {
	todolist = JSON.parse(localStorage.getItem("todolist"));
	} else {
	todolist = [];
	}

	var cntTrue = 0;
	var cntFalse = 0;
	$("ol").html("");
	$("ul").html("");

	/*

	这部分可以有更好的方法，给每个创建的li标签中的a标签添加对应对象的索引号
	可以简化上方的遍历找索引号的操作

	*/
	$.each(todolist, function(index, ele) {

	if (ele.done == false) {
	// 创建新的li标签
	var li = $("<li><input type='checkbox'>" + ele.test + "<a href='#'></a></li>");
	$("ol").append(li);
	cntFalse++;
	$("h2 span#todocount").html(cntFalse);
	} else if (ele.done == true) {
	// 创建已经完成的li标签
	var li = $("<li><input type='checkbox' checked>" + ele.test + "<a href='#'></a></li>");
	$("ul").append(li);
	cntTrue++;
	$("h2 span#donecount").html(cntTrue);
	}
	})

	if (cntTrue == 0) {
	$("h2 span#donecount").html("");
	}

	if (cntFalse == 0) {
	$("h2 span#todocount").html("");

	}
	}



	})
	</script>


	</body>

	</html>