首页 > web前端 > js教程 > 正文

不为人知的JavaScript热门基础知识大全 (收藏)

php是最好的语言
发布: 2018-07-24 09:22:07
原创
1245 人浏览过

学习JavaScript是很枯燥又头疼的,本文带你加深基础知识的印象,以后学习会用到的,需要的就收藏下来吧。

一、js内建对象

    (1)Number
        创建方式:        

var myNum=new Number(value);
var myNum=Number(value);
登录后复制

属性和方法:
toString():转成字符串
valueOf():返回一个 Number 对象的基本数字值
(2)Boolean
创建方式:

var bool = new Boolean(value);    
var bool = Boolean(value);
登录后复制

属性和方法:
toString():转成字符串
valueOf():返回一个 Boolean 对象的基本值(boolean)
(3)String
创建方式:

var str = new String(s);
var str = String(s);
登录后复制

属性和方法:
length:字符串的长度
charAt():返回索引字符
charCodeAt:返回索引字符unicode
indexOf():返回字符的索引
lastIndexOf();逆向返回字符的索引
split();将字符串按照特殊字符切割成数组
substr():从起始索引号提取字符串中指定数目的字符
substring():提取字符串中两个指定的索引号之间的字符
toUpperCase();转大写
示例:
(4)Array
创建方式:

var arr = new Array();//空数组
var arr = new Array(size);//创建一个指定长度的数据
var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
var arr = [];//空数组
var arr = [1,2,5,"java"];//创建数组直接实例化元素
登录后复制

属性和方法:
length:数组长度
join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
pop():删除并返回最后元素
push():向数组的末尾添加一个或更多元素,并返回新的长度
reverse();反转数组
sort();排序
(5)Date
创建方式:

    var myDate = new Date();
    var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
登录后复制

属性和方法
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);
登录后复制

二、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);
function print(str){
eval(str);
}
print("自定义逻辑");

三、js的事件
事件
事件源
响应行为
1、js的常用事件
onclick:点击事件
onchange:域内容被改变的事件
需求:实现二级联动

<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>
登录后复制


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


            
        
    
        onload:加载完毕的事件
            等到页面加载完毕在执行onload事件所指向的函数
            
            
            
    2、事件的绑定方式
        (1)将事件和响应行为都内嵌到html标签中
            
        (2)将事件内嵌到html中而响应行为用函数进行封装
            
            
        (3)将事件和响应行为 与html标签完全分离
            
            
        
        ****this关键字
            this经过事件的函数进行传递的是html标签对象
            
            
    
    3、阻止事件的默认行为
        IE:window.event.returnValue = false;
        W3c: 传递过来的事件对象.preventDefault();
        //ie:window.event.returnValue = false;
        //W3c:传递过来的事件对象.preventDefault();
        //W3c标准
        if(e&&e.preventDefault){
            alert("w3c");
            e.preventDefault();
        //IE标签
        }else{
            alert("ie");
            window.event.returnValue = false;
        }
        
        
        //通过事件返回false也可以阻止事件的默认行为
        点击我吧
    
    4、阻止事件的传播
        IE:window.event.cancelBubble = true;
        W3c: 传递过来的事件对象.stopPropagation();
        if(e&&e.stopPropagation){
            alert("w3c");
            e.stopPropagation();
        //IE标签
        }else{
            alert("ie");
            window.event.cancelBubble = true;
        }    

四、js的bom
    (1)window对象
        弹框的方法:
            提示框:alert("提示信息");
            确认框:confirm("确认信息");
                有返回值:如果点击确认返回true  如果点击取消 返回false
                var res = confirm("您确认要删除吗?");
                alert(res);
            输入框:prompt("提示信息");
                有返回值:如果点击确认返回输入框的文本 点击取消返回null
                var res =  prompt("请输入密码?");
                alert(res);
        open方法:
            window.open("url地址");            
            open("../jsCore/demo10.html");
            
        定时器:
            setTimeout(函数,毫秒值);
                setTimeout(
                    function(){
                        alert("xx");
                    },
                    3000
                );
            clearTimeout(定时器的名称);
                var timer;
                var fn = function(){
                    alert("x");
                    timer = setTimeout(fn,2000);
                };
                var closer = function(){
                    clearTimeout(timer);
                };
                fn();
            setInterval(函数,毫秒值);
            clearInterval(定时器的名称)
                var timer = setInterval(
                function(){
                    alert("nihao");
                },
                2000
            );
            var closer = function(){
                clearInterval(timer);
            };
            
        需求:注册后5秒钟跳转首页
        恭喜您注册成功,5秒后跳转到首页,如果不跳转请点击这里
        
        
    (2)location    
        location.href="url地址";
    (3)history
        back();
        forward();
        go();
        后一页
        
        
        
        
        
        
五、js的dom
    1、理解一下文档对象模型
        html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
        在dom树当中 一切皆为节点对象
    2、dom方法和属性
        笔记见代码
    相关推荐:

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

JavaScript必须知道的基础知识

以上是不为人知的JavaScript热门基础知识大全 (收藏)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板