Common operations of web front-end (including JS/HTML/CSS and other aspects of knowledge)

Common operations of web front-end (including JS/HTML/CSS and other aspects of knowledge)
Cancel the icon 1 in front of ul li
Clear Value 1
Set Value to 1
Clear label middle value 1
Set label middle value 1
Distinguish between html(), text(), and val(). 1
Set the label to editable state 1
Set the label to non-editable state 1
Two Ajax, one A, one B, B should be executed after A is executed.
Time interval, executed only once, calling a function or calculating an expression after the specified number of milliseconds2
Time interval, execute multiple times, call the function or calculate the expression after every specified number of milliseconds2
jQuery select all/unselect all/inverse selection 2
Select-Option 3
Make DIV always fixed at a certain position on the screen

Cancel the icon in front of ul li

Copy code
The code is as follows:

ul
{
list-style-type:none;
}

Clear Value

Copy code
The code is as follows:

$("#city").val("");

Set Value

Copy code
The code is as follows:

$("#city").val("Beijing");

Clear the middle value of the label

Copy code
The code is as follows:

$("#ML1").html("");

Set the middle value of the label

Copy code
The code is as follows:

$("#ML1").html("Beijing");

When reloading the value of a tag, it is often necessary to clear the original value first to distinguish between html(), text(), and val().

Copy code
The code is as follows:

<input type="aaa" value="bbb">ccc</input>
text() outputs the content in the middle of the label: 1234.
val() outputs the value of the value attribute: bbb.
html() outputs the entire HTML: <input type="aaa" value="bbb">ccc</input>.
val() is written for jQuery

Set the label to editable

Copy code
The code is as follows:

$("input").removeAttr("readonly"); //All input tags are editable
$("textarea").removeAttr("readonly"); //All textarea (department profile) tags are editable
$("input:button").removeAttr("disabled"); //All button (left and right frame movement) labels cannot be edited

Set the label to non-editable

Copy code
The code is as follows:

$("input").attr("readonly", "readonly"); //All input tags are not editable
$("textarea").attr("readonly", "readonly"); //All textarea (department profile) tags are not editable
$("input:button").attr("disabled", "disabled"); //All button (left and right frame movement) labels are not editable

Two Ajax, one A and one B. B should be executed after A is executed. Because Ajax is asynchronously loaded, each Ajax is executed almost simultaneously without interfering with each other. But sometimes we want an Ajax request to get a value from the return value of another Ajax. At this time, this situation will occur. There are three solutions:
1. Write an Ajax request named B in the CallBack of Ajax named A;
2. Write a time interval function to monitor the execution of A, and call B when A is finished.
3. Set Ajax's async to false, but this usually requires all to be set to false.

Time delay, executed only once, calling a function or calculating an expression after a specified number of milliseconds

Copy code
The code is as follows:

Var st o = setTimeout (function or expression to be executed at the point, delay time in milliseconds);
window. clearTimeout(sto) invalidates it and cancels the cycle execution

Time interval, execute multiple times, call the function or calculate the expression after every specified number of milliseconds

Copy code
The code is as follows:

varstv = setInterval ("alert('Pop up once every 3000ms!')",3000);
window.clearInterval(stv) makes it invalid and cancels the cycle execution

jQuery select all/unselect all/invert

Copy code
The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Select all, not all, invert</title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#selectAll").click(function () {//Select all
$("#ckList :checkbox").attr("checked", true);
});
$("#unSelect").click(function () {//Unselect all
$("#ckList:checkbox").attr("checked", false);
});
$("#reverse").click(function () {//Reverse selection
$("#ckList:checkbox").each(function () {
$(this).attr("checked", !$(this).attr("checked"));
});
});
});
</script>
</head>
<body>
<div id="ckList">
<input type="checkbox" value="value 1" />value 1

<input type="checkbox" value="value 2" />value 2

<input type="checkbox" value="value 3" />value 3

<input type="checkbox" value="value 4" />value 4

</div>
<input type="button" value="Select All" id="selectAll" />
<input type="button" value="Unselect All" id="unSelectAll" />
<input type="button" value="Reverse" id="reverse" />
</body>
</html>
Select-Option
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//all
function All() {
var tt = $("#st")[0];
for (var i = 0; i < tt.length; i++) {
alert(tt[i].text);
}
}
//Currently selected
function Aselected() {
var tt = $("#st")[0];
for (var i = 0; i < tt.length; i++) {
if(tt[i].selected) {
alert(tt[i].text);
alert(tt[i].value);
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<select id = "st" multiple="multiple">
<option value="1">aaaaa</option>
<option value="2">bbbbb</option>
<option value="3">ccccc</option>
<option value="4">ddddd</option>
</select>
<input type="text" id="tt"/>
<input type="button" onclick="All();" value="All"/>
<input type="button" onclick="Aselected();" value="Currently selected"/>
</div>
</form>
</body>
</html>

Keep DIV fixed at a certain position on the screen

Copy code
The code is as follows:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#low_right
{
position: fixed;
width: 90px;
height: 90px;
background: #eee;
bottom: 40px;
right: 20px;
background-color: #DCFCE9;
border: 8px double #06F867;
text-align: center;
padding: 10px;
margin: 10px;
}
</style>
</head>
<body>
<script type="text/javascript">
for (var i = 0; i < 100; i++) {
document.write((i + 1) + "
");
}
</script>
<div id="low_right">
Bottom right corner
</div>
</body>
</html>

<<:  Vue2 cube-ui time selector detailed explanation

>>:  Three notification bar scrolling effects implemented with pure CSS

Recommend

Examples of 4 methods for inserting large amounts of data in MySQL

Preface This article mainly introduces 4 methods ...

Start a local Kubernetes environment using kind and Docker

introduce Have you ever spent a whole day trying ...

Click the toggle button in Vue to enable the button and then disable it

The implementation method is divided into three s...

MySQL 8.0.22 installation and configuration graphic tutorial

MySQL8.0.22 installation and configuration (super...

How to use dynamic parameters and calculated properties in Vue

1. Dynamic parameters Starting from 2.6.0, you ca...

A brief discussion on the corresponding versions of node node-sass sass-loader

Table of contents The node version does not corre...

MySQL million-level data paging query optimization solution

When there are tens of thousands of records in th...

The best way to automatically mount shared directories on Ubuntu 16.04 startup under Virtualbox

People who use virtual machines usually set up sh...

Understand the rendering process of HTML pages in preparation for learning front-end performance optimization (continued)

Last night I wrote an essay about the browser ren...

CSS--overflow:hidden in project examples

Here are some examples of how I use this property ...

MySQL 5.7.21 winx64 installation and configuration method graphic tutorial

This article summarizes the notes for installing ...

How does MySQL ensure master-slave consistency?

Table of contents The basic principle of MySQL ma...

Pagination Examples and Good Practices

<br />Structure and hierarchy reduce complex...

CSS scroll-snap scroll event stop and element position detection implementation

1. Scroll Snap is a must-have skill for front-end...

MySQL database operations (create, select, delete)

MySQL Create Database After logging into the MySQ...