day 17 jQuery

時間 2019-12-08

標籤 day jquery 欄目 JQuery 简体版

原文原文鏈接

什麼是jQuery？javascript

能夠把它認爲是python中的模塊，導入就可使用模塊中的功能。css

jQuery 的版本:html

1.xx 系列java

2.xx 系列python

3.xx 系列jquery

最經常使用的爲1 系列，1系列最新版爲1.12編程

jQuery 的使用方法：瀏覽器

1 導入app

<script src="jquery-1.12.4.js"></script>

2 使用框架

1 直接以jQuery 開頭

2 使用$代替jQuery

完整使用方法：

使用jQuery 和普通DOM 來獲取數據的不一樣：

jQuery 轉換爲DOM 的形式

DOM 轉換爲jQuery 形式：

jQuery 選擇器：

1 找id

$(#id)

2 找class

$(.class)

3 找標籤：

$(a)

例子：

找到全部a標籤和class 爲c2的標籤，id爲 i10 的標籤

層級：

查找id爲 i10 標籤下的全部a標籤

無論有幾層，所有找出來:

$(#i10 a)

只找兒子：

$(#i10>a)

查找i10標籤下的子標籤爲a的標籤的第一個：

經過index 查找，index爲從0 開始：

找到全部的h標籤：

$(:header)

總結一下基本的查找：

找到自定義屬性的標籤;

找到全部具備alex 的標籤：

查找指定屬性爲指定值的標籤：

篩選：

1 查找全部input 標籤中的type 爲text的標籤：

使用JQuery 實現全選，反選：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="全選"  onclick="choseAll();"/>
    <input type="button" value="反選"  onclick="countermand();"/>
    <input type="button" value="取消"  onclick="cancleAll();"/>
    <table id="i1" border="1">
        <thead>
            <tr>
                <th>選項</th>
                <th>IP</th>
                <th>PORT</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox"/></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function choseAll() {
            $('#i1 :checkbox').prop('checked',true);
        }
        function cancleAll() {
            $('#i1 :checkbox').prop('checked',false);
        }
        function countermand() {
            $('#i1 :checkbox').each(function () {
                var v = $(this).prop('checked') ? false : true;
                $(this).prop('checked',v);
            })
        }
    </script>
</body>
</html>

　效果：

添加和移除樣式：

綁定事件，添加匿名函數作動做：

篩選器：

找子子孫孫的指定的標籤：

find 很實用：

使用jQuery 實現左側菜單欄的效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 50px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height:400px;width: 200px;border: 1px solid #dddddd">
        <div class="item">
            <div class="header">標題一</div>
            <div id="i1" class="content hide">內容</div>
        </div>
        <div class="item">
            <div class="header">標題二</div>
            <div class="content hide">內容</div>
        </div>

        <div class="item">
            <div class="header">標題三</div>
            <div class="content hide">內容</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.header').click(function(){
            // 當前點擊的標籤 $(this)
            // 獲取某個標籤的下一個標籤
            // 獲取某個標籤的父標籤
            // 獲取全部的兄弟標籤
            // 添加樣式和移除樣式
            // $('.i1').addClass('hide')
            // $('#i1').removeClass('hide')
            // var v = $("this + div");
            // $("label + input")
            // console.log(v);
            //
            // $("afsldkfja;skjdf;aksdjf")

            // 篩選器
            /*
            $(this).next()      下一個
            $(this).prev()      上一個
            $(this).parent()    父
            $(this).children()  孩子
            $('#i1').siblings() 兄弟
            $('#i1').find('#i1') 子子孫孫中查找
            // . . .
            //
            $('#i1').addClass(..)
            $('#i1').removeClass(..)
            */

            // 鏈式編程
            // $(...).click(function(){
            //     this..
            // })


//            $(this).next().removeClass('hide');
//            $(this).parent().siblings().find('.content').addClass('hide')

            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')

        })
    </script>
</body>
</html>

效果：

JQuery 支持鏈式編程

經常使用的一些篩選：

從下往上找，方法同上：

尋找父標籤:

一直往上一級找，直到找到某個標籤爲止：

尋找子標籤：

尋找全部兄弟標籤：

在指定父標籤下查找：

經過index 查找：

其餘一些方法：

使用JQuery 寫模態框：

動做：

使用JQuery 事件綁定全部的.edit類的標籤：

文本操做：

獲取和設置：

寫一個編輯功能：

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1">
        <tr>
            <td>1.1.1.11</td>
            <td>80</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.12</td>
            <td>80</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.13</td>
            <td>80</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.14</td>
            <td>80</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement() {
            $('.modal,.shadow').removeClass('hide');
        }
        function cancelModal() {
            $('.modal,.shadow').addClass('hide');
            $('.modal input[type="text"]').val('');
        }
        $('.edit').click(function () {
            $('.modal,.shadow').removeClass('hide');
            var tbs = $(this).parent().prevAll();
            var port = $(tbs[0]).text();
            var host = $(tbs[1]).text();
//            console.log(host,port)
            $('.modal input[name="hostname"]').val(host);
            $('.modal input[name="port"]').val(port);
        })
    </script>
</body>
</html>

效果：

寫一個開關，點擊按鈕實現顯示和隱藏相對應的內容：

1 基礎寫法：

2 使用jQuery自帶的方法：

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input type='checkbox' id='i2'  />

    <input id="i1" type="button" value="開關" />
    <div class="c1 hide">asdfasdf</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function(){
//            if($('.c1').hasClass('hide')){
//                $('.c1').removeClass('hide');
//            }else{
//                $('.c1').addClass('hide');
//            }
            $('.c1').toggleClass('hide');
        })
    </script>
</body>
</html>

效果：

總結一下jQuery能夠操做的方式：

屬性操做：

設置checked 的時候必定用prop 而不是atter

由於checked 有專門的設置方式prop

屬性操做總結：

使用jQuery 實現一個模態框，並且要獲取表格中的數據：

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>
    <table border="1">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">81</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">82</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">83</td>
            <td>
                <a class="edit">編輯</a> | <a>刪除</a>
            </td>
        </tr>
    </table>
    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
        </div>
        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
        </div>
    </div>
    <div class="shadow hide"></div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        function addElement() {
            $('.modal,.shadow').removeClass('hide');
        }
        function cancelModal() {
            $('.modal,.shadow').addClass('hide');
            $('.modal input[type="text"]').val('');
        }
        $('.edit').click(function () {
            $('.modal,.shadow').removeClass('hide');
            //獲取全部的td
            var tds = $(this).parent().prevAll();
            //循環每一個td
            tds.each(function () {
                var n = $(this).attr('target');
                var text = $(this).text();
                //拼接字符串
                $('.modal input[name="' + n +'"]').val(text);
            });
        });
    </script>
</body>
</html>

效果：

實現一個TAB菜單例子：

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>
    <div style="width: 700px;margin:0 auto">
        <div class="menu">
            <div  class="menu-item active" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var target =  $(this).attr('a');
            $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

效果：

繼續：

獲取index

經過索引來對應關係，這個比較好用，固然也能夠經過上面的修改對應關係就行：

添加數據：

生成表格，添加到後面：

從頭部添加：

指定的元素以後和以前：

刪除：

remove 刪除

empty 清空內容，可是標籤還在

總結一下：

一個添加刪除複製的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input id="t1" type="text" />
    <input id="a1" type="button" value="添加" />
    <input id="a2" type="button" value="刪除" />
    <input id="a3" type="button" value="複製" />
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#a1').click(function () {
            var v = $('#t1').val();
            var temp = "<li>" + v + "</li>";
            // $('#u1').append(temp);
            $('#u1').prepend(temp);
            // $('#u1').after(temp)
            // $('#u1').before(temp)
        });
        $('#a2').click(function () {
            var index = $('#t1').val();
            $('#u1 li').eq(index).remove();
            //$('#u1 li').eq(index).empty();
        });
        $('#a3').click(function () {
            var index = $('#t1').val();
            var v = $('#u1 li').eq(index).clone();
            $('#u1').append(v);
            //$('#u1 li').eq(index).remove();
            //$('#u1 li').eq(index).empty();
        })
    </script>
</body>
</html>

效果：

jQuery 也能夠對單獨的css作樣式調整：

改變字體顏色：

實現一個動態的點贊效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            AddFavor(this);
        });

        function AddFavor(self) {
            // DOM對象
            var fontSize = 15;
            var top = 0;
            var right = 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + "px");
            $(tag).css('right',right + "px");
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity);
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + "px");
                $(tag).css('right',right + "px");
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0){
                    clearInterval(obj);
                    $(tag).remove();
                }
            }, 40);

        }
    </script>

</body>
</html>

效果：

滾輪的位置獲取及設置：

獲取滾輪位置：

window 表明整個瀏覽器的最大的那個滾輪：

設置位置：

獲取標籤的當前位置：

能夠經過這個實現一個移動部件的功能

實踐：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;color: mediumvioletred;text-align: center;line-height: 40px;">這是一個例子。。。</div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>

效果：

如何讓新增長的標籤也有以前標籤具備的動做功能呢？這裏用到了委託：

增長標籤，又想讓它擁有功能的時候使用這個：

a 標籤就是綁定了一個事件，當咱們再綁定的事件的時候，優先級最高

不想使用默認的綁定事件，取消默認事件：

繼續使用事件，能夠在後面自定義別的動做：

使用jQuery 實現：

基礎表單驗證：

驗證每一個input 類型爲text 和password 的長度是否合法：

驗證加提示：

實踐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>

    <form id="f1" action="http://www.baidu.com" method="POST">
        <div><input name="n1" tex = "用戶名" type="text" /></div>
        <div><input name="n2" tex = "密碼" type="password" /></div>
        <div><input name="n3" tex = "郵箱" type="text" /></div>
        <div><input name="n4" tex = "端口" type="text" /></div>
        <div><input name="n5" tex = "IP" type="text" /></div>

        <input type="submit" value="提交" />
        <!--<img src="...">-->
    </form>
    <script src="jquery-1.12.4.js"></script>
    <script>
//        // 當頁面框架加載完畢後，自動執行
//        $(function(){
//            $.Login('#f1')
//        });



        $(function(){
            // 當頁面全部元素徹底加載完畢後，執行
            $(':submit').click(function () {
                $('.error').remove();
                var flag = true;
                $('#f1').find('input[type="text"],input[type="password"]').each(function () {
                    var v = $(this).val();
                    var n = $(this).attr('tex');
                    if(v.length <= 0){
                        flag = false;
                        var tag = document.createElement('span');
                        tag.className = "error";
                        tag.innerHTML = n + "必填";
                        $(this).after(tag);
//                         return false;
                    }
                });
                return flag;

        });


        });



//        $(':submit').click(function () {
//            var v = $(this).prev().val();
//            if(v.length > 0){
//                return true;
//            }else{
//                alert('請輸入內容');
//                return false
//            }
//        })

    </script>
</body>
</html>

效果：

有時候咱們須要用戶打開頁面就執行一些動做，這裏有一個能夠實現：

直接一個匿名函數,就是當html框架加載完畢後就自動執行。

擴展jQuery

寫一個擴展的：