Niu Ke front-end collection - brushing questions##Day13

🍀 About the author: College student, a dream chaser who works hard for the front-end direction.

🍁 Personal homepage: Yi Shifanhua ,

🫒Series of Columns: Niu Ke Front-end Collection

🍂If you want to learn front-end with bloggers or want to consolidate your knowledge , you can click on the link: Niuke.com to open the door of your own world.

🏍️ I have never mentioned the willful request, I just want you to follow me every day.

🥥Foreword:

🏆Programming is just like we usually do questions. If we just blindly study and do not do the questions, the effect will be minimal. Therefore, I also searched for a lot of question banks on the Internet, but I have been uncomfortable with them . Until I found Niu Ke, I found the fun of learning to do questions . Not only can it systematically sort out the knowledge points I have learned , but also because of its code The neat and tidy problem solutions are clear and clear, allowing people to quickly grasp the knowledge . For this reason, I am willing to share it with you and learn together.

Today we explain the ES5 type question bank: click on the follow and we will continue

Table of contents

function

Description 1: Function - parameter object

this

Description 2: this points to

WebAPI

Description 3: JS dynamically creates nodes

Description 4: Get elements by ID

Description 5: JS modifies the content of the element

bind event

Description 6: Stop the bubbling event

Description Seven: Block default events

Operate the address bar

Description 8: url address

general practice

Description 9: Click the button to hide the element


function

Description 1: Function - parameter object

Please complete the JavaScript function to return its parameter pseudo-array object .

The return parameter is a pseudo-array object. We thought of the use of arguments . What else can we use besides this? You can use the   Array.of() method in JS.

this

Description 2: this points to

Please complete the JavaScript function so that the fn function in the obj object returns the sum of the a property and the b property in the object .

From the title description, it is easy to see that the properties in the calling object can be called through the this pointer . Of course, we can also use the object name to point the property to call , both of which can be used.

WebAPI

Description 3: JS dynamically creates nodes

Please complete the JavaScript function to create a li element from the parameter array .
Requirements:
1. The number of li elements is the same as the length of the array
2. The content of the li element is each element in the array
3. Insert all the created li elements into the ul

You can assign the created li tag to the ul tag by traversing the array .

Description 4: Get elements by ID

Please complete the JavaScript function to obtain the second li element under the ul tag in the html module according to the id and return it .

According to the title, the li element is obtained according to the id and the result is returned, then the second li element is obtained directly through the id and the result is returned .

There are many ways for JS to obtain DOM elements. If you are not familiar with it, you can read my related article: How to Get DOM Elements

Description 5: JS modifies the content of the element

Please complete the JavaScript function and modify the content of the div element with the class "box" to "Welcome to Niuke.com" .

There are two ways to modify the content of HTML elements in JS, one is: innerHTML ; the other is: innerText , and the difference between the two can be seen in my explanation of this article: Manipulating Elements

bind event

Description 6: Stop the bubbling event

Please complete the JavaScript function to not trigger the ul event when the li element is clicked .
Note: You need to get the li element yourself.

Prevent bubbling events by clicking events as shown in the title .

Description Seven: Block default events

Please complete the JavaScript function to require that the checkbox with the id "checkbox" is not unchecked .
Note: You need to get the input element yourself.

There are many ways to prevent default events, you can use preventDefault() , of course, you can use other methods.

Operate the address bar

Description 8: url address

Please complete the JavaScript function and implement a function to return the current url of the page .

Return the url address of the current page, you can directly return the local href .

general practice

Description 9: Click the button to hide the element

Please complete the JavaScript code to implement the close button function of a box .
Requirements:
1. Make the center point of the div element with class "btn" positioned at the top right vertex of the div element with class "box"
2. Center the content "X" in the div element with class "btn" vertically and horizontally
3. Click "" The X" button can hide the div element with class "box"

Here we need to use the knowledge of absolute positioning and relative positioning of CSS. The previous article has already explained, mainly how to hide the box of the box, in JS, you can use style.display=none .

Every time you finish the question and submit it successfully, the box will pop up with music to encourage you. I'm very fortunate because I found a bully .

Personal summary: 

Today's topic is explained here. If you continue to deepen your knowledge of the content of the previous article, people's memory may be lost, but people's potential is unlimited. Brushing the questions once a day and constantly consolidating the knowledge that has been learned, such a person is very easy to succeed . Niukejiaozhen is indeed a good website for question brushing. For people with weak foundations, it is no less than gospel . If you agree with me, click the link on the right to register and brush questions . 🥑: Niuke.com

come on! ! ! The great front-end engineer in the future may be you~~, click on it and come on! rush!

Tags: Niu Ke front-end collection - brushing questions##Day13

# Niu Ke front-end brush questions front end Development language javascript html

Related: Niu Ke front-end collection - brushing questions##Day13