current location：Home > Technical Articles > Web Front-end
- Direction：
- All web3.0 Backend Development Web Front-end Database Operation and Maintenance Development Tools PHP Framework Daily Programming WeChat Applet Common Problem Other Tech CMS Tutorial Java System Tutorial Computer Tutorials Hardware Tutorial Mobile Tutorial Software Tutorial Mobile Game Tutorial
- Classify：
-
- Pseudo-classes - The Basics
- (Adapted from "HTML5 & CSS3 for the Real World" by Alexis Goldstein, Louis Lazaris and Estelle Weyl) Core points CSS pseudo-classes are used to define the special state of elements, including structure, user operations, input and negation pseudo-classes and other types. They can style elements based on the location of the element in the document tree, user interaction, form element state, or elements that do not match a particular selector. Some pseudo-classes may have security issues, such as: visited pseudo-classes, which can be used by an attacker to check the user's browsing history. Modern browsers are restricted to:visite
- CSS Tutorial 441 2025-02-17 10:12:10
-
- Getting Started With Vue.js
- Quick look at the core concept of Vue.js Vue.js is a JavaScript library based on the MVVM architecture, used to build user interfaces. It is simpler, easier to learn and flexible than AngularJS. Its core functions include: Data binding: Supports one-way and two-way data binding, v-model instructions implement bidirectional binding, and model changes are reflected in the view in real time. Instructions and Filters: Instructions are used to operate the DOM, and filters are used to process data. Componentization: Create reusable custom HTML elements, improve code readability and maintenance, and use props attributes to pass component attributes. Note: This tutorial is based on Vue.js 1.x version. Please refer to other resources for Vue 2.x tutorial
- JS Tutorial 623 2025-02-17 10:10:10
-
- 10 Need-to-Know RxJS Functions with Examples
- This article was reviewed by Florian Rappl and Moritz Kröger. Thanks to all the peer reviewers at SitePoint for making SitePoint’s content perfect! With the growing interest in functional reactive programming (FRP), RxJS has become one of the most popular JavaScript libraries in this paradigm. In this article, we will explore the top ten must-know functions in RxJS. Note: This article assumes that you are familiar with the basics of RxJS, as described in the article "Beginning with Functional Reactive Programming with RxJS". Key Points RxJS utilizes observable objects similar to arrays filled over time
- JS Tutorial 235 2025-02-17 10:08:10
-
- Quick Tip: How to Throttle Scroll Events
- Key Points Listening to scroll events can cause performance degradation because the browser executes a callback function every time the user scrolls; throttling and debounce are two common functions to manage this problem. Throttle ensures a constant flow of events over a given time interval, while de-bumping combines a series of events into a single event. Implementing event throttling in JavaScript can be complicated, and it is recommended to use a third-party implementation like lodash, which is the standard for event throttling. Lodash's throttling function simplifies rolling event throttling and provides options to determine whether the callback function is executed at the front and/or back edge of the event. The key to choosing throttling and debounce is to see the nature of the problem to be solved. Throttle is suitable for events that occur within a given time span
- JS Tutorial 940 2025-02-17 10:07:11
-
- Fun Functional Programming with the Choo Framework
- Choo: A Minimalist JavaScript Framework for Single-Page Applications Choo is a lightweight JavaScript framework perfect for crafting single-page applications (SPAs) using functional programming principles. It cleverly integrates the best aspects of
- JS Tutorial 1029 2025-02-17 10:06:10
-
- How to Easily Share Code Between Projects with Bit
- Bit: Simplify code sharing and improve team efficiency Bit is a powerful tool that simplifies the process of code sharing among projects without splitting the code base or refactoring the project. You can share code snippets directly from any code base and install them into other projects using npm. Bit provides a scalable code sharing solution. You can specify the code component to share, Bit defines its dependency tree, and then share it to a shared location called "Scope". These components can be installed using npm and Yarn, just like any other package. Bit also simplifies the modification of shared code. You can import the source code into any path in the code base, make changes, and Bit will track
- JS Tutorial 681 2025-02-17 10:05:10
-
- How to Work with and Manipulate State in React
- This article from React Quickly by Azat Mardan provides a concise guide to understanding and manipulating state in React.js. It covers key aspects of state management, highlighting differences between state and props, and advocating for the use of s
- JS Tutorial 179 2025-02-17 10:02:15
-
- Create a Music Jam Station with Vanilla JavaScript
- This tutorial demonstrates building a web-based music jam station using HTML5 audio and JavaScript, perfect for guitarists to practice and learn. The project synchronizes audio playback with interactive chord displays, providing a dynamic learning e
- JS Tutorial 309 2025-02-17 10:01:15
-
- How to Implement Internationalization (i18n) in JavaScript
- Key Points Internationalization (i18n) is the process of creating or converting products and services so that they can adapt to local languages and cultures. Localization (l10n) is the process of adjusting internationalized software for a specific region or language. Globalize is a JavaScript library developed by members of the jQuery team for internationalization and localization. It uses the official Unicode CLDR JSON data, supports all major browsers, and provides functions such as digital formatting and parsing, date and time formatting and parsing, relative time formatting, currency formatting, message formatting, plural support and unit support, etc. . JavaScript through the Internationalization API (
- JS Tutorial 736 2025-02-17 10:00:26
-
- Regular Expressions in JavaScript
- This guide demonstrates the practical application of regular expressions within JavaScript. By the end, you'll be able to confidently use regex for text manipulation. Key Concepts: JavaScript regular expressions are powerful tools for text processi
- JS Tutorial 534 2025-02-17 09:59:13
-
- Replace the jQuery Document Ready Function with JavaScript
- The $(document).ready() method of jQuery is used to execute code after the DOM is fully loaded. Since it executes the given function when all DOM elements are available, it ensures that attempts to access or operate on the element work properly. Prior to jQuery 3.0, the typical usage of using anonymous functions was as follows: $(document).ready(function() { // The handler of .ready() is called. }); Key Points jQuery's document.ready method ensures that the code is executed only when all DOM elements are safe and operational, but in jQu
- JS Tutorial 459 2025-02-17 09:56:10
-
- Projects Can Sometimes Be the Worst Way to Learn JavaScript
- Many JavaScript beginners will get a seemingly simple suggestion: "Do more projects." Granted, projects are often an effective way to learn any programming language. The problem, however, is that many people try complex projects before they have enough basic knowledge, resulting in misjudgment. This is very important because trying large projects too early is one of the main reasons why many people give up learning JavaScript. To avoid this, this article will cover the following: The common pitfalls and reasons that beginners of JavaScript encounter when trying projects Examples of projects that often cause learning disruptions How to avoid these pitfalls and learn more effectively When and how to start a project How to choose the right concept in a project
- JS Tutorial 395 2025-02-17 09:52:13
-
- Structural Pseudo-Classes
- Excerpted from the book "HTML5 & CSS3 for the Real World, 2nd Edition" co-authored by Alexis Goldstein, Louis Lazaris and Estelle Weyl. This book is available in stores around the world, and you can also purchase the e-book version here. So far, we have learned how to locate elements based on their attributes and states. CSS3 also allows us to position elements based solely on where they are in the tag. These selectors are classified as structural pseudo-classes. Now these selectors may seem complex, but they make more sense when we look at how they are applied later. Except I
- CSS Tutorial 828 2025-02-17 09:50:09
-
- Native Infinite Scrolling with the IntersectionObserver API
- Intersection Observer API: Efficiently monitor DOM element visibility The Intersection Observer API is an emerging client-side JavaScript API for efficiently monitoring the visibility of specified DOM elements, which is useful for features such as lazy loading, infinite scrolling, and ad visibility. Browser support and polyfill This API is relatively new and currently has limited browser support, including Chrome Desktop 51, Chrome Android 51, Android WebView 51, Opera 38 and Opera Android 38. However, a pol in development is provided on Github
- JS Tutorial 777 2025-02-17 09:49:08
-
- Quick Tip: Add or Remove a CSS Class with Vanilla JavaScript
- Use JavaScript to dynamically add and delete CSS classes to easily manipulate web elements! This article will explain how to use JavaScript's className and classList attributes to efficiently manage CSS classes, and realize dynamic modification of web page elements, such as displaying/hiding menus, highlighting form errors or element animations. Core points: JavaScript can be used to dynamically modify page elements based on user interactions (such as showing/hiding menus, highlighting form errors, or animation effects). className and classList properties are powerful tools for operating CSS classes; className has wider compatibility, while classList is more modern
- JS Tutorial 320 2025-02-17 09:47:07
Recommended Articles
Tool Recommendations
jQuery enterprise message form contact code
jQuery enterprise message form contact code is a simple and practical enterprise message form and contact us introduction page code.
form button
2024-02-29
HTML5 MP3 music box playback effects
HTML5 MP3 music box playback special effect is an mp3 music player based on HTML5 css3 to create cute music box emoticons and click the switch button.
Player special effects
2024-02-29
HTML5 cool particle animation navigation menu special effects
HTML5 cool particle animation navigation menu special effect is a special effect that changes color when the navigation menu is hovered by the mouse.
Menu navigation
2024-02-29
jQuery visual form drag and drop editing code
jQuery visual form drag and drop editing code is a visual form based on jQuery and bootstrap framework.
form button
2024-02-29
Organic fruit and vegetable supplier web template Bootstrap5
An organic fruit and vegetable supplier web template-Bootstrap5
Bootstrap template
2023-02-03
Bootstrap3 multifunctional data information background management responsive web page template-Novus
Bootstrap3 multifunctional data information background management responsive web page template-Novus
backend template
2023-02-02
Real estate resource service platform web page template Bootstrap5
Real estate resource service platform web page template Bootstrap5
Bootstrap template
2023-02-02
Simple resume information web template Bootstrap4
Simple resume information web template Bootstrap4
Bootstrap template
2023-02-02
Cute summer elements vector material (EPS PNG)
This is a cute summer element vector material, including the sun, sun hat, coconut tree, bikini, airplane, watermelon, ice cream, ice cream, cold drink, swimming ring, flip-flops, pineapple, conch, shell, starfish, crab, Lemons, sunscreen, sunglasses, etc., the materials are provided in EPS and PNG formats, including JPG previews.
PNG material
2024-05-09
Four red 2023 graduation badges vector material (AI EPS PNG)
This is a red 2023 graduation badge vector material, four in total, available in AI, EPS and PNG formats, including JPG preview.
PNG material
2024-02-29
Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
This is a spring banner vector material designed with singing birds and a cart full of flowers. It is available in AI and EPS formats, including JPG preview.
banner picture
2024-02-29
Golden graduation cap vector material (EPS PNG)
This is a golden graduation cap vector material, available in EPS and PNG formats, including JPG preview.
PNG material
2024-02-27
Home Decor Cleaning and Repair Service Company Website Template
Home Decoration Cleaning and Maintenance Service Company Website Template is a website template download suitable for promotional websites that provide home decoration, cleaning, maintenance and other service organizations. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-05-09
Fresh color personal resume guide page template
Fresh color matching personal job application resume guide page template is a personal job search resume work display guide page web template download suitable for fresh color matching style. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-29
Designer Creative Job Resume Web Template
Designer Creative Job Resume Web Template is a downloadable web template for personal job resume display suitable for various designer positions. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28
Modern engineering construction company website template
The modern engineering and construction company website template is a downloadable website template suitable for promotion of the engineering and construction service industry. Tip: This template calls the Google font library, and the page may open slowly.
Front-end template
2024-02-28
