Home Web Front-end JS Tutorial Summary and sharing of js basic knowledge points

Summary and sharing of js basic knowledge points

Mar 26, 2018 pm 05:15 PM
javascript share Knowledge points

This article mainly shares with you a summary of js basic knowledge points, hoping to help everyone.

How to write your js code on a website or page:
1.js layering (function): jquery (tool) component (ui) application (app), mvc (backboneJs )
2.js planning (): avoid global variables and methods (namespace, closure, object-oriented), modularization (seaJs, requireJs)

Commonly used internal classes: Data Array Math String

HTML attribute, CSS attribute
HTML: attribute.HTML attribute="value";
CSS: object.style.CSS attribute="value";

class and float
1.class:className
2.float:cssFloat

Get the object
id:document.getElementById("id name")

Event: User action
Mouse event:
onclick: Click
onmouseover: Put the mouse on
onmouseout: The mouse leaves
ondbclick: Double-click event
onmousedown: The mouse is pressed
onmouseup: The mouse is lifted
onmousemoveMouse movement
Form events:
onfocus: Get focus
onblur: Lose focus
onsubmit: Submit event
onchange: When a change occurs
onreset: Reset event
Keyboard events:
onkeyup:keyboard lifted
onkeydown:keyboard pressed
onkeypress:keyboard pressed once
Window time:onload event
Event executed immediately after the page is loaded
Two ways:
1.<script>window.onload=init/*Function name, no brackets*/;</script>
2.
event: Save relevant information when the event occurs
When the event occurs, event
event.clientX: The X coordinate when the event occurs
event.clientY : Y coordinate when the event occurs
event.target: Event source
event: It must be passed to the function in the form of actual parameters before it can be used

Modify the content in p
innerHTML: All content in the object (text content and label content), generally refers to double labels or containers Tag
innerText: All text content in the object

document.createElement("tag name");
document.body.appendChild(object);
removeChild(object)
document.body is the body tag object
document.documentElement is the html tag object

ECMAscript, BOM, DOM
1.window: the highest level of the object
2.BOM: browser object: browser object model
3.DOM: document object model
4.BOM: it will exist as soon as the web page is opened
5.DOM: code to operate
6.document is the link between DOM and BOM
Document has subordinates, but others have no subordinates [Multiple windows]

window.open("Link","name","Settings");
1.width: Set the window width
2.height: Set the window height
3.left: The distance from the new window to the left end
4.top: The distance from the new window to the top
5.srollbars: Scroll bar [yes, no, 1 ,0】
6.toolbar: Tool class【yes,no,0】
7.location:Address bar
window.close: Close the window
window.close()

Create timer:
One-time timer: window.setTimeout("function()", time t)
Execution: execute js code after time t [will only be executed once]
Time: In milliseconds

Recurring timer: window.setInterval("function()", time t)
Time: in milliseconds
Execution: It will be executed every time t One-time js code [n times]

Clear timer:
Clear one-time timer:window.clearTimeout(timer name)
Clear recurring timer:window.clearInterval(timer name) )
Note: To clear the timer, you must give the timer name. Anonymous timers cannot be cleared.

Method to find the object:
di:document.getElementById("id name");
Tag:document.getElementsByTagName("tag name")//What is obtained is a collection of objects (array)
Object.getElementByTagName(tag name)
name:document.getElementByName("name");/ /form collection (array)
className:document.getElementByClassName("class name");//collection (array)[firefox]
document.images;//get img object (array)
document. links;//Get link object (array)
document.forms;//Get form object (array)
document.body;//body tag object
document.documentElement;//HTML object
event: event information object
this: current object

location object
location.href: return url information [you can get url information, or you can assign a value to it to jump to the page]
location.assign(): Load a new document [Jump page]
location.reload(): Reload the current document [Refresh page]
location.replace(): Replace the current document with a new one Document【Jump page】

The difference between location.assign and location.replace:
location.assign: will generate historical records
location.replace: will not generate historical records

history object:
history. length: The number of URLs viewed
history.back(): Returns the previous page in the history
history.forward(): Loads the next page in the history
history.go(n): Jump to the page specified in the history record. If it is -1, it is actually the function of history.back()

screen object
screen.height: Get the height of the screen
screen.width: Get the width of the screen
screen.availHeight: Get the height without the taskbar
screen.availWidth: Get the width without the taskbar

navigator object
navigator.appName: browser name
navigator.appCodeName: Browser code name
navigator.appVersion: Browser version number and platform information
navigator.userAgent: Browser information

DOM: Describes the relationship between various components of the web page
var obj = document.getElementById("id name")
The blank space in Firefox is also considered a node
parentNode: parent node
childNodes: child node
firstChild: the first child Node
lastChild: the last child node
nextSibling: the next sibling node [Note: must be the same parent relationship]
previousSiblind: the previous sibling node [Note: must be the same parent relationship]

Login verification:
onsubmit: form submission event
onsubmit="return function ()"

Related recommendations:

Detailed explanation of PHP basic knowledge

Basic knowledge that JavaScript must know

Sharing of basic JavaScript interview questions

The above is the detailed content of Summary and sharing of js basic knowledge points. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to share Quark Netdisk to Baidu Netdisk? How to share Quark Netdisk to Baidu Netdisk? Mar 14, 2024 pm 04:40 PM

Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.

How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments Mar 25, 2024 am 11:41 AM

1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the &quot;Share to&quot; option at the bottom, and then select the first &quot;WeChat Moments&quot; allows you to share content to WeChat Moments.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

How to share files with friends on Baidu Netdisk How to share files with friends on Baidu Netdisk Mar 25, 2024 pm 06:52 PM

Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the &quot;Shared Members&quot; column 】, and finally check all

Mango tv member account sharing 2023 Mango tv member account sharing 2023 Feb 07, 2024 pm 02:27 PM

Mango TV has various types of movies, TV series, variety shows and other resources, and users can freely choose to watch them. Mango TV members can not only watch all VIP dramas, but also set the highest definition picture quality to help users watch dramas happily. Below, the editor will bring you some free Mango TV membership accounts for users to use, hurry up and take a look Take a look. Mango TV latest member account free sharing 2023: Note: These are the latest member accounts collected, you can log in directly and use them, do not change the password at will. Account number: 13842025699 Password: qds373 Account number: 15804882888 Password: evr6982 Account number: 13330925667 Password: jgqae Account number: 1703

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Solve the problem that Discuz WeChat sharing cannot be displayed Solve the problem that Discuz WeChat sharing cannot be displayed Mar 09, 2024 pm 03:39 PM

Title: To solve the problem that Discuz WeChat shares cannot be displayed, specific code examples are needed. With the development of the mobile Internet, WeChat has become an indispensable part of people's daily lives. In website development, in order to improve user experience and expand website exposure, many websites will integrate WeChat sharing functions, allowing users to easily share website content to Moments or WeChat groups. However, sometimes when using open source forum systems such as Discuz, you will encounter the problem that WeChat shares cannot be displayed, which brings certain difficulties to the user experience.

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

See all articles