Javascript基础知识探索

    in运算符

作用:可以检查一个对象中是否含有对应的属性。(如果有则放回true，如果没有则放回false)

例子为下:

console.log("test" in object);

    变量和函数声明提前 

在使用var关键字声明变量时，会在所有代码执行前就进行声明变量。(如果声明变量时没有var声明，则变量不会被声明提前)

函数声明提前：使用函数声明形式创建函数的function函数，它会在我们所有代码执行之前就被创建。

    var & let

两者的共同点:都可以用于定义属性。

var:为成员变量，为ES6前的产物，存在缺陷，存在作用域的问题。

let:为局部变量，用来替代var。

我们在创建变量时最好采用let，防止出现因全局变量而导致的编译问题。

调用严格检查模式的方法为下:

<script>
//'use strict'为严格检查模式
        'use strict'
        var i = 1;
    </script>

此方法可以预防javascript的随意性导致的一些问题。要使用严格检查模式我们就要将'use strict'写在第一行。

    字符串

长字符串：使用``环绕。

 var str = 
            `one
             two
             three
            `;

字符串的拼接：同过${}进行拼接，${变量名}，和EL表达式很像。

 var name = 'hfw';
        var data = `你好!${name}`;

    数组

在初始化数组的时候，那些为赋初值的项其值为:undefined。

slice()：其类似substring(),可以理解成数组的版的substring()。

pop(),push():出栈和入栈。

unshift(), shift() : 入队列和出队列。

sort():排序。

reverse():元素反转。

数组.concat():表示拼接数组，原来的数组不会改变，其返回的是一个新的数组。

数组.join(''):拼接字符。

    对象

javascript中对应的键都为字符串，属性值为任意对象。

 var person = {
            属性名:value,
            属性名:value,
            属性名:value,
            属性名:value
            // (最后一个属性的赋值不需要",")
        }

动态删除属性

delete 类.属性
//true为删除成功
//false为删除失败

动态添加一个属性(直接给新的属性添加值即可)

//类.属性 = value

hasOwnProperty()：用于判断一个属性是否为该对象所拥有的。

    流程控制

forEach:

var data = [1,2,3,45,5];
        data.forEach(function (value){
            console.log(value);
        });
//需要一个function，且第一个参数表示数组项中的值，第二个参数表示对应项的index
//，第三个参数就表示正在遍历的数组

for in：此循环会打印数组的下标。(不建议使用)

for of : 进行正常循环。（建议使用）

    Map & Set

Map: 其定义类似HashMap。

set:其特点为会消除重复的数值，确保数值的唯一性。

    函数

//function 函数名(){
//    函数体
//}

javascript中只要语法没错，基本就不会报错，其会返回NaN，如果没有执行return 函数也会返回结果。

如果规避Javascript的随意性:在执行函数时，进行类型的判断。

    argument

argument:代表传入参数的对应数组。

rest：获取除了当前变量之后的其他参数。(其对应的格式为下)

var data = function(a, b...rest){
    //函数体
}

    作用域&const

在函数体外要调用函数体内的变量的方法:闭包。

内部函数可以访问外部函数的成员，而外部函数不可以访问内部的函数成员。

js不会因为变量的定义顺序而报错。

默认的全局变量都会绑定在windows下。

Javascript实际上只有一个全局作用域，任

意变量(函数也是变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错"RefrenceError"。

(重点)把自己定义的变量全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。

const：表示常量。(在ES6之前，定义一个常量只需要将其全部大写)。

    apply

apply & cell：可以控制this的指向。

//变量.apply(指向的对象,对应的参数)

    内部对象

typeof():检测对应的类型。

Date() : 获取当前时间。

let date = new Date();
date.getFullYear();//获取当前年份
date.getMonth();//获取月份-1
date.getDay();//星期几
date.getDate();//日
date.getHours();//小时
date.getMinutes();//分
date.getSecond();//秒
date.getTime();时间戳 全世界统一，1970-1-1 00:00:00 到现在的全部秒数

    Json

json：一种轻量级的数据交换格式。(其为格式化的字符串)

//对应转化为JSON字符串
var jsondata = JSON.stringify("类");
//JSON字符串转换为对象
JSON.parse(对应的JSON字符串);

格式:

• 对象都用:{}
• 数组都用:[]
• 所有的键值对都使用: key:value

    对象

继承:例子为下。

var father = {};
var son = {};
son.__proto__ = father;

    class继承

 class student extends 父类{
            //使用对应的构造器
            constructor() {
            }
            // 对应方法
            hello(){
                
            }
        }

 原型链

__proto__ : 原型。

object的原型还是object。

     正则表达式

第一种对应的定义格式:

    var 变量 = new RegExp("正则表达式","匹配方法");
//包含对应的方法即成立

    本质: 其本质是Object。

 第二种对应的定义格式:

 var rel = /正则表达式/匹配模式;
//包含对应的字符串即成立

 对应的运算符:

• | : 或。(可以使用[]表示或的内容)
• [^]: 除了。

正则表达式的方法:

• match() : 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来。默认情况下我们match只会找到第一个符合要求的内容，找到以后停止搜索。(其会返回一个数组)

 var str = 'sfser234234';
       var result = str.match(/[A-z]/g);
       console.log(result);
//g表示全局匹配模式

•  replace():可以将字符串中指定内容替换为新的内容。(参数: 1.被替换的内容2.新的内容)，且默认情况下只会替换一个。
• split() : 可以将一个字符串拆分为一个数组，方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串。
• search() : 可以查找符合内容的字符串的位置的index。

    量词

 量词只对前边的一个字符起效，如果要对应一个字符串起效就需要加括号。

var rel = /a{3}/;
var rel2 = /a{1,3}/;
//表示a出现一到三次
var rel3 = /a{1,}/;
//表示a出现一到无数次
var rel4 = /^a$/;
//表示a即表示开头也表示结尾
var rel5 = /^a|a$/;
//表示y以a开头或以a结尾

例子一:手机号匹配。

 var str = '15960530051';
    var rel = /^1[3-9][0-9]{9}$/;

例子二：邮箱匹配。

var rel = ^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$;

     操作BOM对象(重点)

 BOM : 浏览器对象模型。(document, windows)

(重要)window的方法:

window.innerHeight : 内高度。

window.innerwidth : 内宽度。

window.outerHeight : 外高度。

window.outerWidth : 外宽度。

Navigator(封住了浏览器的信息)

navigator.appName : 查看浏览器的名字。

navigator.appversion : 查看浏览器的版本。

navigator.platform :检查系统信息。

大多数的时候，我们不会使用 navigator对象，因为会被人为修改。

    screen(屏幕)

screen.width : 宽度。

screen.height : 高度。

    location(重要)

location:表示当前页面的URL信息。

host: 主机

href:当前的指向位置。

reload : 当前的使用方法。(方法有reload(重新加载))

设置新的地址方法:location.assign("新的网址")。

    document(代表当前页面)

getElementsById("id") :通过对应的id获取元素，获取具体的文档树结点。

getElementsByTagName(""):通过标签名获取元素。

 getcookie :获取当前网页的cookie。

服务器可以设置cookie : httpOnly。

    history（代表浏览器的记录）

back : 返回上个网页。

forward : 前进到下个页面。

    操作DOM对象(重点)

DOM : 文档对象模型。

浏览器网页就是一个Dom树形结构。

• 更新：更新DOM结点。
• 遍历DOM结点:得到DOM结点。
• 添加：添加一个新的结点。
• 删除：删除一个DOM结点。

要操作一个DOM结点，就必须要先获得这个DOM结点。 

DOM结点.child() : 通过DOM结点.child()，我们可以获取该DOM结点下的所有子节点。

    更新结点

对应结点.innerHTML() : 往对应的结点中添加HTML标签。

对应结点.style.对应的属性:相当于添加对应的css样式。

    删除结点

删除结点的步骤：先获取父结点，在通过父结点删除自己。

获取父结点：当前结点.parentElement()。

father.removeChild('对应的标签')。

注意:删除多个结点的时候，children是在时刻变化的，删除结点的时候一定要注意。

    插入结点

我们获取某个DOM结点，假设这个DOM结点是用的，我们可以通过innerHTML增加一个元素，但是这个DOM结点已经存在元素了，我们就不能这么干了。

    追加

document.createElement('对应的标签') 创建一个对应的标签，返回一个对象。

可以通过该对象.id来设置其id的值，用该对象.innerText('对应的内容')来添加对应的内容。

var myscript = document.createElement('style');//创建了一个空的style标签
myscript.setAttribute('type', 'text/css);
myscript.innerHTML = 'body{background-color:chartreuse}';//设置标签内容
document.getElementsByTagName('head')[0].appendChild(myscript);

    操作表单(验证)

在按钮被点击时触发事件：οnclick=""。

    MD5算法

使用方法:引入对应链接。

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

调用方式:md5("value")。

为了安全我们在表单的提交中可以添加一个type="hidden"的input标签，在该标签中的value设为用md5加密后的密码，我们可以就输入密码框中的密码值进行加密，这样后端人员就不会知道密码的明文了。

在不写input标签中的name时，检查网页的提交信息，也不会有其对应的信息，由于只是隐藏不显示，这并不是代表没有。

    JQuery

使用方法:使用在线CDN。

<!--JQuery的官网链接-->
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!--百度的CDN-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

(重点)JQuery的对应的格式为:

//selector就是CSS中的选择器
$(selecter).action()

对应的例子为下:

//$('对应的id')等价于document.getElementsById('对应的id')
//下面为CSS中的选择器
//$('对应的标签名')表示标签选择器
//$('#id')表示id选择器
//$('.class')表示类选择器

     事件

鼠标事件:

当网页加载完以后，响应事件。

$(document).ready(function(){
    //写入对应的事件
});
//其简便写法为下

 例子为下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        #data{
            width: 500px;
            height: 500px;
            border: 1px solid #226fe5;
        }
        #mouseMove{
            color: rebeccapurple;
        }
    </style>
</head>
<body>
mouse : <span id="mouseMove"></span>
<div id="data">
    在这里移动鼠标试试!
</div>
<script>
    $(document).ready(function (value){
        $('#data').mousemove(function (e){
            $('#mouseMove').text('x :' + e.pageX +'  ' + 'y : ' + e.pageY);
        });
    });
</script>
</body>
</html>

效果为下。

如果只使用js的话，我们就要用onmousemove()来进行相关操作。(其实在每次使用事件时，浏览器都会传一个实参，可以通过该实参来获取对应的信息)

    操作DOM元素

JQuery中的action为text时：有参数时就会对其设置该参数，如果text()中没用参数时就代表取出对应标签中的text信息。

元素的显示和消失:格式为下。(其本质就是:display : none)

$('对应的id').show();//显示
$('对应的id').hide();//隐藏

修改css样式规则:如果样式名中含有'-',就直接使用驼峰命名法来取。

如果在样式有!important的话，就会存在最高优先级，通过DOM的修改会失败。

    事件

onload()的特性:次事件会在整个页面加载完之后触发。

事件规则:在事件响应函数中，this表示调用函数的那个对象。

confirm():显示一个带取消按钮的提示框。(会返回一个boolean值，用于判断)

取消事件冒泡方法为下:

event.cancelBubble = true;

IE版本问题: 为了保证IE能够执行对应的事件，在取event时，IE要通过wnidow.event来取，

所以在写事件时可以加一行固定的代码(代码为下)。

event = event || window.event;

事件委派: 在一个标签中存在多个相同事件时，我们可以直接将事件帮定到对应的事件上，实现事件委派，此方式可以解决新增相同事件的触发效果(当后代事件触发时，会一直冒泡到祖先元素上),

这时绑定到不该绑定的地方，我们可以通过target.className和对应的标签的className进行匹配。

onmousewheel() : 滚轮事件。(可以通过event.wheelDelta获取对应的属性值)

    定时器

setInterval():定时执行函数，可以将一个函数每隔一段时间执行一次。

对应的两个参数:

参数一:回调函数，该函数每隔一段时间被调用一次。

参数二:每次的调用时间，单位为毫秒。

clearInterval()作用:关闭定时器。(该方法的参数为定时器的标识)

延迟器: setTimeout() ： 延迟一段时间后执行对应的函数。(参数一:回调函数。参数二:延迟的时间)