js--3

于 2023-04-18 13:21:05 发布
阅读量132 收藏
点赞数
分类专栏： JAVAWEB入门 文章标签： javascript 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53280238/article/details/130219492
版权

javascript

js的介绍
js的使用
	外部js
	内部js
js的基本语法
	变量
	流程控制
	函数
	对象的定义
dom
	对标签增删改查
事件
定时器
	循环定时器
	延时定时器
bom
常用类和常用方法

js的介绍

javascript的简称叫做js，他是一门客户端的脚本语言(php，python等都是脚本语言)；依赖于html存在，运行在客户端的浏览器中，依靠浏览器的js解释引擎运行，是不需要编译的。

浏览器中有一个js的解释器
java是一个编译解释型语言(先编译成字节码文件 再交给JVM解释执行)

js本质上是一门解释性语言。

js的功能：

​ 可以增强用户和html的交互体验，可以用来控制html的标签，让页面产生一些动态的效果。

页面分为动态页面和静态页面，两种页面的区别是?

静态页面：任何人在任何时间使用任何设备访问的页面内容都是一样的，这个就是静态页面

动态页面：上面三个可变因素有一个发生了改变，页面的内容可能会发生改变，这个页面就是动态的；页面架构不变只是数据变化

js的发展历程：

1.92年的时候，出现了第一款脚本语言，主要用来对表单进行数据校验的。

2.95年的时候，网景公司推出了一款客户端脚本语言叫做：livescript，再让sun公司对这们语言进行了修改，重新命名为javascript

3.96年的时候，微软推出了和javascript类似的语言叫做Jscript

4.97年的时候，欧洲计算器制造商协会，制定了客户端脚本语言的标准，ECMAScript，统一了所有脚本语言的编码方式【这里指浏览器的脚本语言】

5.ECMAScript6.0是2015年发布的最新的javascript版本，建议在idea中将javascript的版本设置为ECMAScript6

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IxNBWSkg-1681795235980)(assets/1657089054868.png)]

js的使用

外部js

创建一个后缀为js的文件

alert("hello world");

然后在html中引入这个文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>

</head>
<body>
<!--可以出现在html的任何地方-->
<script src="../js/test.js"></script>
</body>
</html>

在html中添加script标签，然后使用src属性去进行引入，script标签可以出现在html的任何地方

内部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>

</head>
<body>
    <script>
        alert("hello world");

    </script>
</body>
</html>

在html的任何地方添加script标签，然后在标签的内部写js的代码。

一个html中可以出现多个script标签，但是js的执行顺序是从上往下的，在使用的时候一定需要注意先后次序。

js的基本语法

变量

// 变量定义
/*
    js是一门弱类型语言，在变量定义的时候不需要知道类型，在赋值的时候由值来决定这个变量的类型是什么

    类型有： number string  boolean  object(null也是Object类型)  undefined(没有赋值或者未定义变量)
    var 是定义变量的关键字 可以重复声明变量 局部可以修改全局的变量值 作用范围一样
    let 也是定义变量的关键字 不可以重复声明变量 局部不可以修改全局的变量值  根据声明的位置作用范围不一样
    类似于java中变量的定义
    
    const  常量 值不可变
 */

var q = 10;
{
    var q = 20;
}
alert(q);
var a = 10.1;
a = "hello";
a = true;
a = new Object();
a = [];
var b;

// 数组定义
var arr = [1,4,6,"a","f"];//定义了一个数组
var arr2 = new Array(5);//定义了一个长度为5的数组
var arr3 = new Array(1,2,3,4,5,6);//定义了一个数组
//数组的长度  数组的长度是可变的  数组的长度是最大索引值+1
// alert(arr.length);
//获取数组中的某个值

//给数组赋值
arr[10] = 5;
arr['a'] = 10;
var a = 10;
var b = 3;
var c = a / b;  //带小数点

运算


var a = 10;
var b = 20;
var c = a++ + ++a * b-- - --a / b-- - --a;
//      10 + 12 * 20 - 11 / 19 - 10
var a = 10 < 100 && 1 && 1 < 10;
// alert(a )

a  11  12  11
b  19   18  
c


10  +  12*20  -  11/19  - 10   =240-11/19

数学运算

+ - * / %  += -= *= /= ++ --
js中两个整数除不尽  是带小数点的

逻辑运算

var a = 10 < 100 && 1 && 1 < 10;
// alert(a )

> < <= >= ==(只判断值不判断类型)  != === 全等于(即判断值也判断类型)  !==（不全等） ! 
在js中 0  "" null undefiend false NaN 都按照假来处理


 && 并且 返回最近一个为假的值 如果都为真则返回最后一个为真的值  返回的值不一定是boolean
 || 或者 返回最近一个为真的值 如果都为假则返回最后一个为假的值  返回的值不一定是boolean

流程控制

判断
if(条件){
    //代码
} else if(条件){
          //代码
}else if...

else{
    
}

循环
for(定义;判断;改变){
    循环的代码
}
while(条件){
      //循环的代码
}
do{
    //循环的代码
}while(条件);
//循环数组
for(let 下标 in 数组/对象){
    数组/对象[下标]//取值
}

分支
switch(变量){
    case 值:
        代码;
        break;
    case 值:
        代码;
        break;
    case 值:
        代码;
        break;
    default:
        代码;
        break;
}
var a = 10;
switch(a){
    case 9:
        alert(9);
        break;
    case 10:
       alert(10);
    case 11:
        alert(11);
        break;
    default:
        alert("default");
        break;
}

函数/方法


function plus (){  //可变参数  
    let total = 0;
    //  argumentsKey  索引
    //arguments  数组
    for (let argumentsKey in arguments) {
        total += arguments[argumentsKey];
    }
    return total;
}

var plus2 = function (a,b){
    return a + b;
}

var plus1 = plus (100,200,300,400,500,600,700,800,900);
console.log(plus1)


function 函数名(参数...){
    //函数体 
}
var 函数名 = function(参数...){
    //函数体
}

//调用
函数名(参数)
//没有方法重载的概念  后声明的方法会直接覆盖先声明的方法
动态参数

对象的定义


// 对象定义
// 先定义一个类
function Person (){
    this.name = "张三";
    this.age = 18;
    this.walk = function (){
        console.log(this.name + "正在走路")
    }
}
//创建对象
let person = new Person();
person.walk();




// js的对象可以动态的添加属性和方法
let  person2 = new Object();
person2.name = "张三";
person2.age = 19;
person2.walk = function (){
    console.log(this.name + "正在走路")
}
person2.walk();


//大括号代表对象
let person3 = {
    name: "张三",
    age: 19,
    walk: function (){
        console.log(this.name + "正在走路")
    }
};
person3.walk();

for (let person3Key in person3) {
    //类似于键值对
    console.log(person3Key + ":" + person3[person3Key])
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>

</head>
<body>
<!--<script src="../js/test.js"></script>-->
<script>
    //第一种
    function Person(name,age){
        this.name = name;
        this.age = age;
        this.walk = function (){
            alert(this.name + "今年" + this.age + "正在走路")
        }
    }
    //创建对象
    // var person = new Person("李四",20);
    // person.walk();
    // js 中对象的属性可以动态添加
    /*var person = new Object();
    person.name = "张三";
    person.age = 18;
    person.walk = function (){
        alert(this.name + "今年" + this.age + "正在走路")
    }
    person.walk();*/
    //第三种
    var person = {name : "张三" , age : 18,walk:function(){
            alert(this.name + "今年" + this.age + "正在走路")
        }};
    person.walk();
</script>
</body>
</html>

dom

document object model 文档对象模型名主要就是将一个完整的html当做一个文档来处理，一个文档内部由很多标签来组成的，dom主要就是针对这些标签来实现增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<p>表示一个段落1</p>
<p>表示一个段落2</p>
<p>表示一个段落3</p>
<p>表示一个段落4</p>
<p name="q">表示一个段落5</p>
<p class="a c e">表示一个段落6</p>
<p>表示一个段落7</p>
<div>这是div这是div这是div这是div8</div>
<div name="q">这是div这是div这是div这是div9</div>
<div id="a" class="a">这是div这是div这是div这是div10</div>
<div >这是div这是div这是div这是div11
    <div>11111

        <span>22222
            <div>333333
                <p>444444</p>
            </div>
        </span>
        <span>55555</span>
    </div>
    <p>666666</p>
</div>
<script>
    // 查找所有的标签
    var all = document.all;

    //通过标签名查找标签 返回数组
    var ps = document.getElementsByTagName("p");

    //通过类名查找
    var classes = document.getElementsByClassName("a");

    //通过id查找
    var elementById = document.getElementById("a");

    //通过name属性查找
    var elementsByName = document.getElementsByName("q");



    //可以通过选择器来查找  只会返回一个标签
    var element = document.querySelector("div span p");


    // 可以通过选择器来查找  可以返回所有匹配的标签
    var elementNodeListOf = document.querySelectorAll("div span");
    // alert(elementNodeListOf[0].innerHTML)  //返回包含标签的内容






    //增加标签
    // 创建标签
    var h1 = document.createElement("h1");
    h1.innerText = "这是h1的标题";
    //通过父级标签添加子级标签
    document.body.appendChild(h1);



    //删除标签
    //找到标签对象
    var htmlHeadingElement = document.querySelector("h1");
    //删除标签
    // document.body.removeChild(htmlHeadingElement);


    //如果我们不知道要删除标签的父级标签  我们就要先找到  再删除
    //通过自己找到父级节点，再来删除自己
    // htmlHeadingElement.parentNode.removeChild(htmlHeadingElement);




    //修改
    //改内容
    // innerText 不识别标签，标签没有样式        innerHTML  会识别标签 标签会生效
    // h1.innerText = "<i>哈哈哈哈哈</i>";
    h1.innerHTML = "<i>哈哈哈哈哈</i>";


    //改属性
    h1.id = "aaa"
    h1.title = "title";
    // class 属性需要使用className
    h1.className = "bbb";



    //修改或者添加属性（有就修改  没有就添加  这些标签也可以看成对象）
    h1.setAttribute("id","ids");
    //获取属性的值
    var attribute = h1.getAttribute("id");
    console.log(attribute);


    //删除属性
    h1.removeAttribute("id");





    //改样式
    h1.style.color = "red";
    //获取样式
    console.log(h1.style.color);
    //如果属性中有中划线的，变成驼峰命名
    h1.style.fontFamily = "幼圆";
    console.log(h1.style.fontFamily)
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom</title>
</head>
<body>

<p>表示一个段落1</p>
<p>表示一个段落2</p>
<p>表示一个段落3</p>
<p>表示一个段落4</p>
<p name="q">表示一个段落5</p>
<p class="a c e">表示一个段落6</p>
<p>表示一个段落7</p>
<div>这是div这是div这是div这是div8</div>
<div name="q">这是div这是div这是div这是div9</div>
<div id="a" class="a">这是div这是div这是div这是div10</div>
<div >这是div这是div这是div这是div11
    <div>11111

        <span>22222
            <div>333333
                <p>444444</p>
            </div>
        </span>
        <span>55555</span>
    </div>
    <p>666666</p>
</div>

<script>
    //document  是js中内置对象
    //在内存中创建了一个h1标签
    let h1 = document.createElement("h1");
    //需要将h1添加到body中去
    document.body.appendChild(h1);
    //修改  修改属性  修改样式  修改内容
    //修改内容
    //不识别html的标签 只会原样显示
    // h1.innerText = "<i>春晓</i>";
    //会识别html的标签
    h1.innerHTML = "<i>春晓</i>";
    // alert(h1.innerText);
    //修改样式
    h1.style.color = "red";
    h1.style.textAlign = "center";
    //获取样式 获取样式只能获取到内联样式 如果没有设置的内联样式获取出来都是空的
    // alert(h1.style.textAlign);
    //修改属性  设置属性 直接对象.属性名  除了class属性
    /*h1.id = "a";
    h1.className = "b";*/
    //设置属性
    h1.setAttribute("class","b");
    //获取属性
    var attribute = h1.getAttribute("class");
    // alert(attribute);
    //移除属性
    h1.removeAttribute("class");

    //删除
    // h1.remove();
    // document.body.removeChild(h1)

    //查询
</script>
<script>
    // var all = document.all;//返回html中所有的标签
    //通过标签名来寻找
    var elementsByTagName = document.getElementsByTagName("p");
    //通过类名来寻找
    var elementsByClassName = document.getElementsByClassName("a");
    //通过name属性来寻找的
    var elementsByName = document.getElementsByName("q");
    //通过id来查询
    var elementById = document.getElementById("a");
    // alert(elementById.innerText);
    //使用选择器去找标签 如果选择器匹配多个，也只会返回第一个
    var element = document.querySelector("span > div");
    //使用选择器去找标签 返回数组
    var elementNodeListOf = document.querySelectorAll("div div");
    alert(elementNodeListOf[1].innerText)
</script>
</body>
</html>

事件

事件包含了三要素：事件源，事件对象，事件监听器

事件绑定

第一种绑定方式,直接在标签上添加对应的事件名称

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        div{
            width: 360px;
            height: 395px;
            background-image: url("../images/light2.jpg");
        }
    </style>
</head>
<body>
<script>

    function changeLight(){
        var button = document.querySelector("input[type='button']");
        var div = document.querySelector("div");
        if(button.value == "关灯"){
            div.style.backgroundPositionX = "-360px";
            button.value = "开灯";
        }else{
            div.style.backgroundPositionX = "0px";
            button.value = "关灯";
        }

    }
</script>
<div></div>
<input type="button" value="关灯" onclick="changeLight()">
<input type="button" value="关灯" onclick="changeLight(this)">
    //this 代表的就是这个按钮  也就是input
</body>
</html>

第二种事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        div{
            width: 360px;
            height: 395px;
            background-image: url("../images/light2.jpg");
        }
    </style>
</head>
<body>
<script>


    function changeLight(){
        var button = document.querySelector("input[type='button']");
        var div = document.querySelector("div");
        if(button.value == "关灯"){
            div.style.backgroundPositionX = "-360px";
            button.value = "开灯";
        }else{
            div.style.backgroundPositionX = "0px";
            button.value = "关灯";
        }

    }

</script>
<div></div>
<input type="button" value="关灯">
<script>
    var button = document.querySelector("input[type='button']");
    //通过js绑定 直接绑定的话，只能绑定一个事件
    button.onclick = changeLight;

</script>
</body>
</html>

第三种绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        div{
            width: 360px;
            height: 395px;
            background-image: url("../images/light2.jpg");
        }
    </style>
</head>
<body>
<script>


    function changeLight(){
        var button = document.querySelector("input[type='button']");
        var div = document.querySelector("div");
        if(button.value == "关灯"){
            div.style.backgroundPositionX = "-360px";
            button.value = "开灯";
        }else{
            div.style.backgroundPositionX = "0px";
            button.value = "关灯";
        }

    }

</script>
<div></div>
<input type="button" value="关灯">
<script>
    var button = document.querySelector("input[type='button']");
    //可以绑定同类型的多个事件
    button.addEventListener("click",changeLight);//绑定的第一个事件
    button.addEventListener("click",function(){
        console.log(this.value)
    });
    //移除指定的事件
    button.removeEventListener("click",changeLight);

</script>
</body>
</html>

事件类型

事件描述属于
abort媒体加载中止时发生该事件。UiEventEvent
blur当元素失去焦点时发生此事件。FocusEvent
change当form元素的内容、选择的内容或选中的状态发生改变时，发生此事件Event
click当用户单击元素时发生此事件。MouseEvent
contextmenu当用户右键单击某个元素以打开上下文菜单时，发生此事件。MouseEvent
copy当用户复制元素的内容时发生此事件。ClipboardEvent
cut当用户剪切元素的内容时发生此事件。ClipboardEvent
dblclick当用户双击元素时发生此事件。MouseEvent
drag拖动元素时发生此事件。DragEvent
dragend当用户完成拖动元素后，发生此事件。DragEvent
dragenter当拖动的元素进入放置目标时，发生此事件。DragEvent
dragleave当拖动的元素离开放置目标时，发生此事件。DragEvent
dragover当拖动的元素位于放置目标之上时，发生此事件。DragEvent
dragstart当用户开始拖动元素时发生此事件。DragEvent
drop当将拖动的元素放置在放置目标上时，发生此事件。DragEvent
error当加载外部文件时发生错误后，发生此事件。ProgressEventUiEventEvent
focus在元素获得焦点时发生此事件。FocusEvent
focusin在元素即将获得焦点时发生此事件。FocusEvent
focusout在元素即将失去焦点时发生此事件。FocusEvent
keydown当用户正在按下键时，发生此事件。KeyboardEvent
keypress当用户按下键时，发生此事件。KeyboardEvent
keyup当用户松开键时，发生此事件。KeyboardEvent
load在对象已加载时，发生此事件。UiEventEvent
mousedown当用户在元素上按下鼠标按钮时，发生此事件。MouseEvent
mouseenter当指针移动到元素上时，发生此事件。MouseEvent
mouseleave当指针从元素上移出时，发生此事件。MouseEvent
mousemove当指针在元素上方移动时，发生此事件。MouseEvent
mouseout当用户将鼠标指针移出元素或其中的子元素时，发生此事件。MouseEvent
mouseover当指针移动到元素或其中的子元素上时，发生此事件。MouseEvent
mouseup当用户在元素上释放鼠标按钮时，发生此事件。MouseEvent
reset重置表单时发生此事件。Event
scroll滚动元素的滚动条时发生此事件。UiEventEvent
select用户选择文本后（对于和）发生此事件UiEventEvent
submit在提交表单时发生此事件。Event
unload页面卸载后（对于 ），发生此事件。UiEventEvent
wheel当鼠标滚轮在元素向上或向下滚动时，发生此事件。WheelEvent

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zduehf6A-1681795235981)(assets/1657094236597.png)]

=

HTML DOM 事件属性和方法

属性/方法描述属于
altKey返回触发鼠标事件时是否按下了 “ALT” 键。MouseEvent
button返回触发鼠标事件时按下的鼠标按钮。MouseEvent
clientX返回触发鼠标事件时，鼠标指针相对于当前窗口的水平坐标。MouseEventTouchEvent
clientY返回触发鼠标事件时，鼠标指针相对于当前窗口的垂直坐标。MouseEventTouchEvent
clipboardData返回对象，其中包含受剪贴板操作影响的数据。ClipboardData
code返回触发事件的键的代码。KeyboardEvent
ctrlKey返回触发鼠标事件时是否按下了 “CTRL” 键。MouseEvent
ctrlKey返回按键鼠标事件时是否按下了 “CTRL” 键。KeyboardEventTouchEvent
currentTarget返回其事件侦听器触发事件的元素。Event
data返回插入的字符。InputEvent
key返回事件表示的键的键值。KeyboardEvent
key返回更改后的存储项的键。StorageEvent
keyCode返回触发 onkeypress、onkeydown 或 onkeyup 事件的键的 Unicode 字符代码。KeyboardEvent
location返回键盘或设备上按键的位置。KeyboardEvent
metaKey返回按键事件触发时是否按下了 “META” 键。KeyboardEventTouchEvent
MovementX返回相对于上一 mousemove 事件的位置的鼠标指针的水平坐标MouseEvent
MovementY返回相对于上一 mousemove 事件的位置的鼠标指针的垂直坐标MouseEvent
pageX返回触发鼠标事件时鼠标指针相对于文档的水平坐标。MouseEvent
pageY返回触发鼠标事件时鼠标指针相对于文档的垂直坐标。MouseEvent
screenX返回窗口/鼠标指针相对于屏幕的水平坐标。MouseEvent
screenY返回窗口/鼠标指针相对于屏幕的垂直坐标。MouseEvent
shiftKey返回事件触发时是否按下了 “SHIFT” 键。MouseEvent
shiftKey返回按键事件触发时是否按下了 “SHIFT” 键。KeyboardEventTouchEvent
type返回事件名称。Event
which返回触发鼠标事件时按下的鼠标按钮。MouseEvent

定时器

在js中没有线程的概念，要想异步的执行任务就需要使用定时器，定时器在js中分为两种，一种循环定时器，一种延时定时器

循环定时器

let i = 0;
//循环定时器  第一个参数是一个回调函数 ，循环定时器执行的任务，
//第二个参数是时间 ，隔多久执行一次这个任务 单位是毫秒
//这是一个内置的方法
var intervalId = setInterval(function (){
    console.log(++i);
    if(i == 100){
        //清除定时器 传入的是设置定时器的id
        clearInterval(intervalId)
    }
},200);

延时定时器

//第一个参数是一个回调函数 ，延时定时器执行的任务，
//第二个参数是时间 ，隔多久开始执行这个任务 单位是毫秒  只会执行一次
var timeout = setTimeout(function () {
    console.log(++i);
},2000);
//清除延时定时器 传入的是延时定时器的id
clearTimeout(timeout)

附：

一：网页可见区域宽高，不包括工具栏和滚动条（浏览器窗口可视区域大小）

1.对于IE9+、chrome、firefox、Opera、Safari：

window.innerHeight浏览器窗口的内部高度；

window.innerWidth浏览器窗口的内部宽度；

2.对于IE8.7.6.5:

document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度；

document.documentElement.clientWidth:表示HTML文档所在窗口的当前宽度；

或者，因为document对象的body属性对应HTML文档的<body>标签，所以也可表示为：

document.body.clientHeight：表示HTML文档所在窗口的当前高度；

document.body.clientWidth：表示HTML文档所在窗口的当前宽度；

结论：

document.body.clientWidth/Height：的宽高偏小，高甚至默认200；

document.documentElement.clientWidth/Height 和 window.innerWidth/Height 的宽高始终相等。

所以在不同浏览器都实用的的Javascripit方案：


var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
二：网页正文全文宽高

scrollWidth和scrollHeight获取网页内容高度和宽度

1.针对IE.Opera：scrollHeight是网页内容实际高度，可以小于clientHeight;

2.针对NS.firefox：scrollHeight是网页内容高度，不过最小值是clientHeight;也就是说网页内容实际高度小于clientHeight的时候，scrollHeight返回clientHeight；

3.浏览器兼容代码：

1 var w = document.documentElement.scrollWidth || document.body.scrollWidth;
2 var h = document.documentElement.scrollHeight || document.body.scrollHeight;

二：网页可见区域宽高，包括滚动条等边线（会随窗口的显示大小改变）

1.值：   offsetWidth = scrollWidth + 左右滚动条 +左右边框；

　　　　offsetHeight = scrollHeight + 上下滚动条 + 上下边框；

2.浏览器兼容代码：

1 var w = document.documentElement.offsetWidth || document.body.offsetWidth ;
2 var h = document.documentElement.offsetHeight || document.body.offsetHeight ;


三：网页卷去的距离与偏移量

1.scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离；

2.scrollTop:设置或获取位于给定对象最顶端与窗口中目前可见内容的最左端之间的距离；

3.offsetLeft:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置；

4.offsetTop:设置或获取位于给定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置；

bom

broswer object model 浏览器对象模型，将浏览器中的每一个东西都看做是对象，dom也算是bom中的一部分

浏览器中常用的对象有：document，location，history，navigato r，screen，window

location

当前打开页面的url信息都包含在其中

console.log(location.hash) // #后面的部分
console.log(location.host) //主机和端口
console.log(location.hostname) //主机
console.log(location.port) // 端口
console.log(location.search) // ?后面的部分
console.log(location.pathname)// 路径部分
console.log(location.protocol) // 协议
console.log(location.href) // 完整的url
//常用的一种页面跳转的方式
location.href = "https://www.baidu.com"

history

记录了当前标签页的历史记录

history.back(); // 回退
history.forward();// 前进
history.go(1);//当前页算为0 去第几个记录
history.length;// 当前标签页有几个历史记录

navigator

记录了浏览器和系统的相关信息

var x = navigator;
document.write("CodeName=" + x.appCodeName);
document.write("<br />");
document.write("MinorVersion=" + x.appMinorVersion);
document.write("<br />");
document.write("Name=" + x.appName);
document.write("<br />");
document.write("Version=" + x.appVersion);
document.write("<br />");
document.write("CookieEnabled=" + x.cookieEnabled);

document.write("<br />");
document.write("CPUClass=" + x.cpuClass);
document.write("<br />");
document.write("OnLine=" + x.onLine);
document.write("<br />");
document.write("Platform=" + x.platform);
document.write("<br />");
document.write("UA=" + x.userAgent);
document.write("<br />");
document.write("BrowserLanguage=" + x.browserLanguage);
document.write("<br />");
document.write("SystemLanguage=" + x.systemLanguage);
document.write("<br />");
document.write("UserLanguage=" + x.userLanguage)

screen

记录了屏幕相关的一些信息

document.write("Screen resolution: ")
document.write(screen.width + "*" + screen.height)
document.write("<br />")
document.write("Available view area: ")
document.write(screen.availWidth + "*" + screen.availHeight)
document.write("<br />")
document.write("Color depth: ")
document.write(screen.colorDepth)
document.write("<br />")
document.write("Buffer depth: ")
document.write(screen.bufferDepth)
document.write("<br />")
document.write("DeviceXDPI: ")
document.write(screen.deviceXDPI)
document.write("<br />")
document.write("DeviceYDPI: ")
document.write(screen.deviceYDPI)
document.write("<br />")
document.write("LogicalXDPI: ")
document.write(screen.logicalXDPI)
document.write("<br />")
document.write("LogicalYDPI: ")
document.write(screen.logicalYDPI)
document.write("<br />")
document.write("FontSmoothingEnabled: ")
document.write(screen.fontSmoothingEnabled)
document.write("<br />")
document.write("PixelDepth: ")
document.write(screen.pixelDepth)
document.write("<br />")
document.write("UpdateInterval: ")
document.write(screen.updateInterval)
document.write("<br />")

window

代表了当前的窗口对象


innerheight 文档显示区域可见高度
innerwidth 文档显示区的宽度
opener 返回创建窗口的引用
parent 父窗口的引用
//self 等价于window
窗口左上角的坐标
screenLeft
screenTop
screenX
screenY
方法
alert(); 提示窗口
confirm("asdadsasd"); 确认窗口
prompt();输入窗口
open();打开一个窗口
//返回打开的页面的window对象
var open = window.open("https://www.baidu.com","_blank");
scrollBy() 设置滚动条滚动的像素值
scrollTo() 设置滚动条滚动到的像素值
parseInt("100a") 将字符串转换为数字 a100
parseFloat() 将字符串转换为小数
isNaN() 判断一个数字是否为非数字

常用类和常用方法

Array数组

var arr = [1,2,3,4,5];
var arr = new Array(5);
var arr = new Array(1,2,3,4,5);

arr.length 数组长度
arr.concat(); 拼接数组 连接两个或更多的数组，并返回拼接后的结果
arr.join(","); // 1,2,3,4,5  将所有的元素放入一个字符串中，可以指定分隔符 如果未指定默认是,
arr.pop(); 删除并返回数组的最后一个元素
arr.push(); 向末尾添加一个元素
arr.shift(); 删除并返回第一个元素
arr.unshift(); 向头部添加元素
arr.slice(start,end); 截取数组 包含前面不包含后面
arr.splice(start,len); 从指定位置开始删除指定的长度
arr.reverse();反转数组
arr.sort(); 排序
arr.sort(function (a,b){
    return a - b;
});

String

字符串相关的操作

length 字符串长度
charAt();// 返回指定位置的字符
concat();//拼接字符串
indexOf();
lastIndexOf();
match() 判断字符串是否匹配正则表达式
replace() 替换
search() 检索符合正则的值
slice() 提取字符串的片段
split() 分割字符串
substr(start,length) 截取字符串
substring(start,end) 截取字符串
toLowerCase()转换成小写
toUpperCase() 转换成大写

Math

数学相关的方法

E 算数常量 约等于2.718
LN2 返回 2 的自然对数（约等于0.693）。
LN10 返回 10 的自然对数（约等于2.302）。
LOG2E 返回以 2 为底的 e 的对数（约等于 1.414）。
LOG10E 返回以 10 为底的 e 的对数（约等于0.434）。
PI 返回圆周率（约等于3.14159）。
SQRT1_2 返回返回 2 的平方根的倒数（约等于 0.707）。
SQRT2 返回 2 的平方根（约等于 1.414）。

abs(x) 返回数的绝对值。
acos(x) 返回数的反余弦值。
asin(x) 返回数的反正弦值。
atan(x) 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x) 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x) 对数进行上舍入。
cos(x) 返回数的余弦。
exp(x) 返回 e 的指数。
floor(x) 对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切

Date

跟时间相关的操作方法

var date = new Date();//代表的是当前时间 获取的是系统时间
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。
setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth() 设置 Date 对象中月份 (0 ~ 11)。
setFullYear() 设置 Date 对象中的年份（四位数字）。
setHours() 设置 Date 对象中的小时 (0 ~ 23)。
setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
setTime() 以毫秒设置 Date 对象。
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 2021/6/17上午11:26:11

Reg正则表达式

修饰符

修饰符描述
i执行对大小写不敏感的匹配。
g执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m执行多行匹配。

方括号

方括号用于查找某个范围内的字符：

表达式描述
[abc]查找方括号之间的任何字符。
[^abc]查找任何不在方括号之间的字符。
[0-9]查找任何从 0 至 9 的数字。
[a-z]查找任何从小写 a 到小写 z 的字符。
[A-Z]查找任何从大写 A 到大写 Z 的字符。
[A-z]查找任何从大写 A 到小写 z 的字符。
[adgk]查找给定集合内的任何字符。
[^adgk]查找给定集合外的任何字符。
(red|blue|green)查找任何指定的选项。

元字符

元字符（Metacharacter）是拥有特殊含义的字符：

元字符描述
.查找单个字符，除了换行和行结束符。
\w查找单词字符。
\W查找非单词字符。
\d查找数字。
\D查找非数字字符。
\s查找空白字符。
\S查找非空白字符。
\b匹配单词边界。
\B匹配非单词边界。
\0查找 NUL 字符。
\n查找换行符。
\f查找换页符。
\r查找回车符。
\t查找制表符。
\v查找垂直制表符。
\xxx查找以八进制数 xxx 规定的字符。
\xdd查找以十六进制数 dd 规定的字符。
\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。

量词

量词描述
n+匹配任何包含至少一个 n 的字符串。
n*匹配任何包含零个或多个 n 的字符串。
n?匹配任何包含零个或一个 n 的字符串。
n{X}匹配包含 X 个 n 的序列的字符串。
n{X,Y}匹配包含 X 至 Y 个 n 的序列的字符串。
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性描述FFIE
globalRegExp 对象是否具有标志 g。14
ignoreCaseRegExp 对象是否具有标志 i。14
lastIndex一个整数，标示开始下一次匹配的字符位置。14
multilineRegExp 对象是否具有标志 m。14
n{X,}匹配包含至少 X 个 n 的序列的字符串。
n$匹配任何结尾为 n 的字符串。
^n匹配任何开头为 n 的字符串。
?=n匹配任何其后紧接指定字符串 n 的字符串。
?!n匹配任何其后没有紧接指定字符串 n 的字符串。

RegExp 对象属性

属性描述FFIE
globalRegExp 对象是否具有标志 g。14
ignoreCaseRegExp 对象是否具有标志 i。14
lastIndex一个整数，标示开始下一次匹配的字符位置。14
multilineRegExp 对象是否具有标志 m。14
source正则表达式的源文本。14
程序员zhi路
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员zhi路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值