Home Web Front-end JS Tutorial A complete collection of unknown popular basic JavaScript knowledge (Collection)

A complete collection of unknown popular basic JavaScript knowledge (Collection)

Jul 24, 2018 am 09:22 AM

Learning JavaScript is very boring and a headache. This article will help you deepen your impression of the basic knowledge. You will use it in your future study. Save it if you need it.

1. JS built-in objects

(1)Number
Creation method:

var myNum=new Number(value);
var myNum=Number(value);
Copy after login

Properties and methods:
toString(): Convert to string
                                                                                        using use with using using             through   through off out out through out out through out out through out out together out right out right out through off out off ’     through ’ through ‐ through ‐ through ‐ through through through through through through through‐‐‐ to toString(): to be converted into a string.
Valueof (): Return to the basic value of a Boolean object (Boolean)
(3) String

Create method:

var bool = new Boolean(value);    
var bool = Boolean(value);
Copy after login

Properties and Methods:
LENGTH: The length of the strings
charAt(): Returns the index character
charCodeAt: Returns the index character unicode

indexOf(): Returns the index of the character

lastIndexOf();Reversely returns the index of the character
            split(); The string is cut into an array based on special characters
                                                                                                                                                                                                                                                                                         
                                                                                    #                       toUpperCase(); : Put all elements of the array into a string. The element is separated by the specified separator of
POP (): deletes and returns the final element
Push (): Add one or more elements to the end of the array, and return the new length
reverse () ;Reverse array
                                                                                                          use using                 ’ ‐ ’ s ’ ’ s ‐ ‐ ‐ ‐ ‐ ‐ sort();                                                                                                                                       to

    var myDate = new Date();
    var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
Copy after login

属性和方法
getFullYear():年
getMonth():月 0-11
getDate():日 1-31
getDay():星期 0-6
getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
toLocalString();获得本地时间格式的字符串

(6)Math
创建方式:
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
属性和方法
PI:圆周率
abs():绝对值
ceil():对数进行上舍入
floor():对数进行下舍入
pow(x,y):返回 x 的 y 次幂
random():0-1之间的随机数
round():四舍五入
(7)RegExp
创建方式:
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法:
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法:
test(str):检索字符串中指定的值。返回 true 或 false
需求:
校验邮箱:

 var email = haohao_827@163.com
 var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
 reg.test(email);
Copy after login

二、js的函数
1、js函数定义的方式
(1)普通方式
语法:function 函数名(参数列表){函数体}
示例:
function method(){
alert("xxx");
}
method();
(2)匿名函数
语法:function(参数列表){函数体}
示例:
var method = function(){
alert("yyy");
};
method();
(3)对象函数
语法:new Function(参数1,参数2,...,函数体);
注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
示例:
var fn = new Function("a","b","alert(a+b)");
fn(2,5);
2、函数的参数
(1)形参没有var去修饰
(2)形参和实参个数不一定相等
(3)arguments对象 是个数组 会将传递的实参进行封装
function fn(a,b,c){
//var sum = a+b+c;
//alert(sum);
//arguments是个数组 会将传递的实参进行封装
for(var i=0;i alert(arguments[i]);
}
}
fn(1,2,4,8);

3、返回值
(1)在定义函数的时候不必表明是否具有返回值
(2)返回值仅仅通过return关键字就可以了 return后的代码不执行
function fn(a,b){
return a+b;
//alert("xxxx");
}
alert(fn(2,3));

4、js的全局函数
(1)编码和解码
encodeURI() decodeURI()
encodeURIComponet() decodeURIComponent()
escape() unescape()
三者区别:
进行编码的符号范围不同吧,实际开发中常使用第一种
(2)强制转换
Number()
String()
Boolean()
(3)转成数字
parseInt()
parseFloat()
(4)eval()方法
将字符串当作脚本进行解析运行
//var str = "var a=2;var b=3;alert(a b)";
                                                             //eval(str); ##}
PRINT ("Custom Logic");


Three, JS's event
event

Incident Commonly used events

onclick: click event
onchange: event where domain content is changed
Requirement: realize secondary linkage

<select id="city">
                <option value="bj">北京</option>
                <option value="tj">天津</option>
                <option value="sh">上海</option>
            </select>
            <select id="area">
                <option>海淀</option>
                <option>朝阳</option>
                <option>东城</option>
            </select>
            <script type="text/javascript">
                var select = document.getElementById("city");
                select.onchange = function(){
                    var optionVal = select.value;
                    switch(optionVal){
                        case &#39;bj&#39;:
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";
                            break;
                        case &#39;tj&#39;:
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
                            break;
                        case &#39;sh&#39;:
                            var area = document.getElementById("area");
                            area.innerHTML = "<option>浦东</option><option>杨浦</option>";
                            break;
                        default:
                            alert("error");
                    }
                };                
                
            </script>
Copy after login


        onfoucus:获得焦点的事件
        onblur:失去焦点的事件
            需求:    当输入框获得焦点的时候,提示输入的内容格式
                    当输入框失去焦点的时候,提示输入有误
            
            
            
            
        onmouseover:鼠标悬浮的事件
        onmouseout:鼠标离开的事件
            需求:p元素 鼠标移入变为绿色 移出恢复原色
            #d1{background-color: red;width:200px;height: 200px;}
            


            
        
    
        onload:加载完毕的事件
            等到页面加载完毕在执行onload事件所指向的函数
            
            

3. Default behavior of preventing events
IE:window.event.returnValue = false;
W3c: The passed event object.preventDefault();
//ie:window.event.returnValue = true; .preventDefault();
//IE tag
}else{
alert("ie");
window.event.returnValue = false;
}
         
   
        // Returning false from the event can also prevent the default behavior of the event
                                                                                                               4. Prevent the spread of events
IE: window.event.cancelBubble = true;
W3c: The passed event object.stopPropagation();
if(e&&e.stopPropagation){
#                                                                                                                                                                                                                                          alert("ie");

4. JS bom
(1) window object
Pop-up method:
Prompt box: alert("prompt information");
Confirmation box: confirm("confirmation information" ; :prompt("Prompt information");
There is a return value: If you click Confirm to return the text of the input box, click Cancel to return null
var res = prompt("Please enter your password?");
alert(res );
open method:
window.open("url address");
open("../jsCore/demo10.html");
settimeout (function, millisecond value);
Settimeout (
Function () {
Alert ("xx");
},
3000
); The name of the device);
        var timer;
          var fn = function(){
                    alert("x"); );
          };
var closer = function(){
clearTimeout(timer);
var closer = function(){
clearTimeout(timer);
setInterval(function, millisecond value) );
clearInterval(timer name)
var timer = setInterval(
function(){
alert("nihao");
},
20 00
        );
        var closer = function(){
clearInterval(timer);
clearInterval(timer);
">5 Jump to the home page in seconds. If it does not jump, pleaseClick here
                                       type="text/javascript">
var time = 5;
            var timer;
            timer = setInterval(
                function(){
                    var second = document.getElementById("second");
                    if(time>=1){
                        second.innerHTML = time;
                        time--;
                    }else{
                        clearInterval(timer);
                        location.href="../jsCore/demo10.html";
                    }
                },
                1000
            );
        
        
    (2)location    
        location.href="url地址";
    (3)history
        back();
        forward();
        go();
        后一页
        
        
        
        
        
        
五、js的dom
    1、理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象
    2、dom方法和属性
        笔记见代码
    相关推荐:

JavaScript 变量基础知识_基础知识

JavaScript必须知道的基础知识

The above is the detailed content of A complete collection of unknown popular basic JavaScript knowledge (Collection). 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)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles