Home > Web Front-end > JS Tutorial > body text

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

php是最好的语言
Release: 2018-07-24 09:22:07
Original
1196 people have browsed it

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!

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!