经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JSJS库框架 » JavaScript » 查看文章
JavaScript初识(二)
来源：cnblogs　　作者：七寸丶　　时间：2018/9/26 18:20:23　　对本文有异议

接上一篇:

九丶伪数组 arguments

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

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

  1.     fn(2,4);
  2.     fn(2,4,6);
  3.     fn(2,4,6,8);
  5.     function fn(a,b,c) {
  6.         console.log(arguments);
  7.         console.log(fn.length);         //获取形参的个数
  8.         console.log(arguments.length);  //获取实参的个数
  10.         console.log("----------------");
  11.     }

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

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

　　清空数组的几种方式:

  1.    var array = [1,2,3,4,5,6];
  3.     array.splice(0);      //方式1：删除数组中所有项目
  4.     array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
  5.     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的操作

  1. <body>
  2. <div id="box1"></div>
  3.  
  4. <script type="text/javascript">
  5.     // 1、获取事件源
  6.     var div = document.getElementById("box1");
  7.     // 2、绑定事件
  8.     div.onclick = function () {
  9.         // 3、书写事件驱动程序
  10.         alert("我是弹出的内容");
  11.     }
  12. </script>
  13.  
  14. </body>

 

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

  1. var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
  2.  
  3. var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
  4.  
  5. var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

 

 　　2.绑定事件的方式

　　　　(1)直接绑定匿名函数

  1. <div id="box1" ></div>
  2.  
  3. <script type="text/javascript">
  4.     var div1 = document.getElementById("box1");
  5.     //绑定事件的第一种方式
  6.     div1.onclick = function () {
  7.         alert("我是弹出的内容");
  8.     }
  9. </script>

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

  1. <div id="box1" ></div>
  2.  
  3. <script type="text/javascript">
  4.     var div1 = document.getElementById("box1");
  5.     //绑定事件的第二种方式
  6.     div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。
  7.     //单独定义函数
  8.     function fn() {
  9.         alert("我是弹出的内容");
  10.     }
  11. </script>

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

　　　　(3)行内绑定

  1. <!--行内绑定-->
  2. <div id="box1" onclick="fn()"></div>
  3.  
  4. <script type="text/javascript">
  5.  
  6.     function fn() {
  7.         alert("我是弹出的内容");
  8.     }
  10. </script>

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

　　3丶事件驱动程序

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

  1.  <style>
  2.         #box {
  3.             width: 100px;
  4.             height: 100px;
  5.             background-color: pink;
  6.             cursor: pointer;
  7.         }
  8.     </style>
  9. </head>
  10.  
  11. <body>
  12.  
  13. <div id="box" ></div>
  14.  
  15. <script type="text/javascript">
  16.     var oDiv = document.getElementById("box");
  17.     //点击鼠标时，原本粉色的div变大了，背景变红了
  18.     oDiv.onclick = function () {
  19.         oDiv.style.width = "200px";   //属性值要写引号
  20.         oDiv.style.height = "200px";
  21.         oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color
  22.     }
  23. </script>

 　　上方代码的注意事项:

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

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

　　onload事件

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

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

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

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

 　　事件案例:

　　　　1.京东顶部广告栏关闭

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         *{
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .top-banner{
  12.             /*position: relative;*/
  13.             background-color: rgb(230, 15, 82);
  14.         }
  15.         .top-banner .w{
  16.             width: 1190px;
  17.             position: relative;
  18.             margin: 0 auto;
  19.         }
  20.         .top-banner .banner{
  21.             display: block;
  22.             width: 100%;
  23.             height: 80px;
  24.             background: url('./close.jpg') no-repeat center 0;
  25.         }
  26.         .top-banner .close{
  27.             position: absolute;
  28.             right: 0;
  29.             top:0;
  30.             text-decoration: none;
  31.             color: white;    
  32.             width: 20px;
  33.             height: 20px;
  34.             line-height: 20px;
  35.             text-align: center;    
  36.         }
  37.         .hide{
  38.             display: none;
  39.         }
  41.     </style>
  42. </head>
  43. <body>
  44.     <div class="top-banner" id="topBanner">
  45.         <div class="w">
  46.             <a href="#" class="banner"></a>
  47.             <a href="#" class="close" id="closeBanner">x</a>
  48.         </div>
  49.     </div>
  50.     <script type="text/javascript">
  51.         // /需求：点击案例，隐藏盒子。
  52.             //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。
  54.         window.onload  = function(){
  55.             // /1.获取事件源和相关元素
  56.             var closeBanner = document.getElementById('closeBanner');
  57.             var topBanner = document.getElementById('topBanner');
  58.             //2.绑定事件
  59.             closeBanner.onclick = function(){
  60.                 //3.书写事件驱动程序
  61.                         //类控制
  62.                 //topBanner.className += ' hide';//保留原类名，添加新类名
  63.                 //topBanner.className = 'hide';
  64.                 //替换旧类名
  65.                 topBanner.style.display = 'none';
  66.             }
  67.         }
  68.     </script>
  69.  
  70.     
  71. </body>
  72. </html>
View Code

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         //window.onload页面加载完毕以后再执行此代码
  8.         window.onload = function () {
  9.             //需求：鼠标放到img上，更换为另一张图片，也就是修改路径（src的值）。
  10.             //步骤：
  11.             //1.获取事件源
  12.             //2.绑定事件
  13.             //3.书写事件驱动程序
  14.  
  15.             //1.获取事件源
  16.             var img = document.getElementById("box");
  17.             //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
  18.             img.onmouseover = function () {
  19.                 //3.书写事件驱动程序(修改src)
  20.                 img.src = "image/jd2.png";
  21. //                this.src = "image/jd2.png";
  22.             }
  24.             //1.获取事件源
  25.             var img = document.getElementById("box");
  26.             //2.绑定事件(悬停事件：鼠标进入到事件源中立即出发事件)
  27.             img.onmouseout = function () {
  28.                 //3.书写事件驱动程序(修改src)
  29.                 img.src = "image/jd1.png";
  30.             }
  31.         }
  32.     </script>
  33. </head>
  34. <body>
  35.  
  36.     <img id="box" src="image/jd1.png" style="cursor: pointer;border: 1px solid #ccc;"/>
  37.  
  38. </body>
  39. </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节点的获取方式其实就是获取事件源的方式

  1.     var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
  2.  
  3.     var arr1 = document.getElementsByTagName("div1");     //方式二：通过 标签名 获得 标签数组，所以有s
  4.  
  5.     var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s

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

  1.     document.getElementsByTagName("div1")[0];    //取数组中的第一个元素
  3.     document.getElementsByClassName("hehe")[0];  //取数组中的第一个元素

 　　5.DOM访问关系的获取

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

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

　　js中的父子兄访问关系:

　　parentNode和children是重点

　　获取父节点

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

　　　　（1）nextSibling：

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

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

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

　　　　（2）nextElementSibling：

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

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

  1. 下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling　

　　　　previous的中文是: 前一个

　　　　　　（1）previousSibling：

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

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

 　　　　　　（2）previousElementSibling：

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

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

  1.  前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling

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

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

 　　获取单个的子节点

　　(1).firstChild：

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

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

 　　(2).firstElementChild：

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

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

  1.  第一个子元素节点 = 节点.firstElementChild || 节点.firstChild

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

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

  1. 最后一个子元素节点 = 节点.lastElementChild || 节点.lastChild

 　　获取所有的子节点

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

 　　node Type

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

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

 　　　　nodeType == 3 是文本节点 了解

　　6.DOm节点操作(重要)

　　　　创建节点:

  1. 新的标签(元素节点) = document.createElement("标签名");
  1. <script type="text/javascript">
  2.     var a1 = document.createElement("li");   //创建一个li标签
  3.     var a2 = document.createElement("adbc");   //创建一个不存在的标签
  5.     console.log(a1);
  6.     console.log(a2);
  8.     console.log(typeof a1);
  9.     console.log(typeof a2);
  10. </script>

　　　　插入节点

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

　　　　删除节点

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

　　　　复制节点

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

 

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

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

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

　　7.设置节点的属性

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

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

　　　　(1)获取节点的属性值

　　　　方式一:

  1.     元素节点.属性;
  2.     元素节点[属性];
  1. <body>
  2. <img src="images/1.jpg" class="image-box" title="美女图片" alt="地铁一瞥" id="a1">
  3.  
  4. <script type="text/javascript">
  5.     var myNode = document.getElementsByTagName("img")[0];
  7.     console.log(myNode.src);
  8.     console.log(myNode.className);    //注意，是className，不是class
  9.     console.log(myNode.title);
  11.     console.log("------------");
  13.     console.log(myNode["src"]);
  14.     console.log(myNode["className"]); //注意，是className，不是class
  15.     console.log(myNode["title"]);
  16. </script>
  17. </body>
View Code

　　　　方式二:

  1. 素节点.getAttribute("属性名称");
  1.     console.log(myNode.getAttribute("src"));
  2.     console.log(myNode.getAttribute("class"));   //注意是class，不是className
  3.     console.log(myNode.getAttribute("title"));
View Code

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

　　　　(2)设置节点的属性值

　　　　方式一

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

　　　　方式二

  1. 元素节点.setAttribute(属性名, 新的属性值);
  1.     myNode.setAttribute("src","images/3.jpg");
  2.     myNode.setAttribute("class","image3-box");
  3.     myNode.setAttribute("id","你好");
View Code

　　　　(3)删除节点的属性

　　　　格式

  1. 元素节点.removeAttribute(属性名);
  1.     myNode.removeAttribute("class");
  2.     myNode.removeAttribute("id");

 

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号