# 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>
```
Sign in with Wallet
Connect another wallet