Python Day 52 前端、jquery框架、jq引入、jq操做頁面、jq經常使用操做、jq鏈式操做、jq操做文檔

時間 2019-12-13

標籤 python day 前端 jquery 框架引入頁面經常使用鏈式文檔欄目 Python 简体版

原文原文鏈接

　　##內容回顧css

Javascript

一、三種引入方式
二、弱語言 - 腳本語言 - 編程語言
三、變量 - 四種 let const var 無關鍵字
四、數據類型 - 值類型、引用類型 - string | array.splice(begin, length, args) | dic.key dic['key']
五、流程控制：if(){}else if(){}else{} | while(){} | for(①;②;③){④}
六、函數：參數列表 - 形參和實參個數不須要統一
七、js頁面交互
    1）先獲取頁面標籤
        js選擇器：getElemet | querySelector(All)
    2）事件綁定：on事件名
        鼠標事件、鍵盤事件、表單事件
    3）操做標籤
        樣式、屬性、內容
        div.style.color
        getComputedStyle(div, null).backgroundColor
        div.setAttribute('class', 'box')
        div.getAttribute('class')
        div.innerText(innerHTML)
        inp.value

　　##jquery框架html

#一、what: 
    jQuery是對js進行的二次封裝的工具包
    二次封裝：比js使用起來便捷了，操做比就是綜合了(寫一句jq能夠實現多句js邏輯)，底層就是原生js
    工具包：jq就是一堆函數的集合體，經過jq對象來調用(jQuery)
    
#二、why：
    跟快速使用js

#三、where：
    使用js的地方均可以使用jq

#四、how：
1.官網下載：https://jquery.com/download/
    jquery-3.4.1.js | jquery-3.4.1.min.js
    
2.在 須要jq環境的頁面中 使用jq
<script src="js/jquery-3.4.1.js"></script>
<script>
    // $ 就是jQuery對象，能夠使用jQuery的全部功能
</script>

3.根據API學習jq：http://jquery.cuishifeng.cn/

　　##jq引入jquery

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
</head>
<body>

</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    // js - ES語法 | 瀏覽器(BOM) window.* | 文檔(DOM window.document) document.*

    // window.alert('js code');
    // window.document.write(123)
    // window.print()

    // 如何寫jq代碼  jQuery至關於$
    console.log(jQuery);
    console.log($);
    window.owen = 'Owen';
    console.log(window.owen);
    console.log(owen);

    console.log($owen);

</script>
</html>

　　##jq操做頁面css3

// 總結：
    `
    1. $('css3選擇器語法') 就是jq選擇器，得到的是jq對象，jq對象能夠理解爲存放了js對象的數組 （存放了幾個js對象不須要關心）
    2. jq對象轉換爲js對象 - jq對象[js對象所在索引] - 能夠使用js的語法
    3. js對象轉換爲jq對象 - $(js對象) - 能夠使用jq的語法
；


// 操做頁面的三步驟
    // 1.獲取標籤
    // 2.綁定事件
    // 3.操做標籤

// 文本
    // $div.text()  文本內容
    // $div.html()  標籤內容
    // $inp.val()  表單內容

#案例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <h1>標題</h1>
    <p class="p1">p11111111111111111111111111</p>
    <p class="p2">p22222222222222222222222222</p>
    <div>
        <b>div的加粗內容</b>
    </div>
    <form action="">
        <input type="text">
    </form>
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
    // 1.jq選擇器 - 獲得的是jq對象 - jq對象能夠調用jq庫的全部功能
    // $('css語法選擇器')

    let h1 = $('h1');
    console.log(h1);

    let p1 = $('.p1');
    let p2 = $('p:nth-of-type(2)');
    console.log(p1, p2);


    // 想經過js對象獲取第2個p的文本內容
    let ps = $('p');
    console.log(ps);

    let _p2 = ps[1];  // jq對象能夠理解爲存放了js對象的數組
    console.log(_p2.innerText);

    // 想經過jq對象獲取第2個p的文本內容
    p2 = $(_p2);
    console.log(p2.text());

    // 總結：
    `
    1. $('css3選擇器語法') 就是jq選擇器，得到的是jq對象，jq對象能夠理解爲存放了js對象的數組 （存放了幾個js對象不須要關心）
    2. jq對象轉換爲js對象 - jq對象[js對象所在索引] - 能夠使用js的語法
    3. js對象轉換爲jq對象 - $(js對象) - 能夠使用jq的語法
    `;

</script>

<script>
    // 操做頁面的三步驟
    // 1.獲取標籤
    // 2.綁定事件
    // 3.操做標籤

    // $('h1').click(function (ev) {
    //     // jq的事件對象，但對js事件對象作了徹底兼容
    //     console.log(ev);
    //         點擊座標
    //     console.log(ev.clientX);
    //     console.log(ev.clientY);
    // })

    // $('h1').on('click', function (ev) {
    //     console.log(ev);
    // })

    $('p').click(function () {
        // 在jq事件中的this仍是js對象，若是要使用jq功能，須要將this轉換爲jq對象
        console.log($(this));
        console.log($(this).text());
    });

    // 文本
    // $div.text()  文本內容
    // $div.html()  標籤內容
    // $inp.val()  表單內容

    // 需求1：點擊h1獲取 自身文本內容、div的標籤內容、input的表單內容
    $('h1').click(function () {
        console.log($(this).text());
        console.log($('div').html());
        console.log($('input').val());
    })




</script>

</html>

　　##jq經常使用操做編程

// 1、文本操做
    // $div.text()  文本內容
    // $div.html()  標籤內容
    // $inp.val()  表單內容

// 2、樣式操做
    // 獲取樣式: $div.css('css中的樣式屬性名')
    // 設置樣式:
    `
    $div.css('css中的樣式屬性名', '屬性值');  // 單一設置
    $div.css({
        '屬性1': '值1',
        ...
        '屬性n': '值n',
    });
    $div.css('屬性', function (index, oldValue) {
        console.log(oldValue);
        // $(this) 能夠拿到調用者對象
        return 返回值就是要設置的值(能夠與自身其餘屬性，或是頁面其餘標籤，或是自定義邏輯有關係);
    })

// 3、類名 - 能夠一次性獲取提早設置好的一套樣式
    `
    增長類名：$div.addClass('類名')
    刪除類名：$div.removeClass('類名')
    切換類名：$div.toggleClass('類名') 沒有就添加 存在就刪除

// 4、屬性
    `
    獲取屬性值：$div.attr('屬性名')
    設置屬性值：$div.attr('屬性名', '屬性值或函數')
    刪除屬性值：$div.attr('屬性名', '')

//案例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <style>
        h1 {
            font-size: 36px;
            text-align: center;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .red {
            background-color: red;
            border-radius: 50%;
        }
        .yellow {
            width: 400px;
            border-radius: 100px;
            background-color: yellow;
        }
        .blue {
            width: 400px;
            border-radius: 50%;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1 id="h1" style="color: red">標題</h1>
    <img src="" alt="">
    <button class="btn1">紅</button>
    <button class="btn2">黃</button>
    <button class="btn3">藍</button>
    <div class="box"></div>
    
</body>
<script src="js/jquery-3.4.1.js"></script>
<script>
$('h1').click(function () {
        //click 和on都是點擊事件
        //$(this)獲取一個jq對象----$this----- 這個對象變量名可自定義
        let $this = $(this);
        //經過jq對象獲取顏色屬性
        let color = $this .css('color');
        //經過jq對象獲取字體大小屬性
        let fs = $this.css('font-size');
        //經過jq對象獲取位置屬性
        let ta = $this.css('text-align');
        //parseInt(fs)能夠獲得取整數值 去除單位
        console.log(color, parseInt(fs), ta);
        //經過對象設置背景顏色
        $this.css('background-color', 'orange');
        $this.css({
            'background-color': 'pink',
            'border-radius': '10px',
            'width': '200px',
        });
        //設置高度，爲寬度的一半
        $this.css('height', function (index, oldValue) {
            console.log(oldValue);
            let w = $(this).width();
            return w / 2;
        })
    })
//點擊紅色按鈕 變爲紅色，由於添加了紅色css樣式
    $('.btn1').click(function () {
        $('.box').addClass('red');
        $('.box').removeClass('yellow');
        $('.box').removeClass('blue');

        // $('.box').toggleClass('red');  // 無red類添加，反之去除
    });
    //點擊黃色按鈕 變爲紅色，由於添加了黃色css樣式
    $('.btn2').click(function () {
        let $box = $('.box');
        //會覆蓋寫
        $box[0].className = 'box';
        $box.addClass('yellow');
    });
    //點擊藍色按鈕 變爲紅色，由於添加了藍色css樣式
    $('.btn3').click(function () {
        $('.box').addClass('blue');
    });
$('h1').click(function () {
        //獲取屬性值
        let h1_id = $(this).attr('id');
        console.log(h1_id);

        //設置屬性值
        $('img').attr('src', function () {
            return 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=705ffa145fda81cb51e685cd6267d0a4/4bed2e738bd4b31c5a30865b89d6277f9f2ff8c6.jpg'
        });
        //刪除屬性值
        $(this).attr('id', '');
    })



</script>
</html>

　　##jq鏈式操做數組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>標題</h1>

</body>
<script src="js/jquery-3.4.1.js"></script>
<!--之後項目線上可直接外聯到： CDN服務器 | 官網服務器可能會變化 -->
<!--<script src="https://code.jquery.com/jquery-3.4.1.js"></script>-->
<script>
    // 經過$('h1')   jq對象設置屬性
    // let _self = $('h1').css('color','orange')
    //
    // _self = _self.click(function () {
    //     console.log(this)
    // });
    // //設置背景顏色
    // _self = _self.css('background','red');
    //鏈式設置屬性 
    $('h1').css('color','orange').css('background','red').click(function () {
        console.log(this)
    }).text('修改標題');
</script>
</html>

　　##jq操做文檔瀏覽器

// 1、快速定位到某一個jq對象
    `
    // 1）在jq集合中快速拿到某一個jq對象: jq對象.eq(index)
    // $('.d:eq(1)')  ==  $('.d').eq(1)
    // $('.d').eq(1).click(function () {
    //     alert(123)
    // })
    // 2）在jq集合中都具備系統事件，在事件中如何區別每個jq對象
    // $(this) | 索引
    $('.d').click(function () {
        // 標籤所在層級的索引，不是在jq對象數組中的索引
        let index = $(this).index();
        console.log(index)
    });
// 2、經過自身快速定位到 "親戚"
    `上兄弟(們) prev(All)
    下兄弟(們) next(All)
    兄弟們 siblings
    孩子們 children
    父親(們)
    `;
 // 3、動態生成頁面結構
    // let $table = $('<table></table>');
    // $table.css({
    //    border: '1px'
    // });
    // $('body').append($table);  // 加入到body最後
    // $('body').prepend($table);  // 加入到body最後
    // $('p').before($table);  // 加入到p以前
    // $('p').after($table);  // 加入到p以後
//4、案例
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操做文檔</title>
    <style>
        .d {
            width: 50px;
            height: 50px;
            background-color: orange;
            border-radius: 50%;
        }
    </style>
</head>
<body>

    內容：<input type="text">
    行：<input type="text">
    列：<input type="text">
    <p>表格</p>
    <div>
        <div class="d d1"></div>
        <div class="d d2">
            <div class="sub"></div>
            <div class="sub"></div>
            <div class="sub"></div>
        </div>
        <div class="d d3"></div>
        <div class="d d4"></div>
    </div>
</body>
<script src="js/jquery-3.4.1.js"></script>

<script>
let $d2 = $('.d2');
    console.log($d2);
    //找下一個
    let next = $d2.next();
    console.log(next);
    //找下面全部兄弟們
    let nexts = $d2.nextAll();
    console.log(nexts);
    //找前一個
    let prev = $d2.prev();
    console.log(prev);
    //找兄弟
    let siblings = $d2.siblings();
    console.log(siblings);
    //找孩子們
    let children = $d2.children();
    console.log(children);
    //找長輩們
    let parent = $d2.parent();
    console.log(parent);
    `;
// 需求：點擊表格，在以後插入指定寬高的表格
    $('p').click(function () {
        let inps = $('input');

        // 表
        let table = $('<table border="1"></table>');
        //獲取第二個輸入框輸入的值
        let row = inps.eq(1).val();
        console.log(typeof(inps.eq(1).val()));
        //獲取第三個輸入框輸入的值
        let col = inps.eq(2).val();
        // 行
        for (let i = 0; i < row; i++) {
            let tr = $('<tr></tr>');
            table.append(tr);
            // 列
            for (let j = 0; j < col; j++) {
                let td = $('<td>' + inps.eq(0).val() + '</td>');
                tr.append(td);
            }

        }

        $(this).after(table);
    })
</script>

</html>