The main content of this blog is exclusive thought.
catalogue
Case 1: simulate Baidu skin changing effect
Case 2: table interlaced color change
1, Exclusive thought
If there is the same group of elements, we need to use the exclusive idea algorithm of loop if we want an element to implement a certain style:
- Clear all elements (kill others)
- Style the current element (leave me alone)
- Note that the order cannot be reversed. Kill others first, and then set yourself
Case code:
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
<button>Button 4</button>
<button>Button 5</button>
<script>
// 1. Get all button elements
var btns = document.getElementsByTagName('button');
// btns gets every element in the pseudo array btns[i]
for (var i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
// (1) Let's remove all the button background colors and kill everyone
for (var i = 0; i < btns.length; i++) {
btns[i].style.backgroundColor = '';
}
// (2) Then let the current element background color be pink, leaving me
this.style.backgroundColor = 'pink';
}
}
</script>
The above figure is a small case of using exclusive thought. This example is very common in web pages, so we need to master exclusive thought.
Case 1: simulate Baidu skin changing effect
Effect requirements: click the small picture to replace the corresponding background picture
Idea:
1. Register events for a group of elements first
2. Cycle to register click events for 4 small pictures
3. When we click this picture, we will change the page background to the current picture
4. Core algorithm: get the src of the current picture and give the body as the background
Case code:
<body>
<ul class="baidu">
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
</ul>
<script>
// 1. Get element
var imgs = document.querySelector('.baidu').querySelectorAll('img');
// console.log(imgs);
// 2. Circular registration event
for (var i = 0; i < imgs.length; i++) {
imgs[i].onclick = function() {
// this.src is the path where we click images/2.jpg
// console.log(this.src);
// Just give the path this.src to body
document.body.style.backgroundImage = 'url(' + this.src + ')';
}
}
</script>
</body>Case 2: table interlaced color change
Effect requirements: when the mouse moves to a row in the table, the row has a background color for easy viewing
Idea:
1. Use a new mouse event - mouse passing, mouse leaving
2. When the mouse passes the tr line, change the background color of the current line. When the mouse leaves, clear the background color of the line
3. The color of the first row (header) does not need to be changed, so we get the rows in tbody
Case code:
<head>
<title>Interlaced color change t</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 866px;
margin: 100px auto;
}
table thead {
height: 40px;
background-color: #7fc8ed;
}
table tbody {
color: #333;
font-size: 12px;
}
table tbody tr th {
height: 30px;
border-bottom: 1px solid #ccc;
}
.bg {
background-color: rgb(165, 225, 248);
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>code</th>
<th>name</th>
<th>Latest published net worth</th>
<th>Accumulated Net </th>
<th>Net unit value before</th>
<th>Net worth growth rate</th>
<th>Publication date</th>
</tr>
</thead>
<tbody>
<tr>
<th>003526</th>
<th>Agricultural Bank of China Jinsui regularly opened its debt for 3 months</th>
<th>1.075</th>
<th>1.079</th>
<th>1.074</th>
<th>+0.047%</th>
<th>2019-01-11</th>
</tr>
<tr>
<th>270047</th>
<th>GF financial 30 day bond B</th>
<th>0.903</th>
<th>3.386</th>
<th>0.000</th>
<th>0.000%</th>
<th>2019-01-16</th>
</tr>
<tr>
<th>163417</th>
<th>Xingquan appropriate mixing A</th>
<th>0.860</th>
<th>0.860</th>
<th>0.863</th>
<th>-0.382%</th>
<th>2019-01-16</th>
</tr>
<tr>
<th>003929</th>
<th>BOC securities Amgen bond A</th>
<th>1.034</th>
<th>1.088</th>
<th>1.034</th>
<th>+0.077%</th>
<th>2019-01-16</th>
</tr>
</tbody>
</table>
<script>
// 1. Get elements get all the lines in tbody
var trs = document.querySelector('tbody').querySelectorAll('tr');
// 2. Register events with circular binding
for (var i = 0; i < trs.length; i++) {
// 3. Mouse over event onmouseover
trs[i].onmouseover = function () {
this.className = 'bg';
}
// 4. Mouse leaving event onmouseout
trs[i].onmouseout = function () {
this.className = '';
}
}
</script>
</body>
Case 3: select all
Effect requirements:
1. Click the select all check box, and all the check boxes below will be selected. If you deselect all, all the check boxes below will be cancelled
2. If one of the check boxes below is not selected, cancel the select all box above
3. If all the check boxes below are selected, the select all check box above will be selected automatically
4. All check boxes are not selected by default at the beginning
Idea:
1. First bind the registration event to the check box above, select the above, select all the below, cancel the above and cancel the below
2. All the check boxes below need to be selected, and only all the check boxes above can be selected -- cycle to check whether the check boxes below are selected. If all the check boxes are selected, the check boxes above will be selected
3. Set a variable to control whether select all is selected
Case code:
<head>
<title>Select all</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
width: 400px;
margin: 100px auto;
}
thead {
height: 40px;
background-color: #7fc8ed;
}
thead tr th {
border: 1px solid #ccc;
}
tbody {
color: #333;
font-size: 12px;
}
table tbody tr td {
height: 30px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" name="" id="ckall"></th>
<th>commodity</th>
<th>price</th>
</tr>
</thead>
<tbody id="ck">
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPhone13</td>
<td>8999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPad Pro</td>
<td>6999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>iPad Air</td>
<td>4999</td>
</tr>
<tr>
<td><input type="checkbox" name="" id=""></td>
<td>Apple Watch</td>
<td>2999</td>
</tr>
</tbody>
</table>
<script>
// 1. Select all and deselect all: let the checked attribute (selected status) of all the check boxes below follow the select all button
// Get element
var ckall = document.getElementById('ckall');
var cks = document.getElementById('ck').querySelectorAll('input');
ckall.onclick = function(){
for(var i = 0;i<cks.length;i++ ){
cks[i].checked = this.checked;
}
}
// Register click events for all child checkboxes
for (var i = 0; i < cks.length; i++) {
cks[i].onclick = function () {
// flag controls whether the select all button is selected
var flag = true;
// Each time you click the check box below, you will cycle to check whether all four small buttons are selected
for (var i = 0; i < cks.length; i++) {
if (!cks[i].checked) {
flag = false;
break;
}
}
// Sets the status of the select all button
ckall.checked = flag;
}
}
</script>
</body>
2, Custom attribute action
Custom attribute purpose: to save and use data. Some data can be saved to the page instead of the database.
1. Get attribute value
- element. Attribute // Get property value
- element.getAttribute('attribute ');
difference:
Element. Attribute gets the built-in attribute (that is, the attribute of the element itself)
element.getAttribute('attribute '); Mainly get custom attributes (standard)
2. Set attribute value
- element. Attribute = ' Value '/ / set the built-in property value
- element.setAttribute('attribute ',' value ');
difference:
Element. Attribute sets the built-in attribute (that is, the attribute of the element itself)
element.getAttribute('attribute '); Mainly set custom properties (standard)
3. Remove attribute
element.removeAttribute('attribute ');
4.H5 custom attributes
Some custom attributes are easy to cause ambiguity, and it is not easy to judge whether they are built-in attributes or custom attributes of elements. So H5 adds custom attributes to us.
4.1 setting H5 custom attributes
H5 specifies that the user-defined attribute starts with data - as the attribute name, and the assignment is as follows: < div data index = "1" > < / div >
Or use js settings, such as element. SetAttribute ('data index ',' 2 ');
4.2 get H5 custom attributes
1.element.getAttribute('attribute ');
2.H5 add: element.dataset. Attribute or element.dataset ['attribute'] // ie11 is supported
Case 4: Tab bar switching
Idea:
1. The tab bar switch has two modules
2. Click one of the above tabs, the current background color will change, and the rest will remain unchanged (exclusive thought)
3. The contents of the following modules change with the tabs above, so they are written in the click event
4. The displayed contents below correspond to the tabs above one by one
5. Add a custom attribute to the above tab. The data index attribute is numbered from 0
6. When we click the above tab, the contents corresponding to the serial number in the following li will be displayed, and the rest will be hidden (exclusive thought)
Case code:
<head>
<title>tab Column switching</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 1000px;
height: 500px;
margin: 50px auto;
}
ul {
list-style: none;
}
.title {
float: left;
width: 1000px;
height: 40px;
background-color: #f1f1f1;
border: 1px solid #ccc;
}
.title li {
float: left;
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
font-size: 20px;
cursor: pointer;
}
.cor {
background-color: #ec4141;
color: #fff;
}
.tbody {
width: 1000px;
height: 400px;
}
.tbody li {
display: none;
width: 100%;
height: 100%;
}
.tbody li:first-child {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul class="title">
<li class="cor">home page</li>
<li>entertainment</li>
<li>Sports</li>
<li>domestic</li>
<li>international</li>
</ul>
<ul class="tbody">
<li>Home page</li>
<li>Entertainment page</li>
<li>Sports page</li>
<li>Domestic page</li>
<li>International page</li>
</ul>
</div>
<script>
var tt = document.querySelector('.title');
var tlis = tt.querySelectorAll('li');
var lis = document.querySelector('.tbody').querySelectorAll('li');
// Changes above
for (var i = 0; i < tlis.length; i++) {
// Set index
tlis[i].setAttribute('data-index', i);
// Mouse click version
tlis[i].onclick = function () {
for (var i = 0; i < tlis.length; i++) {
tlis[i].className = '';
lis[i].style.display = 'none';
}
this.className = 'cor'
var index = this.getAttribute('data-index');
lis[index].style.display = 'block';
}
}
</script>
</body>
After reading this blog, have you got the exclusive thought?