Day009 - js應(yīng)用和jQuery（2018-11-13）

一、流氓廣告

  • 使用document.defaultView.getComputedStyle(div1)去讀取div1元素的CSS屬性
  • 鼠標(biāo)按下 - mousedown
    鼠標(biāo)移動(dòng) - mousemove
    鼠標(biāo)松開 - mouseup
    clientX / clientY - 鼠標(biāo)的橫縱坐標(biāo)evt.clientX 
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #adv {
                width: 200px;
                height: 200px;
                color: yellow;
                position: fixed;
                right: 10px;
                top: 10px;
                background-color: blue;
            }
            #adv button {
                float: right;
                border: none;
                outline: none;
                color: white;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <div id="adv">
            此廣告位招租
            <button>關(guān)閉</button>
        </div>
        <script>
            +function() {
                var advDiv = document.querySelector('#adv');
                var button = document.querySelector('#adv button');
                var counter = 0;
                button.addEventListener('click', function() {
                    counter += 1;
                    if (counter < 3) {
                        var currentStyle = 
                            document.defaultView.getComputedStyle(advDiv);
                        var newTop = parseInt(currentStyle.top) + 20;
                        var newRight = parseInt(currentStyle.right) + 20;
                        advDiv.style.top = newTop + 'px';
                        advDiv.style.right = newRight + 'px';
                    } else {
                        advDiv.style.display = 'none';
                    }
                });
            }();
//          鼠標(biāo)按下 - mousedown
//          鼠標(biāo)移動(dòng) - mousemove
//          鼠標(biāo)松開 - mouseup
//          clientX / clientY - 鼠標(biāo)的橫縱坐標(biāo)
        </script>
    </body>
</html>

二、用jQuery重寫表格

  • jQuery: Write Less Do More
  • 加載本地的jQuery文件適合開發(fā)和測(cè)試時(shí)使用:<script src="js/jquery.min.js"></script>
    用cdn服務(wù)器來加載jQuery的速度更快，商業(yè)項(xiàng)目通過cdn服務(wù)器來加速獲取jQurey的文件更好:
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  • 寫在$里面的函數(shù),是頁面加載完成后自動(dòng)執(zhí)行的函數(shù) $(function (){});
  • $根據(jù)樣式表選擇器獲取元素,獲取到的不是原生的JS對(duì)象,而是經(jīng)過jQuery封裝過后的對(duì)象(有更多的方法方便操作),綁定事件是on,反綁定是off
  • css()讀取與修改,一個(gè)參數(shù)是讀取,兩個(gè)參數(shù)是修改$('#data').css('visibility', 'hidden');
  • hide和fideOut是動(dòng)畫效果$('#data').hide(2000);
  • text()修改純文本,傳''修改為空,傳參就是給該文本賦值,不傳參就是讀取
    html()可以修改帶標(biāo)簽/實(shí)體替換符的內(nèi)容,傳參就是給該文本賦值,不傳參就是讀取
    val()可以讀取表單內(nèi)容，傳參修改，不傳讀取
  • jQuery支持級(jí)聯(lián)式編程
  • 在js中使用{}代表一個(gè)對(duì)象,JavaScript Object Notation == JSON
  • 可以使用傳入對(duì)象的方法修改多個(gè)屬性
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #data {
                border-collapse: collapse;
            }
            #data td, #data th {
                width: 120px;
                height: 40px;
                text-align: center;
                border: 1px solid black;
            }
            #buttons {
                margin: 10px 0;
            }
            
            
        </style>
    </head>
    <body>
        <table id="data">
            <caption>數(shù)據(jù)統(tǒng)計(jì)表</caption>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
                <th>身高</th>
                <th>體重</th>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td><a>Item3</a></td>
                <td>Item4</td>
                <td>Item5</td>
            </tr>
            <tr>
                <td>Item1</td>
                <td>Item2</td>
                <td>Item3</td>
                <td>Item4</td>
                <td><a>Item5</a></td>
            </tr>
            
        </table>
        <div id="buttons">
            <button id="pretty">隔行換色</button>
            <button id="clear">清除數(shù)據(jù)</button>
            <button id="remove">刪單元格</button>
            <button id="hide">隱藏表格</button>
        <!-- jQuery: Write Less Do More -->
        <!-- 加載本地的jQuery文件適合開發(fā)和測(cè)試時(shí)使用 -->
        <script src="js/jquery.min.js"></script>
        <!-- 用cdn服務(wù)器來加載jQuery的速度更快，商業(yè)項(xiàng)目通過cdn服務(wù)器來加速獲取jQurey的文件更好 -->
        <!-- <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> -->
        <script type="text/javascript">
            // 寫在$里面的函數(shù),是頁面加載完成后自動(dòng)執(zhí)行的函數(shù)
            $(function() {
                // 根據(jù)樣式表選擇器獲取元素,獲取到的不是原生的JS對(duì)象,
                // 而是經(jīng)過jQuery封裝過后的對(duì)象(有更多的方法方便操作)
                // 綁定事件是on,反綁定是off
                $('#hide').on('click', function(){
                    // css()讀取與修改,一個(gè)參數(shù)是讀取,兩個(gè)參數(shù)是修改
//                  $('#data').css('visibility', 'hidden');
                    // hide和fideOut是動(dòng)畫效果
//                  $('#data').hide(2000);
                    $('#data').fadeOut(2000);
                });
                
                /*刪除單元格*/
                $('#remove').on('click', function(){
                    $('#data tr:gt(0):last-child').remove();
                });
                
                $('#clear').on('click', function(){
                    // text()修改純文本,傳''修改為空,傳參就是給該文本賦值,不傳參就是讀取
                    // $('data tr:gt(0)>td').text('');/
                    // html()可以修改帶標(biāo)簽/實(shí)體替換符的內(nèi)容,傳參就是給該文本賦值,不傳參就是讀取
                    $('#data tr:gt(0)>td').html('');
                });
                $('#pretty').on('click', function(){
                    // jQuery支持級(jí)聯(lián)式編程
//                  $('#data tr:gt(0):odd')
//                      .css('background-color', 'lightsteelblue')
//                      // .text('hello')
//                      .css('font-size', '20px')
//                      .css('font-style', 'italic');

                    // 在js中使用{}代表一個(gè)對(duì)象,JavaScript Object Notation == JSON
                    // 可以使用傳入對(duì)象的方法修改多個(gè)屬性
                    $('#data tr:gt(0):odd').css({
                        'background-color': 'lightsteelblue',
                        'font-size': '20px',
                        'font-style': 'italic',
                    });
                    $('#data tr:gt(0):even').css('background-color', 'lightgray');
                });             
            });
            
        </script>
    </body>
</html>

三、jQuery實(shí)現(xiàn)動(dòng)態(tài)列表

  • $函數(shù)的第一種用法:$函數(shù)的參數(shù)是另一個(gè)函數(shù)
    傳入的函數(shù)是頁面加載完成之后要執(zhí)行的回調(diào)函數(shù)
    $(document).ready(function(){});(老版本的寫法)
  • $函數(shù)的第二種用法:參數(shù)是一個(gè)選擇器字符串
    獲取元素并得到與之對(duì)應(yīng)的jQuery對(duì)象(偽數(shù)組)
  • $函數(shù)的第三種用法:參數(shù)是一個(gè)標(biāo)簽字符串
    創(chuàng)建新元素,并得到與之對(duì)應(yīng)的jQuery對(duì)象
  • $函數(shù)的第四種用法:參數(shù)是原生JavaScript對(duì)象
    將原生JS對(duì)象包裝成對(duì)應(yīng)的jQuery對(duì)象
  • jQuery對(duì)象是一個(gè)偽數(shù)組,get(0)可以獲得第一個(gè)原生JS對(duì)象
    對(duì)jQuery對(duì)象使用下標(biāo)運(yùn)算或調(diào)用get(index)方法會(huì)得到原生JS對(duì)象
<!-- 查CSS在瀏覽器中預(yù)覽效果 -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            #container {
                margin: 20px 50px;
            }
            #fruits li {
                list-style: none;
                width: 200px;
                height: 50px;
                font-size: 20px;
                line-height: 50px;
                background-color: cadetblue;
                color: white;
                text-align: center;
                margin: 2px 0;
            }
            #fruits>li>a {
                float: right;
                text-decoration: none;
                color: white;
                position: relative;
                right: 5px;
            }
            /* ~兄弟選擇器
             +相鄰兄弟選擇器*/
            #fruits~input {
                border: none;
                outline: none;
                font-size: 18px;
            }
            #fruits~input[type=text] {
                border-bottom: 1px solid darkgray;
                width: 200px;
                height: 50px;
                text-align: center;
            }
            #fruits~input[type=button] {
                width: 80px;
                height: 30px;
                background-color: coral;
                color: white;
                vertical-align: bottom;
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <ul id="fruits">
                
                <li>蘋果<a href="">×</a></li>
                <li>香蕉<a href="">×</a></li>
                <li>火龍果<a href="">×</a></li>
                <li>西瓜<a href="">×</a></li>
            </ul>
            <input id='name' type="text" name="fruit">
            <input id="ok" type="button" value="確定">
        </div>
        <script src="js/jquery.min.js">
            
        </script>
        
        <script type="text/javascript">
            
            function removeItem(evt){
                evt.preventDefault();
//              $函數(shù)的第四種用法:參數(shù)是原生JavaScript對(duì)象
//              將原生JS對(duì)象包裝成對(duì)應(yīng)的jQuery對(duì)象
                $(evt.target).parent().remove();
            }
            
            function addItem(){
                var fruitName = $('#name').val().trim();
                if (fruitName.length > 0) {
                    $('#fruits').append(
                        // $函數(shù)的第三種用法:參數(shù)是一個(gè)標(biāo)簽字符串
                        // 創(chuàng)建新元素,并得到與之對(duì)應(yīng)的jQuery對(duì)象
                        $('<li>').text(fruitName).append(
                            $('<a>').attr('href', '').text('x').on('click', removeItem)
                        )
                    );                                      
                }
                // jQuery對(duì)象是一個(gè)偽數(shù)組,get(0)可以獲得第一個(gè)原生JS對(duì)象
                // 對(duì)jQuery對(duì)象使用下標(biāo)運(yùn)算或調(diào)用get(index)方法會(huì)得到原生JS對(duì)象
                $('#name').val('').get(0).focus();
                // $('#name').val('')[0].focus();
            };
            // $函數(shù)的第一種用法:$函數(shù)的參數(shù)是另一個(gè)函數(shù)
            // 傳入的函數(shù)是頁面加載完成之后要執(zhí)行的回調(diào)函數(shù)
            // $(document).ready(function(){});  // 老版本的寫法
            $(function (){
                // $函數(shù)的第二種用法:參數(shù)是一個(gè)選擇器字符串
                // 獲取元素并得到與之對(duì)應(yīng)的jQuery對(duì)象(偽數(shù)組)
                $('#fruits a').on('click', removeItem);
                $('#ok').on('click', addItem);
                $('#name').on('keypress', function (evt){
                    if (evt.which == '13'){
                        addItem();
                    }
                });
            });
        </script>
        
    </body>
</html>

四、面向?qū)ο蟮姆綁K拖拽

  • 可以利用this給js或者jQuery對(duì)象動(dòng)態(tài)添加屬性，this所指的是當(dāng)前對(duì)象
  • each可以遍歷,參數(shù)是回調(diào)函數(shù),回調(diào)函數(shù)的參數(shù)是下標(biāo),元素
  • z-index可以調(diào)元素的層數(shù),數(shù)值越高越在上面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div{
                position: fixed;
                width: 150px;
                height: 200px;              
            }
            #one{
                left: 50px;
                top: 50px;
                background-color: red;
            }
            #two{
                left: 100px;
                top: 100px;
                background-color: blue;
            }
            #three{
                left: 350px;
                top: 30px;
                background-color: green;
            }
        </style>
        
    </head>
    <body>
        <div id="one">
            
        </div>
        <div id="two">
            
        </div>
        <div id="three">
            
        </div>
        <script src="js/mylib.js">
            
        </script>
        <script src="js/jquery.min.js">
            
        </script>
        <script type="text/javascript">
//          // 記錄當(dāng)前鼠標(biāo)點(diǎn)擊的位置坐標(biāo)
//          var oldX, oldY;
//          // 記錄div左上角坐標(biāo)
//          var oldLeft, oldTop;
//          // 記錄鼠標(biāo)是否按下
//          var isMouseDown;
            $(function(){
                makeDraggable($('#one'));
                makeDraggable($('#two'));
                makeDraggable($('#three'));
            });
            var draggables = [];
            
            function makeDraggable(jqElem){
                draggables.push(jqElem);
                jqElem.on('mousedown', function(evt){
                    this.isMouseDown = true;
                    this.oldX = evt.clientX;
                    this.oldY = evt.clientY;
                    this.oldLeft = parseInt($(evt.target).css('left'));
                    this.oldTop = parseInt($(evt.target).css('top'));
                    
                    // each可以遍歷,參數(shù)是回調(diào)函數(shù),回調(diào)函數(shù)的參數(shù)是下標(biāo),元素
                    // z-index可以調(diào)元素的層數(shù),數(shù)值越高越在上面
                    $.each(draggables, function(index, elem) {
                        elem.css('z-index', '0');
                    });
                    $(evt.target).css('z-index', '99');
                    
                })
                .on('mousemove', function(evt){
                    if (this.isMouseDown){
                        var dx = evt.clientX - this.oldX;
                        var dy = evt.clientY - this.oldY;
                        $(evt.target).css('left', this.oldLeft + dx + 'px');
                        $(evt.target).css('top', this.oldTop + dy + 'px');                      
                    }
                })
                .on('mouseup', function(evt){
                    this.isMouseDown = false;
                })
                .on('mouseout', function(evt){
                    this.isMouseDown = false;
                });
            };
        </script>
    </body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,791評(píng)論 0贊 3
  • 函數(shù)和對(duì)象 1、函數(shù) 1.1 函數(shù)概述 函數(shù)對(duì)于任何一門語言來說都是核心的概念。通過函數(shù)可以封裝任意多條語句，而且...
    道無虛閱讀 4,926評(píng)論 0贊 5
  • 1. 編寫一個(gè)函數(shù)，求1+2+3+...+N def sum1(num):num1=1for x in range...
    暖心人桂閱讀 202評(píng)論 0贊 0
  • 這部分講如何搞定動(dòng)畫 設(shè)置關(guān)鍵幀 關(guān)鍵幀knob是關(guān)鍵，設(shè)置knob來接受動(dòng)畫 完成此步驟后就可以用 setVal...
    N景波閱讀 749評(píng)論 0贊 3

友情鏈接更多精彩內(nèi)容