05: jQuery

時間 2019-12-01

標籤 jquery 欄目 JQuery 简体版

原文原文鏈接

1.1 JQuery做用返回頂部

　　簡介：jQuery庫爲Web腳本編程提供了通用的抽象層，使得它幾乎適用於任何編程的情形。jquery

# # 第一：取得頁面中的元素
#       一、    若是不使用JavaScript庫，遍歷DOM樹，以及查找HTML文檔結構中某個特殊的部分，必需編寫不少代碼
#       二、    jQuery爲準確獲取須要操縱的文檔元素，提供了可靠而富有效率的選擇符機制。

# # 第二：修改頁面的外觀
#       一、    CSS雖然爲呈現方式提供了一種強大的手段，但當全部瀏覽器不徹底支持相同的標準時，單純使用CSS就會
#          顯得力不從心
#       二、    jQuery能夠彌補這一不足，它提供了跨瀏覽器的標準來解決方案。
#       三、    並且即便在頁面已經呈現以後，jQuery仍然可以改變文檔中某個部分的類或都個別的樣式屬性。

# # 第三：改變頁面的內容
#       一、    jQuery可以影響的範圍並不侷限於簡單的外觀變化，使用少許的代碼
#       二、    jQuery就能改變文檔的內容，能夠改變文本、插入或都翻轉圖像、對列表從新排序，甚至對HTML文檔的整個結構都能重寫和擴充——全部這些只須要一個簡單易用的API。

# # 第四：響應用戶的頁面操做
#       一、    jQuery提供了截取形形色色的頁面事件（好比用戶單擊一個連接）的適當方式，而不須要使用事件處理程
#         序搞亂HTML代碼
#       二、    此外，它的事件處理API也消除了常常困擾Web開發人員的瀏覽器不一致性

# # 第五：爲頁面添加動態效果
#       一、    爲了實現某種交互式行爲，設計者也必須向用戶提供視覺上的反饋
#       二、    jQuery中內置的一批淡入、擦除之類的效果，以及製做新效果的工具包，爲此提供了便利

# # 第六：無需刷新頁面
#       一、便可從服務器獲取信息，這種編程模式就是從所周知的AJAX（Asyynchoronous JavaScript and XML），它能輔
#          助Web開發人員建立出反應靈敏、功能豐富的網站
#       二、jQuery經過消除這一過程當中的瀏覽器特定的複雜性，使開發人員得以專一於服務器端的功能設計

# # 第七：簡化常見的JavaScript任務
#       一、除了這些徹底針對文檔的特性以外，jQuery也提供了對基本的JavaScript結構（例如迭代和數組操做等）的加強

jQuery做用

1.2 jQuery與DOM比較與相互轉換返回頂部

　　　　1. $=jQuery 可使用這兩個關鍵字調用jQuery中的方法編程

　　　　2. JQuery內部實質上封裝的是DOM，JQuery中得到的東西比DOM得到的多數組

　　　　3. JQuery對象返回的是一個列表，列表中第0個元素就是用DOM獲取的對象瀏覽器

　　　　4. 分別用JQuery和DOM獲取對象的方法：服務器

　　　　　　　　$("#i1") #使用JQuery獲取對象cookie

　　　　　　　　document.getElementById('i1'); #使用DOM獲取對象app

　　　　5. 將經過JQuery獲取的對象轉換成經過DOM獲取的對象框架

　　　　　　　　jquery對象[0] => Dom對象

　　　　　　　　$("#i1")[0] = document.getElementById('i1'); #JQuery第0個元素就是DOM對象

　　　　6. 將經過DOM獲取的對象裝換成經過JQuery獲取的對象

　　　　　　　　dom對象 => $(Dom對象)

　　　　　　　　d = document.getElementById('i1');

　　　　　　　　$(d) = $("#i1") #DOM對象用$()包起來就是JQuery對象

1.3 jQuery選擇器返回頂部

　　一、基本選擇器

　　　　1. id選擇器

　　　　　　　　$("#i1") #找到id=i1的標籤

　　　　2. class選擇器

　　　　　　　　$(".c1")

　　　　3. 標籤選擇器

　　　　　　　　$('a') #找到全部a標籤

　　　　4. 組合選擇器

　　　　　　　　$('a,.c2,#i10') # 做用：找到全部a標籤和全部class等於.c2的標籤和id=i10的全部標籤

　　　　5. 匹配全部元素，多用於結合上下文來搜索。

　　　　　　　　$("*")

　　二、層級選擇器
　　　　　　1. $('#i1 a') #找到id=i1標籤下面全部的a標籤（子子孫孫都找到）

　　　　　　2. $('#i1>a') #找到id=i1標籤下面全部的a標籤（只能找到兒子）

　　　　　　3. $("label + input") #匹配全部跟在 label 後面的 input 元素

　　　　　　4. $("form ~ input") #找到全部與表單同輩的 input 元素

　　三、屬性
　　　　　　1. $('[alex]') #找到具備alex屬性的標籤（好比：alex='123'，alex='456'）

　　　　　　2. $('[alex="456"] #只找到標籤中alex='456'的標籤（屬性：alex;值：456）

1.4 jQuery篩選與過濾返回頂部

　　一、查找

　　　　　　1. $("p").parent() #取得一個包含着全部匹配元素的惟一父元素的元素集合

　　　　　　 $("span").parents() # parents()將查找全部祖輩元素

　　　　　　 $('#i1').parentsUntil('.c1') #查找當前元素的全部的父輩元素，直到遇到匹配元素爲止

　　　　　　2. $("div").children() # children()只考慮子元素而不考慮全部後代元素

　　　　　　3. $("div").siblings() #獲取全部兄弟標籤，不包含本身

　　　　　　4. $("p").next() #獲取匹配標籤後面的兄弟標籤

　　　　　　 $("div:first").nextAll().addClass("after"); #查找當前元素以後全部的同輩元素。

　　　　　　 $(‘#i1’).nextUntil(‘#i2’) #查找當前元素以後全部的同輩元素，直到遇到匹配元素爲止

　　　　　　5. $("p").prev() #用於篩選前一個同輩元素的表達式

　　　　　　 $("div:last").prevAll().addClass("before"); #查找當前元素以前全部的同輩元素

　　　　　　 $(‘#i1’). prevUntil (‘#i2’) #查找當前元素以前全部的同輩元素，直到遇到匹配元素爲止

　　　　　　6. $("p").find("span") #搜索全部與指定表達式匹配的元素, 子子孫孫中查找

　　二、基本篩選器

　　　　　　1. $('a:first') #找到全部a標籤，只過濾出第一個

　　　　　　 $('a:last') #找到全部a標籤，只過濾出最後一個

　　　　　　2. eq(index) #經過索引提取出對應的值（索引從0開始）

　　　　　　 $('a:eq(0)') #找到全部a標籤中索引爲0的元素

　　　　　　3. :even #找到偶數行

　　　　　　 :odd #找到奇數行

　　　　　　4. :gt(index) #索引大於多少

　　　　　　 :lt(index) #索引小於多少

　　　　　　5. :header #找到全部的h標題標籤

　　　　　　6. $("input:not(:checked)") #查找全部未選中的 input 元素

　　三、過濾

　　　　　　做用：在選擇器選擇到的全部標籤的基礎上再選擇一次

　　　　　　1） $(‘li’).eq(1) #先找到全部li標籤，而後再過濾出索引爲1的

　　　　　　2） $('li').first() #找到全部li標籤過濾出的第一個

　　　　　　 $('li').last() #找到全部li標籤過濾出最後一個

　　　　　　3） hasClass(class) #檢查當前的元素是否含有某個特定的類，若是有，則返回true

1.5 jQuery表單返回頂部

　　一、表單

　　　　　　1. $('#i1 input') 和 $('#i1 :input')區別

　　　　　　　　　　$('#i1 input') #只能匹配i1孩子中的全部input標籤

　　　　　　　　　　$('#i1 :input') #不只能夠匹配input標籤，也能夠匹配select，textarea，button標籤

　　　　　　2. $('#i1 :text') # 匹配全部的單行文本框

　　　　　　3. :password # 匹配全部密碼框

　　　　　　4. :radio # 匹配全部單選按鈕

　　　　　　5. :checkbox # 匹配全部複選框

　　　　　　6. :submit # 匹配全部提交按鈕

　　　　　　7. :image # 匹配全部圖像域

　　　　　　8. :reset # 匹配全部重置按鈕

　　　　　　9. :button # 匹配全部按鈕

　　　　　　10. :file # 匹配全部文件

　　二、表單對象屬性

　　　　　　1. $('#i2 :enabled') # 查找全部可編輯input元素（即，沒有disabled="disabled參數）

　　　　　　 $('#i2 :disabled') # 查找全部不可編輯的input元素（input中有disabled="disabled參數）

　　　　　　2. :checked # 匹配全部選中的被選中元素(複選框、單選框等，select中的option)，對於select元素來講，獲取選中推薦使用 :selected

　　　　　　3. :selected # 匹配全部選中的option元素

　　　　　　4. :enabled # 可編輯的

　　　　　　5. :disabled # 不可編輯的

1.6 補充 JQuery經常使用查找方法補充返回頂部

　　　　　　1. $('.modal input[name="port"]') #做用是查找class=’modal’下面的input屬性name=」port」

　　　　　　2. var val = $(this).prop('checked')?false:true #$(this).prop('checked')返回true那麼val=false，反之爲true

　　　　　　3. $('#edit_form').find('input[name="nid"]')

　　　　　　4. $("input[tag='obj_checkbox']:checked").each(function () {}); #找到全部有tag='obj_checkbox'屬性而且勾選中的標籤

　　　　　　5. $('form').find("[disabled]").removeAttr('disabled'); #找到並移除form標籤轉中全部disabled屬性

　　　　　　6. $("div.comment_container").removeClass('hide') #找到全部class=comment_container並移除class=hide

　　　　　　7. $('.comment').children(".comment_text"); #找到class='comment' 下全部孩子標籤中class='comment_text'

　　　　　　8. $('.post_container').children().remove() #找到class='post_container'的全部標籤，並清空

1.7 jQuery文本與屬性操做返回頂部

　　一、文本操做

　　　　　　1. $('#i1').text() #獲取文本內容

　　　　　　 $('#i1').text(「新內容」) #將標籤中內容替換成「新內容」

　　　　　　2. $('#i1').html() #獲取整個標籤

$('#i1').html("aaaaaaa") #替換標籤中的標籤

　　　　　　3. $('#i2').val() #獲取value的值（好比input框中內容）

　　　　　　 $('#i2').val('2222') #將輸入框中的值替換成：2222

　　二、屬性操做

　　　　　　<input id="i1" type="button" value="開關" />

　　　　　　1. attr() #傳入一個值是獲取屬性，傳入兩個值是設置屬性

　　　　　　 $('#i1').attr('type') #獲取id=i1標籤的type屬性的值（結果：button）

　　　　　　 $('#i1').attr('type','text') #將id=i1標籤的屬性修改爲text

　　　　　　2. $('#i1').removeAttr('type') #刪除其中的type="button」這個屬性

　　　　　　3. prop #專門用於checkbox,radio標籤操做

　　　　　　 $('#i2').prop('checked') #獲取值：選中結果是true未選中結果是false

　　　　　　 $('#i2').prop('checked',true) #將checkbox多選框選中

　　　　　　4. 判斷是否具備某個屬性

　　　　　　　　if( !$("#display_name")[0].hasAttribute('is_login') ){}

1.8 CSS操做返回頂部

　　一、添加或刪除id、或class屬性

　　　　1. addClass()

　　　　　　　　$("p").addClass("c1"); # 添加c1樣式

　　　　2. removeClass()

　　　　　　　　$("p").removeClass("c1"); # 清除c1樣式

　　　　3. hasClass(class)

　　　　　　　　 hasClass(class) #檢查當前的元素是否含有某個特定的類，若是有，則返回true

　　二、添加style屬性

　　　　　　1. $("p").css("color"); #取得第一個段落的color樣式屬性的值（1.9+版本）

　　　　　　2. $("p").css({ "color": "#ff0011"}); #將全部段落的字體顏色設爲紅色（1.9+版本）

　　　　　　3. $(tag).css('color','green'); #將獲取的標籤字體設置成綠色（1.0版本）

　　　　　　 $(this).css({"border":"1px solid red"});

　　3.2 CSS：位置

　　　　　　1. $(window).scrollTop() #獲取Windows窗口滾輪位置（沒有值是獲取值）

　　　　　　 $(window).scrollTop(0) #返回頂部（有值就是設置值）

　　　　　　2. scrollLeft() #和scrollTop()類似

　　　　　　3. offset() #獲取匹配元素在當前視口的相對偏移

　　　　　　 $("p:last").offset({ top: 10, left: 30 }); #設置匹配元素在當前窗口的偏移

　　　　　　4. position() #獲取匹配元素相對父元素的偏移（與父標籤偏移）

　　　　　　 # 經常使用於relative和position結合的相對定位中

　　　　　　 # 找到的父標籤必定是relative所在標籤

　　四、CSS：尺寸

　　　　　　1. $('i1').height() # 獲取標籤的高度純高度（沒有邊框寬度）

　　　　　　2. $('i1').innerHeight() #獲取第一個匹配元素內部區域高度（包括補白、不包括邊框）

　　　　　　3. $('i1').outerHeight() #獲取第一個匹配元素外部高度（默認包括補白和邊框）

　　　　　　4. $('i1').outerHeight(true) #設置爲 true 時，計算邊距在內

1.9 文檔處理返回頂部

　　一、文檔處理：內部插入

1. $('#u1').append("Hello"); #向id=u1的孩子標籤最下面添加

2. $('#u1'). prepend("Hello"); #向id=u1的孩子標籤最上面添加

　　　　　　3. appendTo() #把匹配的元素追加到另外一個指定元素元素後面

　　　　　　4. prependTo() #把匹配的元素追加到另外一個指定元素元素前面

　　二、 文檔處理：外部插入

1. $('#u1'). after("Hello"); #向id=u1的兄弟標籤下面添加

2. $('#u1'). before("Hello");

　　三、 文檔處理：刪除

　　　　　　1. $('#u1 li').eq(index).remove(); #將找到的元素根據索引值刪除（刪除整個標籤）

　　　　　　2. $('#u1 li').eq(index).empty(); #將找到的元素根據索引值刪除（僅刪除標籤內容）

　　四、 文檔處理：複製 #把DOM文檔中元素的副本添加到其餘位置時這個函數很是有用

1. clone() #Hello, how are you?

$("b").clone().prependTo("p"); #HelloHello, how are you?

1.10 JQuery事件綁定的四種方式返回頂部

　　一、$('.c').click(function(){ })沒有解綁方法

　　二、bind綁定和解綁

　　　　　　$('.c1').bind('click',function(){ })

　　　　　　$('.c1').unbind('click',function(){ })

　　三、on綁定和解綁

　　　　　　$('.c1').on('click', function(){ })

　　　　　　$('.c1').off('click', function(){ })

　　四、delegate綁定和解綁

　　　　　　$('.c').delegate('a', 'click', function(){ })

　　　　　　$('.c').undelegate('a', 'click', function(){ })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul id="u1">
        <li>1</li>
        <li>2</li>
    </ul>
<script src="jquery-1.12.4.js"></script>
    <script>
        //第一種綁定：直接使用.事件名綁定
        $('ul li').click(function () {
            var v = $(this).text();
            alert(v);
        });

        //第二種綁定：使用bind關鍵字綁定
        $('ul li').bind('click',function () {
            var v = $(this).text();
            alert(v);
        });

        //第三種綁定：使用on綁定
        $('ul li').on('click', function () {
            var v = $(this).text();
            alert(v);
        });

        //第四種綁定：使用delegate綁定
        //委託：當點擊的時候就會綁定而且執行（讓增長一些東西又有相同功能時使用）
        $('ul').delegate('li','click',function () {
            var v = $(this).text();
            alert(v);
        })
    </script>
</body>
</html>

jQuery四種綁定方式比較

　　五、使用hover動態綁定事件　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="user_info">使用hover觸發JS函數</div>

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

    <script>
        $(function () {
            $("div.user_info").hover(function () {
                show_user_menu(true);
            },function () {
                show_user_menu(false)
            });

            function show_user_menu(tag) {
                if(tag==true){
                    console.log('true')
                }else {
                    console.log('false')
                }
            }
        })
    </script>
</body>
</html>

使用hover動態綁定事件

1.11 jQuery使用返回頂部

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" value="全選" id="allCheck">
    <input type="button" value="取消" id="allCancel">
    <input type="button" value="反選" id="reverse">
    <span id="edit" >編輯模式</span>

    <table border="1">
        <thead>
            <tr>
                <th>選擇</th>
                <th>主機名</th>
                <th>端口</th>
                <th>狀態</th>
            </tr>
        </thead>

        <tbody id="tb">
            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在線</option><option>下線</option></select></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在線</option><option>下線</option></select></td>
            </tr>

            <tr class="item">
                <td><input type="checkbox"></td>
                <td><input type="text" value="1.1.1.1" disabled="disabled"></td>
                <td><input type="text" value="22" disabled="disabled"></td>
                <td><select disabled="disabled"><option>在線</option><option>下線</option></select></td>
            </tr>


        </tbody>
    </table>

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

        // 一、全選
        $('#allCheck').click(function(){
            $('#tb :checkbox').prop('checked',true).trigger('change');
        });

        // 二、取消
        $('#allCancel').click(function(){
            $('#tb :checkbox').prop('checked',false).trigger('change');
        });

        // 三、反選
        $('#reverse').click(function(){
            $('#tb :checkbox').each(function(){
                var v = $(this).prop('checked')?false:true;
                $(this).prop('checked',v).trigger('change');
            })
        });

        // 四、當點擊「編輯模式」按鈕時出發該函數，將全部有edit屬性的去除 disabled 屬性
        $('#edit').click(function(){
            $('#tb :checkbox').each(function(){
                var v = $(this);
                if(v.hasClass('edit')){
                    $('#edit').css('backgroundColor','');
                    v.removeClass('edit')
                }else{
                    $('#edit').css('backgroundColor','red');
                    v.addClass('edit')
                };

                // 當點擊「編輯模式」按鈕時進行判斷，將可編輯的去除 disabled 屬性
                if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
                    $(this).parent().siblings().children().removeAttr('disabled')
                }else{
                    $(this).parent().siblings().children().attr('disabled','disabled');
                }
            })
        });

        // 五、當勾選時出發該函數，若是是‘編輯模式’將全部有edit屬性的去除 disabled 屬性
        $('#tb :checkbox').change(function(){

            if($(this).prop('checked') == true && $(this).hasClass('edit')==true){
                $(this).parent().siblings().children().removeAttr('disabled')
            }else{
                $(this).parent().siblings().children().attr('disabled','disabled')
            }
        })
    </script>

</body>
</html>

模態對話框

    <script src="/static/js/myjs/jquery.cookie.js"></script>
    <script>
        // 當框架加載完成後執行此函數
        window.onload = function(){
                var v = $.cookie('history_page');
                if(v){
                    $("#mytab [type_name=" + v + "]").next().click()
                }
            };

        // 使用cookie解決頁面跳轉問題
        function add_cookie(tag) {
            $.cookie('history_page',tag, { expires: 1 });
        }

    </script>

當框架加載完成後執行

<!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">
    <title>Title</title>
    <style type="text/css">
        ul li:hover,
        ul li.hover {
            background: #efefef;
        }
    </style>
</head>
<body>
  <div class="form-group">
   <label>添加審批人</label>
   <input autocomplete="off" type="text" name="addapproveuser" id="input-text" class="form-control"
   onkeydown="isDown(event)" />
   <ul id="listuser" class="list-unstyled" style="z-index:9;position: fixed;background-color: white;min-width: 540px">
    <li onclick="getLiValue(this)" style="margin: 8px;">18,肖乃強,DevOps</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">294,李肖峯,研發實施組</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">306,肖娟,醫學數據</li>
    <li onclick="getLiValue(this)" style="margin: 8px;">447,肖菲菲,醫學數據PM</li>
   </ul>
  </div>
    <script src="jquery-1.12.4.js"></script>

    <script>
        // 點擊li時使用li標籤的值替換input中內容
        function getLiValue(ths) {
                lival = $(ths).text();
                inputval = $('#input-text').val(lival);
                $('#listuser').addClass('hidden');
                $('#input-text').focus();
                var index = $("#listuser li").index(ths);
                num = index;
                changeCurrentLiStyle()
            }



        var num = -1;  // 默認選中第幾個li標籤
        isFirst = true;  // 是否第一次按 up/down鍵
        function isDown(event) {
            if(event.keyCode==40){              // 按下down鍵
                num++;                           // 更改num
                changeCurrentLiStyle();          // 更新li的樣式
                isFirst = false;                // 第一次已通過去了
            }

            if(event.keyCode==38){               // 按下up鍵
                    if (isFirst) {                   // 若是是第一次，不用減了
                        isFirst = false;            // 此次過去了，就不是第一次了
                    } else {
                        num--;
                    }
                    changeCurrentLiStyle();          // 更新li的樣式
            }

            if(event.keyCode==13){                  // 按下enter鍵
                lival = $('.hover').text();
                inputval = $('#input-text').val(lival);
                $('#listuser').addClass('hidden');
            }
        }

        // 改變li樣式
        function changeCurrentLiStyle() {
            var lis = $('#listuser li');
            if (lis.length === 0) {                                 // 判斷li是否存在
                return;
            }
            var num = this.getNum(lis.length);                     // 獲取索引值
            for (var i = 0; i < lis.length; i++) {                 // 排他法設置類
                lis[i].className = '';
            }
            lis[num].className = 'hover';                          // 當前li選中
        }

         // 獲取最顯著li的num值
        function getNum(len) {
        // 對於任意一個數（正數和負數）
        // 對len取餘以後，保證在-len到len之間
        // var num = this.num % len;
        // // 此時加上len，保證是0到2*len之間，必定是正數了
        // num += len;
        // // 此時再取餘，就保證是0到len之間了
        // num %= len
            return (num % len + len) % len
        }
    </script>
</body>
</html>

input框輸入補全提示監聽 up/down事件

<form>
    <button type="submit" class="btn btn-info margin"
        onclick='return check_form(this.from)'
        name="action_status"
        value="4" >修改預計完成時間
    </button>
</form>

<script>
    function check_form() {
        var predict_time = $("#id_predict_time").val();
        if(!predict_time){
            $('#predict_time_null').text('預計完成時間 爲必填字段');
            return false;
        }
    }
</script>