jQuery

Posted mike.liu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery相关的知识，希望对你有一定的参考价值。

主要内容：jQuery进阶、CSS伪类和伪元素、jQuery插件

tab菜单样式

checkbox全选、反选

位置：scrollTop和offset

事件：两种绑定事件的方式和委托delegate

ajax：普通和跨域（江西卫视的例子）

还是那个网址：http://www.php100.com/manual/jquery/

CSS伪类和伪元素

hover用于鼠标移动到元素上面时，改变元素的样式，比写JS实现方便。

复制代码
.clearfix:after {
    content: ".";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}
复制代码

写到common.css文件中，在布局的时候用到float是，可以很方便的引用到需要clear:both的地方。

 

 tab菜单样式

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab exercise</title>
    <style>
        .content {
            margin: 0 auto;
            padding: 0;
        }
        .tab-tittle {
            background-color: #999999;
            border: none;
            line-height: 35px;
        }
        /*利用伪元素实现clear:both*/
        .tab-tittle:after {
            content: ".";
            visibility: hidden;
            height: 0;
            display: block;
            clear: both;
        }
        .tab-info {
            border: none;
        }
        .hide {
            display: none;
        }
        .current {
            background-color: #FFFFFF;
            border-top: 2px solid red;
        }
        li {
            display: inline;
            list-style: none;
            margin: 0;
            padding: 0 10px;
            cursor: pointer;
            float: left;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="tab-tittle">
            <ul>
                <li class="current" pointTo="info1" onclick="GoTab(this);">菜单一</li>
                <li pointTo="info2" onclick="GoTab(this);">菜单二</li>
                <li pointTo="info3" onclick="GoTab(this);">菜单三</li>
            </ul>
        </div>
        <div class="tab-info">
            <div id="info1">内容一</div>
            <div id="info2" class="hide">内容二</div>
            <div id="info3" class="hide">内容三</div>
        </div>
    </div>

    <script src="../jquery-2.2.3.js"></script>
    <script>
        function GoTab(ths) {
            $(ths).addClass("current").siblings().removeClass("current");
            var tmp = "#" + $(ths).attr("pointTo");
            $(tmp).removeClass("hide").siblings().addClass("hide");
        }
    </script>
</body>
</html>
复制代码

checkbox全选、反选

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Check Box Exercise</title>
</head>
<body>
    <div>
        <button value="全选" onclick="CheckAll();">全选</button>
        <button value="取消" onclick="ClearAll();">取消</button>
        <button value="取消" onclick="ReverseAll();">反选</button>
    </div>
    <div>
        <table border="1">
            <tr>
                <td><input type="checkbox" /></td>
                <td>123</td>
                <td>456</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>123</td>
                <td>456</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>123</td>
                <td>456</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>123</td>
                <td>456</td>
            </tr>
        </table>
    </div>
    <script src="../jquery-2.2.3.js"></script>
    <script>
        function CheckAll() {
            $("table :checkbox").prop("checked", true);
        }
        function ClearAll() {
            $("table :checkbox").prop("checked", false);
        }
        function ReverseAll() {
            var checkboxArray = $("table :checkbox");
//            for (var i= 0;i<checkboxArray.length;i++) {
//                console.log(checkboxArray[i]);
//            }
//            console.log("===============================");
//            for ( i in checkboxArray) {
//                console.log(checkboxArray[i]);
//            }
            // 反选的两种方法
            // 方法一
            $.each (checkboxArray, function(i, item) {
                console.log(item);
                var isChecked = $(item).prop("checked");
                if (isChecked) {
                    $(item).prop("checked", false);
                } else {
                    $(item).prop("checked", true);
                }
            });
            // 方法二
//            $("table :checkbox").each(function() {
//                var isChecked = $(this).prop("checked");
//                if (isChecked) {
//                    $(this).prop("checked", false);
//                } else {
//                    $(this).prop("checked", true);
//                }
//            })
        }
    </script>
</body>
</html>
复制代码

位置：scrollTop和offset

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scrollTop</title>
    <style>
        .go-top {
            position: fixed;
            right: 5px;
            bottom: 5px;
            width: 70px;
            height: 20px;
            background-color: #8AC007;
        }
        a {
            cursor: pointer;
            text-decoration: none;
        }
        .hide {
            display: none;
        }
    </style>
</head>
<body>
    <div style=" height: 300px; overflow: scroll">
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <p>111</p>
        <div style="right: 10px; bottom: 10px">
            <a onclick="GoTop();">内部返回顶部</a>
        </div>
    </div>
    <div style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
        <div style="height: 2000px"></div>
        <div class="go-top hide">
            <a onclick="GoTop();">返回顶部</a>
        </div>
    </div>
    <script src="../jquery-2.2.3.js"></script>
    <script>
        function GoTop() {
            $(window).scrollTop(0);
        }
        window.onscroll = function() {
            if ($(window).scrollTop() > 100) {
                $(".go-top").removeClass("hide");
            } else {
                $(".go-top").addClass("hide");
            }
        }
    </script>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>

        body{
            margin: 0px;
        }
        img {
            border: 0;
        }
        ul{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        .wrap{
            width: 980px;
            margin: 0 auto;
        }

        .pg-header{
            background-color: #303a40;
            -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
            box-shadow: 0 2px 5px rgba(0,0,0,.2);
        }
        .pg-header .logo{
            float: left;
            padding:5px 10px 5px 0px;
        }
        .pg-header .logo img{
            vertical-align: middle;
            width: 110px;
            height: 40px;

        }
        .pg-header .nav{
            line-height: 50px;
        }
        .pg-header .nav ul li{
            float: left;
        }
        .pg-header .nav ul li a{
            display: block;
            color: #ccc;
            padding: 0 20px;
            text-decoration: none;
            font-size: 14px;
        }
        .pg-header .nav ul li a:hover{
            color: #fff;
            background-color: #425a66;
        }
        .pg-body{

        }
        .pg-body .catalog{
            position: absolute;
            top:60px;
            width: 200px;
            background-color: #fafafa;
            bottom: 0px;
        }
        .pg-body .catalog.fixed{
            position: fixed;
            top:10px;
        }

        .pg-body .catalog .catalog-item.active{
            color: #fff;
            background-color: #425a66;
        }

        .pg-body .content{
            position: absolute;
            top:60px;
            width: 700px;
            margin-left: 210px;
            background-color: #fafafa;
            overflow: auto;
        }
        .pg-body .content .section{
            height: 500px;
        }
    </style>
</head>
<body>

    <div class="pg-header">
        <div class="wrap clearfix">
            <div class="logo">
                <a href="#">
                    <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
                </a>
            </div>
            <div class="nav">
                <ul>
                    <li>
                        <a  href="#">首页</a>
                    </li>
                    <li>
                        <a  href="#">功能一</a>
                    </li>
                    <li>
                        <a  href="#">功能二</a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
    <div class="pg-body">
        <div class="wrap">
            <div class="catalog">
                <div class="catalog-item" auto-to="function1"><a>第1章</a></div>
                <div class="catalog-item" auto-to="function2"><a>第2章</a></div>
                <div class="catalog-item" auto-to="function3"><a>第3章</a></div>
            </div>
            <div class="content">

                <div menu="function1" class="section">
                    <h1>第一章</h1>
                </div>
                <div menu="function2" class="section">
                    <h1>第二章</h1>
                </div>
                <div menu="function3" class="section">
                    <h1>第三章</h1>
                </div>
            </div>
        </div>
    </div>
    <script src="../jquery-2.2.3.js"></script>
    <script>
        window.onscroll = function() {
            var scrollHeight = $(window).scrollTop();
            console.log("滚动高度：");
            console.log(scrollHeight);
            if (scrollHeight > 50) {
                $(".catalog").addClass("fixed");
            } else {
                $(".catalog").removeClass("fixed");
            }
            $(".content").children().each(function() {
                // 当前元素的对视图的相对高度
                var currentOffset = $(this).offset();
                var currentOffsetTop = currentOffset.top;
                console.log("当前元素的对视图的相对高度：");
                console.log(currentOffsetTop);
                var totalHeight = currentOffsetTop + $(this).height();
                if (currentOffsetTop < scrollHeight && totalHeight > scrollHeight) {
                    // 滑轮滚动的高度+window的高度 = 文档的高度
                    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
                        $(".catalog").children(":last").css("fontSize", "48px").siblings().css("fontSize", "12px");
                    } else {
                        var catalogTag = $(this).attr("menu");
                        var tagat = "div[auto-to=\'"+catalogTag+"\']";
                        $(".catalog").children(tagat).css("fontSize", "48px").siblings().css("fontSize", "12px");
                        return;
                    }

                }
            })
        }
    </script>
</body>
</html>
复制代码

事件：两种绑定事件的方式和委托delegate

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event exercise</title>
</head>
<body>
    <div>
        <input type="button" value="增加" />
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <script src="../jquery-2.2.3.js"></script>
    <script>
        $(function() {
           $("input").click(function() {
               $("ul").append("<li>8</li>");
           })
        });
//        $(document).ready(function() {
//            $("li").css("cursor", "pointer");
//            $("li").click(function() {
//                console.log($(this).text());
//                alert($(this).text())
//            })
//        });
//        $(function() {
//           $("li").bind("click", function(){
//               alert($(this).text());
//           })
//        });
        $(function() {
           $("ul").delegate("li", "click", function() {
               alert($(this).text());
           })
        });
    </script>
</body>
</html>
复制代码
复制代码
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>move exercise</title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="height: 40px;color: white;">
            标题
        </div>
        <div style="height: 300px;">
            内容
        </div>
    </div>
    <script src="../jquery-2.2.3.js"></script>
    <script>
        $(function() {
            $("#title").mouseover(function() {
                $(this).css("cursor", "move");
            }).mousedown(function(e) {
                var _event = e || window.event;
                var old_x = _event.clientX;
                var old_y = _event.clientY;
                var parent_old_x = $(this).parent().offset().left;
                var parent_old_y = $(this).parent().offset().top;
                // 绑定鼠标拖动的事件
                $(this).bind("mousemove", function(e) {
                    var _new_event = e || window.event;
                    var new_x = _new_event.clientX;
                    var new_y = _new_event.clientY;
                    var x = new_x - old_x;
                    var y = new_y - old_y;
                    var parent_new_x = parent_old_x + x;
                    var parent_new_y = parent_old_y + y;
                    $(this).parent().css("left", parent_new_x+"px");
                    $(this).parent().css("top", parent_new_y+"px");
                })
            }).mouseup(function() {
                $(this).unbind("mousemove");
            });
        });
    </script>
</body>
</html>
复制代码

ajax：普通和跨域（江西卫视的例子）

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX 跨域</title>
</head>
<body>
    <div>
        <input type="button" value="获取节目" onclick="GetInfo();"/>
    </div>
    <div id="container">

    </div>

    <script src="../jquery-2.2.3.js"></script>
    <script>
        function GetInfo() {
            $.ajax({
                url: "http://www.jxntv.cn/data/jmd-jxtv2.html",
                data: {},
                type: "GET",
                dataType: "jsonp",
                jsonpCallback: "list",
                success: function(arg) {
                    console.log(arg);
                    var jsonpArray = arg.data;
                    $.each(jsonpArray, function(k, v) {
                        var week = v.week;
                        var temp = "<h1>" + week + "</h1>";
                        $("#container").append(temp);
                        var infoArray = v.list;
                        $.each(infoArray, function(kk, vv) {
                            var infoLink = vv.link;
                            var infoName = vv.name;
                            var temp_2 = "<a href=\'" + infoLink+"\'>" + infoName + "</a><br/>";
                            $("#container").append(temp_2);
                        })
                    })
                },
                error: function(arg) {
                    // 请求错误之后，自动执行的函数
                }
            })
        }
    </script>
</body>
</html>
复制代码

jQuery插件

1、验证

a. 获取内容，正则表达式
b. return false

--> parsleyjs 
http://parsleyjs.org/
--> jQuery Validate 
http://jqueryvalidation.org/

# 不建议，直接使用 # 自己写， ==> 实现自己的定制化，以后自己写项目都可以用

2、UI

--> bxslider

http://bxslider.com/

--> Font Awesome
http://fontawesome.io/
a、图片，自己找图片，挖洞
b、现成的图标
css
使用样式
--以前版本
css
图片库
使用样式
-- 现在
css
字体文件
使用样式
c、css
字体文件
样式
=====> 大图片

--> Bootstrap
http://www.bootcss.com/

--> jQuery EasyUI
http://www.jeasyui.com/download/index.php


--> jQuery UI
http://jqueryui.com/

以上是关于jQuery的主要内容，如果未能解决你的问题，请参考以下文章

markdown 在WordPress中使用jQuery代码片段

使用 NodeJS 和 JSDOM/jQuery 从代码片段构建 PHP 页面

很实用的JQuery代码片段（转）

几个有用的JavaScript/jQuery代码片段（转）

几个非常实用的JQuery代码片段

高效Web开发的10个jQuery代码片段