31.JavaScript基础（js基本语法，dom对象，bom对象）

  • 0
  • 0
  • 577

JavaScript

HTML、CSS用于实现静态网页(没有交互(网页对用户操作的反馈)效果的)，网页的存在是为了给用户使用的，那因此就需要有交互的存在，这种交互就是动态HTML(JavaScript+html+css).

JavaScript是脚本语言，用的是面向对象的思想

引入方式

分三种方式：

1、写在标签上的，使用; 常见用处：取消超链接的跳转效果

2、内联方式，使用script标签表示 注意：建议挨着body的闭合标签处使用

3、外联方式，使用script标签进行引入(.js文件)

2.JavaScript基本语法

数据类型

属性 描述
number 数字类型
string 字符串类型
boolean  
object 对象(function、null)
undefined 未定义

在js中关于变量的定义是不需要指定类型的，语言会根据后面的值自己推断类型，定义的时候只需要给到关键词var、let(es6)、const(es6)。

<script type="text/javascript">
    //定义变量
    var count = 5;
    console.log("count="+count);
    // 在js中不区分单双引号
    var name = "官小北";
    console.log(name);
    var bol = true;
    // 未定义 没有给变量进行初始化操作
    var unde;
    console.log(unde);
</script>

typeof操作符

由于javascript是一种泛数据类型的语言，需要有一种方法来检测指定变量的数据类型，返回如下字符串： “undefined”——如果这个值未定义

“boolean”——如果这个值是布尔值

“string”——字符串值

“number”——数值

“object”——对象或null

“function”——函数

console.log("count的类型：",typeof count);
console.log("name的类型：",typeof name);
console.log("bol的类型：",typeof bol);
console.log("unde的类型：",typeof unde);xxxxxxxxxx cconsole.log("count的类型：",typeof count);console.log("name的类型：",typeof name);console.log("bol的类型：",typeof bol);console.log("unde的类型：",typeof unde);

运算符

<script type="text/javascript">
    //减法
    var count = '5';
    // 在js的元素中，会自动做类型转换
    var result = count-1;
    console.log(result,count>1);
    // 减法可以做类型转换--将数字类型的字符串转为数值类型
    var result2 = count-0;
    console.log(result2,typeof result2);

    console.log("------------灵魂分割线---------------");
    // js中的除法就是数学意义的除法
    var num = 7;
    console.log(num/2);

    console.log("------------灵魂分割线---------------");
    var x = 2;
    var y = 3;
    var en = (++x) + (y--);
    console.log(en,x,y);

    y += 1;
    console.log(y);
</script>

流程控制语句

条件语句

<script type="text/javascript">
    //商品库存 预警值是50
    var itemCount = 10;
    if(itemCount<=50 && itemCount>25){
        console.log("库存量低于预警值，请及时补货");
    }else if(itemCount<=25){
        console.log("库存量严重不足，麻溜的去补货");
    }else{
        console.log("库存还多，请加油，不要堆积货物");
    }

    // 春夏秋冬季节为例
    var month = 3;
    switch(month){
        case 12:
        case 1:
        case 2:
            console.log("冬天");
            break;
        case 3:
        case 4:
        case 5:
            console.log("春天");
            break;
        case 6:
        case 7:
        case 8:
            console.log("夏天");
            break;
        case 9:
        case 10:
        case 11:
            console.log("秋天");
            break;
        default:
            console.log("不存在");
            break;
}
</script>

循环语句

//商品库存 预警值是50
var itemCount = 100;
for(;itemCount>0;itemCount--){
    if(itemCount<=50 && itemCount>25){
        console.log("库存量低于预警值，请及时补货");
    }else if(itemCount<=25){
        console.log("库存量严重不足，麻溜的去补货");
    }else{
        console.log("库存还多，请加油，不要堆积货物");
    }
}

//九九乘法表
for(var i=0;i<10;i++){
    console.log("hello js "+i);
}
// 注意：在js中的函数中存在作用域的问题
console.log("i="+i);

注释

html注释：<!-- 注释内容 -->

css注释：/* 注释内容 */

js注释：//注释内容 /*注释内容*/

ctrl+/进 快捷注释

函数

常见函数
函数名 描述
parseInt() 解析为数值类型
parseFloat() 解析为浮点型
isNaN() 是否为非数字 
var count = "123.123";
//截取从第一个数值开始到第一个非数值结束的中间的数字，要求该变量的值的第一个字符一定得是数字
var parseResult = parseInt(count);
console.log(parseResult,typeof parseResult);

// 如果解析的结果中有小数，会保留小数
var parseResult2 = parseFloat(count);
console.log(parseResult2,typeof parseResult2);

// 是否为非数字，true代表非数字，false代表是数字
var num = "6a7";
console.log(isNaN(num));
自定义函数

关键词：function

语法：function 函数名(参数,...){}

//alert("哈哈哈哈哈哈");
/* var result = confirm("确定要删除吗");
			console.log(result); */

//var result = prompt("请输入数字",9);

//print(result);

//自定义函数print
function print(count){
    for(var x=1;x<count;x++){
        for(var y=1;y<=x;y++){
            //console.log(y+"*"+x+"="+x*y);
            document.write(y+"*"+x+"="+x*y+"&nbsp;&nbsp;&nbsp;");
        }
        document.write("<br>");
    }
}

//定义函数求两个数的最大值
function maxMethod(a,b){
    if(a>b){
        console.log(a);
    }else{
        console.log(b);
    }
}

事件

概念：用户在浏览器中做的操作，浏览器给出对应的响应，其中的操作就是事件

事件都是直接作用在元素上的，元素和事件是绑定关系(简单理解：事件相当于是元素中的一个属性)

 

点击事件 onclick

例如常见的上一页、下一页、查询等按钮的触发都是通过点击事件实现的

<button onclick="show(3)">show me </button>
		
<script type="text/javascript">
    function show(count){
        alert("hahhahahahah "+count);
    }
</script>

问题：事件直接写在元素上是否妥当？为什么？

回答：不妥当，事件和元素之间的耦合性太强(就像行内样式的使用是一样的道理)，不利于后期的维护

方案：通过获取到的元素进行绑定，在jQuery中的使用更加鲜明，此处仍然使用在元素上进行事件绑定

注意：页面内容与表现形式分离

给超链接添加点击事件

思考：如果给超链接添加了点击事件，那和超链接本身的跳转效果是否冲突？

回答：会冲突，通常情况下，如果要给超链接添加点击事件，都会将超链接本身的跳转效果给禁止掉(效果上的禁止：仍然具有超链接的特性，只是点了之后不再进行跳转而已)。

<a href=";" onclick="changeType()">chang type</a>
<script type="text/javascript">
    function changeType(){
        alert("通过事件触发");
    }
</script>
 
改变事件 onchange

概念：捕获元素内容的变化，当元素的内容发生改变的时候就会触发

 

<input type="text" onchange="inputChange()">
<select name="" onchange="inputChange()">
    <option value="">上海</option>
    <option value="">北京</option>
    <option value="">深圳</option>
</select>

<script type="text/javascript">
    function inputChange(){
        console.log("---");
    }
</script>
表单提交事件 onsubmit

概念：表单在提交时会触发该事件，通常用于表单数据提交前的数据验证，该事件通常用于form表单上

 

 

注意：在js中定义函数名的时候，建议函数名至少有两个单词组合使用，因为如果函数名是单个的单词时，很有可能被识别为关键字，从而不生效，例如：select、name等等

弹出框

属于dom对象提供的方法，在当前浏览器窗口进行弹窗，可以省略相应的对象

 // 警告对话框 
        // 将警告内容书写在页面弹窗中进行展示
        alert("弹窗");

        //提示对话框
        //将提示内容与一个可以输入数据的文本框显示在弹窗中，可以为文本框设置默认内容
        // 在页面输入的内容返回就是字符串形式
        var color = prompt("提示信息", "输入框中的默认信息");
        alert(color);
            
        // 确认对话框
        //将提示内容进行提示，只提供确认 取消按钮 返回boolean类型数据
        var result = confirm("确认要删除吗?");
        alert(result)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置body文本居中对齐 */
        body {
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        // 通过提示框获取代表打印行数的字符串
        var count = prompt("请输入打印行数", "5");
        // 虽然js进行运算时会自动进行类型转换，但尽量进行手动转换后进行操作
        var size = parseInt(count);
        //外层循环控制行数
        for (var i = 1; i <= size; i++) {
            //内层循环控制列数
            //i=n  j=2n-1
            for(var j=1;j<=2*i-1;j++){
                document.write("*");
            }
            document.write("<br>");
        }
    </script>
</head>
<body>
</body>
</html>

BOM对象模型

浏览器对象模型,将当前浏览器当做一个对象，浏览器中各个元素当做对象，不同的元素提供相应的方法进行使用，与java不同的是，这些对象在打开浏览器的时候已经自动创建完毕，无需创建可以直接通过对象名.方法进行使用

浏览器对象模型是用于描述对象与对象之间层次关系的模型，该对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构

history：历史记录对象

用于保存当前页面所访问的全部页面信息，用于历史跳转

location：地址对象

用于保存当前页面url地址

document：文档对象

可以理解保存的是当前页面展示的所有文档，可以看出body标签

一般直接使用相应对象而省略window对象的书写，原因是因为，书写的代码在当前窗口运行

location对象

href 设置或返回完整的URL reload() 重新加载当前文档

  <script type="text/javascript">
    //输出当前页面url地址
   // alert(location.href);
   //也可以通过对象直接赋值的形式修改当前窗口的url
   //url被修改  页面也会进行修改

    //刷新当前页面
   // location.reload();
    </script>
</head>
<body>
   <!-- a标签的另一种使用方式 -->
   <!-- 将a标签跳转页面的功能改为执行js代码 -->
   <a href="location.reload();">刷新</a>
   <a href="location.href='two.html';">two</a>
</body>

history对象

back() 加载history列表中的前一个URL

forward() 加载history列表中的下一个URL

go(int) 加载history列表中的某个具体页面

  <!-- 使用a标签点击执行js代码 -->
    <a href="history.back()">返回</a>
    <a href="history.forward();">前进</a>
    <!-- 根据指定跳转0代表当前可以根据输入数字进行多级历史跳转 -->
    <a href="history.go(-2)">走你</a>

screen屏幕对象

用于获取当前客户端屏幕分辨率

<script>
        var width = screen.availWidth;   //返回显示屏幕的宽度(除 Windows 任务栏之外)
        var height = screen.availHeight;  //返回显示屏幕的高度
        var showWidth = screen.width;  //返回显示器屏幕的宽度。
        var showHeight = screen.height;  // 返回显示屏幕的高度。
        document.write("width:" + width + "<br/>height:" +
            height + "<br/>showWidth:" + showWidth + "<br/>showHeight:" + showHeight);
        if (showWidth < 2024 || showHeight < 768) {
            alert("为保证你的浏览器效果，\n请调整屏幕分辨率。");
        }
    </script>

window对象

 <script>

        //setInterval计时器  直接执行指定时间后重复执行
        var i = 1;
        // lambda表达式写法
        //setInterval(() => { scrollTo(0, i++); }, 1);

        //正常语法
        //  setInterval(function (){scrollTo(0, i++); }, 1);


      //  setTimeout定时器  指定时间后执行一次
     var bbb= setTimeout(() => {alert("已经过了3秒了") }, 3000);

    </script>
    <style>
        div {
            height: 1200px;
            width: 200px;
            background-image: url(../img/cxk.gif);
            background-image: url(../img/cxk2.gif);
        }
    </style>
</head>

<body>


    <!-- url，打开样式，打开窗口样式设置 -->
    <a href="window.open('one.html','_blank ','width=400,height=400,left=100,top=300')">打开</a>
    <!-- 要关闭的浏览器窗口对象.close() -->
    <a href="window.close()">关闭</a>

    <a href="  var aaa = setInterval(() => { scrollTo(0, i += 100); }, 1000);">开始</a>
    <a href="clearInterval(aaa)">停止</a>

    <a href="clearTimeout(bbb)">停止定时器</a>

DOM对象模型

用于对页面中显示的其他标签对象进行操作

document对象为整个DOM树结构的最大的对象，window对象是整个浏览器的对象

document.write()，向页面中输出内容

 

所谓的动态html就是可以通过用户的某个动作去改变页面中的元素的值或者样式效果等等，在这个过程中，如果想要改变元素的值或样式，那么首先需要先找到元素。

属性 描述
document.getElementById() 根据id查找元素，结果为单个元素
document.getElementsByTagName() 根据标签名查找，查找到的是一组
document.getElementsByClassName() 根据类名查找，查找到的是一组
document.getElementsByName() 根据name属性查找，查找到的也是一组

 

<button id="previus" class="query">上一页</button>
<button>下一页</button>
<button class="query">查询</button>

<script>
    /* var btns = document.getElementsByTagName("button");
			console.log(btns,btns[2]); */
    var btn = document.getElementsByTagName("button")[2];
    console.log(btn);

    var pre = document.getElementById("previus");
    console.log(pre);

    var queryBtns = document.getElementsByClassName("query");
    console.log(queryBtns);
</script>
获取及修改元素值

通过元素找到对应用于设置或修改值的属性来进行操作

双标签对应的值的属性是innerHTML

<button onclick="changeContent()">show me</button>
		
<script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    function changeContent(){
        //获取元素值
        var content = btns[0].innerHTML;
        if(content == "show me"){
            //修改元素值
            btns[0].innerHTML = "show maoxian";
        }
    }
</script>

innerHTML和innerText的区别：

innerHTML获取到的是标签中的所有内容，innerText只获取标签中的文本

outerHTML和innerHTML的区别：

innerHTML获取到的是标签中的所有内容，outerHTML获取到的是标签本身及标签中的所有内容

单标签对应的值的属性是value

<button onclick="changeContent()"><span>show me</span></button>
<button onclick="getUserName()">getUserName</button>
<hr >
<input type="text" name="uname">

<script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    function changeContent(){
        //获取元素值
        var content = btns[0].innerHTML;
        console.log(content);
        if(content == "show me"){
            //修改元素值
            btns[0].innerHTML = "show maoxian";
        }
    }
    //获取用户输入的内容
    function getUserName(){
        //1、先获取标签对象
        var inputNode = document.getElementsByName("uname")[0];
        //2、通过value属性获取或修改元素的值
        var val = inputNode.value;
        if(val == "change"){
            //3、修改元素的值
            inputNode.value = "king";
        }
    }
</script>

通过元素对象绑定事件

<button>show me1</button>
<button>show me2</button>
<script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    //当函数只是用于某个固定的元素，并不会被多次使用的时候，就不需要给函数名，直接跟在元素的事件后即可
    /* btns[0].onclick = function(){
				alert(btns[0].innerHTML);
			} */
    //函数名的后面如果加上括号代表直接调用
    btns[0].onclick = show;
    btns[1].onclick = show;

    
    function show(){
        console.log("----");
    }
</script>

event代表是事件源，事件源中包含了触发该事件时所有的相关的信息(事件类型(type)、目标对象(target))

event对象，只要有事件的存在，那么该对象就和this一样都是隐式存在的。

<button>show me1</button>
<button>show me2</button>
<script type="text/javascript">
    var btns = document.getElementsByTagName("button");
    //当函数只是用于某个固定的元素，并不会被多次使用的时候，就不需要给函数名，直接跟在元素的事件后即可
    /* btns[0].onclick = function(){
				alert(btns[0].innerHTML);
			} */

    //函数名的后面如果加上括号代表直接调用
    btns[0].onclick = show;
    btns[1].onclick = show;

    //event代表是事件源，事件源中包含了触发该事件时所有的相关的信息(事件类型(type)、目标对象(target))
    function show(){
        console.log(event.target.innerHTML);
    }
</script>
<button onclick="show(this)">show me1</button>
<button onclick="show(this)">show me2</button>

<script type="text/javascript">
    function show(obj){
        console.log(obj.innerHTML);
    } 
</script>
获取及修改元素样式

数组的使用

//创建一个空的数组对象
var arr = new Array();
console.log(arr);

//创建一个大小为3的数组
var arr2 = new Array(3);
console.log(arr2);

//创建带有值的数组
var arr3 = new Array(1,2,3,4);
console.log(arr3);

/* //数组大小是可变的，且不会出错
			arr3[4] = 5;
			console.log(arr3[4],arr3); */

//向数组中添加值
arr3.push(2,6);
console.log(arr3);
console.log("-----------------");
			
var nameArr = ["张飞","赵云","刘备"];
console.log(nameArr);

dom对象代表的标签属性可以直接通过对象名.属性进行赋值与获取

<body>
<input type="text"id="t1" value="asd">
<a href="alert(t2.value=t1.value)">赋值</a>
<br>
<input type="text" id="t2">
</body>

<script>
//document.bgColor="";//设置背景颜色
document.body;//获取body对象
document.title="标题";//设置页面标题
var t1=document.getElementById("t1");//获取指定id代表的标签对象   
var t2=document.getElementById("t2");//获取指定id代表的标签对象 
</script>

标签内容属性

innerHtml：两标签中间的内容

outerHtml：包括本身标签内的所有内容

 

innerText：两标签中间的内容,

outerText：包括本身标签内的所有内容

在进行获取时不会显示标签，只显示多个标签中的内容（只显示当前标签中的所有文本）

在进行赋值时会将传入的字符串直接显示在页面（如果字符串是标签形式也不会书写）

<script>
 

    function inner() {
        var f1=document.getElementById("f1");
        alert(f1.innerHTML="<a href='#'>修改后的内容</a>");
    }
    function outer() {
        var f1=document.getElementById("f1");
        alert(f1.outerHTML="<a href='#'>修改后的内容</a>");
    }
    function innertext() {
        var f1=document.getElementById("f1");
        alert(f1.innerText="<a href='#'>修改后的内容</a>");
    }
    function outerrtext() {
        var f1=document.getElementById("f1");
        alert(f1.outerText="<a href='#'>修改后的内容</a>");
    }
</script>

<body>

<a href="inner()">innerHtml</a>
<a href="outer()">outerHtml</a>

<a href="innertext()">innertext</a>
<a href="outerrtext()">outertext</a>
</body>

使用js进行css样式修改

使用style属性进行js对css样式的修改（注意有些样式名与css不同）

  <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            position: absolute;
        }

        .d1 {
            background-color: aquamarine;
            z-index: 1;
        }

        .d2 {
            background-color: yellowgreen;
            
        }
    </style>
    <script type="text/javascript">
        function oneShow() {
            //第一页对应div显示 第二页对应div隐藏
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1=document.getElementById("a1");
            var a2=document.getElementById("a2");
            i1.style.display = "block";
            i2.style.display = "none";
            a1.style.backgroundColor="aquamarine";
            a2.style.backgroundColor="white";
        }
        function twoShow() {
            //第二页对应div显示 第一页对应div隐藏
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1=document.getElementById("a1");
            var a2=document.getElementById("a2");
            i2.style.display = "block";
            i1.style.display = "none";
            a2.style.backgroundColor="yellowgreen";
            a1.style.backgroundColor="white";
        }
    </script>
</head>
<body>
    <!-- tab页切换 -->

    <a href="oneShow()" id="a1">第一页</a>
    <a href="twoShow()" id="a2">第二页</a>
    <div class="d1" id="i1"></div>
    <div class="d2" id="i2"></div>
</body>

使用js进行样式修改时会出现在js中书写大量的css属性与值，并且没有提示，所以一般我们不会在js中书写css相应的属性与值,一般，我们通过class属性进行样式的修改，在css中设置要相应的样式，通过js对class属性进行修改从而实现样式的修改

 <style type="text/css">
        div {
            height: 200px;
            width: 200px;
            position: absolute;
        }

        .d1 {
            background-color: aquamarine;
        }

        .d2 {
            background-color: yellowgreen;
        }

        /* 将修改后的样式定义相应的class 在css中预先书写 */

        /*div 的显示隐藏  */
        .hidden {
            display: none;
        }
        .zoom{
            zoom: 2;
        }
        .border{
            border-left: 2px solid black ;
            border-top: 2px solid black ;
            border-right: 2px solid black ;
        }
    </style>
    <!-- 使用js进行样式修改正确的书写方式 -->

    <script type="text/javascript">
        function oneShow() {
            //获取需要显示隐藏的元素对象
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1 = document.getElementById("a1");
            var a2 = document.getElementById("a2");
            //使用class进行样式设置
            i1.classList.remove("hidden");
            i2.classList.add("hidden");
            a1.classList.add("d1")
            a2.classList.remove("d2")
            a1.classList.add("zoom")
            a2.classList.remove("zoom")
            a1.classList.add("border")
            a2.classList.remove("border")
        }
        function twoShow() {
            //获取需要显示隐藏的元素对象
            var i1 = document.getElementById("i1");
            var i2 = document.getElementById("i2");
            var a1 = document.getElementById("a1");
            var a2 = document.getElementById("a2");
            //使用class进行样式设置
            i2.classList.remove("hidden");
            i1.classList.add("hidden");
            a2.classList.add("d2")
            a1.classList.remove("d1")
            a2.classList.add("zoom")
            a1.classList.remove("zoom")
            a2.classList.add("border")
            a1.classList.remove("border")
        }
    </script>
</head>
<body>
    <!-- tab页切换 -->
    <a href="oneShow()" id="a1">第一页</a>
    <a href="twoShow()" id="a2">第二页</a>
    <div class="d1" id="i1"></div>
    <div class="d2" id="i2"></div>
</body>

 使用dom对象实现复选框的反选

<script>

    function all() {
        // 获取所有复选框
        var arr = document.getElementsByTagName("input");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].type == "checkbox") {
                arr[i].checked = true;
            }
        }
    }
    function noall() {
        var arr = document.getElementsByTagName("input");
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].type == "checkbox") {
                arr[i].checked = false;
            }
        }
    }
</script>
<body>
    <a href="all()">全选</a>
    <a href="noall()">全不选</a>
    <form action="">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
        <input type="checkbox">
    </form>
</body>

案例：点名器

<h3>王者荣耀限定皮肤</h3>
		
<div class="wrapper">
<button>开始</button>
<p class="show-name"></p>
</div>

<script type="text/javascript">
    /*
		操作动作：点击按钮，然后在p标签中随机显示一个名字
		思路：
			1、定义数组，在数组中给定要显示的名字都有哪些
			2、产生一个随机数，作为数组的下标
			3、根据生成的随机数结合数组拿到要显示的名字
			4、将获取到的名字放到p标签中
			5、上述所有的动作要点点击按钮的时候触发
			*/
var pNode = document.getElementsByClassName("show-name")[0];
var btn = document.getElementsByTagName("button")[0];
//数据
var nameArr = ["张飞",  "赵云",  "李白",  "诸葛亮",  "曹操",  "孙坚",  "黄月英",  "后羿",  "程咬金",  "上官婉儿"];
var timer = null;
//默认显示
pNode.innerHTML = nameArr[0];
btn.onclick = start;
//开启定时器
function start(){
    if(timer == null){
        btn.innerHTML = "结束";
        btn.style.color = "red";
        pNode.style.color = "black";
        timer = setInterval(run,50);
        return;
    }
    btn.style.color = "white";
    btn.innerHTML = "开始";
    pNode.style.color = "red";
    end();
}
//定时器任务
function run(){
    //随机下标
    var index = Math.floor(Math.random()*nameArr.length);
    //随机生成的名字
    var randomName = nameArr[index];
    //将随机生成的名字添加到p标签中
    pNode.innerHTML = randomName;
}
//关闭定时器
function end(){
    clearInterval(timer);
    timer = null;
}
创建或删除元素节点

前后台交互的过程中，前端需要根据后台返回的数据动态的将数据显示在页面中，此时就需要根据数据动态创建或删除元素节点。

创建：document.createElement(节点名称);

添加：父元素.appendChild(子元素);

删除：父元素.removeChild(子元素);/子元素.remove();

/*
操作：点击创建按钮，创建一个超链接显示在页面中
	添加思路：
	1、创建元素 
		document.createElement(元素)，返回值是元素对象
	2、给元素添加属性及值
		对象.属性
	3、将创建好的元素添加到页面中的指定位置中
		父元素的对象.appendChild(子元素对象[要添加的元素]);
操作：点击删除按钮，某个元素就在页面中消失了
	删除思路：
	1、找到要删除的元素
	2、将找到的元素从页面中移除
		父元素对象.removeChild(子元素对象);
		元素对象.remove();
*/			
var divNode = document.getElementsByTagName("div")[0];
var btns = document.getElementsByTagName("button");

btns[0].onclick = addMethod;
var i=1;
//创建元素并添加
function addMethod(){
    //创建对象
    var aNode = document.createElement("a");
    //属性赋值
    aNode.href = "http://www.baidu.com";
    aNode.title = "百度一下你就知道";
    aNode.innerHTML = "百度一下"+(i++);
    //将元素添加到指定位置
    divNode.appendChild(aNode);
}

btns[1].onclick = removeMethod;
//移除元素
function removeMethod(){
    //要移除的节点
    var removeNodes = document.getElementsByTagName("a");
    if(removeNodes.length>0){
        //移除
        //divNode.removeChild(removeNodes[0]);
        removeNodes[0].remove();
    }
}

"language-html">//domLoad; function domLoad(){ // 代码上从上往下加载的 var btn = document.getElementsByTagName("button")[0]; console.log(btn.innerHTML); }

JSON对象

前后台的交互主要指的是数据的交互，在交互过程中数据的传输方式常见的格式有两种：

xml解析：文件后缀为.xml，是以标签及键值对的形式存储

JSON文件：文件后缀为.json，是以键值对的形式存储的，便捷、简单、轻量级，是目前最常用的方式

语法格式：var json = {key:val,key:val,....};

//纯json
var json = {name:"张飞",age:12,sex:"男",address:"三国"};
console.log(json.name,json.age);

//数组中套json
//此处，将一个json对象当成是一个对象，那么此时如果需要有多个对象的话，就相当于有多个json
//多个对象在进行存储的时候就需要有容器，此处用到的容器就是数组
var jsonArr = [
    {name:"刘备",age:14,sex:"男",address:"三国"},
    {name:"关羽",age:13,sex:"男",address:"三国"},
    {name:"张飞",age:12,sex:"男",address:"三国"}
];
for(var i=0;i<jsonArr.length;i++){
    var uname = jsonArr[i].name;
    var uage = jsonArr[i].age;
    var address = jsonArr[i].address;
    console.log(uname,uage,address);
}

console.log("---------灵魂分割线-----------");
var data = {
    "userList":[
        {name:"刘备",age:14,sex:"男",address:"三国"},
        {name:"关羽",age:13,sex:"男",address:"三国"},
        {name:"张飞",age:12,sex:"男",address:"三国"}
    ],
    "itemList":[
        {itemName:"巧克力",price:99,count:10},
        {itemName:"哈根达斯",price:35,count:10},
        {itemName:"可比克",price:7,count:10},
        {itemName:"香飘飘",price:4.5,count:10}
    ]
};
console.log(data.userList[2].name,data.itemList[1].itemName);

省市县联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<select name="" id="pro" onchange="getPro()">
			<option value="">--请选择省份--</option>
		</select>
		
		<select name="" id="city" onchange="getCity()">
			<option value="">--请选择城市--</option>
		</select>
		
		<select name="" id="village">
			<option value ="">--请选择区县--</option>
		</select>
		
		<script>
			/*
				思路：
					1、有省份数组、城市数组、区县数组
					2、将每个省份添加到省份的下拉框中
					3、根据选择的省份找到对应的城市数组，将城市信息添加到城市的下拉框中
					4、根据选择的城市数组找到对应的区县数组，将区县的信息添加到区县的下拉框中
			*/
		   var selNodes = document.getElementsByTagName('select');
		   var proArr = ['河南省','湖北省','山东省'];
		   var citysArr = [
			   ['--请选择城市--'],
			   ['郑州市','洛阳市','商丘市'],
			   ['武汉市','荆州市','黄冈市'],
			   ['菏泽市','青岛市','济南市']
		   ];
		   var villageArr = [
			   [['--请选择区县--']],
			   [
				   ['二七区','经开区','金水区','高新区'],
				   ['老城区','涧西区','洛龙区'],
				   ['睢阳区','梁园区']
			   ],
			   [
				   ['武汉一区','武汉二区'],
				   ['涧西一区','涧西二区','涧西三区'],
				   ['洛龙一区','洛龙二区']
			   ],
			   [
				   ['菏泽一区','菏泽二区','菏泽三区'],
				   ['梁园一区','梁园二区']
			   ]
		   ];
		   //省份下标
		   var proIndex = 0;
		   
		   //创建节点，添加到对应的下拉框中
		   /* for(var i=0;i<proArr.length;i++){
			   //创建节点
			   var optNode = document.createElement('option');
			   //赋值
			   optNode.innerHTML = proArr[i];
			   //将节点添加到父元素中
			   selNodes[0].appendChild(optNode);
		   } */
		   
		   createMethod(proArr,0);
		   
		   //创建城市数据
		   function getPro(){
			   //在添加数组之前先清空原有的数据
			   selNodes[1].length = 0;
			   //下拉框中提供了属性selectedIndex，用于获取当前选择的元素对应的下标
			   proIndex = selNodes[0].selectedIndex;
			   //根据省份下标找到城市数组
			   var citys = citysArr[proIndex];
			   
			   createMethod(citys,1);
			   getCity();
		   }
		   
		   //创建区县数据
		   function getCity(){
			   selNodes[2].length = 0;
			   //获取到当前选择的城市下标
			   var cityIndex = selNodes[1].selectedIndex;
			   //根据省份和城市下标找区县数组
			   var villArr = villageArr[proIndex][cityIndex];
			   
			   createMethod(villArr,2);
		   }
		   
		   //创建并添加元素
		   function createMethod(arr,index){
			   for(var i=0;i<arr.length;i++){
				   //创建节点
				   var optNode = document.createElement('option');
				   //赋值
				   optNode.innerHTML = arr[i];
				   //将节点添加到父元素中
				   selNodes[index].appendChild(optNode);
				}
		   }
		</script>
	</body>
</html>

location对象

location对象用于操作地址栏中的地址，在开发过程中可能会使用location对象去改变地址栏中的地址达到跳转的效果，主要使用的属性是href

var btns = document.getElementsByTagName("button");
btns[0].onclick = function(){
    //获取地址栏中的地址
    var address = location.href;
    console.log(address);
}
btns[1].onclick = function(){
    //设置地址栏中的地址
    window.location.href = "http://www.baidu.com";
}

 

购物车案例

关于标签属性中的可简写的属性，true和false可以改变其状态，例如：checked=true/checked=false

给复选框添加事件实现动态计算的方式，使用jQuery中提供的on事件绑定实现，此处通过按钮直接计算

var all = document.getElementById('all');
all.onclick = getStatus;
//全选、全不选
function getStatus(){
	/*
		1、找到全选按钮并获取到其当前的选中状态
		2、当全选按钮的状态值给到其他的复选框
	*/
	//获取到全选按钮的状态值
	var flag = all.checked;
	//让页面中的其他复选框的选中状态和全选按钮的状态保持一致
	var allChecked = document.getElementsByTagName('input');
	for(var i=1;i<allChecked.length;i++){
		allChecked[i].checked = flag;
	}
}

//计算总价格
var account = document.getElementById('account');
var totalPriceNode = document.getElementById('total-price');
//思路：找到所有选中的元素，然后找到对应的总价，进行加法运算
account.onclick = function(){
	var totalPrice = 0;
	//获取到所有的复选框
	var allChecked = document.getElementsByTagName('input');
	//遍历数组，过程中找到选中状态的复选框，拿到对应的价格
	for(var i=1;i<allChecked.length;i++){
		if(allChecked[i].checked){
			//找到该复选框所在的行 (parentNode获取父元素对象)
			var trNode = allChecked[i].parentNode.parentNode;
			//找到行中的最后一列 (lastChild获取最后一个子元素对象)
			var totalNode = trNode.lastChild;
			//获取到的值都是字符串类型的
			var total = totalNode.innerHTML;
            //在循环的过程中，将每次获取到的价格放入总价，新获取到的价格和原来的总价相加得到最后的价格
			totalPrice = totalPrice + parseFloat(total);
		}
	}
	//显示总价格
	totalPriceNode.innerHTML = totalPrice;
}

注意：本文归作者所有，未经作者允许，不得转载

点赞 0
#JavaScript
阅读全部

已有 0 条评论

    欢迎您，新朋友，感谢参与互动！