当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript初识(二)

JavaScript初识(二)

2018年09月26日  | 移动技术网IT编程  | 我要评论

接上一篇:

九丶伪数组 arguments

　　arguments代表的是实参.有个讲究的地方是:arguments只在函数中使用

　　(1)返回函数实参的个数:arguments.length

    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b,c) {
        console.log(arguments);
        console.log(fn.length);         //获取形参的个数
        console.log(arguments.length);  //获取实参的个数

        console.log("----------------");
    }

　　(2)之所以说arguments是伪数组,是因为:arguments可以修改元素,但不能改变数组的长短,

    fn(2,4);
    fn(2,4,6);
    fn(2,4,6,8);

    function fn(a,b) {
        arguments[0] = 99;  //将实参的第一个数改为99
        arguments.push(8);  //此方法不通过，因为无法增加元素
    }

　　清空数组的几种方式:

   var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：删除数组中所有项目
    array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
    array = [];           //方式3：推荐

 

十丶关于dom的事件操作

　　1.javascript的组成

　　javascript基础分为三个部分:

　　　　ecmascript：javascript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

　　　　dom:文档对象模型,操作网页上的元素的api.比如让盒子移动,变色,轮播等.

　　　　bom:浏览器对象模型,操作浏览器部分功能的api.比如让浏览器自动滚动.

　　2.事件

　　　　js是以事件驱动为核心的一门语言

　　　　事件的三要素:

　　　　　　事件源:引发后续事件的html标签.

　　　　　　事件:js已经定义好了

　　　　　　事件驱动程序:对样式和html的操作,也就是dom

　　　　代码书写步骤:(重要)

　　　　(1)获取事件源: document.getelementbyid("box");   类似与ios语言的 uibutton*adbtn =  [uibutton buttonwithtype:uibuttontypecustom];

　　　　(2)绑定事件:事件源box,事件onclick = function(){事件驱动程序}

　　　　(3)书写事件驱动程序:关于dom的操作

<body>
<div id="box1"></div>

<script type="text/javascript">
    // 1、获取事件源
    var div = document.getelementbyid("box1");
    // 2、绑定事件
    div.onclick = function () {
        // 3、书写事件驱动程序
        alert("我是弹出的内容");
    }
</script>

</body>

 

　　1.获取事件源的方式(dom节点的获取)

var div1 = document.getelementbyid("box1");      //方式一：通过id获取单个标签
 
var arr1 = document.getelementsbytagname("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
 
var arr2 = document.getelementsbyclassname("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

 

 　　2.绑定事件的方式

　　　　(1)直接绑定匿名函数

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getelementbyid("box1");
    //绑定事件的第一种方式
    div1.onclick = function () {
        alert("我是弹出的内容");
    }
</script>

 　　　　(2)先单独定义函数,再绑定

<div id="box1" ></div>

<script type="text/javascript">
    var div1 = document.getelementbyid("box1");
    //绑定事件的第二种方式
    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
    //单独定义函数
    function fn() {
        alert("我是弹出的内容");
    }
</script>

 　　注意上方代码的注释.绑定的时候,是写fn而不是fn(),fn代表的是整个函数,而fn()代表的是返回值

　　　　(3)行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>

<script type="text/javascript">

    function fn() {
        alert("我是弹出的内容");
    }

</script>

 　　注意第一行代码,绑定时写fn(),而不是fn,因为绑定的这段代码不是写在js代码里的,而是被识别成了字符串

　　3丶事件驱动程序

　　　　我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。

 <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: pink;
            cursor: pointer;
        }
    </style>
</head>

<body>

<div id="box" ></div>

<script type="text/javascript">
    var odiv = document.getelementbyid("box");
    //点击鼠标时，原本粉色的div变大了，背景变红了
    odiv.onclick = function () {
        odiv.style.width = "200px";   //属性值要写引号
        odiv.style.height = "200px";
        odiv.style.backgroundcolor = "red";   //属性名是backgroundcolor，不是background-color
    }
</script>

 　　上方代码的注意事项:

　　　　在js里写属性值时,要用引导

　　　　在js里写属性名时,是backgroundcolor,不是css里面的background-color,记得所有的像css 属性的text-丶background- 等在js中都写成驼峰体

　　onload事件

　　当页面加载(文本和图片)完毕的时候,触发onload事件.

<script type="text/javascript">
    window.onload = function () {
        console.log("小马哥");  //等页面加载完毕时，打印字符串
    }
</script>

　　　　有一点我们要知道：js的加载是和html同步加载的。因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。

　　　　建议是：整个页面上所有元素加载完毕在执行js内容。所以，window.onload可以预防使用标签在定义标签之前。

 　　事件案例:

　　　　1.京东顶部广告栏关闭

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        .top-banner{
            /*position: relative;*/
            background-color: rgb(230, 15, 82);
        }
        .top-banner .w{
            width: 1190px;
            position: relative;
            margin: 0 auto;
        }
        .top-banner .banner{
            display: block;
            width: 100%;
            height: 80px;
            background: url('./close.jpg') no-repeat center 0;
        }
        .top-banner .close{
            position: absolute;
            right: 0;
            top:0;
            text-decoration: none;
            color: white;    
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;    
        }
        .hide{
            display: none;
        }

    </style>
</head>
<body>
    <div class="top-banner" id="topbanner">
        <div class="w">
            <a href="#" class="banner"></a>
            <a href="#" class="close" id="closebanner">x</a>
        </div>
    </div>
    <script type="text/javascript">
        // /需求：点击案例，隐藏盒子。
            //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。

        window.onload  = function(){
            // /1.获取事件源和相关元素
            var closebanner = document.getelementbyid('closebanner');
            var topbanner = document.getelementbyid('topbanner');
            //2.绑定事件
            closebanner.onclick = function(){
                //3.书写事件驱动程序
                        //类控制
                //topbanner.classname += ' hide';//保留原类名，添加新类名
                //topbanner.classname = 'hide';
                //替换旧类名
                topbanner.style.display = 'none';
            }
        }
    </script>

    
</body>
</html>
view code

　　　　2.当鼠标悬停在img上时,更换为另外一张图片;鼠标离开时,还原为本来的图片

<!doctype html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <title></title>
    <script>
        //window.onload页面加载完毕以后再执行此代码
        window.onload = function () {
            //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
            //步骤：
            //1.获取事件源
            //2.绑定事件
            //3.书写事件驱动程序

            //1.获取事件源
            var img = document.getelementbyid("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseover = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd2.png";
//                this.src = "image/jd2.png";
            }

            //1.获取事件源
            var img = document.getelementbyid("box");
            //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
            img.onmouseout = function () {
                //3.书写事件驱动程序(修改src)
                img.src = "image/jd1.png";
            }
        }
    </script>
</head>
<body>

    <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>

</body>
</html>
view code

 十一丶dom介绍

　　1.什么是dom

　　　　dom：文档对象模型。dom 为文档提供了结构化表示，并定义了如何通过脚本来访问文

档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

dom就是由节点组成的。

　　2.解析过程

　　　　html加载完毕，渲染引擎会在内存中把html文档，生成一个dom树，getelementbyid是获取内中dom上的元素节点。然后操作的时候修改的是该元素的属性。

　　3.dom树(一切都是节点)

　　元素节点:html标签

　　文本节点:标签中的文字(比如标签之间的空格丶换行)

　　属性节点:标签的属性

 　　整个html文档就是一个文档节点。所有的节点都是object。

 　　4.dom节点的获取

　　　　dom节点的获取方式其实就是获取事件源的方式

    var div1 = document.getelementbyid("box1");      //方式一：通过id获取单个标签

    var arr1 = document.getelementsbytagname("div1");     //方式二：通过 标签名 获得 标签数组，所以有s

    var arr2 = document.getelementsbyclassname("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

 　　　　特殊情况：数组中的值只有1个。即便如此，这一个值也是包在数组里的。这个值的获取方式如下：

    document.getelementsbytagname("div1")[0];    //取数组中的第一个元素

    document.getelementsbyclassname("hehe")[0];  //取数组中的第一个元素

 　　5.dom访问关系的获取

　　dom的节点并不是孤立的,因此可以通过dom节点之间的相对关系对它们进行访问.

　　节点的访问关系是以属性的方式存在的

　　js中的父子兄访问关系:

　　parentnode和children是重点

　　获取父节点

　　　　调用者就是节点。一个节点只有一个父节点，调用方式就是　　节点.parentnode　

　　　　（1）nextsibling：

    　　　　　　 指的是下一个节点（包括标签、空文档和换行节点）

      • 火狐、谷歌、ie9+版本：都指的是下一个节点（包括标签、空文档和换行节点）。

      • ie678版本：指下一个元素节点（标签）。

　　　　（2）nextelementsibling：

      • 火狐、谷歌、ie9+版本：都指的是下一个元素节点（标签）。

　　　　总结：为了获取下一个元素节点，我们可以这样做：在ie678中用nextsibling，在火狐谷歌ie9+以后用nextelementsibling，于是，综合这两个属性，可以这样写：

下一个兄弟节点 = 节点.nextelementsibling || 节点.nextsibling　

　　　　previous的中文是: 前一个

　　　　　　（1）previoussibling：

 　　　　　　　　火狐、谷歌、ie9+版本：都指的是前一个节点（包括标签、空文档和换行节点）。

 　　　　　　　　ie678版本：指前一个元素节点（标签）。

 　　　　　　（2）previouselementsibling：

　　　　　　　　火狐、谷歌、ie9+版本：都指的是前一个元素节点（标签）。

 　　　　总结：为了获取前一个元素节点，我们可以这样做：在ie678中用previoussibling，在火狐谷歌ie9+以后用previouselementsibling，于是，综合这两个属性，可以这样写：

 前一个兄弟节点 = 节点.previouselementsibling || 节点.previoussibling

 　　　　补充：获得任意一个兄弟节点： 

节点自己.parentnode.children[index];  //随意得到兄弟节点

 　　获取单个的子节点

　　(1).firstchild：

 　　　　火狐、谷歌、ie9+版本：都指的是第一个子节点（包括标签、空文档和换行节点）。

 　　　　ie678版本：指第一个子元素节点（标签）。

 　　(2).firstelementchild：

 　　　　火狐、谷歌、ie9+版本：都指的是第一个子元素节点（标签）

　　　　 总结：为了获取第一个子元素节点，我们可以这样做：在ie678中用firstchild，在火狐谷歌ie9+以后用firstelementchild，于是，综合这两个属性，可以这样写：

 第一个子元素节点 = 节点.firstelementchild || 节点.firstchild

 　　最后一个子节点|最后一个子元素节点

　　　　为了获取最后一个子元素节点，我们可以这样做：在ie678中用lastchild，在火狐谷歌ie9+以后用lastelementchild，于是，综合这两个属性，可以这样写：

最后一个子元素节点 = 节点.lastelementchild || 节点.lastchild

 　　获取所有的子节点

子节点数组 = 父节点.children;   //获取所有节点。用的最多。

 　　node type

　　　　nodetype == 1 表示的是元素节点（标签） 。记住：元素就是标签。

 　　　　nodetype == 2 表示是属性节点 了解

 　　　　nodetype == 3 是文本节点 了解

　　6.dom节点操作(重要)

　　　　创建节点:

新的标签(元素节点) = document.createelement("标签名");
<script type="text/javascript">
    var a1 = document.createelement("li");   //创建一个li标签
    var a2 = document.createelement("adbc");   //创建一个不存在的标签

    console.log(a1);
    console.log(a2);

    console.log(typeof a1);
    console.log(typeof a2);
</script>

　　　　插入节点

父节点.appendchild(新的子节点);  //父节点的最后插入一个新的子节点。
父节点.insertbefore(新的子节点,作为参考的子节点); //在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点。

　　　　删除节点

  父节点.removechild(子节点);  //用父节点删除子节点。必须要指定是删除哪个子节点。
//如果想自己删除则
node1.parentnode.removechild(node1);

　　　　复制节点

要复制的节点.clonenode();       //括号里不带参数和带参数false，效果是一样的。

  要复制的节点.clonenode(true);

 

　括号里带不带参数，效果是不同的。解释如下：

  • 不带参数/带参数false：只复制节点本身，不复制子节点。

  • 带参数true：既复制节点本身，也复制其所有的子节点。

　　7.设置节点的属性

　　　　我们可以获取节点的属性值、设置节点的属性值、删除节点的属性。

<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

　　　　(1)获取节点的属性值

　　　　方式一:

    元素节点.属性;
    元素节点[属性];
<body>
<img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">

<script type="text/javascript">
    var mynode = document.getelementsbytagname("img")[0];

    console.log(mynode.src);
    console.log(mynode.classname);    //注意，是classname，不是class
    console.log(mynode.title);

    console.log("------------");

    console.log(mynode["src"]);
    console.log(mynode["classname"]); //注意，是classname，不是class
    console.log(mynode["title"]);
</script>
</body>
view code

　　　　方式二:

素节点.getattribute("属性名称");
    console.log(mynode.getattribute("src"));
    console.log(mynode.getattribute("class"));   //注意是class，不是classname
    console.log(mynode.getattribute("title"));
view code

　　方式1和方式2的区别在于：前者是直接操作标签，后者是把标签作为dom节点。推荐方式2。

　　　　(2)设置节点的属性值

　　　　方式一

    mynode.src = "images/2.jpg"   //修改src的属性值
    mynode.classname = "image2-box";  //修改class的name

　　　　方式二

元素节点.setattribute(属性名, 新的属性值);
    mynode.setattribute("src","images/3.jpg");
    mynode.setattribute("class","image3-box");
    mynode.setattribute("id","你好");
view code

　　　　(3)删除节点的属性

　　　　格式

元素节点.removeattribute(属性名);
    mynode.removeattribute("class");
    mynode.removeattribute("id");

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网