web前端篇：JavaScript基础篇（易懂小白上手快）-2

程序员文章站 2024-01-11 23:02:52

[TOC] 一.内容回顾： ECMAScript基础语法 1.基本数据类型和引用数据类型 2.条件判断和循环 3.赋值运算符，逻辑运算符 4.字符串的常用方法 5.数组的常用方法 6.对象 7.函数 8.日期对象 9.Math数学对象 10.数值和字符串转换 11.let var 区别 12.看代码 ......

一.内容回顾：

ecmascript基础语法

1.基本数据类型和引用数据类型

基本数据类型number,string,boolean,undefined,null
引用数据类型：array,object,function

2.条件判断和循环

switch(name){
    case 'xxx';
        break;
    case 'xxx';
        break;
    default:
        break;
}

for (var i=0;i<10;i++){
    run to code
}
三元运算：
1>3? '真的':'假的';

3.赋值运算符，逻辑运算符

&& || !
i ++
==比较值 ===比较值和数据类型

4.字符串的常用方法

slice() 切片 一个参数从当前位置切到最后，两个参数顾头不顾尾
substring()
substr()  如果有两个参数，第二个参数表示切字符串的个数
join()

字符串拼接
concat()
+
es6的模版字符串
    ··插入变量用${变量名}

//获取索引
indexof()
lastindexof()
//获取字符
charat()
//获取字符ascii码
charcodeat()

//转大写
touppercase()
//转小写
tolowercase()

typeof 校验当前变量的数据类型
trim 清除左右的空格

5.数组的常用方法

tostring()
join('#')
concat()
//栈
push()
pop()
//堆
unshift()
shift()

splice(起始位置，删除的个数，添加的元素);
//增加，删除，替换
reverse()
sort()
slice()
length

//迭代方法
foreach() //仅能在数组对象中使用。
for
    
在函数中arguments  这个对象是伪数组

6.对象

function fn(name){
    var obj = {};
    obj[name]='mjj';
    return obj;
}
fn('age')
//遍历对象
for (var key in obj) {
    obj[key]
}

7.函数

1.创建方法
//普通函数
function fn(){

}
fn();
//函数表达式
var fn = function(){
    run to code
}
//匿名函数
(function(){})()//this指向一定指向window

全局作用域，函数作用域，函数作用域中this指向可以发生改变，可以使用call() 或者apply()
e.g.:
var obj = {name:'mjj'};
function fn(){
    console.log(this.name);
}
fn();//是空制，因为函数内容this指向window
fn.call(obj);//此时函数内部的this指向obj


构造函数
new object();
new array();
new string();


父级定义一个属性必须使用prototype

8.日期对象

var data = new data();

date.tolocalestring()  //2018/08/21 21:33:23

9.math数学对象

math.ceil(); 向上取整,天花板函数
math.floor(); 向下取整，地板函数
math.round(); 标准的四舍五入

随机数
math.random();获取到0-1之间的数

function random(min,max){
    math.floor(math.random()*(max-min))+min;
}

10.数值和字符串转换

1.数值转字符串
tostring()
数字+空字符串
2.字符串转数值
parseint() 转整数
parsefloat() 转浮点型
number()

nan
isnan()

infinity 无限大

11.let var 区别

1.es6可以用let定义块级作用域变量
2.let 配合for循环的独特应用
3.let没有变量提升与暂时性死区
4.let变量不能重复声明

12.看代码写结果

var a = 99;            // 全局变量a
f();                   // f是函数，虽然定义在调用的后面，但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后，默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}
//undefined
//10
//99

二.详细内容：

1.bom(浏览器对象模型)

bom的核心对象是window,它表示浏览器的一个实例，在浏览器中，window对象有双重角色，即是javascript访问浏览器窗口的一个接口。

又是ecmascript规定global对象。

1.系统对话框方法

1.alert() 警告框

<body>
    <script type="text/javascript">
        window.alert('mjj');
    </script>
</body>

效果显示：

web前端篇：JavaScript基础篇（易懂小白上手快）-2

例题

//例题：
<script>
    console.log(window.location);
    var i=1;
    function f(){
        i++;
        console.log("打印 :  "+i);
        return k;
        function k() {
            return "i love you!"
        }
    }
    f();
    console.log("111111111111");
    f()();
    alert(f()());
</script>
//打印2
//11111111111
//打印3
//打印4
//警告框出现"i love you!"

2.confirm()确认框

如果点击确定,返回true,点击取消,返回false。

<body>
    <script type="text/javascript">
        var src = window.prompt("今天天气如何");
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '阴天':
                console.log('在家睡觉');
                break;
            default:
                console.log("什么都不做");
                break
        }
    </script>
</body>

效果显示：

web前端篇：JavaScript基础篇（易懂小白上手快）-2

3.prompt()弹出框

prompt默认接收两个参数，第一个参数显示文本，第二个参数默认的文本。

<body>
    <script type="text/javascript">
        var src = window.prompt("今天天气如何",'晴天');
        switch (src) {
            case '晴天':
                console.log('出去打球');
                break;
            case '阴天':
                console.log('在家睡觉');
                break;
            default:
                console.log("什么都不做");
                break
        }
    </script>
</body>

效果显示

web前端篇：JavaScript基础篇（易懂小白上手快）-2

2.定时方法**********

1.一次性任务settimeout()

settimeout()方法表示一次性定时任务做某件事情,它接收两个参数,第一个参数为执行的函数,第二个参数为时间(毫秒计时:1000毫秒==1秒)

    <script type="text/javascript">
        window.settimeout(function(){
            console.log('2秒后我将打印');
        },2000);
        console.log('立刻打印');
    </script>
//settimeout(参数1，参数2);参数1为一个函数，参数2为时间以毫秒为单位。此处要知道settimeout是异步。

web前端篇：JavaScript基础篇（易懂小白上手快）-2

一次性任务的清除

var timer = settimeout(callback,1000);
cleartimeout(timer);
//清除定时器。

href属性

//2秒后跳转 百度网页
settimeout(function () {
  location.href = 'https://www.baidu.com';
},2000);

replace

//2秒后跳转 百度网页,在当前页面跳转
settimeout(function(){
    location.replace('https://www.baidu.com');
},2000)

2.周期性循环setinterval

setinterval()方法表示周期性循环的定时任务.它接收的参数跟settimeout()方法一样.

<script>
    var num = 0;
    var timer = null;
    //开启定时器
    timer = window.setinterval(function(){
        num++;
        if (num===10){
            //当num===10  清除定时器
            clearinterval(timer);
        }
        console.log(num);//console打印出数字
    },1000);//1000ms=1s
</script>

//每2秒刷新。
setinterval(function(){
    //做测试
    location.reload();
},2000);

//局部刷新  ajax技术，在不重载页面上，对网页进行操作

3.locaion对象属性

location是最有用的bom对象之一,它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location 对象是很特别的一个对象，因为它既是 window 对象的属性，也是document 对象的属性;

    <script>
        console.log(window.location);//获取属性
        setinterval(function(){
            location.reload();//刷新页面
        },2000);
    </script>
//局限较大，通常都是局部刷新，通过ajax技术，在不重载页面的情况，对网页进行操作

reload()方法

location.reload();//重新加载（有可能从缓存中加载）
location.reload(true;)//重新加载（强制从服务器加载）

history

history.go(-1);//后退一页
history.go(1);//前进一页
history.go(2);//前进两页

console.log(window.location);
//获取属性

显示效果

web前端篇：JavaScript基础篇（易懂小白上手快）-2

2.dom（文档对象模型）

顶层对象bom---->文档------>文档内容

2.1节点

元素节点
- 像<body>、、<ul>之类的元素这些我们都称为叫元素节点（element node）。
文本节点
- 元素只是不同节点类型中的一种。如果一份文档完全由一些空白元素构成，它将有一个结构，但这份文档本身将不会包含什么内容。在网上，内容决定着一切，没有内容的文档是没有任何价值的，而绝大数内容都是有文本提供。
```
//示例：
这是一个文本
//‘这是一个文本’ 是一个文本节点
```
属性节点
- 还存在着其他的一些节点类型。例如，注释就是另外一种节点类型。但这里我们介绍的是属性节点。
```
//示例
这是一本书！
//title='book'是一个属性节点
```

2.3获取节点对象的三种方式

2.3.1 document.getelementbyid 方法

getelementbyid 的方法只有一个参数，用于获得元素的id属性值，这个id值必须为字符串类型。

<body>
    <div id="box">mjj</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
        <script>
        var box = document.getelementbyid('box');
        console.log(box);
        console.dir(box);
    </script>
<body>
//

web前端篇：JavaScript基础篇（易懂小白上手快）-2

2.3.2document.getelementsbytagname()方法

通过标签名字获取节点对象（获取是伪数组），这个方法将返回一个元素对象集合。

//示例1：
<body>
    <div id="box">mjj</div>
    <ul id="box2">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>   
    <script>
        var box = document.getelementsbytagname('div');
        console.log(box);//htmlcollection [div#box, box: div#box]   
    </script>
</body>

//示例2
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">mjj</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//js:
    <script>
        var lis = document.getelementsbytagname('li');
        //三个li签
        console.log(lis);//htmlcollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环将li标签添加class 属性，让css渲染
            lis[i].classname = 'active';
        }

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

//示例3：
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">mjj</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//js:
    <script>
        var lis = document.getelementsbytagname('li');
        //三个li签
        console.log(lis);//htmlcollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环
            lis[i].onclick = function(){
                this.classname = 'active';//鼠标点击获取事件，并将li标签添加class 属性，让css渲染
            };
        }

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

//示例4：
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    //css
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
     //html
    <div id="box">mjj</div>
    <ul id="box2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//js:
    <script>
        var lis = document.getelementsbytagname('li');
        //三个li签
        console.log(lis);//htmlcollection(3) [li, li, li]
        for (var i=0;i<lis.length;i++){//循环
            lis[i].onclick = function(){
                for (var k=0;k<lis.length;k++){ 
                    lis[k].classname = '';//排他思想，让其他li默认class=''
                }

                this.classname= 'active';//鼠标点击获取事件，并将li标签添加class 属性，让css渲染
            };
        }

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

2.3.3document.getelementsbyclassname()

dom中也提供了通过类名来获取某些dom元素对象的方法.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        ul li.active{
            color:red;
        }
    </style>
</head>
<body>
    <div id="box">mjj</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
        <script>
        var lis = document.getelementsbyclassname('active');
        console.log(lis);//htmlcollection [li.active]
        var box = document.getelementbyid("box2");
        console.log(box.children);//获得box2下所有的子元素   htmlcollection(3) [li.active, li, li]
    </script>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        ul li.active{
            color:red;
        }
        ul li.att{
            color:blue;
        }
    </style>
</head>
<body>
    <div id="box">mjj</div>
    <ul id="box2">
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
    </ul>
//红色蓝色来回切换
    <script>
        var lis = document.getelementsbyclassname('active')[0];
        var des = true;
        lis.onclick = function(){
            if (des){
                this.classname = 'att';des=false;
            }else{this.classname = 'active';
                des = true;
            }
        };
    </script>
</body>
</html>

2.4对样式的操作

box.style.属性(css属性带-，其后面字母大写)

//示例1
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">mjj</div>
    <script type="text/javascript">
        // 1.获取事件源对象
        var box = document.getelementbyid('box');
        // console.log(box);
        //鼠标悬浮，更改样式
        //2.绑定事件
        box.onmouseover = function () {
            box.style.backgroundcolor = "green";
            box.style.fontsize = '30px';
            box.style.width = "200px";
            box.style.height = '200px';
        };
        //鼠标离开更改样式
        box.onmouseout = function(){
            box.style.backgroundcolor = 'red';
            box.style.fontsize = '15px';
            box.style.width = "400px";
            box.style.height = '400px';
        };
    </script>
</body>
</html>

//示例2：
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box">mjj</div>
    <script type="text/javascript">
        var box = document.getelementbyid('box');
        des = true;
        box.onclick = function(){
            if (des){
                box.style.backgroundcolor = 'blue';
                des = false;
            }else{
                box.style.backgroundcolor = 'green';
                des = true;
            }
        }
    </script>
</body>
</html>

2.5对属性的操作

getattribute() 接收一个参数，打算查询的属性名字。
setattribute() 语序我们对属性节点的值做修改，传递两个参数，第一个参数为属性名，第二个参数为属性值。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        .a{
            color:red;
            font-size:30px;
        }
        p.active{
            color:blue;
        }
    </style>
</head>
<body>
    <p title="my class" id = 's21' class="a">21</p>
    <script>
        var p1 = document.getelementbyid('s21');
        console.log(p1.getattribute('title'));//my class
        console.log(p1.getattribute('class'));//a
        p1.setattribute('class','s20'); //更改属性class  值为s20
        p1.setattribute('hello','python');//建立属性hello 值为python
        console.log(p1.getattribute('hello'));//python
        console.log(p1.classname);//s20
        console.log(p1.title);//my class
        console.dir(p1);//p#s21.s20 属性
        p1.onclick = function(){
            this.classname = this.classname + ' active';//加上' active' css可用 p.active
        };



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

web前端篇：JavaScript基础篇（易懂小白上手快）-2

2.6节点的创建添加删除

2.6.1 createelement()创建节点

此方法可返回一个element对象。

var newnode = document.createelement(tagname);

appendchild添加节点

2.6.2 innertext属性

仅仅对元素获取或者设置文本
```
newnode.innertext = '你好';
```

2.6.3 innerhtml属性

既可以设置文本又可以设置标签
```
newnode.innerhtml = `<a>mjj</a>`
```

注意：如果想获取节点对象的文本内容，可以直接调用innertext或者innerhtml属性来获取。

<body>
    <div id="box">mjj
        <ul id="box2">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <script>
        var box = document.getelementbyid('box');
        console.log(box.innertext);
        console.log(box.innerhtml);
    </script>
 </body>

//这是innertext结果
//mjj
//1
//2
//3

//这是innerhtml结果
//mjj
//      <ul id="box2">
//          <li class="active">1</li>
//          <li>2</li>
//          <li>3</li>
//      </ul>

2.6.4 appendchild() 插入节点

在指定的节点的最后一个子节点之后添加一个新的子节点。
```
appendchild(newnode);
```

2.6.5insertbefore() 插入节点

方法可在已有的子节点前插入一个新的子节点
```
insertbefore(newnode,node);
```

2.7 removechild() 删除节点

removechild()方法从子节点列表中删除某个节点。如果删除成功，此方法可返回被删除的节点，如失败，则返回null。
例题：

<body>
    <ul id = 'box'></ul>
    <script type = 'text/javascript'>
        //通过id获取单个节点对象
        var ul = document.getelementbyid('box');
        var li1 = document.createelement('li');
        var li2 = document.createelement('li');

        //innertext 只能设置文本格式内容
        li2.innertext = '你好';
        //innerhtml 可以设置html格式，如标签
        li1.innerhtml =`<a href='#'>123</a>`;



        //给li1子标签(a)添加属性
        li1.children[0].style.color = 'blue';
        li1.children[0].style.fontsize = '28px';

        //给li2标签添加属性（也就是li）color
        // console.log(li2);//li
        li2.style.color = 'red';


        //将创建好的标签加入ul里。
        ul.appendchild(li1);
        ul.appendchild(li2);


        //将li2更改text值，并在li1前面，插入ul标签li2,
        li2.innerhtml = '第一个';
        ul.insertbefore(li2,li1);
        //将li2标签移除
        ul.removechild(li2);
    </script>
</body>

2.8 dom中heigh,clientheight,offsetheight属性

web前端篇：JavaScript基础篇（易懂小白上手快）-2

直观的理解一波

clientheight: 样式的height + 上下padding(内边距区域)
offsetheight:样式的height+上下padding+上下border-width。
height :样式高度的height，但在浏览器显示undefined，通过style.height能设置高度，但无法获取。
示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        #box{
            height: 300px;
            padding: 10px;
            border: 1px solid red;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script type="text/javascript">
        var box = document.getelementbyid("box");
        console.log(box.height);//undefined 
        console.log(box.offsetheight);//322
        console.log(box.clientheight);//320
    </script>
</body>
</html>

3.事件

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。例如：如果您在网页上单击一个按钮，您可能想通过显示一个信息框来响应这个动作。

主要事件有：

事件	说明
onclick	鼠标单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移开事件
onchange	文本框内容改变事件
onselect	文本框内容被选中事件
onfocus	光标聚焦事件
onblur	光标失焦事件
onload	网页加载事件

关于事件相关学习参照：

4.应用

1.遍历数据操作页面

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <style>
        li p.name{
            color:red;
        }
        li span.price{
            color:blue;
        }
    </style>
</head>
<body>
        <ul id="box"></ul>
        <script>
        //通过id获取单个节点对象
        var box = document.getelementbyid('box');
        var data = [
                {id:1,name:'小米8',subname:'你真好',price:98},
                {id:2,name:'小米6',subname:'你真好2',price:948},
                {id:3,name:'小米4',subname:'你真好3',price:100},
                {id:4,name:'小米2',subname:'你真好4',price:928},
                {id:5,name:'小米10',subname:'你真好5',price:918}
                ];
        //遍历data，以便操作数组每个元素
        for (var i=0;i<data.length;i++){
            //创建标签li  创建节点
            var li = document.createelement('li');
            //插入数据
            li.innerhtml = `<p class="name">${data[i].name}</p>
            <p class="subname">${data[i].subname}</p>
            <span class="price">${data[i].price}元</span>
            `;
            //提交数据
            box.appendchild(li);
        }
    </script>
</body>
</html>

2.切换图片

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>
<body>
    <div id = 'box'>
        <img src="images/1.jpg" alt="" id = "imgbox">
    </div>
    <button id="prev">上一张</button>
    <button id="next">下一张</button>
    <script>
        //获取id = 'box'
        var imgbox = document.getelementbyid('imgbox');
        //获取id = 'next'
        var next = document.getelementbyid('next');
        //获取id = 'prev'
        var prev = document.getelementbyid('prev');
        var num = 1;
        //事件点击next,此时执行nextimg函数
        next.onclick = function () {
            nextimg();

        };
        //nextimg函数增加num值获得下一张图片，最后一张做判断，返回第一张
        function nextimg() {
            num ++;
            if (num===5){
                num = 1;
            }
            imgbox.src = `images/${num}.jpg`;

        }
        //事件点击prev 此时执行previmg()函数
        prev.onclick = function(){
          previmg();
        };
        //previmg函数减少num值获得上一张图片，当num=0返回最后一张图片
        function previmg() {
            num --;
            if (num===0){
                num = 4;
            }
            imgbox.src = `images/${num}.jpg`;
        }
    </script>
</body>
</html>

上一篇： Android7.0开发实现Launcher3去掉应用抽屉的方法详解

下一篇： Photoshop教程:简单绘制水晶五彩手链

web前端篇：JavaScript基础篇（易懂小白上手快）-2

一.内容回顾：

ecmascript基础语法

1.基本数据类型和引用数据类型

2.条件判断和循环

3.赋值运算符，逻辑运算符

4.字符串的常用方法

5.数组的常用方法

6.对象

7.函数

8.日期对象

9.math数学对象

10.数值和字符串转换

11.let var 区别

12.看代码写结果

二.详细内容：

1.bom(浏览器对象模型)

1.系统对话框方法

1.alert() 警告框

2.confirm()确认框

3.prompt()弹出框

2.定时方法**********

1.一次性任务settimeout()

2.周期性循环setinterval

3.locaion对象属性

2.dom（文档对象模型）

2.1节点

元素节点

文本节点

属性节点

2.3获取节点对象的三种方式

2.3.1 document.getelementbyid 方法

2.3.2document.getelementsbytagname()方法

2.3.3document.getelementsbyclassname()

2.4对样式的操作

2.5对属性的操作

2.6节点的创建添加删除

2.6.1 createelement()创建节点

2.6.2 innertext属性

2.6.3 innerhtml属性

2.6.4 appendchild() 插入节点

2.6.5insertbefore() 插入节点

2.7 removechild() 删除节点

2.8 dom中heigh,clientheight,offsetheight属性

3.事件

4.应用

1.遍历数据操作页面

2.切换图片

web前端篇：JavaScript基础篇（易懂小白上手快）-2

web前端篇：JavaScript基础篇（易懂小白上手快）-1

web前端篇：JavaScript基础篇（易懂小白上手快）-1

web前端篇：JavaScript基础篇（易懂小白上手快）-2