Painstakingly collect the most complete JavaScript and most practical tool functions in history. It is recommended to collect them!
Add on method for element
Element.prototype.on = Element.prototype.addEventListener;
NodeList.prototype.on = function (event, fn) {, []['forEach'].call(this, function (el) { el.on(event, fn); }); return this;};
Add a trigger method to the element
Element.prototype.trigger = function(type, data) { var event = docu ...
Posted by mj99 on Tue, 19 Oct 2021 00:27:40 +0200
Combing the knowledge points of H5 and CSS3 (46)
1, HTML5 (H5)
1. Newly added (modified / deleted) semantic tags
header
footer
main body
section area
Article article area
aside: irrelevant parts (e.g. advertisements)
nav
figure matching area
Fig caption description
Mark mark
time stamp
progress bar
2. New reform of form elements [traditional form elements] input:text/password/ra ...
Posted by ninib on Sun, 17 Oct 2021 18:59:56 +0200
CSS (box collapse problem)
1, Box collapse problem
1. Problems
There are two nested DIV boxes. There is a sub box in the parent box. You want to have a gap between the upper margin of the sub box and the parent box, but the outer margin added to the child element has no effect. The effect is displayed on the parent element. For example:
Given two DIV boxes, the pa ...
Posted by agnaldovb on Fri, 15 Oct 2021 19:56:05 +0200
Front end 15 elegant JavaScript skills
1. Conditionally add attributes to objects
We can use the expansion symbol (...) to conditionally and quickly add properties to JS objects.
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};
If the value of each operand is true, then && Operator returns ...
Posted by jennatar77 on Wed, 13 Oct 2021 03:02:43 +0200
❗ Summary of three common ways to introduce JavaScript into HTML ❗
introduction
JavaScript is a scripting language. Although there is Java in its name, it has nothing to do with Java. Its original name was LiveScript; The current front-end JavaScript is very popular, but the blogger himself is not ready to develop to the front-end, but he must understand some basic knowledge of the front-end; Last blog: ❗ Su ...
Posted by thor erik on Wed, 13 Oct 2021 01:50:50 +0200
What's new in HTML5
1. Semantic label
Header, NAV, section, aside, artificial and footer are all double tags
/*Structure code*/
<header>
<nav>navigation bar</nav>
< /header>
< section>
aside>sidebar < /aside>
<article>Independent content block</article>
</ section>
< footer>tail</ footer>
/*The ...
Posted by skyriders on Wed, 13 Oct 2021 00:21:12 +0200
Bug - display problem of inline block elements
Found Bug
Today, when making flex layout, I introduced four inline elements span into the parent element to test the related attributes of flex. The code is as follows. I originally wanted to put four spans in the box, because it is reasonable to put exactly four spans, but the actual effect is not so.
<!DOCTYPE html>
<html lang ...
Posted by cr55dan on Tue, 12 Oct 2021 00:42:13 +0200
Vue3 official website - Accessibility basics, semantics (forms, labels, Aria label, Aria labeled by, Aria describedby, buttons), standards, resources
Vue3 official website - Accessibility (21) basics, semantics (forms, labels, Aria label, Aria labeled by, Aria describedby, buttons), standards, resources
Summary:
1. Foundation
Web accessibility (also known as a11y) refers to the practice of creating a website that can be used by anyone - whether it's someone with some barrier, ...
Posted by iBlizz on Fri, 08 Oct 2021 06:04:50 +0200
Analysis of innovative training projects
Analysis of innovative training projects (I)
2021SC@SDUSC
This week, according to the previous json document format, referring to the code in the engine layer and combined with the XML document writing specification, the XML document of SDUDOC was completed, including the basic building elements and the element labels corresponding to each ob ...
Posted by billmasters on Thu, 07 Oct 2021 21:11:55 +0200
Element and comprehensive exercises
1. Element basic usage
1.1 introduction to Element
Element: website rapid prototyping tool. Is it hungry? A set of Vue based website component library provided by the front-end development team of the company. Vue is required before using Element. Components: components that make up a web page, such as hyperlinks, buttons, pictures, tables ...
Posted by df75douglas on Thu, 07 Oct 2021 19:49:30 +0200