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

Concat() of combined fields in MySQL

Table of contents 1. Introduction 2. Main text 2....

Implementation of nested jump of vue routing view router-view

Table of contents 1. Modify the app.vue page 2. C...

JavaScript implementation of a simple addition calculator

This article example shares the specific code of ...

MySQL Community Server compressed package installation and configuration method

Today, because I wanted to install MySQL, I went ...

Analysis of Difficulties in Hot Standby of MySQL Database

I have previously introduced to you the configura...

Detailed discussion on the issue of mysqldump data export

1. An error (1064) is reported when using mysqldu...

Detailed explanation of MySQL single table query operation examples [syntax, constraints, grouping, aggregation, filtering, sorting, etc.]

This article describes the MySQL single table que...

Discussion on the way to open website hyperlinks

A new window opens. Advantages: When the user cli...

Element-ui's built-in two remote search (fuzzy query) usage explanation

Problem Description There is a type of query call...

MYSQL METADATA LOCK (MDL LOCK) MDL lock problem analysis

1. Introduction MDL lock in MYSQL has always been...

Node uses async_hooks module for request tracking

The async_hooks module is an experimental API off...

HTML+CSS to achieve the special effects code of the blood-sharingan and samsara eye

The result (full code at the bottom): The impleme...

Pure CSS to achieve automatic rotation effect of carousel banner

Without further ado, let’s get straight to the co...

Detailed explanation of cross-usage of Ref in React

Table of contents 1. First, let’s explain what Re...

MySQL learning database search statement DQL Xiaobai chapter

Table of contents 1. Simple retrieval of data 2. ...