1. Environment object
Environment object: refers to the special variable this inside the function, which represents the environment in which the current function is running.
Function: clarifying the point of this can make the code more concise
- The method of calling the function is different, and the object this refers to is also different.
- [Whoever calls, this is who] is a rough rule for judging what this points to.
- Directly calling the function is actually equivalent to the window. function, so thi refers to window
<body>
<button>Click</button>
<script>
// Each function has this environment object. In ordinary functions, this points to window.
// function fn () {
// console.log()
// }
// window.fn()
const btn = document.querySelector('button')
btn.addEventListener('click',function (){
// console.log(this) // btn object
// btn.style.color = 'red'
this.style.color = 'red'
})
</script>
</body>
2. Callback function
If function A is passed as a parameter to function B, function A is called a callback function.
When a function is passed as a parameter to another function, this function is a callback function.
Pass a function as a parameter of another function. This function is called a callback function.
The callback function is essentially a function, but it is used as a parameter.
It is common to use anonymous functions as callback functions
Common usage scenarios:
<script>
function fn(){
console.log('I am the callback function...')
}
// fn is passed to setInterval, fn is the callback function
setInterval(fn,1000)
</script>
<script>
box.addEventListener('click', function () {
console.log('I am also a callback function')
})
</script>
3. Comprehensive case
Tab bar switching
Requirement: When the mouse passes through different tabs, different content can be displayed at the bottom
analyze:
- The main core is class switching. Setting a current class can highlight the current element.
- When the mouse passes over the current tab, the current class on other elements will be removed first, and only the class will be added to the current element.
- Note that the current class can only have one
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tab bar switching</title>
<style>
* {
margin: 0;
padding: 0;
}
.tab {
width: 590px;
height: 340px;
margin: 20px;
border: 1px solid #e4e4e4;
}
.tab-nav {
width: 100%;
height: 60px;
line-height: 60px;
display: flex;
justify-content: space-between;
}
.tab-nav h3 {
font-size: 24px;
font-weight: normal;
margin-left: 20px;
}
.tab-nav ul {
list-style: none;
display: flex;
justify-content: flex-end;
}
.tab-nav ul li {
margin: 0 20px;
font-size: 14px;
}
.tab-nav ul li a {
text-decoration: none;
border-bottom: 2px solid transparent;
color: #333;
}
.tab-nav ul li a.active {
border-color: #e1251b;
color: #e1251b;
}
.tab-content {
padding: 0 16px;
}
.tab-content .item {
display: none;
}
.tab-content .item.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab-nav">
<h3>Daily Specials</h3>
<ul>
<li><a class="active" href="javascript:;">Featured</a></li>
<li><a href="javascript:;">Food</a></li>
<li><a href="javascript:;">Department store</a></li>
<li><a href="javascript:;">Personal care</a></li>
<li><a href="javascript:;">Preview</a></li>
</ul>
</div>
<div class="tab-content">
<div class="item active"><img src="./images/tab00.png" alt="" /></div>
<div class="item"><img src="./images/tab01.png" alt="" /></div>
<div class="item"><img src="./images/tab02.png" alt="" /></div>
<div class="item"><img src="./images/tab03.png" alt="" /></div>
<div class="item"><img src="./images/tab04.png" alt="" /></div>
</div>
</div>
<script>
// 1. When making a module, you need to bind mouse passing events to 5 links.
// 1.1 Get the a element
const as = document.querySelectorAll('.tab-nav a')
// console.log(as)
for(let i = 0; i < as.length; i + + ){
// console.log(as[i])
as[i].addEventListener('mouseenter', function(){
// console.log('Mouse passed')
// Exclusionary Thoughts
// Kill others and remove class active
document.querySelector('.tab-nav .active').classList.remove('active')
// I ascend the throne, I add the class active this to the current a
this.classList.add('active')
//The following 5 big boxes correspond to .item one-to-one
document.querySelector('.tab-content .active').classList.remove('active')
// Display the item corresponding to the serial number and add the active class
document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')
})
}
</script>
</body>
</html>
4. Select all text box case 1
Requirements: If the user clicks Select All, all the check boxes below will be selected, and if the user cancels the selection, all will be cancelled.
analyze:
- Click on the select all checkbox to get the checked status of the current button
- Change the checked status of all the small checkboxes below to be consistent with the selected all checkbox.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "Microsoft Yahei";
color: #fff;
height: 24px;
}
td{
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">Select all</span>
</th>
<th>Product</th>
<th>Merchant</th>
<th>Price</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi mobile phone</td>
<td>Xiaomi</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi Water Purifier</td>
<td>Xiaomi</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi TV</td>
<td>Xiaomi</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 1. Get the large checkbox
const checkAll= document.querySelector('#checkAll')
// 2. Get all small check boxes
const cks = document.querySelectorAll('.ck')
// 3. Click the big check box to register the event
checkAll.addEventListener('click',function () {
// Get the selected status of the current large check box
// console.log(this.checked) // Get whether it is true or false
// 4. Traverse all the small check boxes and let the checked value of the small check box = the checked value of the large check box
for(let i = 0; i < cks.length; i + + ){
// cks[i].checked = checkAll.checked
cks[i].checked = this.checked
}
})
</script>
</body>
</html>
5. Select all text box case 2
Requirements: If the user clicks Select All, all the check boxes below will be selected. If the user cancels the selection, all will be cancelled, and the text will change accordingly.
analyze:
- Traverse all checkboxes below and add click events
- Check whether the number of selected small check boxes is equal to the total number of small check boxes
- Give the results to the Select All button
- Using css checkbox selector input:checked
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px "Microsoft Yahei";
color: #fff;
height: 24px;
}
td{
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll"> <span class="all">Select all</span>
</th>
<th>Product</th>
<th>Merchant</th>
<th>Price</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi mobile phone</td>
<td>Xiaomi</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi Water Purifier</td>
<td>Xiaomi</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>Xiaomi TV</td>
<td>Xiaomi</td>
<td>￥5999</td>
</tr>
</table>
<script>
// 1. Get the large checkbox
const checkAll= document.querySelector('#checkAll')
// 2. Get all small check boxes
const cks = document.querySelectorAll('.ck')
// 3. Click the big check box to register the event
checkAll.addEventListener('click',function () {
// Get the selected status of the current large check box
// console.log(this.checked) // Get whether it is true or false
// 4. Traverse all the small check boxes and let the checked value of the small check box = the checked value of the large check box
for(let i = 0; i < cks.length; i + + ){
// cks[i].checked = checkAll.checked
cks[i].checked = this.checked
}
})
// 5. The small check box controls the large check box
for(let i = 0; i < cks.length; i + + ){
// 5.1 Add click events to all small check boxes
cks[i].addEventListener('click',function () {
// Determine whether the number of selected small check boxes is equal to the total number of small check boxes
// Be sure to write it into the click, because you need to get the latest number every time
// console.log(document.querySelectorAll('.ck:checked').length)
// console.log(document.querySelectorAll('.ck:checked').length === cks.length)
checkAll.checked = document.querySelectorAll('.ck:checked').length === cks.length
})
}
</script>
</body>
</html>