jQuery-UI-3

01-jquery属性操作.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .aaa {
            border: 1px solid red;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //获取元素，绑定属性
            var jqinp = $("input").eq(0);
            var jqinp2 = $("input:checkbox");
            var jqbtn = $("button");

            jqbtn.click(function () {
                //绑定到jquery的衣服上，标签上没有
//                jqinp.title = 111;
//                console.log(jqinp.title);

                //绑定到标签上
//                jqinp.attr("title",111);
//                console.log(jqinp.attr("title"));

                jqinp.attr("aaa",111);
                console.log(jqinp.attr("aaa"));

                //两个参数是给属性赋值，单个参数是获取属性值。
                jqinp.attr("class","aaa");
                console.log(jqinp.attr("class"));

                jqinp.removeAttr("class");
                console.log(jqinp.attr("class"));

                //form中的特殊属性，用prop
                jqinp2.prop("checked",true);
//                jqinp2.attr("checked",true);//一次性的

            });
        })
    </script>
</head>
<body>
<button>绑定</button>
<input type="text"/>
<input type="checkbox"/>

</body>
</html>

02-表格全选反选（prop+checkbox选择器+checked选择器）.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></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>
        $(function () {
            //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
            //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定


            //需求1：点击上面的多选按钮，下面的所有多选按钮都和上面的一致
            //步骤：绑定事件，直接让下面的所有按钮和上面的按钮属性值一模一样
            $("#j_cbAll").click(function () {
                //直接让下面的所有按钮和上面的按钮属性值一模一样
                $("#j_tb input:checkbox").prop("checked",$(this).prop("checked"));
            });

            //需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定//需求2：点击下面的多选按钮，判断下面的所有多选按钮都是否全部被选定只有全部被选定上面的才被选定
            $("#j_tb input:checkbox").click(function () {
                //判断，只有所有都背选定，上面的才被选定
                //技术点：带有checked属性的标签和checkbox个数一样多的时候
                if($("#j_tb input:checkbox").length === $("#j_tb input:checked").length){
                    //只有所有的都有checked属性，上面的才被选定
                    $("#j_cbAll").prop("checked",true);
                }else{
                    $("#j_cbAll").prop("checked",false);
                }
            });


        })
    </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>

03-val()和text()和html().html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(document).ready(function () {
            //val();   获取标签中的value属性的值。带有参数是赋值(类比js中的value属性)
            alert($("input").val());
            $("input").val("我是刚刚赋值的input内容")

            //text();  获取双闭合标签中的文本值。（不识别标签）(类比innerText)
            alert($("div").text());
            $("div").text("<li>我是text赋值的</li>")

            //html();  获取双闭合标签中的文本值。（识别标签）(类比innerHTML)
            alert($("div").html());
            $("div").html("<li>我是html赋值的</li>")
        })
    </script>
</head>
<body>
<input type="text" value="我是input"/>
<div>
    <li>你好</li>
</div>
</body>
</html>

05-height()和width().html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding-left: 10px;
            border: 10px solid #000;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //获取宽度
            $("button").eq(0).click(function () {
                //换个offsetHeiht不一样。只获取高度
                alert($(".box").width());
            })
            //获取宽度
            $("button").eq(1).click(function () {
                //设置宽度
                $(".box").width(200);
            })


            //获取高度
            $("button").eq(2).click(function () {
                //换个offsetHeiht不一样。只获取高度
                alert($(".box").height());
            })
            //获取高度
            $("button").eq(3).click(function () {
                //设置高度
                $(".box").height(200);
            })

        })
    </script>
</head>
<body>
<button>获取宽度</button>
<button>设置宽度</button>
<button>获取高度</button>
<button>设置高度</button>
<div class="box"></div>
</body>
</html>

06-坐标值操作.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            height: 5000px;
        }
        .box1 {
            width: 300px;
            height: 300px;
            position: relative;
            margin: 10px;
            overflow: auto;
            background-color: pink;
        }
        .box2 {
            width: 200px;
            height: 400px;
            position: absolute;
            top: 50px;
            left: 50px;
            background-color: yellow;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //距离页面最顶端或者最左侧的距离和有没有定位没有关系
            $("button").eq(0).click(function () {
                alert($(".box2").offset().top);
            })

            //距离页面最顶端或者最左侧的距离和有没有定位没有关系
            $("button").eq(1).click(function () {
                $(".box2").offset({"left":1000,"top":1000});
            })

            //距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
            $("button").eq(2).click(function () {
                alert($(".box2").position().top);
            })

            //距离父系盒子中带有定位的盒子的距离(获取的就是定位值，和margin/padding无关)
            $("button").eq(3).click(function () {
                $(".box2").position().top = "100px";
            })

            //获取被选取的头部
            $("button").eq(4).click(function () {
                alert($(window).scrollTop());
            })

            //获取被选取的头部
            $("button").eq(5).click(function () {
                $(window).scrollTop(100);
            })

        })
    </script>

</head>
<body>


<div class="box1">
    <div class="box2"></div>
</div>

<button>offset().top获取</button>
<button>offset().top设置</button>
<button>position().top获取</button>
<button>position().top设置</button>
<button>scrollTop()</button>
<button>scrollTop()</button>

</body>
</html>

07-事件绑定.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //这种绑定事件的方法是不会层叠的。
//        $(document).click(function () {
//            alert(1);
//        });
//        $(document).click(function () {
//            alert(2);
//        });

        //第二种绑定：bind
//        $(document).bind("click mouseenter", function () {
//            alert(1);
//        })
//        $(document).bind("click mouseenter", function () {
//            alert(2);
//        })

        //第三种
//        $(document).delegate(".box","click mouseenter", function () {
//            alert(1);
//        })

        //第四种(重点)
//        $(document).on("click mouseenter",".box",{"name":111}, function (event) {
//            alert(event.data.name);
//        });

//        $(document).on("click",".box", function () {
//           alert(1);
//        });


    </script>

</head>
<body>
<div class="box" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>

08-事件解绑.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>

        //这种绑定事件的方法是不会层叠的。
//        $(document).click(function () {
//            alert(1);
//        });
//        $(document).mouseenter(function () {
//            alert(2);
//        });

//          解绑
//        $(document).unbind("mouseenter");

        //第二种绑定：bind
//        $(document).bind("click mouseenter", function () {
//            alert(1);
//        })
//        $(document).bind("click mouseenter", function () {
//            alert(2);
//        })

        //第三种
//        $(document).delegate(".box","click mouseenter", fn)
//        $(document).delegate(".box","click mouseenter", fn2)
//
//        function fn(){
//            alert(1);
//        }
//        function fn2(){
//            alert(2);
//        }
//
//        $(document).undelegate(".box","mouseenter",fn)

        //第四种(重点)
//        $(document).on("click mouseenter",".box",{"name":111}, function (event) {
//            alert(event.data.name);
//        });

//        $(document).on("click mouseenter",".box", function () {
//           alert(1);
//        });
//
//        $(document).off("mouseenter",".box");


//        $(function () {
//            $(".box").on("click", function () {
//                alert(5);
//            })
//        })

    </script>

</head>
<body>
    <div class="box" style="width: 100px;height: 100px;background-color: pink;"></div>
</body>
</html>

09-事件触发.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
//            $(document).on("click mouseenter", function () {
//                alert("页面被点击了");
//            });

            //事件触发(1)(触发浏览器行为)
//            $(document).click();
//            $(document).mouseenter();

            //事件触发(2)(触发浏览器行为)
//            $(document).trigger("mouseenter");
//            $(document).trigger("click");

            //事件触发(3)(不触发浏览器行为)
//            $(document).triggerHandler("mouseenter");
//            $(document).triggerHandler("click");

            $("input").on("focus", function () {
                alert("我获取了焦点！");
            });

            //事件触发(2)(触发浏览器行为)(执行程序，触动事件)
//            $(document).click(function () {
//                $("input").trigger("focus");
//            });


            //事件触发(3)(不触发浏览器行为)(只执行程序，不触动事件)
            $(document).click(function () {
                $("input").triggerHandler("focus");
            });
        })
    </script>
</head>
<body>

<input type="text"/>


</body>
</html>

10-事件对象.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            $(document).on("click", {},function (e) {
                console.log(e.data);
                console.log(e.currentTarget );
                console.log(e.target );
                console.log(e.pageX );
                console.log(e.type );
                console.log(e.which );
                console.log(e.keyCode);
            });
        })
    </script>
</head>
<body>

</body>
</html>

11-回车换行.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：在input中安回车，插入条光标跳转到下一个input
            $("input").on("keyup", function (e) {
                if(e.keyCode === 13){
//                    alert("您按了，回车键！");
                    //跳转到下一行：下一个input获取插入条光标。
                    //   focus();//js和jq中一模一样的方法
                    $(this).next().next().focus();
//                    $(this).next().next()[0].focus();
                }
            });

            $("input").on("mouseenter", function (e) {
                //选定所有内容(能够输入内容的标签)
                $(this).select();
            });
        })
    </script>
</head>
<body>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>
    <input type="text" value="我是中国人！"/><br>

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

12-按键变色（event）.html

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <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>
        $(function () {
            //需求：在页面上，按键.是哪个颜色的首写字母div就改变为该颜色，然后span内容赋值。
            //步骤：
            //1.给document绑定keyup事件
            //2.获取值，根据此值，给div和span上色和内容

            var div = $("#bgChange");
            var span = $("#keyCodeSpan");

            //绑定事件
            $(document).keyup(function (e) {
                //调用方法
                setColor(e.keyCode);
            });


            function setColor(aaa){
                //alert(e.keyCode);
                //2.获取值，根据此值，给div和span上色和内容
                switch (aaa){
                    case 80:
                        //修改内容pink
                        setEle("pink",aaa);
                        break;
                    case 66:
                        //修改内容blue
                        setEle("blue",aaa);
                        break;
                    case 79:
                        //修改内容orange
                        setEle("orange",aaa);
                        break;
                    case 82:
                        //修改内容red
                        setEle("red",aaa);
                        break;
                    case 89:
                        //修改内容yellow
                        setEle("yellow",aaa);
                        break;
                    default :
                        alert("系统没有设置该颜色！");
                }

                function setEle(a,b){
                    div.css("background-color",a);
                    span.text(b);
                }

            }

            //1.给document绑定keyup事件
//            $(document).keyup(function (e) {
//                //alert(e.keyCode);
//                //2.获取值，根据此值，给div和span上色和内容
//                switch (e.keyCode){
//                    case 80:
//                        //修改内容pink
//                        div.css("background-color","pink");
//                        span.text(e.keyCode);
//                        break;
//                    case 66:
//                        //修改内容blue
//                        div.css("background-color","blue");
//                        span.text(e.keyCode);
//                        break;
//                    case 79:
//                        //修改内容orange
//                        div.css("background-color","orange");
//                        span.text(e.keyCode);
//                        break;
//                    case 82:
//                        //修改内容red
//                        div.css("background-color","red");
//                        span.text(e.keyCode);
//                        break;
//                    case 89:
//                        //修改内容yellow
//                        div.css("background-color","yellow");
//                        span.text(e.keyCode);
//                        break;
//                    default :
//                        alert("系统没有设置该颜色！");
//                }
//            });
        })
    </script>
</head>

<body>

    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为：
            <span id="keyCodeSpan">80</span>
        </div>
    </div>

</body>
</html>

14-五角星案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>五角星评分案例</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>
        $(function () {
            var wjx_none = '☆'; // 空心五角星
            var wjx_sel = '★'; // 实心五角星

            //需求1：鼠标放上去当前的li和之前所有的li内容全部变为实心五角星，移开变为空心。
            $(".comment li").on("mouseenter", function () {
                //当前五角星，和之前的所有五角星，全部是实心的，其他的为空心
//                $(this).text(wjx_sel).prevAll("li").text(wjx_sel);
//                $(this).nextAll("li").text(wjx_none);
                $(this).text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
            });

            $(".comment li").on("mouseleave", function () {
                //bug：如果没有点击过li，那么会出现无法清除的现象，处理办法就是先判断，看看是否有current类
                if($("li.current").length === 0){
                    $(".comment li").text(wjx_none);
                }else{
                    //当鼠标移开的时候，谁有current类名，那么当前和之前所有的li前部是实心五角星，后面的所有li都是空心
                    $("li.current").text(wjx_sel).prevAll("li").text(wjx_sel).end().nextAll("li").text(wjx_none);
                }
            });


            //需求2：鼠标点击那个li，当你前li和之前所有的li都变成实心五角星，其他变为空心。
            $(".comment li").on("click", function () {
                //点击哪个li给他加一个类名。清空其他所有的li的类名
                $(this).attr("class","current").siblings("li").removeAttr("class");
            });


        });
    </script>
</head>

<body>

    <ul class="comment">
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
        <li>☆</li>
    </ul>

</body>
</html>

15-each修改透明度.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></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>
        jQuery(function () {
            //设置不一样的盒子透明度逐渐递增
            $("ul li").each(function (index,element) {
                //console.log(index+"---"+element.tagName);
                $(element).css("opacity",(index+1)/10);
            });
        });
    </script>
</head>
<body>
<ul>
    <li class="aaa1">1</li>
    <li class="aaa2">2</li>
    <li class="aaa3">3</li>
    <li class="aaa4">4</li>
    <li class="aaa5">5</li>
    <li class="aaa6">6</li>
    <li class="aaa7">7</li>
    <li class="aaa8">8</li>
    <li class="aaa9">9</li>
    <li class="aaa10">10</li>
</ul>


</body>
</html>

16-多库共存.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.8.2.min.js"></script>
    <script src="jquery-1.11.1.js"></script>
    <script>
        jQuery(function () {
            //打印版本号。
//            console.log($.fn.jquery);

            //让1.11.1放弃$的使用权
            $.noConflict();
            console.log($.fn.jquery);
            console.log(jQuery.fn.jquery);

            //放弃两个符号的使用权，同时定义一个新的使用权
//            var MrLv = $.noConflict(true);
//            console.log($.fn.jquery);
//            console.log(jQuery.fn.jquery);
//            console.log(MrLv.fn.jquery);
        })
    </script>
</head>
<body>

</body>
</html>

17-插件之改变背景色.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery.color.js"></script>
    <script>
        $(function () {
            //获取按钮，改变盒子的背景色；
            $("button").on("click", function () {
                $("div").animate({"width":200,"background-color":"red"},2000, function () {
                    alert("动画结束");
                });
            });
        })
    </script>
</head>
<body>
<button>变色</button>
<div></div>
</body>
</html>

18-插件之懒加载.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            height: 3000px;
            background-color: pink;
        }
    </style>
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery.lazyload.min.js"></script>
    <script>
        $(function () {
            //懒加载调用

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

19-自定义插件.html

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-1.11.1.js"></script>
    <script src="jquery-MrLv-1.11.1-min.js"></script>
    <script>
        $(function () {
            //调用插件中的方法
            //第一种制作方法
//            $("button").on("click", function () {
//                $("button").setColorRed();
//            })


            //第二种绑定方法
            $("button").on("click", function () {
                $.setColorRed($(this));
            })

        })
    </script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮6</button>
</body>
</html>

//绑定到原型上,调用者是jquery对象
$.fn.setColorRed = function () {
    this.css({"color":"red"});
}


//绑定到$上，调用者是$
$.setColorRed = function (e) {
    e.css({"color":"red"});
}

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 222,104评论 6赞 515
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 94,816评论 3赞 399
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 168,697评论 0赞 360
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 59,836评论 1赞 298
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 68,851评论 6赞 397
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 52,441评论 1赞 310
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,992评论 3赞 421
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,899评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,457评论 1赞 318
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 38,529评论 3赞 341
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,664评论 1赞 352
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,346评论 5赞 350
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 42,025评论 3赞 334
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,511评论 0赞 24
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,611评论 1赞 272
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 49,081评论 3赞 377
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 45,675评论 2赞 359

jQuery-UI-3

01-jquery属性 操作.html

02-表格全选反选（prop+checkbox选择器+checked选择器）.html

03-val()和text()和html().html

05-height()和width().html

06-坐标值操作.html

07-事件绑定.html

08-事件解绑.html

09-事件触发.html

10-事件对象.html

11-回车换行.html

12-按键变色（event）.html

14-五角星案例.html

15-each修改透明度.html

16-多库共存.html

17-插件之改变背景色.html

18-插件之懒加载.html

19-自定义插件.html

推荐阅读更多精彩内容

01-jquery属性操作.html