jQuery_06/09-06/11

 

事件驅動：透過針對某個 DOM 節點做一個 addEventListener 監視事件，當事件被觸發的時候執行某個 function 產生資料變化或畫面改變。

資料驅動：直接將畫面與資料綁定關連性，未來只要資料變動，自動重新渲染畫面更新，不再需要選取 DOM 節點。


 DOM(document  object model)：瀏覽器物件模型

 BOM(browser object model)：文件物件模型


java script：

    放在body之前的原因

                1.因為執行順序，dom一定是ready的，輕重緩急

                2.因為現在越來越複雜了，希望使用者一進來越快有畫面越好

        $(document).ready(function(){

        });

        $(function(){
            
        })

            正常寫法

            簡寫寫法

jQuery slim：更小，拿掉 ajax 跟 effect 的部份。

fetch js：新世代原生的技術


jquery的基本用法：

    $(selector)+動作語法

  $('h1').css('color', 'blue')

        selector        哪個       做甚麼


    form selector表單選擇器：

       checked：先被選擇

        disable：不能存取


    basic filter:基本過濾

        ●:eq() - 選取第 n 個(從0開始計算)

        ●:even - 選取第偶數個(從0開始計算)

        ●:odd - 選取第奇數個(從0開始計算)

        ●:first - 選取第一個

        ●:last - 選取最後一個

        ●:gt() - 選取大於第 n 個的(也可以給負數)

        ●:lt() - 選取小於第 n 個的(也可以給負數)

        ●:header - 選取 h1~h6

        ●:not()- 不選取某個狀態，範例為只有沒選取狀態下的 checkbox 旁的字會變色

#html

    <div>
        <input type="checkbox" name="alex">
        <span>Alex</span>
    </div>
    <div>
        <input type="checkbox" name="bill" checked>
        <span>Bill</span>
    </div>

#jq

    <script>
        $('input:not(:checked) + span').css("background", 'yellow')
    </script>


child filter

        ●:first-child - 選取第一個

        ●:last-child - 選取最後一個

        ●:first-of-type - 選取同類第一個

                每個家族內的第一個 會被選取

        ●:last-of-type - 選取同類最後一個

        ●:nth-child() - 第 n 個

                css屬性，從1開始算

        ●:nth-last-child() - 倒數第 n 個

        ●:nth-of-type()

        ●:nth-last-of-type()

        ●:only-child - 選取只有一個的

        ●:only-of-type

    <div class="wrap">
        <span>123</span>
        <div class="box">box1</div>
        <div class="box">box1</div>
        <div class="box">box1</div>
        <div class="box">box1</div>
        <div class="box">box1</div>
        <div class="box">box1</div>
        <span>456</span>
    </div>
    <div class="wrap">
        <span>456</span>
    </div>

    <span>666</span>

        $('.box:first-child').css('background', 'red')

        $('.box:last-child').css('background', 'green')
        $('span:first-of-type').css('color', 'red')
        $('span:last-of-type').css('color', 'blue')
        $('.box:nth-child(2)').css('background', 'blue')
        $('.box:nth-of-type(1)').css('background', 'red')
        $('span:only-child').css('color', 'green')
        $('span:only-of-type').css('color', 'tomato')














Content filter

       :contains       選取內容包含xx
       :empty        選取內容為空的元素
       :has            包含 xx 元素

Visibility Filter

        ●:hidden- 選取隱藏的 

        ●:visible- 選取看得見的



traversing 遍歷 ：可以使網頁的節點內移動

    可以串起來(chaining)的

    網站內的移動行為

    preobject的位置不一樣

$('td:eq(2)').css('background', 'blue')

    選取器直接設定好，直接選

$('td').eq(2).css('background', 'blue')

    從document 選到所有的td，再用選取器選

        $('td').css('background', 'green').eq(2).css('background', 'red')
        //根據25個td改變他的css->25個td內篩選出1個td後->再去改他的CSS


    <script>
        $("div").has(".a1").css('border', '1px solid red')
    </script>

   div中選擇有ai class 再用CSS改變樣式


Tree Traversal：


下層選取

    ●.children()- 所有條件相符子元素(只找一層) 

    ●.find()- 找條件相符子孫元素

上層選取

    ●.parent()- 往上選取一層

    ●.closest()- 最接近祖先元素

    ●.parents()- 往上選取全部

    ●.parentsUntil()- 往上選取全部並設定停止的元素

    <div class="container">
        <div class="row">
            <ul class="level-1">
                <!-- li.item-${item}*3 -->
                <li class="item-1">item1</li>
                <li class="item-2">item2
                    <ul class="level-2">
                        <!-- li.item-0${item0$}*3 -->
                        <li class="item-01">item01</li>
                        <li class="item-02">item02
                            <ul class="level-3">
                                <li class="item-001">item001</li>
                                <li class="item-002">item002</li>

                                <li class="item-003">item003</li>
                            </ul>
                        </li>
                        <li class="item-03">item03</li>
                    </ul>

                </li>
                <li class="item-3">item3</li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=
"crossorigin="anonymous">
        </script>
    <script>
        // $('.item-002').parent().css('border', '1px solid black')
        // $('.item-002').closest('.item-2').css('border', '1px solid black')
        // $('.item-002').closest('.item-2').prev().css('border', '1px solid black')
        //先到那一層再去處理  prev()或next()
        // $('.item-002').parents().css('border', '1px solid black')
        //可以找所有的父層
        $('.item-002').parentsUntil('.level-1').css('border', '1px solid black')
        //直到level-1為止選取,level-1不選
    </script>






後面選取

    ●.next()- 往後找一個元素

    ●.nextAll()- 往後及其之後的元素

    ●.nextUntil()- 往後選但到特定元素後停止

前面選取

    ●.prev()-往前找一個元素

    ●.prevAll()-往前及其之前的元素

    ●.prevUntil()-往前選但到特定元素停止

    <div class="container">
        <div class="row">
            <ul class="level-1">
                <!-- li.item-${item}*3 -->
                <li class="item-1">item1</li>
                <li class="item-2">item2
                    <ul class="level-2">
                        <!-- li.item-0${item0$}*3 -->
                        <li class="item-01">item01</li>
                        <li class="item-02">item02
                            <ul class="level-3">
                                <li class="item-001">item001</li>
                                <li class="item-002">item002</li>
                                <li class="item-003">item003</li>

                                <li class="item-004">item003</li>
                            </ul>
                        </li>
                        <li class="item-03">item03</li>
                    </ul>

                </li>
                <li class="item-3">item3</li>
            </ul>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
        </script>
    <script>
        $('.item-002').closest('.item-02').next().css('border', '1px solid black')
        $('.item-002').nextAll().css('border', '1px solid black')
        $('.item-002').nextUntil('.item-003').css('border', '1px solid black')
    </script>









其他選取

    ●.siblings()- 自己以外的元素

    <div class="a1">A1</div>
    <div class="a2">A2</div>
    <div class="a3">A3</div>
    <div class="a4">A4</div>
    <div class="a5">A5</div>

    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
        </script>
    <script>
        $(".a2").siblings().css("background", "red");
        //siblings 除了自己以外的物件
    </script>

   



    




     ●.end()- 回到上一個選取狀態

    <ul class="first">
        <li class="a1">list item 1</li>
        <li>list item 2</li>
        <li class="a2">list item 3</li>
    </ul>
    <ul class="second">
        <li class="b1">list item 1</li>
        <li>list item 2</li>
        <li class="b2">list item 3</li>
    </ul>

    <script src="https://code.jquery.com/jquery-3.6.0.js"
        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous">
        </script>
    <script>
        $('ul.first').find('.a1').css('background', 'red').end().find('.a2').css('background', 'green')
    </script>








ex1

    ●點擊 checkbox 後讓整行 highlight

    ●用 :checkbox 選擇上層元素





    <div class="container">
        <div class="row">
            <table class="table table-bordered">
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Elon Musk</td>
                    <td>0958077320</td>
                    <td>ElonMusk@gmail.com</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Elon Musk</td>
                    <td>0958077320</td>
                    <td>ElonMusk@gmail.com</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Elon Musk</td>
                    <td>0958077320</td>
                    <td>ElonMusk@gmail.com</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox">
                    </td>
                    <td>Elon Musk</td>
                    <td>0958077320</td>
                    <td>ElonMusk@gmail.com</td>
                </tr>
            </table>
        </div>
    </div>

        $('input').click(function () {
            $(this).parent().css('background', 'lightblue').siblings().css('background', 'lightblue')
            //選取上層後 再選取同層的所有東西
        })

ex2

    ●點擊 div 後讓後面背景顏色都變成 lightblue

<script>
        $('.box').click(function () {
            $(this).css('background', 'lightblue').nextAll().css('background', 'lightblue')
        })
    </script>





留言

張貼留言

這個網誌中的熱門文章

jQuery_06/17

圖片
  要更改Array的時候的指令          //要從後面多加資料在陣列內就可以用push          const   myArray  = [ 1 ,  2 ,  3 ];          //這是錯誤寫法，因為const宣告的變數不能重新腹值          // myArray = [1, 2, 3, 4];          console . log ( 'myArray1' ,  myArray );          // myArray.push(4);          // console.log('myArray2', myPop);          //從後面加入          // const myPop = myArray.pop();          // console.log('myArray2', myPop);          //從後面拿資料       ...
閱讀完整內容

jQuery_06/15-06/16

事件處理(event)：           Mouse event(滑鼠事件)                click()-點擊                dblclick()-連點          //快速點擊兩次，實際上會觸發兩次 click以及一次 dblclick          $ ( '.btn' ). click ( function  () {              console . log ( 'click' );              //單純的執行命令，沒辦法再呼叫一次              //如果想重複執行，麻煩包在一個function裡面         })          $ ( '.btn' ). dblclick ( function  () {              console . log ( 'dblclick1 ' );       ...
閱讀完整內容