---
# System prepended metadata

title: 2/1 jQuery
tags: [jQuery]

---

# 2/1 jQuery 
###### tags: `jQuery`
lab01
jquery.html
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery </title>
    <style>
        header {
            background: #333;
            color: aliceblue;
            padding: 20px;
            text-align: center;
            margin-bottom: 10px;
        }
    </style>
    <script>
        // $(function(){
        //     console.log($('#container'))

        // })
    </script>
</head>

<body>
    <header>
        <h1>jQuery</h1>
    </header>
    <div id="container">
        <h3 id='hello'>Hello</h3>
        <h3 id='hello'>Hello</h3>
        <h3 id='hello'>Hello</h3>
        <hr>
        <h3 id="jQ">jQuery</h3>
        <h3 id="jQ">jQuery</h3>
        <h3 id="jQ">jQuery</h3>
    </div>
    <!-- <script src="../js/jquery-3.5.1.js"></script> -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script>
        // let hello = document.querySelector('#hello')
        let hello = document.querySelectorAll('#hello')
        console.log(hello)
        for(let i=0;i<hello.length;i++){
            hello[i].addEventListener('mouseenter', enterHello)
            hello[i].addEventListener('mouseleave', leaveHello)
        }
        function enterHello() {
            this.style.color = 'red'
        }
        function leaveHello() {
            this.style.color = 'black'
        }



        $(function () {
            let iii = 'gary'
            
            $('h3#jQ').on('mouseenter', function () {
                $(this).css('color', 'lightblue')
            }).on('mouseleave', function () {
                $(this).css('color', 'black')
            })
        })
    </script>
</body>

</html>
```
lab01.html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div1">

    </div>
    <script>
        document.getElementById(div1)
        document.querySelector('#div1')
        document.querySelectorAll('#div1')

        $('#div1')
    </script>
</body>
</html>
```
lab02
basic_filter.html
```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic filter</title>
    <style>
        #tb {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 10px auto;
        }

        tr td {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <table id="tb">
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3 <span>jQuery</span></td>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>4</td>
            <td>4</td>
            <td>4</td>
        </tr>
    </table>
    <ul id="list1">
        <li class="not">item</li>
        <li>item</li>
        <li>item</li>
        <li class="not">item</li>
        <li>item</li>
        <li>item</li>
        <li class="not">item</li>
        <li>item</li>
        <li>item</li>
    </ul>
    <ul id="list2">
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li class="not">item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li class="not">item</li>
    </ul>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
           /*
            // :eq() 索引從0
            // $('td:eq(0)').css('background', 'lightblue')
            // $('td:eq(3)').css('background', 'lightblue')
            // $('td:eq(4)').css('background', 'lightblue')
            // :lt() 小於索引的
            $('td:lt(4)').css('background', 'pink')
            // :gt() 大於索引的
            $('td:gt(10)').css('background', 'lightgreen')
            // :even
            $('td:even').css('background', 'red')
            //:odd
            $('td:odd').css('background', 'yellow')
            //:first
            //:last
            //:not

            $('li:eq(10)').css('background','lightblue')
            $('li:first').css('background','yellow')
            $('li:last').css('background','lightgreen')
            $('li:not(.not)').css('background','pink')
        */
            //child-filter
            // :first-child
            $('tr td:first-child').css('background','lightblue')
            // :last-child
            $('tr td:last-child').css('background','lightgreen')
            // :nth-child(n) 
            $('tr td:nth-child(2)').css('background','pink')
        
            //filtering
            // first() 
            $('td').first().css('background','yellow')
            // last()
            $('td').last().css('background','black')
            //eq(n) 
            $('td').eq(10).css('background','red')
            //not()
            $('li').not('.not').css('background','lightgreen')            
            //has()
            $('td').has('span').css('background','blue')
        })
    </script>
</body>

</html>
```
formSelector.html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form Selector</title>
    <style>
        .form{
            width: 300px;
            height: 300px;
            border: 2px solid black;
            margin: auto;
            padding: 5px;
        }
    </style>
</head>
<body>
    <form class="form" id="form1">
        <h3>Form one</h3>
        <label>Name</label>
        <input type="text" id="name">
        <br>
        <label>Email</label>
        <input type="email" id="email">
        <br>
        <label>Gender</label>
        <input type="radio" id="gender">Male
        <input type="radio"  id="gender">Female
        <br>
        <label>Habit</label>
        <input type="checkbox" id="habit"><span>Movie</span>
        <input type="checkbox" id="habit" checked><span>Game</span>
        <br>
        <label>City</label>
        <select id="selectCity">
            <option value="Taipei">Taipei</option>
            <option value="Taoyuan" selected>Taoyuan</option>
            <option value="Hsinchu">Hsinchu</option>
            <option value="Miaoli">Miaoli</option>
            <option value="Kaohsiung">Kaohsiung</option>
        </select>
        <br>
        <button class="btn" id="btn">setting</button>
        <button class="btn" id="disabled" disabled>setting</button>
        
    </form>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $(':button').css('background','blue')
            $(':input').css('background','yellow')
            $(':disabled').css('background','red')
            $(':selected').css('background','pink')
            $(':checked + span').css('background','lightblue')
            $('#selectCity').on('change',function(){
                console.log($(':selected').val())
            })
        })
    </script>
</body>
</html>
```
lab03
content_filter.html

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>content filter</title>
</head>
<body>
    <div id="container">
        <h1 id="heading1">heading one</h1>
        <p id="para1">Hello Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora aspernatur deserunt nisi assumenda autem voluptatum nam a vero quam fuga omnis at velit, odio, neque fugiat eum, minima illum impedit?</p>
        <h1 id="heading2">heading two</h1>
        <p class="para2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora aspernatur deserunt nisi assumenda autem voluptatum nam a vero quam fuga omnis at velit, odio, neque fugiat eum, minima illum impedit?</p>
        <h1 id="heading3">heading three</h1>
        <p class="para3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis commodi quos quam architecto. Minima, dolorem culpa fugit, sunt quod veritatis corrupti sapiente repudiandae quasi hic aliquam porro! Sequi, obcaecati corporis.<span style="font-style: italic;">jQuery</span></p>
        <h1 id="heading4">heading four</h1>
        <p></p>
    </div>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        // :contains(text) 
        $('p:contains(Hello)').css('background','lightblue')
        // :has(element)
        $('p:has(span)').css('background','lightgreen')
        // :empty 
        $('p:empty()').text('test')
</script>
</body>
</html>
```
lab04
treetraversal.html
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TreeTraversal</title>
    <style>
        #tb {
            width: 400px;
            height: 400px;
            border: 2px solid black;
            margin: 10px auto;
        }

        tr td {
            border: 1px solid black;
        }
        .box{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: pink;
            display: inline-block;
            margin:5px
        }
    </style>
</head>
<body>
    <table id="tb">
        <tr>
            <td>
                <div class="box"></div>
                <div class="box"></div>
            </td>
            <td><div class="box"></div></td>
            <td></td>
            <td>
                <div class="box"></div>
            </td>
        </tr>
        <tr>
            <td>
                <div class="box"></div>
            </td>
            <td></td>
            <td>
                <div class="box"></div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>
                <div class="box"></div>
            </td>
            <td></td>
            <td class="stop">
                <div class="box">
                    <span class="jq">jQuery</span>
                </div>
            </td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>  <div class="box"></div></td>
        </tr>
    </table>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
            $('td').on('click',function(){
                // console.log('123')
                // .childern() 往下找一層
                // $(this).children('.jq').css('background','lightblue')
                // .find() 往下找多層
                // $(this).find('.jq').css('background','yellow')

                // .next()
                // $(this).next().css('background','lightblue')
                // $(this).nextAll().css('background','lightblue')
                $(this).nextUntil('.stop').css('background','lightblue')
            })



        })
    </script>
</body>
</html>
```