当前位置：网站首页>Js5day (event monitoring, function assignment to variables, callback function, environment object this, select all, invert selection cases, tab column cases)
Js5day (event monitoring, function assignment to variables, callback function, environment object this, select all, invert selection cases, tab column cases)
2022-07-02 12:45:00 【By the Difeng River】
List of articles
Event monitoring
Three elements of event monitoring ：
- Event source ( Who was triggered )
- event ( How to trigger , Like a mouse click
click、 Mouse overmouseoveretc. ) - Event handler （ What are you going to do ）
<button> Click on me to pop up good things </button>
<script>
let btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(' What do I do ')
})
</script>
Event listening version ：
Event type
Higher order function
Higher order functions can be simply understood as advanced applications of functions ,JavaScript The middle function can Be treated as 【 value 】 To treat , Realize the advanced application of function based on this feature .
【 value 】 Namely JavaScript Data in , Such as numerical value 、 character string 、 Boolean 、 Object etc. .
Function expression
- The function is also 【 data 】
- Assign a function to a variable
Callback function
- Pass a function as an argument to another function , This function is called Callback function
- Callback function is still a function in essence , Just use it as a parameter
- It is common to use anonymous functions as callback functions
Environment object
The goal is ： Be able to analyze and judge whether the function runs in different environments this The object of reference
Environment object refers to Special variables inside the function this , It represents the environment in which the current function runs
** effect ：** To figure out what this The direction of , Can make our code more concise
- Functions are called in different ways ,this The objects referred to are also different
- 【 Who is calling , this Who is the 】 Is a judgment this Rough rules for pointing to
- Call function directly , In fact, it's equivalent to window. function , therefore this Refer to window
Exclusive thoughts
The current element is A state , The other elements are B state .
Use ：
- Get rid of everyone
Use for loop - Resurrect himself
adopt this Or the subscript finds itself or the corresponding element
<!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>Document</title>
<style>
.pink {
background: pink;
}
</style>
</head>
<body>
<button> The first 1 individual </button><button> The first 2 individual </button><button> The first 3 individual </button><button> The first 4 individual </button><button> The first 5 individual </button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
// this.classList.add('pink') //this Points to the current calling function btns[i]
// Kill all the buttons
for (let j = 0; j < btns.length; j++) {
btns[j].classList.remove('pink')
}
// Resurrect myself
this.classList.add('pink')
})
}
</script>
</body>
</html>
improvement ：（ There must be a preset button here pink class , The first method does not need ）
<button class="pink"> The first 1 individual </button><button> The first 2 individual </button><button> The first 3 individual </button><button> The first 4 individual </button><button> The first 5 individual </button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
// I just need to find the one pink class , Delete
document.querySelector('.pink').classList.remove('pink')
// Change myself
this.classList.add('pink')
})
}
</script>
tab Column application cases ：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active"> Big international card <span>◆</span></li>
<li class="tab-item"> National makeup brand <span>◆</span></li>
<li class="tab-item"> Cleaning products <span>◆</span></li>
<li class="tab-item"> Men's Boutique </li>
</ul>
<div class="products">
<div class="main active">
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
// 0. Get elements
// Get all the little li,div
let lis = document.querySelectorAll('ul.tab .tab-item')
let divs = document.querySelectorAll('.products .main')
// 1. Head tab Column switching module
// 1.1 First give 4 Small li Add click event
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener('click', function () {
//tab Column transformation
li_active = document.querySelector('.tab li.active')
li_active.classList.remove('active')// Find the old active class , Remove
this.classList.add('active')// Add the current element
// 2. Show hidden modules at the bottom Be sure to write in the click event
div_active = document.querySelector('.products div.active')
div_active.classList.remove('active')
// div The one corresponding to the serial number plus active
divs[i].classList.add('active') // Summary , Although it's all active, But the style is different . It is suggested to change it into two different names
})
}
</script>
</body>
</html>
Case study
Xiaomi search box case
<!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>Document</title>
<style> * {
margin: 0; padding: 0; box-sizing: border-box; } ul {
list-style: none; } .mi {
position: relative; width: 223px; margin: 100px auto; } .mi input {
width: 223px; height: 48px; padding: 0 10px; font-size: 14px; line-height: 48px; border: 1px solid #e0e0e0; outline: none; transition: all .3s; } .mi .search {
border: 1px solid #ff6700; } .result-list {
display: none; position: absolute; left: 0; top: 48px; width: 223px; border: 1px solid #ff6700; border-top: 0; background: #fff; } .result-list a {
display: block; padding: 6px 15px; font-size: 12px; color: #424242; text-decoration: none; } .result-list a:hover {
background-color: #eee; } </style>
</head>
<body>
<div class="mi">
<input type="search" placeholder=" Millet notebook ">
<ul class="result-list">
<li><a href="#"> All goods </a></li>
<li><a href="#"> millet 11</a></li>
<li><a href="#"> millet 10S</a></li>
<li><a href="#"> Millet notebook </a></li>
<li><a href="#"> Mi phones </a></li>
<li><a href="#"> Black Shark 4</a></li>
<li><a href="#"> Air conditioner </a></li>
</ul>
</div>
<script> // 1. Get elements input let search = document.querySelector('input[type="search"]') // Outer single and inner double quotation marks let list = document.querySelector('.result-list') // 2. Event monitoring Get cursor event focus search.addEventListener('focus', function () {
// Display the drop-down menu list.style.display = 'block' // The text box changes color this.classList.add('search') }) // 3. Event monitoring Cursor loss event blur search.addEventListener('blur', function () {
// Hide the drop-down menu list.style.display = 'none' // Text box decolor this.classList.remove('search') }) </script>
</body>
</html>
Select all and choose the opposite case
<!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"> Future generations </span>
</th>
<th> goods </th>
<th> merchants </th>
<th> Price </th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td> Mi phones </td>
<td> millet </td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td> Millet water purifier </td>
<td> millet </td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td> Millet TV </td>
<td> millet </td>
<td>￥5999</td>
</tr>
</table>
<script> let checkall = document.querySelector('#checkAll') let cks = document.querySelectorAll('.ck') let all = document.querySelector('.all') // Listen to select all checkbox checkall.addEventListener('click', function () {
console.log(checkall.checked) for (let i = 0; i < cks.length; i++) {
cks[i].checked = checkall.checked // Don't equal true Want to follow checkall The state is consistent } if (checkall.checked) {
// It's fine too checkall.checked === true all.innerHTML = ' Cancel ' } else {
all.innerHTML = ' Future generations ' } }) // Listen to select all checkbox for (let i = 0; i < cks.length; i++) {
cks[i].addEventListener('click', function () {
// Just click on any small button , You have to traverse all the small buttons for (let j = 0; j < cks.length; j++) {
if (!cks[j].checked) {
checkall.checked = false all.innerHTML = ' Future generations ' return } } checkall.checked = true all.innerHTML = ' Cancel ' }) } </script>
</body>
</html>
Shopping cart addition and subtraction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 80px;
}
input[type=text] {
width: 50px;
height: 44px;
outline: none;
border: 1px solid #ccc;
text-align: center;
border-right: 0;
}
input[type=button] {
height: 24px;
width: 22px;
cursor: pointer;
}
input {
float: left;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div>
<input type="text" id="total" value="1" readonly>
<input type="button" value="+" id="add">
<input type="button" value="-" id="reduce" disabled>
</div>
<script>
let total = document.querySelector('#total')
let add = document.querySelector('#add')
let reduce = document.querySelector('#reduce')
add.addEventListener('click', function () {
total.value++
if (total.value > 1) {
reduce.disabled = false
}
})
console.log(typeof total.value) //total.value It's a string type
reduce.addEventListener('click', function () {
total.value--
if (total.value == 1) {
// Comparison operators also have implicit conversions （total.value Convert to string ）
reduce.disabled = true
}
})
</script>
</body>
</html>
边栏推荐
- 堆 AcWing 838. 堆排序
- JSON序列化 与 解析
- 绕过ObRegisterCallbacks需要驱动签名方法
- OpenCV中cv2.VideoWriter_fourcc()函数和cv2.VideoWriter()函数的结合使用
- Drools executes string rules or executes a rule file
- JS8day（滚动事件(scroll家族),offset家族，client家族，轮播图案例（待做））
- 2.7 binary tree, post order traversal - [FBI tree]
- BOM DOM
- PR 2021 quick start tutorial, learn about the and functions of the timeline panel
- Package management tools
猜你喜欢
线性DP AcWing 895. 最长上升子序列
China traffic sign detection data set
There is a hidden danger in CDH: the exchange memory used by the process of this role is XX megabytes. Warning threshold: 200 bytes
PR 2021 quick start tutorial, learn about the and functions of the timeline panel
Package management tools
spfa AcWing 852. SPFA judgement negative ring
Distributed machine learning framework and high-dimensional real-time recommendation system
![JDBC 预防sql注入问题与解决方法[PreparedStatement]](/img/32/f71f5a31cdf710704267ff100b85d7.png)
JDBC 预防sql注入问题与解决方法[PreparedStatement]
js 迭代器 生成器 异步代码处理 promise+生成器 -＞ await/async
模数转换器(ADC) ADE7913ARIZ 专为三相电能计量应用而设计
随机推荐
js5day(事件监听,函数赋值给变量，回调函数，环境对象this，全选反选案例，tab栏案例)
Leetcode - Sword finger offer 51 Reverse pairs in an array
js 迭代器 生成器 异步代码处理 promise+生成器 -＞ await/async
Redis bloom filter
正确遍历EntryList方法
Modular commonjs es module
JS6day(DOM结点的查找、增加、删除。实例化时间，时间戳，时间戳的案例,重绘和回流)
Js8day (rolling event (scroll family), offset family, client family, carousel map case (to be done))
Mongodb redis differences
Linear DP acwing 902 Shortest editing distance
Dijkstra AcWing 850. Dijkstra求最短路 II
js4day(DOM开始：获取DOM元素内容，修改元素样式，修改表单元素属性，setInterval定时器，轮播图案例)
Efficiency comparison between ArrayList and LinkedList
What data types does redis have and their application scenarios
VLAN experiment
Introduction to CPU instruction set
浏览器node事件循环
Input box assembly of the shutter package
IPhone 6 plus is listed in Apple's "retro products" list
PR 2021 quick start tutorial, learn about the and functions of the timeline panel