当前位置：网站首页>JS native common knowledge

JS native common knowledge

2022-07-03 03:54:00 【This is not difficult】

Site support ：

JavaScript

obtain DOM

grammar ：
document.querySelector(" Selectors ")
document.querySelectorAll(" Selectors ")
document.getElementById("id name ")
document.getElementsByClassName("class name ")
document.getElementsByTagName(" Tag name ")
document.getElementsByName("name name ")

Example ：

<body>
    <div class="app">
        <div class="div"> Limitless swordsman </div>
        <div id="wuJin"> Endless blade </div>
    </div>
</body>

<script>
	var hero= document.querySelector(".div");
	var equip = document.getElementById("wuJin");
</script>

Happy

Properties of the operation element

1. operation class attribute

adopt className operation class attribute .

Example ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>className  attribute </title>
<style>
    div {
     width: 800px; height: 600px; }
    .bg-red {
     background-color: red; }
    .bg-blue {
     background-color: blue; }
    .border {
     border: 5px solid skyblue; }
</style>
</head>

<body>
    <div class="bg-red"></div>
</body>
<script type="text/javascript">
    // 1.  obtain  DOM  object 
    var div = document.querySelector('div');
    // 2.  obtain  class  attribute 
    console.log(div.className); // bg-red
    // 3.  modify  class  attribute 
    div.className = 'bg-blue';
    // 4.  add to  class  attribute 
    // div.className += ' border';
    //  Equate to 
    div.className = 'bg-blue border';
</script>

</html>

2. operation style style

adopt style Property can only get inline css, Cannot get embedded and external chains css.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>style  attribute </title>
<style>
input {
     background-color: #abcdef; color: #ffffff; }
</style>
</head>
<body>
    <input type="button" style="background-color: #0094ff;" value=" Point me ">
</body>
<script type="text/javascript">
    // 1.  obtain  DOM  object 
    var input = document.querySelector('input');
    // 2.  obtain  style  attribute 
    console.log(input.style);
    // 3.  Get the current background color of the button 
    console.log(input.style.backgroundColor);
    // 4.  Set the background color of the button to yellow 
    input.style.backgroundColor = 'yellow';
    input.style.width = '500px';
    // 5.  Set the text color of the button to red 
    input.style.color = 'red';
    input.style.transform = 'rotate(45deg)';
</script>
</html>

Operate this article and content

innerText
innerHTML

Happy

Registration events

grammar ：

onclick = function(){}、addEventListener(eventName, handler, useCapture)

addEventListener When binding events, take out the on Prefix

Event name ：

1. Mouse events

onclick Click events 

<body>
    <div class="app">
        <div class="div"> Limitless swordsman </div>
        <div id="wuJin"> Endless blade </div>
    </div>
</body>

<script>
    document.querySelector("#wuJin").onclick = () => {
    
        alert(" Need gold coins 3100！");
    };
	document.getElementsByClassName("hero").addEventListener("click", () => {
    
        alert(" A critical hit ！");
    });
</script>

ondblclick Double-click the event
onmouseenter（ Commonly used ）、onmouseover Mouse migration
onmouseleave（ Commonly used ）、onmouseout Mouse removal
onmousedown The mouse click
onmouseup Release the mouse
onmousemove Mouse movement
onfocus Get focus
onblur Lose focus
oninput Input event
onchange The drop-down box changes
onscroll Scroll bar scroll

2. Loading event

onload Loading complete （ And load successfully ）

The compiler parses from top to bottom html Of documents , if js The code is written in body front , It may not be available DOM object .window.onload This event will not be triggered until all the contents on the interface are loaded .

<script>
	window.onload = function() {
    
		//  natural js Code 
	}
</script>

onbeforeunload Call before the page closes
onunload The page is closed

3. Keyboard events

onkeydown Press the key
→textarea Keyboard events for text fields

onkeypress Press the key to trigger when pressing the key with value

onkeypress Press down Ctrl、Atl、Shift… In this way, the key without value will not trigger .

onkeyup The buttons pop up 

//  Judge whether the pressed is  Enter  key 
document.onkeyup = function(event){
    
	if (event.keyCode != 13) {
    
		return false;
	}
}

Happy

this Point to

1. In ordinary functions this

Point to window

2. In the constructor this

When used as a normal function ,this Point to window
coordination new When used as a constructor ,this Point to the instantiated object

3. Methods this

Who calls methods ,this Just point to who

4. In the timer this

Point to window

Happy

change this Point to

1. call Method

Function name .call(this New point , Actual parameters 1, Actual parameters 2, Actual parameters …)

2. apply Method

Function name .apply(this New point , Array or pseudo array )

3. bind Method

  • Method 1
    Function name .bind(this New point )
  • Method 2
    Function name .bind(this New point , Actual parameters 1, Actual parameters 2, Actual parameters …)
var obj = {
     name:" Novice hand " };

function test(num1,num2) {
    
	console.log(this);
	console.log(num1+num2);
}

test(1,2); // this  Point to  window

//  change  this  Point to , Make it point to  obj
test.call(obj,10,20);

test.apply(obj,[10,20]);

var fn = test.bind(obj);
fn(10,20);

var fn = test.bind(obj,10,20);
fn();

bind Will not execute the function , Still call .

Happy

Layout

1. Elastic layout

1.1. Purpose

Let the child elements be displayed on one line .

1.2. Writing position

Elastic properties { display: flex; } Set to parent element .

{ display: flex; } Default Stretch without line breaks .
Line break ： flex-warp: warp;

1.3. Spindle direction

The main axis and side axis of the elastic box are perpendicular to each other .

By default ：
Default spindle direction

1.4. Change the spindle direction

grammar

flex-direction: value ;

value ：
row From left to right
row-reverse From right to left
column From top to bottom
column-reverse From bottom to top

1.5. Alignment mode

1.5.1. Spindle alignment

namely ： The arrangement position of sub elements on the spindle .
Spindle alignment

grammar

justify-content: value ;

value ：
flex-start Arrange from the starting position of the spindle
center Arranged in the middle of the spindle
flex-end Arrange from the end of the spindle
space-between The distance between child elements is the same （ Commonly used ）
space-around The spacing between the left and right of the child elements is the same （ Commonly used ）
Spindle alignment

1.5.2. Side axis alignment

namely ： The vertical arrangement position of the child elements in the whole row .
Side axis alignment

grammar

align-items: value ;

value ：
flex-start Lean up
center middle
flex-end Down
stretch The tensile （ By default, the height of the child element will be stretched to fill the parent element . Premise ： The child element has no height .）
Side axis alignment

1.5.3. Multi line element alignment

grammar

align-content: value ;

value ：
flex-start
center
flex-end
stretch
space-between
space-around
Multi element alignment

1.6. Elastic division proportion

grammar

Parent element ：display: flex;
Subelement ：flex: The number ;

meaning ： Set the width of the parent element according to flex In proportion to .
If other sub boxes （a With the exception of ） Have a fixed width , Give the remaining width of the parent box to the child box a, So set it directly a Properties of flex: 1; that will do .

Happy

Box shadow

box-shadow: 0px 0px 10px 3px #ccc;

paraphrase ：
Box shadow

One sided box shadow
Font shadow

timer 、 Timer

timer

effect ： The code is executed every once in a while .

establish ：

var timeId = setInterval(handler, interval);

timeId : Unique identification of each timer .
handler: Code to execute , It's a function .
interval: Event interval （ millisecond ）.

eliminate ：

clearInterval(timeId);

eg:

var homeTime;
document.querySelector('.title').onclick = function(){
    
	clearInterval(homeTime);
	homeTime = setInterval(function(){
    
		// do something...
	},1000)
}

Timer

effect ： The code will be executed once every other time , It will close automatically after execution .

establish ：

var timeId = setTimeout(handler, interval);

eliminate ：

clearTimeout(timeId);

$nextTick

$nextTick It helps us calculate dom The latest update .

It is setTimeout Advanced version of , It is equivalent to helping us calculate the specific time of data rendering to the page .

eg：

this.$nextTick(() => {
    
	// do something...
})

end

原网站

版权声明
本文为[This is not difficult]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202150724092922.html

边栏推荐

猜你喜欢

随机推荐