首页 > > 网页制作 > Javascript >

JavaScript初识(二)

2018-09-29 03:54:00来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

接上一篇:

九丶伪数组 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");

 

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：VUE +element el-table运用sortable 拖拽table排序，实现行排序

下一篇：脚手架vue-cli系列二：vue-cli的工程模板与构建工具

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签