複習前端知識（二）（JQuery相關）

時間 2019-12-10

原文原文鏈接

http://jquery.cuishifeng.cn/css

筆記速寫：html

jQuery
    
    http://jquery.cuishifeng.cn/
    
    模塊 《=》類庫
    DOM/BOM/JavaScript的類庫
    
    版本：
        1.x  1.12
        2.x
        3.x
    
    轉換：
        jquery對象[0]   => Dom對象
        Dom對象         => $(Dom對象)
    
    
    1、查找元素
        DOM
            10左右
        jQuery：
            選擇器，直接找到某個或者某類標籤
            1. id
                $('#id')
            2. class
                <div class='c1'></div>
                $(".c1")
            3. 標籤
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a')
                
            4. 組合a
                <div id='i10' class='c1'>
                    <a>f</a>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <a>f</a>
                </div>
                <div class='c1'>
                    <div class='c2'> </div>
                </div>
                
                $('a')
                $('.c2')
                
                $('a,.c2,#i10')
                
            5. 層級
                $('#i10 a') 子子孫孫
                $('#i10>a') 兒子
                
            6. 基本
                :first
                :last
                :eq()
            7. 屬性
                $('[alex]')       具備alex屬性的全部標籤
                $('[alex="123"]') alex屬性等於123的標籤
                
            
                <input type='text'/>
                <input type='text'/>
                <input type='file'/>
                <input type='password'/>
                
                $("input[type='text']")
                $(':text')
            
            實例：    
                多選，反選，全選
                - 選擇權
                - 
                    $('#tb:checkbox').prop('checked');        獲取值
                    $('#tb:checkbox').prop('checked', true);  設置值
                - 
                    jQuery方法內置循環： $('#tb:checkbox').xxxx
                    
                - $('#tb:checkbox').each(function(k){
                        // k當前索引
                        // this，DOM，當前循環的元素 $(this)
                        
                    })
                - var v = 條件 ? 真值 : 假值
                
                
            篩選
                
                
                $('#i1').next()
                $('#i1').nextAll()
                $('#i1').nextUntil('#ii1')
                
                <div>
                    <a>asdf</a>
                    <a>asdf</a>
                    <a id='i1'>asdf</a>
                    <a>asdf</a>
                    <a id='ii1'>asdf</a>
                    <a>asdf</a>
                </div>
                
                $('#i1').prev()
                $('#i1').prevAll()
                $('#i1').prevUntil('#ii1')
                
                
                $('#i1').parent()
                $('#i1').parents()
                $('#i1').parentsUntil()
                
                $('#i1').children()
                $('#i1').siblings()
                $('#i1').find()
                $('li:eq(1)')
                $('li').eq(1)
                first()
                last()
                hasClass(class)

        文本操做：
                $(..).text()           # 獲取文本內容
                $(..).text(「<a>1</a>」) # 設置文本內容
                
                $(..).html()
                $(..).html("<a>1</a>")
                
                $(..).val()
                $(..).val(..)
        樣式操做：
                addClass
                removeClass
                toggleClass
                
        屬性操做：
                # 專門用於作自定義屬性
                $(..).attr('n')
                $(..).attr('n','v')
                $(..).removeAttr('n')
                
                <input type='checkbox' id='i1'  />
                
                
                # 專門用於chekbox,radio
                $(..).prop('checked')
                $(..).prop('checked', true)
                
                PS: 
                    index 獲取索引位置
                    
        文檔處理：
                append
                prepend
                after
                before
                
                remove
                empty
                
                clone
        css處理
            
            $('t1').css('樣式名稱', '樣式值')
            點贊：
                 - $('t1').append()
                 - $('t1').remove()
                 - setInterval
                 - 透明度 1 》 0
                 - position
                 - 字體大小，位置
        位置：
            $(window).scrollTop()  獲取
            $(window).scrollTop(0) 設置
            scrollLeft([val])
            
            offset().left                 指定標籤在html中的座標
            offset().top                  指定標籤在html中的座標
            
            position()                       指定標籤相對父標籤(relative)標籤的座標
            <div style='relative'>
                <div>
                    <div id='i1' style='position:absolute;height:80px;border:1px'></div>
                </div>
            </div>
            
            
            $('i1').height()           # 獲取標籤的高度 純高度
            $('i1').innerHeight()      # 獲取邊框 + 純高度 + ？
            $('i1').outerHeight()      # 獲取邊框 + 純高度 + ？
            $('i1').outerHeight(true)  # 獲取邊框 + 純高度 + ？
            
            # 純高度，邊框，外邊距，內邊距
            
        事件
            DOM： 三種綁定方式
                jQuery：
                    $('.c1').click()
                    $('.c1').....
                    
                    $('.c1').bind('click',function(){
                        
                    })
                    
                    $('.c1').unbind('click',function(){
                        
                    })
                    
                    *******************
                    $('.c').delegate('a', 'click', function(){
                    
                    })
                    $('.c').undelegate('a', 'click', function(){
                    
                    })
                    
                    $('.c1').on('click', function(){
                    
                    })
                    $('.c1').off('click', function(){
                    
                    })
                    
                阻止事件發生
                    return false
                    
                # 當頁面框架加載完成以後，自動執行
                $(function(){
                    
                    $(...)
                    
                })
                
        jQuery擴展：
            - $.extend        $.方法
            - $.fn.extend     $(..).方法
            
            (function(){
                var status = 1;
                // 封裝變量
            })(jQuery)
            
                
    2、操做元素
    
===》實例：

做業：
    一：
            $('i1').height()           # 獲取標籤的高度 純高度
            $('i1').innerHeight()      # 獲取邊框 + 純高度 + ？
            $('i1').outerHeight()      # 獲取邊框 + 純高度 + ？
            $('i1').outerHeight(true)  # 獲取邊框 + 純高度 + ？
            
            # 純高度，邊框，外邊距，內邊距
            
    2、全部實例敲一遍
    
    3、編輯框

View Code

JQuery實現表格反選：jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GBK">
    <title>Document</title>
</head>
<body>
    <input type="button" onclick="chooseAll()" value="全選">
    <input type="button" onclick="reserveAll()" value="反選">
    <input type="button" onclick="cancelAll()" value="取消">
    <table>
        <thead>
            <tr>
                <th>選擇</th>
                <th>主機</th>
                <th>端口</th>
            </tr>
        </thead>
        <tbody id="tb">
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>190</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>190</td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>1.1.1.1</td>
                <td>190</td>
            </tr>
        </tbody>
    </table>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        function reserveAll(){
            $('#tb :checkbox').each(function(){
            var v = $(this).prop('checked')?0:1;
            $(this).prop('checked',v);
            });
        }
        function chooseAll(){
            console.log($("#tb :checked"));
            $("#tb :checkbox").prop('checked',true);
        }function cancelAll() {
            $("#tb :checkbox").prop('checked',0);
        }
    </script>
</body>
</html>

View Code

JQuery實現菜單收縮：app

<!DOCTYPE html>
<head>
    <meta charset="GBK">
    <title>Document</title>
    <style>
        .header{
            background-color: black;
            color: wheat;
        }
        .content{
            min-height: 30px;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <div style="height: 400px;width: 200px;border: 1px solid #dddddd;">
        <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 class="item">
            <div class="header">標題三</div>
            <div class="content hide">內容</div>
        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $('.header').click(function(){
            $(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
        });
    </script>
</body>
</html>