Web前端
(共14篇)
搜索到
14
篇与
Web前端
的结果
-
『原创』『教程』为你的博客添加阅读模式（适配Joe，其他主题也可用） 前言我又来拔flag了，最近立了好多flag，但是最近重庆太热了，不想写文章（其实就是懒了）既然给小伙伴立了flag，还是要说到做到，不然没有小伙伴来玩了。这个功能也是xcshare定制的功能，但是我还是分享出来吧成果展示教程开始一、添加后台开关一样的，还是在 Joe/functions.php 里添加（也可以在 Joe/public/custom.php 里添加，前提是你创建并引用了这个文件）// 是否启用阅读模式 $ReadBook = new Typecho_Widget_Helper_Form_Element_Select( 'ReadBook', array( 'off' => '关闭（默认）', 'on' => '开启'), 'off', '请选择是否启用阅读模式', '介绍：开启后，文章页可以进入阅读模式' ); $ReadBook->setAttribute('class', 'joe_content joe_custom'); //没有joe_custom就改成joe_other $form->addInput($ReadBook->multiMode());二、添加开关按钮在 Joe/public/footer.php 的 <div class="joe_action"> 内部添加以下代码<!-- 阅读模式 --> <?php if ($this->options->ReadBook === 'on' && $this->is('post')) : ?> <!-- 检测是否为文章页 --> <div class="joe_action_item read_book" title="阅读模式"> <svg t="1651294208728" class="icon-1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" fill="var(--minor)" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" fill="var(--minor)" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> <svg t="1651294208728" class="icon-2" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="22" height="22"> <path d="M170.666667 128a42.666667 42.666667 0 0 0-42.666667 42.666667v597.333333a42.666667 42.666667 0 0 0 42.666667 42.666667h161.664a213.333333 213.333333 0 0 1 118.314666 35.84l61.354667 40.874666 61.354667-40.874666A213.333333 213.333333 0 0 1 691.626667 810.666667H853.333333a42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-161.664c-17.706667 0-44.672 7.68-67.413333 20.906667-11.008 6.4-18.944 12.928-23.637333 18.346666a23.978667 23.978667 0 0 0-3.413334 4.821334V682.666667a42.666667 42.666667 0 0 1-85.333333 0V170.666667c0-24.746667 11.861333-44.970667 24.192-59.221334a178.688 178.688 0 0 1 45.354667-36.352c32.384-18.773333 74.026667-32.426667 110.250666-32.426666H853.333333a128 128 0 0 1 128 128v597.333333a128 128 0 0 1-128 128h-161.664a128 128 0 0 0-70.997333 21.504l-84.992 56.661333a42.666667 42.666667 0 0 1-47.36 0l-84.992-56.661333A128 128 0 0 0 332.330667 896H170.666667a128 128 0 0 1-128-128V170.666667a128 128 0 0 1 128-128h161.664a213.333333 213.333333 0 0 1 118.314666 35.84 42.666667 42.666667 0 0 1-47.317333 70.997333A128 128 0 0 0 332.330667 128H170.666667z" p-id="9868" data-spm-anchor-id="a313x.7781069.0.i0" class="selected"></path> <path d="M213.333333 384a42.666667 42.666667 0 0 1 42.666667-42.666667h128a42.666667 42.666667 0 0 1 0 85.333334H256a42.666667 42.666667 0 0 1-42.666667-42.666667zM256 554.666667a42.666667 42.666667 0 0 1 42.666667-42.666667h85.333333a42.666667 42.666667 0 0 1 0 85.333333H298.666667a42.666667 42.666667 0 0 1-42.666667-42.666666z" p-id="9869" data-spm-anchor-id="a313x.7781069.0.i1" class="selected"></path> </svg> </div> <?php endif; ?>三、添加JS首先说明，因为我使用的Joe主题自带jQuery框架，如果你是其他主题，请自行引入jQuery或者将以下代码修改为原生js在 Joe/assets/js/joe.post_page.min.js 最后一个 }); 前加入以下代码当然你也可以加在Joe/assets/js/joe.post_page.js里再使用minify进行压缩 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.js 里，再进行压缩 隐藏内容，请前往内页查看详情四、添加按钮css在 Joe/assets/css/joe.post.min.css 里加入以下代码 如果看过我之前的教程，也可以加在 Joe/assets/css/custom.scss 里，再用scss to css转换即可 .joe_action_item.read_book{visibility:hidden;transform:scale(0)}.joe_action_item.read_book.active{visibility:visible;transform:scale(1)}.joe_action_item.read_book svg{transform:scale(0);opacity:0;transition:transform .85s,opacity .85s}.joe_action_item.read_book svg.active{transform:scale(1);opacity:1}结语其实教程很简单，就是隐藏一些组件和更换页面底色没有固定的方法，只有固定的思维，所以一定要多思考、多变通。
-
『原创』『教程』给自己博客的侧栏增加社交信息，方便业务（PY）联系 前言前不久突发奇想，录了一个视频然后留了自己的博客，却发现博客却没有链接回去的方式，所以就写了一个社交信息的侧栏模块然后有小伙伴看到了，专门留言让我出个教程，当时答应的好好的，可是一连鸽了好几天，今天进入留言板看到许诺的话，不禁老脸一红，差点忘了这茬了 ::(狂汗) 成果展示博客的侧栏增加社交信息2.0 这个模块适合任何主题及程序，只需要根据自己的主题或者程序进行改进就行我这里演示的是我正在使用的Joe主题，是一款轻量、开源的主题{tabs}{tabs-pane label="PC展示"}{/tabs-pane}{tabs-pane label="PE展示"}{/tabs-pane}{/tabs}教程开始一、添加PC端打开 Joe/public/aside.php 文件，然后在想要增加的位置添加以下代码{tabs}{tabs-pane label="代码"}隐藏内容，请前往内页查看详情{/tabs-pane}{tabs-pane label="位置"}{/tabs-pane}{/tabs}二、添加PE端打开 Joe/public/header.php 文件，然后在想要增加的位置添加上面PC的代码PE端的代码和上面的一样，只需要将 <section class="top-social"> 换成 <section class="top-social pe-social"> 三、添加后台直接在 Joe/functions.php 添加以下代码（当然，如果看过我之前的文章，也可以放在 Joe/public/custom.php 里面）// 侧栏社交信息开关 $SocialSwitch = new Typecho_Widget_Helper_Form_Element_Select( 'SocialSwitch', array( 'off' => '关闭（默认）', 'on' => '开启PC社交信息', 'on1' => '开启PE社交信息', 'on2' => '同时开启PC与PE社交信息', ), 'off', '是否启用侧栏社交信息', '介绍：开启后，侧栏展示社交信息功能（必须填写下面的侧栏社交信息）' ); $SocialSwitch->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialSwitch->multiMode()); //侧栏社交信息 $SocialInfo = new Typecho_Widget_Helper_Form_Element_Textarea( 'SocialInfo', NULL, NULL, '侧栏社交信息', '介绍：用于设置侧栏社交信息 <br /> 格式：你的QQ号 || 你的微信二维码链接 || 你的B站ID || 你的微博ID<br /> 例如：123456 || https://www.a.con/a.png || 13503064 || 3125196513 ' ); $SocialInfo->setAttribute('class', 'joe_content joe_custom'); //没有custom.php就把joe_custom改成joe_other $form->addInput($SocialInfo);然后你网站后台主题就会出现这样两项，根据相应的格式把你的信息填进去就行了四、添加显示样式在 Joe/assets/css/joe.global.min.css 里添加以下样式我这里的样式是已经压缩了的，如果想要自己修改，只需要在代码编辑器里格式化以下就行了.top-social{position:relative;padding:10px 0;width:250px;display:flex;flex-wrap:wrap;background:var(--background);justify-content:space-around;margin-bottom:15px;border-radius:var(--radius-wrap);box-shadow:var(--box-shadow)}.top-social li{width:50px;text-align:center;padding:5px 0px}.top-social li img{height:25px}.top-social .wechat{position:relative}.top-social .wechat .wechatInner{display:none;position:absolute;box-shadow:0px 1px 4px 2px var(--theme);border-radius:var(--radius-wrap);transition:.7s all ease;background:var(--background);-webkit-transition:.7s all ease;top:-175px;left:-45px;transform:translate3d(0, 16px, 0);width:140px;height:140px}.top-social .wechat .wechatInner::before{content:"";position:absolute;bottom:-16px;left:0;right:0;margin:auto;display:inline-block;width:0px;border:18px solid transparent;border-bottom:none;border-top-color:#fff;filter:drop-shadow(0px 4px 2px var(--theme))}.top-social .wechat .wechatInner img{border-radius:var(--radius-wrap);width:140px;height:auto;padding:0;background:none}.top-social .wechat:hover .wechatInner{display:block}.pe-social{width:100%}结语教程到此就结束了，其实还是很简单的不过我又想把这个模块做成填写ico图片链接和跳转链接的自定义模块，就可以自由添加更多的社交信息但是那样只能舍弃微信那个移入弹窗的效果，所以很难取舍呀{timeline}{timeline-item color="#19be6b"}2022.3.16 在这里挖一个坑吧：利用JS选择对应的元素，实现微信的弹窗效果（令人头秃 :@(哭泣) ）{/timeline-item}{timeline-item color="#ed4014"}2022.3.19 Flag已实现，请移步 侧栏社交信息2.0 {/timeline-item}{/timeline}
-
『笔记』JavaScript进阶学习笔记 0 数据类型1、分类基本（值）类型{alert type="info"}String：任意字符串Number：任意的数字Boolean：true/falseundefined：undefinednull ：null{/alert}对象（引用）类型{alert type="info"}object ：任意对象function ：函数，一种特别的对象（可以执行）array ：数组，一种特别的对象（数值具有下标，内部数据是有序的）{/alert}2、类型的判断{alert type="success"}typeof ：可以判断 undefined/ 数值 / 字符串 / 布尔值Boolean / Function -不能判断 null和object object和arrayinstanceof ：判断对象的具体类型=== ：全等，可以判断undefined,null{/alert}<script> // 1、基本数据类型 var a; // typeof返回数据类型的字符串表达 console.log(a, typeof a, typeof a==="undefined", a===undefined);//undefined "undefined" true true console.log(undefined === 'undefined'); //false a = 3; console.log(typeof a ==='number');//true a = 'abc'; console.log(typeof a ==='string');//true a = true; console.log(typeof a === 'boolean');//true a= null; console.log(typeof a, a===null); //obiect true console.log('--------------------') // 2、对象类型 console.log('对象类型') var b1 ={ b2:[1,'abc',console.log], b3:function(){ console.log('b3'); return function(){ return 'hello'; }; } }; // instanceof判断a（实例对象）是不是b（构造函数）类型的实例 console.log(b1 instanceof Object, b1 instanceof Array); //true false console.log(b1.b2 instanceof Array, b1.b2 instanceof Object); //true true console.log(b1.b3 instanceof Function, b1.b3 instanceof Object); //true true console.log(typeof b1.b2,'flag'); //'object' b1.b2为array（数组）类型 console.log(typeof b1.b3 === 'function'); //true console.log(b1.b2[2] instanceof Function, typeof b1.b2[2] === 'function'); //true true b1.b2[2]('你好'); //'你好' console.log(b1.b3()()); // hello b1.b3(); //可以执行 /*var obj = { name: 'tom', age:12 }; function test() { var a = 3; }; var arr = [3, "abc"]; console.log(arr[1]);*/ // 实例：实例对象 // 类型：类型对象 // 函数是一种特殊的对象（可执行） function Person(name,age){ //构造函数 类型 this.name = name; this.age = age; } var p = new Person('tom',12); //根据类型创建的实例对象 // Person('jack',12); </script>1、undefined与null的区别？undefined 代表定义未赋值null 代表定义并赋值了，但是值为null2、什么时候给变量赋值为null？初始赋值：表明将要赋值为对象结束前：让对象成为垃圾对象（垃圾回收）3、严格区别变量类型与数据类型？（1）数据的类型基本类型对象类型（2）变量的类型（变量内存值的类型）基本类型：保存的基本类型的数据引用类型：保存的是地址值对象类型即是引用类型<script> var a; console.log(a); //undefined，未赋值 a = null; console.log(a); //null，赋值为null var b = null; //初始赋值为null，表面将要赋值为对象 // 确定对象就可以赋值 b = ['hello',12]; // 最后，为了释放对象内容 b = null; //让b指向的对象成为垃圾对象（被垃圾回收器回收：垃圾回收） // b = 2; //又重新赋值了，没有意义 // c保存的是地址值，即为引用类型 var c = function(){ }; console.log(typeof c) //'function' </script>数据、变量、内存定义1、什么是数据存储在内存中代表特点信息的东西，本质上是0101.......数据的特点：可传递、可运算2、什么是内存内存条通电以后产生的可存储数据的空间（临时的）内存产生和死亡： 内存条（电路板）==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失一块小内存的2个数据 `内部存储的数据` `地址值`内存分类 `栈：保存全局变量/局部变量（变量名）` `堆：对象（函数、数组）` 3、什么是变量可变化的量：由变量名、变量值组成每个变量都对应一块小内存，变量名用来查找对应的内存，变量值就是内存中保存的数据4、内存、数据、变量三者之间的关系内存是用来存储数据的空间变量是内存的标识<script> var age = 18; console.log(age) var obj = {name:'tom'}; console.log(obj.name); function fn(){ var obj = {name:'tom'}; }; var a = 3; var b = a + 2; </script>
-
『笔记』JavaScript基础学习笔记 6 DOM（文本对象模型）（20）鼠标拖拽的事件拖拽(一、二)<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } #box2{ width:100px; height:100px; background-color:yellow; position:absolute; left:200px; top:200px; } </style> <script> window.onload = function(){ // 拖拽box1 /* 拖拽的流程： 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup */ // 获取box1 var box1 = document.getElementById("box1"); // 当鼠标在被拖拽元素上按下时，开始拖拽 box1.onmousedown = function(event){ // 设置box1捕获所有鼠标按下的事件 // setCapture()只有IE支持，Chrome不支持会报错 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 /*if(box1.setCapture){ box1.setCapture(); }*/ box1.setCapture && box1.setCapture(); event = event || window.event; // div的水平偏移量:鼠标.clientX - 元素.offsetLeft // div的垂直偏移量:鼠标.clientY - 元素.offsetTop var ol = event.clientX - box1.offsetLeft; var ot = event.clientY - box1.offsetTop; // 为document绑定一个onmousemove事件 document.onmousemove = function(event){ event = event || window.event; // =当鼠标移动时被拖拽元素跟随鼠标移动 // 获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; // 修改box1的位置 box1.style.left = left+"px"; box1.style.top = top+"px"; }; // 为元素绑定一个鼠标松开事件 document.onmouseup = function(){ // 当鼠标松开时，被拖拽元素国定在当前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鼠标松开了"); // 取消document的onmouseup事件 document.onmouseup = null; // 当鼠标松开时，取消对事件的捕获 box1.releaseCapture && box1.releaseCapture(); }; // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为 // 如果不希望这个行为发生，则可以通过return false来取消默认行为 // 但是不支持IE8及以下浏览器 return false; }; }; </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> </body> </html>box的偏移量=鼠标的偏移量-元素的偏移量捕获测试<html> <head> <script> window.onload = function(){ // 分别为两个按钮绑定单击响应函数 var btn01 = document.getElementById("btn01"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ alert(1); }; btn02.onclick = function(){ alert(2); }; // 设置btn01对鼠标按下相关的事件进行捕获 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 btn01.setCapture(); }; </script> </head> <body> <button id="btn01">按钮01</button> <button id="btn02">按钮02</button> </body> </html>拖拽（三）<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } #box2{ width:100px; height:100px; background-color:yellow; position:absolute; left:200px; top:200px; } </style> <script> window.onload = function(){ // 拖拽box1 /* 拖拽的流程： 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove 3.当鼠标松开时，被拖拽元素国定在当前位置 onmouseup */ // 获取box1 var box1 = document.getElementById("box1"); // 获取box1 var box1 = document.getElementById("box1"); // 获取imh1 var img1 = document.getElementById("img1"); // 开启box1的拖拽 drag(box1); // 开启box2的拖拽 drag(box2); // 开启img1的拖拽 drag(img1); }; // 提取一个专门用来设置拖拽的函数 // 参数：开启拖拽的元素 function drag(obj){ // 当鼠标在被拖拽元素上按下时，开始拖拽 obj.onmousedown = function(event){ // 设置box1捕获所有鼠标按下的事件 // setCapture()只有IE支持，Chrome不支持会报错 // 当调用一个元素的setCapture()方法后，这个元素将会把下一次所有的鼠标按下的事件捕获到自身上 /*if(box1.setCapture){ box1.setCapture(); }*/ obj.setCapture && obj.setCapture(); event = event || window.event; // div的水平偏移量:鼠标.clientX - 元素.offsetLeft // div的垂直偏移量:鼠标.clientY - 元素.offsetTop var ol = event.clientX - obj.offsetLeft; var ot = event.clientY - obj.offsetTop; // 为document绑定一个onmousemove事件 document.onmousemove = function(event){ event = event || window.event; // =当鼠标移动时被拖拽元素跟随鼠标移动 // 获取鼠标的坐标 var left = event.clientX - ol; var top = event.clientY - ot; // 修改box1的位置 obj.style.left = left+"px"; obj.style.top = top+"px"; }; // 为元素绑定一个鼠标松开事件 document.onmouseup = function(){ // 当鼠标松开时，被拖拽元素国定在当前位置 // 取消document的onmousemove事件 document.onmousemove = null; // alert("鼠标松开了"); // 取消document的onmouseup事件 document.onmouseup = null; // 当鼠标松开时，取消对事件的捕获 obj.releaseCapture && obj.releaseCapture(); }; // 当拖拽一个网页中的内容，浏览器会默认去搜索页面，会导致拖拽功能的异常，这是浏览器的默认行为 // 如果不希望这个行为发生，则可以通过return false来取消默认行为 // 但是不支持IE8及以下浏览器 return false; }; }; </script> </head> <body> 我是一段文字 <div id="box1"></div> <div id="box2"></div> <img src="https://cdn.jsdelivr.net/gh/aill66/cdn@latest/usr/uploads/2021/08/809131067.png" id="img1" style="width:100px; position:absolute;" </body> </html>（21）滚轮的事件<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; } </style> <script> window.onload = function(){ // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短 var box1 = document.getElementById("box1"); // 为box1绑定一个鼠标滚动事件 /*onmousewheel鼠标滚轮滚动事件，会在鼠标滚轮滚动时触发，火狐不支持 * **在火狐中需要使用DOMMouseScroll来绑定滚轮滚动事件 **该事件需要通过addEventListener()函数来绑定 */ /*function fun(){ alert("我滚了"); }; box1.onmousewheel = fun; bind(box1,"DOMMouseScroll",fun); */ box1.onmousewheel = function(event){ event = event || window.event; // alert("我滚了"); // 判断鼠标滚轮的滚动方向 // event.wheelDelta 可以获取鼠标滚轮滚动的方向 // 向上滚动为正值，向下滚动为负值 // alert(event.wheelDelta); // 火狐中不支持wheelDelta /*火狐中使用event.detail来获取滚轮滚动的方向 **向上滚动为负值，向下滚动为正值 */ // alert(event.detail); // 当鼠标滚轮向下滚动时box1变长，当滚轮向上滚动时box1变短 if(event.wheelDelta > 0 || event.detail < 0){ // alert("向上滚"); // 向上滚box1变短 box1.style.height = box1.clientHeight - 10 + "px"; }else{ // alert("向下滚"); // 向下滚box1变长 box1.style.height = box1.clientHeight + 10 + "px"; } // 使用addEventListener()方法绑定的响应函数，取消默认行为时不能使用return false; // 需要使用event.preventDefault();来取消，不支持IE8及以下浏览器 event.preventDefault && event.preventDefault();//取消火狐的默认行为 // 当滚轮滚动时，如果浏览器有滚动条，浏览器的滚动条会随着滚动 // 这是浏览器默认行为，可以使用return false;取消默认行为 return false; }; // 为火狐绑定滚轮事件 bind(box1,"DOMMouseScroll",box1.onmousewheel) }; function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE8及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body style="height:2000px"> <div id="box1"></div> </body> </html>（22）键盘的事件<html> <head> <script> window.onload = function(){ /* 键盘事件 onkeydown 按键被按下，如果一直按着某个按键不松手，事件会一直触发 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常快触发，是为了防止误操作的发生 onkeyup 按键被松开，松开一次触发一次 键盘事件一般都会绑定给一些可以获取到焦点的对象或者document */ document.onkeydown = function(event){ event = event || window.event; // 可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下 // 除了keyCode，事件对象中还提供了几个固定属性 /*altKey 按键Alt是否被按下 **ctrlKy 按键Ctrl是否被按下 **shiftKey 按键Shift是否被按下 如果被按下则返回true否则返回false */ // 判断y键是否被按下 // 判断y键和Ctrl键是否被同时按下 if(event.keyCode == 89 && event.ctrlKey){ console.log("按键y和Ctrl都被按下了"); } }; document.onkeyup = function(){ console.log("按键被松开了"); }; // 获取input var input = document.getElementsByTagName("input")[0]; input.onkeydown = function(event){ event = event || window.event; console.log("按键被按下"); // 数字的keycode为48-57 // 使文本框中不能输入数字 if(event.keyCode >= 48 && event.keyCode <= 57){ // 在文本框中输入内容属于onkeydown的默认行为 // 如果在onkeydown中取消了默认行为，则输入的内容不会出现在文本框中 return false; } }; }; </script> </head> <body> <!-- <div style="width:100px;height:100px;background-color:red;" id="box1"></div> --> <input type="text" /> </body> </html>键盘移动vid<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; position:absolute; } </style> <script> // 使div可以根据不同的方向键向不同的方向移动 var box1 = document.getElementById("box1"); document.onkeydown = function(event){ event = event || window.event; // 定义一个变量来表示移动的速度 var speed = 20; // 当用户按了Ctrl以后速度加快 if(event.ctrlKey){ spend = 200; } // keyCode 37左 38上 39右 40下 switch(event.keyCode){ case 37: // alert("向左"); box1.style.left = box1.offsetLeft -speed +"px"; break; case 39: // alert("向右"); box1.style.left = box1.offsetLeft +speed +"px"; break; case 38: // alert("向上"); box1.style.top = box1.offsetTop -speed +"px"; break; case 40: // alert("向下"); box1.style.top = box1.offsetTop +speed +"px"; break; } }; </script> </head> <body> <div id="box1"></div> </body> </html>{nextPage/}BOM（浏览器对象模型）BOM可以通过JS来操作浏览器在BOM中提供了一组对象，用来完成对浏览器的操作BOM对象{alert type="success"}Window 代表的是整个浏览器的窗口，同时也是网页中的全局对象Navigator 代表当前浏览器的信息，通过该对象可以识别不同的浏览器Location 代表当前浏览器的地址栏信息，通过location可以获取地址栏信息或者操作浏览器跳转页面History 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问有效Screen 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息这些BOM对象在浏览器中都是作为window对象的属性保存的{/alert}// console.log(window.navigator); console.log(navigator); console.log(location); console.log(history);一、Navigator（浏览器信息）代表当前浏览器的信息，通过该对象可以识别不同的浏览器由于历史原因（网景公司倒闭了），Navigator对象中的大部分属性都已经不能识别浏览器了一般只会使用userAgent来判断浏览器的信息userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent// appCodeName 返回浏览器名称的代码 // appName 返回浏览器的名称 // userAgent 返回一个字符串来描述浏览器的信息 // alert(navigator.appName); // 在IE11中已经将微软和IE相关的标识都去除了，所以基本不能通过userAgent来识别浏览器是不是IE了 var ua = navigator.userAgent; console.log(ua); if(/firefox/i.test(ua)){ alert("我是火狐"); }else if(/chrome/i.test(ua)){ alert("我是Chrome"); }else if(/msie/i.test(ua)){ alert("我是IE浏览器"); }else if("ActiveXObject" in window){ alert("你是IE11，我已经抓住你了"); } // 如果不能通过userAgent来判断浏览器信息，还可以通过一些浏览器中特有的对象来判断浏览器的信息 // 比如：ActiveXObject // alert("ActiveXObject" in window); if("ActiveXObject" in window){ alert("你是IE，我已经抓住你了"); }else{ alert("你不是IE"); } 二、History（历史记录）代表浏览器的历史记录，可以通过该对象来操作浏览器向前或向后翻页<html> <head> <script> // 可以通过History来操作浏览器向前或向后翻页 // length属性可以获取到当次访问的连接数量 // alert(history.length); window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // alert(history.length); // back()方法可以用来回退到上一个页面，作用和浏览器的返回按钮一样 // history.back(); // forward()方法可以用来跳转到下一个页面，作用和浏览器的返回按钮一样 // history.forward(); // go()方法可以跳转到指定页面，需要一个整数作为参数 // 1:表示向前跳转一个页面，相当于forward() // 2:表示向前跳转两个页面 // -1:表示向后跳转一个页面，相当于back() // -2:表示向后跳转两个页面 history.go(1); }; }; </script> </head> <body> <button id="btn">点我一下</button> <h1>History</h1> <a href="">去下一个页面</a> </body> </html>三、Location（浏览器地址栏）该对象中封装了浏览器的地址栏的信息<html> <head> <script> window.onload = function(){ var btn = document.getElementById("btn"); btn.onclick = function(){ // 如果直接打印Location则可以获取到地址栏的信息（当前页面的完整路径） // alert("location"); // 如果直接将location修改为一个完整的路径（或相对路径），则页面会自动跳转到该路径，并且会生成相应的历史记录 // location = "https://www.baidu.com"; // assign()用来跳转到其他页面，作用和直接修改location一样 // location.assign("https://www.baidu.com"); // reload()重新加载当前页面,作用和刷新按钮一样 // 在方法中传递一个true作为参数，则会强制清空缓存刷新 // location.reload(true); // replace()可以使用一个新的页面替换当前页面，调用完毕也会跳转到新的页面，但是不会生成历史记录（不能使用回退功能） location.replace("https://www.baidu.com"); }; }; </script> </head> <body> <button id="btn">点我一下</button> </body> </html>四、Window（浏览器的窗口）window的方法1、 定时调用<html> <head> <script> window.onload = function(){ var count = document.getElementById("count"); // 使count中的内容自动切换 // js的程序执行速度是非常快的 // 如果希望一段程序可以每间隔一段时间执行一次，可以使用定时调用 /*for(var i=0; i<100; i++){ count.innerHTML = i; alert("点我"); }*/ // setInterval()定时调用：可以将一个函数每隔一段时间执行一次 // 参数：1.回调函数，该函数会每隔一段时间被调用一次，2.每次调用回调函数的时间单位为毫秒 // 返回值：返回一个Number类型的数据,这个数字用来作为定时器的唯一标识 var num = 1; var timer = setInterval(function(){ count.innerHTML = num++; if(num == 11){ // 关闭定时器 clearIntervol(timer); } },100); // console.log(timer); // clearIntervol()可以用来关闭一个定时器 // 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 // clearIntervol(timer); }; </script> </head> <body> <h1 id="count"></h1> </body> </html>（1）切换图片练习<html> <head> <script> window.onload = function(){ // 使图片可以自动切换 // 获取img标签 var img1 = document.getElementById("img1"); // 创建一个数组来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"] // 创建一个变量来保存当前图片的索引 var index = 0; // 定义一个变量，用来保存定时器的标识 var timer; // 为btn01绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 每点击一次按钮就会开启一个定时器，点击多次就会开启多个定时器，会导致切换速度加快，并且只能关闭最后一次开启的定时器 // 在开启定时器之前，需要将当前元素上的其他定时器关闭，避免开启多个定时器 clearInterval(timer); // 开启定时器来切换图片 timer = setInterval(function(){ // 使索引自增 index++; // 判断索引是否超过最大索引 /*if(index >= imgArr.length){ // 则将index设置为0，使其循环切换 index = 0; }*/ // index = index % imgArr.length; index %= imgArr.length; //与上面for循环功能一样 // 修改img1的src属性 img1.src = imgArr[index]; },1000); }; // 为btn02绑定一个单机响应函数 var btn02 = document.getElementById("btn01"); btn02.onclick = function(){ // 点击按钮以后停止图片的自动切换，关闭定时器 // clearInterval()可以接收任意参数，如果参数是一个有效的定时器标识则停止对应的定时器，如果参数不是有效的标识则什么也不做 clearInterval(timer); }; }; </script> </head> <body> <img id="img1" src="img/1.jpg" /> <br/><br/> <button id="btn01">开始</button> <button id="btn02">停止</button> </body> </html>（2）修改div移动练习<html> <head> <style type="text/css"> #box1{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> <script type="text/javascript"> //使div可以根据不同的方向键向不同的方向移动 /* * 按左键，div向左移 * 按右键，div向右移 * 。。。 */ window.onload = function(){ //定义一个变量，来表示移动的速度 var speed = 10; //创建一个变量表示方向 //通过修改dir来影响移动的方向 var dir = 0; //开启一个定时器，来控制div的移动 setInterval(function(){ /* * 37 左 * 38 上 * 39 右 * 40 下 */ switch(dir){ case 37: //alert("向左"); left值减小 box1.style.left = box1.offsetLeft - speed + "px"; break; case 39: //alert("向右"); box1.style.left = box1.offsetLeft + speed + "px"; break; case 38: //alert("向上"); box1.style.top = box1.offsetTop - speed + "px"; break; case 40: //alert("向下"); box1.style.top = box1.offsetTop + speed + "px"; break; } },30); //为document绑定一个按键按下的事件 document.onkeydown = function(event){ event = event || window.event; //当用户按了ctrl以后，速度加快 if(event.ctrlKey){ speed = 500; }else{ speed = 10; } //使dir等于按键的值 dir = event.keyCode; }; //当按键松开时，div不再移动 document.onkeyup = function(){ //设置方向为0 dir = 0; }; }; </script> </head> <body> <div id="box1"></div> </body> </html>2、 延时调用<html> <head> <script type="text/javascript"> var num = 1; //开启一个定时器 /*setInterval(function(){ console.log(num++); },3000);*/ /*延时调用， * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择*/ var timer = setTimeout(function(){ console.log(num++); },3000); //使用clearTimeout()来关闭一个延时调用 clearTimeout(timer); </script> </head> <body> </body> </html>（1）定时器的应用一<html> <head> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); //获取btn01 var btn01 = document.getElementById("btn01"); //定义一个变量，用来保存定时器的标识 var timer; //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ //关闭上一个定时器 clearInterval(timer); //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ //获取box1的原来的left值 var oldValue = parseInt(getStyle(box1,"left")); //在旧值的基础上增加 var newValue = oldValue + 1; //判断newValue是否大于800 if(newValue > 800){ newValue = 800; } //将新值设置给box1 box1.style.left = newValue + "px"; //当元素移动到800px时，使其停止执行动画 if(newValue == 800){ //达到目标，关闭定时器 clearInterval(timer); } },30); }; }; /*定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <br /><br /> <div id="box1"></div> <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html>{nextPage/}（2）定时器的应用二<html> <head> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> <script type="text/javascript"> window.onload = function(){ //获取box1 var box1 = document.getElementById("box1"); //获取btn01 var btn01 = document.getElementById("btn01"); //获取btn02 var btn02 = document.getElementById("btn02"); //点击按钮以后，使box1向右移动（left值增大） btn01.onclick = function(){ move(box1 , 800 , 10); }; //点击按钮以后，使box1向左移动（left值减小） btn02.onclick = function(){ move(box1 , 0 , 10); }; }; //定义一个变量，用来保存定时器的标识 var timer; //尝试创建一个可以执行简单动画的函数 /*参数： * obj:要执行动画的对象 * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) */ function move(obj , target ,speed){ //关闭上一个定时器 clearInterval(timer); //获取元素目前的位置 var current = parseInt(getStyle(obj,"left")); //判断速度的正负值 //如果从0 向 800移动，则speed为正 //如果从800向0移动，则speed为负 if(current > target){ //此时速度应为负值 speed = -speed; } //开启一个定时器，用来执行动画效果 timer = setInterval(function(){ //获取box1的原来的left值 var oldValue = parseInt(getStyle(obj,"left")); //在旧值的基础上增加 var newValue = oldValue + speed; //判断newValue是否大于800 //从800 向 0移动 //向左移动时，需要判断newValue是否小于target //向右移动时，需要判断newValue是否大于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ newValue = target; } //将新值设置给box1 obj.style.left = newValue + "px"; //当元素移动到0px时，使其停止执行动画 if(newValue == target){ //达到目标，关闭定时器 clearInterval(timer); } },30); } /*定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名 */ function getStyle(obj , name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj , null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <br /><br /> <div id="box1"></div> <div style="width: 0; height: 1000px; border-left:1px black solid; position: absolute; left: 800px;top:0;"></div> </body> </html>（3）定时器的应用三<html> <head> <style> *{ margin:0; padding:0; } #box1{ width:100px; height:100px; background:red; position:absolute; left:0; } #box2{ width:100px; height:100px; background:blue; position:absolute; left:0; top:200px; } </style> <!-- 引入tools工具，调用切换动画函数 --> <script src="js/tools.js"></script> <script> window.onload = function(){ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var btn02 = document.getElementById("btn02"); // 点击按钮后使box1向右移动（left增大） btn01.onclick = function(){ move(box1,"left",800,20); }; // 点击按钮后使box1向左移动（left减小） btn02.onclick = function(){ move(box1,"left",0,10); }; // 获取btn03 var btn03 = document.getElementById("btn03"); var box2 = document.getElementById("box2"); btn03.onclick = function(){ move(box2,"left",800,10); }; // 获取btn04 var btn04 = document.getElementById("btn04"); var box2 = document.getElementById("box2"); btn04.onclick = function(){ // move(box2,"top",800,10); // move(box2,"height",800,10); move(box2,"width",800,10,function(){ // alert("动画执行完了"); move(box2,"height",400,10,function(){ move(box2,"top",0,10,function(){ move(box2,"width",100,10,function(){ move(box2,"height",100,10,function(){ }); }); }); }); }); }; }; // 定义一个变量用来保存定时器的标识 // 目前定时器由全局变量timer保存，所有正在执行的定时器都在timer变量中保存 // var timer </script> </head> <body> <button id="btn01">点击按钮以后box1向右移动</button> <button id="btn02">点击按钮以后box1向左移动</button> <button id="btn03">点击按钮以后box2向右移动</button> <button id="btn04">测试按钮</button> <br/><br/> <div id="box1"></div> <div id="box2"></div> <div style="position:absolute;left:800px;top:0;width:0;height:1000px;border-left:1px black solid;"></div> </body> </html>tools.js（用于存放工具程序） // 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 function move(obj,attr,target,speed,callback){ // 关闭上一个定时器 clearInterval(obj.timer); // 获取box1目前的位置 var current = parseInt(getStyle(obj,attr)); // 判断速度speed的正负值 // 如果从0向800移动则speed为正，如果从800向0移动则speed为负 if(current > target){ // 此时速度应为负值 speed = -speed; } // 开启一个定时器用来执行动画效果 // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function(){ // 获取box1原来的left值 var oldValue = parseInt(getStyle(obj,attr)); // 在旧值的基础上增加,给box添加移动速度 var newValue = oldValue + speed; // 向左移动时需要判断newValue是否小于target // 向右移动时需要判断newValue是否大于于target if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)){ newValue = target; } // 将新值设置给obj obj.style[attr] = newValue + "px"; // 当box1移动到了0px时，使其停止执行动画 if(newValue == target){ // 达到目标关闭定时器 clearInterval(obj.timer); // 动画执行完毕，调用回调函数 callback && callback(); } },30); }; /* 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名*/ function getStyle(obj,name){ if(window.getComputedStyle){ //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj,null)[name]; }else{ //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } };{nextPage/}3、 轮播图的改进<html> <head> <style> *{ margin:0; padding:0; } #outer{ width:520px; height:333px; margin:50px auto; background-color:greenyellow; padding:10px 0; /* 开启相对定位 */ position:relative; /* 裁剪溢出的内容 */ overflow:hidden; } /* 设置imgList */ #imgList{ /* 去除ul的项目符号 */ list-style:none; /* width:2600px; */ /* 开启绝对定位 */ position:absolute; /* 设置偏移量,默认为0 */ /* 每向左移动520px可以切换下一张图片 */ left:0; } /* 设置列表中li */ #imgList li{ /* 设置浮动 */ float:left; /* 设置左右外边距 */ margin:0 10px; } /* 设置导航按钮 */ #navDiv{ /* 开启绝对定位 */ position:absolute; /* 设置位置 */ bottom:15px; /* 设置居中显示 */ /* left:197px; */ } #navDiv a{ /* 设置超链接的浮动 */ float:left; width:15px; height:15px; background-color:red; /* 设置左右外边距 */ margin:0 5px; /* 设置透明 */ opacity:0.5; /* 兼容IE8透明 */ filter:alpha(opacity=50); } /* 设置鼠标移入的效果 */ #imgDiv a:hover{ background-color:black; } </style> <!-- 引入tools工具，调用切换动画函数 --> <script src="js/tools.js"></script> <script> window.onload = function(){ // 获取imgList var imgList = document.getElementById("imgList"); // 获取页面中所有的img标签 var imgArr = document.getElementsByTagName("img"); // 设置imgList的宽度 imgList.style.width = 520*imgArr.length + "px"; // 设置导航按钮居中 // 获取navDiv var navDiv = document.getElementById("navDiv"); // 获取outher var outer = document.getElementById("outer"); // 设置navDiv的left值 navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 +"px"; // 默认显示图片的索引 var index = 0; // 获取所有的a var allA = document.getElementsByTagName("a"); // 设置默认选中的效果 allA[index].style.backgroundColor = "black"; // 点击超链接切换到指定的图片 // 为所有的超链接都绑定一个单击响应函数 for(var i=0; i<allA.length; i++){ // 为每一个超链接都添加一个num属性 allA[i].num = i; // 为超链接绑定单击响应函数 allA[i].onclick = function(){ // 关闭自动切换的定时器 clearInterval(timer); // 获取点击的超链接的索引 // alert(this.num); index = this.num; // 切换图片 // imgList.style.laft = -520*index + "px"; // 设置选中的a setA(); // 使用move函数来切换图片 move(imgList,"left",-520*index,20,function(){ // 点击切换动画执行完毕，开启自动切换动画 autoChange(); }); }; } // 开启自动切换图片，调用autoChange函数 autoChange(); // 创建一个方法来设置选中的a function setA(){ // 判断当前索引是否为最后一张图片 if(index >= imgArr.length - 1){ // 则将index设置为0 index = 0; // 此时显示的是最后一张，而最后一张和第一张是一模一样的 // 通过CSS将最后一张切换为第一张 imgList.style.left = 0; } for(var i=0; i<allA.length; i++){ // 遍历所有的a并将背景颜色设为空，去掉内联样式，显示外部样式 allA[i].style.backgroundColor = ""; } // 将选中的a设置为黑色 allA[index].style.backgroundColor = "black"; }; // 定义一个自动切换的定时器的标识 var timer; // 创建一个函数来开启自动切换图片 function autoChange(){ // 开启一个定时器用来定时切换图片 timer = setInterval(function(){ // 使索引自增 index++; // 判断index的值并改变index的值，形成循环 index %= imgArr.length; // 执行动画切换 move(imgList,"left",-520*index,20,function(){ // 修改导航按钮 setA(); }); },3000); }; }; </script> </head> <body> <!-- 创建一个外部div来作为大容器 --> <div id="outer"> <!-- 创建一个ul放置图片 --> <ul id="imgList"> <li><img src="img/1.jpg"/></li> <li><img src="img/2.jpg"/></li> <li><img src="img/3.jpg"/></li> <li><img src="img/4.jpg"/></li> <li><img src="img/5.jpg"/></li> <li><img src="img/1.jpg"/></li> </ul> <!-- 创建导航按钮 --> <div id="navDiv"> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> <a href="javascript:;"></a> </div> </div> </body> </html>{nextPage/}4、类的操作<html> <head> <style> .b1{ width:100px; height:100px; background-color:yellowgreen; } .b2{ height:200px; background-color:red; } </style> <script> window.onload = function(){ // 获取box var box = document.getElementById("box"); // 获取btn01 var btn01 = document.getElementById("btn01"); // 为btn01绑定单击响应函数 btn01.onclick = function(){ // 修改box的样式 // 通过style属性来修改元素的样式，每修改一个样式浏览器就需要重新渲染一次 // 这样执行的性能是比较差的，而且这种方式当需要修改多个样式时也比较麻烦 /*box.style.width = "200px"; box.style.height = "200px"; box.style.backgroundColor:"red";*/ // 一行代码可以修改多个样式 // 修改box的class属性 // 可以通过修改元素的class属性来间接修改样式 // 这样只需修改一次即可同时修改多个样式，同时浏览器只需重新渲染一次，性能会提高一些 // 这种方式可以使表现（css）和行为（js）进一步分离 // b2会替换b1的样式 // box.className = "b2"; // 在b1的基础上加上b2的样式（添加一个空格防止b1和b2拼串为b1b2，应为b1 b2） // box.className += " b2" // addClass(box,"b2"); // alert(hasClass(box,"heelo")); // removeClass(box,"b2"); toggleClass(box,"b2"); }; }; // 定义一个函数来向一个元素添加指定的class属性值 /*参数： obj 要添加class属性的元素 cn 要添加的class值*/ function addClass(obj,cn){ // 检查obj中是否含有cn if(!hasClass(obj,cn)){ // 如果没有cn则添加cn（添加一个空格防止直接拼串） obj.className += " "+cn; } }; // 判断一个元素中是否含有指定的class属性值 /*参数 obj 要添加class属性的元素 cn 要添加的class值 如果有该class值则返回true，否则返回false*/ function hasClass(obj,cn){ // 判断obj中是否有cn这个class值 // 创建一个正则表达式 // var reg = /\bb2\b/; var reg = new RegExp("\\b"+cn+"\\b"); return reg.test(obj.className); }; // 删除一个元素中指定的class属性 function removeClass(obj,cn){ // 创建一个正则表达式 var reg = new RegExp("\\b"+cn+"\\b"); // 删除class obj.className = obj.className.replace(reg,""); }; // toggleClass用来切换一个类 // 如果元素中有指定类则删除，没有则添加 function toggleClass(obj,cn){ // 判断obj中是否含有cn if(hasClass(obj,cn)){ // 有则删除 removeClass(obj,cn); }else{ // 没有则添加 addClass(obj,cn); } }; </script> </head> <body> <button id="btn01">点击按钮修改box的样式</button> <div id="box" class="b1"></div> </body> </html>tools.js（工具函数）// 尝试创建一个可以执行简单动画的函数 // 参数:obj:要执行动画的对象 // attr:要执行动画的样式，比如left height top // target:执行动画的目标位置 // speed:移动的速度（正数向右移动，负数向左移动） // callback:回调函数，将会在动画执行完毕以后执行 function move(obj, attr, target, speed, callback) { // 关闭上一个定时器 clearInterval(obj.timer); // 获取box1目前的位置 var current = parseInt(getStyle(obj, attr)); // 判断速度speed的正负值 // 如果从0向800移动则speed为正，如果从800向0移动则speed为负 if (current > target) { // 此时速度应为负值 speed = -speed; } // 开启一个定时器用来执行动画效果 // 向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识 obj.timer = setInterval(function () { // 获取box1原来的left值 var oldValue = parseInt(getStyle(obj, attr)); // 在旧值的基础上增加,给box添加移动速度 var newValue = oldValue + speed; // 向左移动时需要判断newValue是否小于target // 向右移动时需要判断newValue是否大于于target if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) { newValue = target; } // 将新值设置给obj obj.style[attr] = newValue + "px"; // 当box1移动到了0px时，使其停止执行动画 if (newValue == target) { // 达到目标关闭定时器 clearInterval(obj.timer); // 动画执行完毕，调用回调函数 callback && callback(); } }, 30); }; /* 定义一个函数，用来获取指定元素的当前的样式 * 参数： * obj 要获取样式的元素 * name 要获取的样式名*/ function getStyle(obj, name) { if (window.getComputedStyle) { //正常浏览器的方式，具有getComputedStyle()方法 return getComputedStyle(obj, null)[name]; } else { //IE8的方式，没有getComputedStyle()方法 return obj.currentStyle[name]; } }; // 定义一个函数来向一个元素添加指定的class属性值 /*参数： obj 要添加class属性的元素 cn 要添加的class值*/ function addClass(obj, cn) { // 检查obj中是否含有cn if (!hasClass(obj, cn)) { // 如果没有cn则添加cn（添加一个空格防止直接拼串） obj.className += " " + cn; } }; // 判断一个元素中是否含有指定的class属性值 /*参数 obj 要添加class属性的元素 cn 要添加的class值 如果有该class值则返回true，否则返回false*/ function hasClass(obj, cn) { // 判断obj中是否有cn这个class值 // 创建一个正则表达式 // var reg = /\bb2\b/; var reg = new RegExp("\\b" + cn + "\\b"); return reg.test(obj.className); }; // 删除一个元素中指定的class属性 function removeClass(obj, cn) { // 创建一个正则表达式 var reg = new RegExp("\\b" + cn + "\\b"); // 删除class obj.className = obj.className.replace(reg, ""); }; // toggleClass用来切换一个类 // 如果元素中有指定类则删除，没有则添加 function toggleClass(obj, cn) { // 判断obj中是否含有cn if (hasClass(obj, cn)) { // 有则删除 removeClass(obj, cn); } else { // 没有则添加 addClass(obj, cn); } };5、二级菜单完善<html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <link rel="stylesheet" href="css/sdmenu.css"> <script src="js/tools.js"></script> <style> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px/180%; } </style> <script> window.onload = function () { // 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态 // 点击菜单切换菜单的显示状态 // 获取所以class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); // 定义一个变量来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; // 为span绑定单击响应函数 for (var i = 0; i < menuSpan.length; i++) { menuSpan[i].onclick = function () { // this代表当前点击的span // 获取span的父元素 var parentDiv = this.parentNode; // 关闭parenDiv,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加 toggleClass(parentDiv, "collapsed"); // 判断openDiv和parentDiv是否相同 if (openDiv != parentDiv && !hasClass(openDiv,"collapsed")) { // 不相等才添加 // 打开菜单后给之前的菜单添加collapsed来关闭该菜单 // addClass(openDiv, "collapsed"); // 为了统一处理过渡动画，将addClass改为toggleClass // 此处toggleClass()不需要有移除功能 toggleClass(openDiv, "collapsed"); } // 修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } }; </script> </head> <body> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> </div> </body> </html>二级菜单动画过渡<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <link rel="stylesheet" href="css/sdmenu.css"> <script src="js/tools.js"></script> <style> * { margin: 0; padding: 0; list-style-type: none; } a,img { border: 0; text-decoration: none; } body { font: 12px/180%; } </style> <script> window.onload = function () { // 每个菜单都是一个div，当div具有collapsed这个类时，div就是折叠状态，没有则为展开状态 // 点击菜单切换菜单的显示状态 // 获取所以class为menuSpan的元素 var menuSpan = document.querySelectorAll(".menuSpan"); // 定义一个变量来保存当前打开的菜单 var openDiv = menuSpan[0].parentNode; // 为span绑定单击响应函数 for (var i = 0; i < menuSpan.length; i++) { menuSpan[i].onclick = function () { // this代表当前点击的span // 获取span的父元素 var parentDiv = this.parentNode; // 切换菜单的显示状态 toggleMenu(parentDiv); // 判断openDiv和parentDiv是否相同 if (openDiv != parentDiv && !hasClass(openDiv, "collapsed")) { // 不相等才添加 // 打开菜单后给之前的菜单添加collapsed来关闭该菜单 // addClass(openDiv, "collapsed"); // 为了统一处理过渡动画，将addClass改为toggleClass // 此处toggleClass()不需要有移除功能 // toggleClass(openDiv, "collapsed"); // 切换菜单的显示状态 toggleMenu(openDiv); } // 修改openDiv为当前打开的菜单 openDiv = parentDiv; }; } // 用来切换菜单折叠和显示状态 function toggleMenu(obj) { // 在切换类之前获取元素的高度 var begin = obj.offsetHeight; // 切换parenDiv的显示,给div添加collapsed值,toggleClass判断div中是否有collapsed，有则删除，无则添加 toggleClass(obj, "collapsed"); // 在切换类之后获取一个高度 var end = obj.offsetHeight; // console.log("begin=" + begin + ",end" + end); // 动画效果就是从begin向end过渡 // 将元素的高度充值为begin obj.style.height = begin + "px"; // 执行动画，从begin向end过渡 move(obj, "height", end, 10, function () { // 动画执行完毕，内联样式没有存在的意义，需要删除 obj.style.height = ""; }); }; }; </script> </head> <body> <div id="my_menu" class="sdmenu"> <div> <span class="menuSpan">在线工具</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">收藏夹图标生成器</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">合作伙伴</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> <div class="collapsed"> <span class="menuSpan">支持我们</span> <a href="#">图像优化</a> <a href="#">邮件</a> <a href="#">梯度图像</a> <a href="#">按钮生成器</a> </div> </div> </body> </html>五、JSON<script> // - JS中的对象只有JS认识，其他的语言都不认识 // JSON就是一个特殊格式的字符串，这个字符串可以被任何语言所识别 // 并可以转换为任意语言中的对象，JSON在开发中主要用来进行数据的交互 // JSON // - JavaScript Object Notation JS对象表示法 // - JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一样 /* JSON分类： 1、对象{} 2、数组[] JSON中允许的值： 1、字符串 2、数值 3、布尔值 4、null 5、对象 6、数组 */ // 创建一个对象 var obj = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; // 创建一个数组 var arr = '[1,2,3,"hello",true]'; // console.log(obj); var onj2 = '{"arr":[1,2,3]}'; var arr2 = '[{ "name": "孙悟空", "age": 18},{ "name": "孙悟空", "age": 18}]' /* 将JSON字符串转换为JS中的对象 在JS中提供了一个工具类叫做JSON 这个对象可以将JSON转为JS对象，也可以将JS对象转换为JSON */ var json = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; //JSON --> js对象 // JSON.parse()可以将JSON字符串转为JS对象 // 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象 var o = JSON.parse(json); var o2 = JSON.parse(arr); // console.log(o.gender); // console.log(02[1]); var obj3 = {name:"猪八戒",age:28,gender:"男"}; // JS对象 -->JSON // JSON.stringify()可以将一个JS对象转换为JSON字符串 // 需要一个JS对象作为参数，会返回一个JSON字符串 var str = JSON.stringify(obj3); console.log(str); // JSON这个对象在IE7及以下不支持，会报错 // 必须加"",不然会报错 var str3 = '{"name":"孙悟空","age":18,"gender":"男"}'; JSON.parse(str3); </script>JSON的兼容性<!-- 如果需要兼容IE7及以下，则可以通过一个外部JS文件来处理 --> <script src="js/json2.js"></script> <script> var str = '{ "name": "孙悟空", "age": 18, "gender": "男" }'; // eval()可以用来执行一段字符串形式的JS代码，并返回执行结果 // 如果使用eval()执行的字符串中含有{}，它会将{}当成是代码块 // 如果不希望将其当成代码块解析，则需在字符串前后各加一个() // eval()这个功能很强大，可以直接执行一个字符串中的JS代码 // 但是在开发中尽量不要使用，性能较差，且具有安全隐患（用户也可以传入JS代码） var str2 = "alert('hello')"; // eval(str2); var obj = eval("("+str+")"); // console.log(obj); </script>
-
『笔记』JavaScript基础学习笔记 5 — DOM（文本对象模型） DOM（文档对象模型）1、DOM的简介（1）什么是DOM：DOM：文档对象模型（Document Object Model） （2）模型：（3）节点：节点的类型节点的属性例：<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">我是一个按钮</button> <script type="text/javascript"> /* 浏览器已经提供了文档节点对象，这个对象是window属性 可以在页面直接使用，文档节点代表的是整个网页 */ console.log(document); //获取到button对象 var btn = doucument.getElementById("btn"); //修改按钮的文字 console.log(btn.innerHTML); btn.innerHTML = "I'm Button"; </script> </body> </html>（4）事件（Event）事件：就是用户和浏览器之间的交互行为可以在事件对应的属性中设置一些js代码，当事件被触发时，这些代码将会执行onclick 点击一次、ondblclick点击两次可以为按钮的对应事件绑定处理函数的形式来响应事件，这样当事件被触发时，其对应的函数将会被调用<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--结构和行为耦合，不推荐使用--> <!-- <button id="btn" onclick="alert('你点我干嘛！')；">我是一个按钮</button> --> <button id="btn">我是一个按钮</button> <script type="text/javascript"> //获取到button对象 var btn = doucument.getElementById("btn"); //可以为按钮的对应事件绑定处理函数的形式来响应事件 //这样当事件被触发时，其对应的函数将会被调用 //绑定一个单击事件 //为单击事件绑定的函数，称为单击响应函数 btn.onclick = function(){ alert("单击时触发"); }; btn.ondblclick = function(){ alert("双击才会出现"); }; </script> </body> </html>（5）文档的加载浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码onload事件会在整个页面加载完毕后才触发可以为window绑定一个onload事件，可以确保代码执行时所有的DOM对象都已经加载完毕了<head> <script type="text/javascript"> //为window绑定一个onload事件 window.onload = function(){ //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; }; </script> </head> <body> <button id="btn">点我一下</button> <!-- <script type="text/javascript"> //将js代码编写到页面的下部是为了可以在页面加载完毕后再执行js代码 //获取id为btn的按钮 var btn = document.getElementById("btn"); //为按钮绑定一个单击响应函数 btn.onclick = function(){ alert("hello"); }; </script> --> </body>2、DOM查询（1）获取元素节点window.onload = function(){ //为id为btn01的按钮绑定一个单击响应函数 var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ var bj = document.getElenmentById("bj"); //打印bj //innerHTML 通过这个属性可以获取到元素内部的html代码 alert(bj.innerHTML); }; //为id为btn01的按钮绑定一个单击响应函数 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ //查找所以li节点 //getElementsByTagName()可以根据标签名来获取一组元素节点对象 //这个方法会返回一个类数组对象，所有查询到的元素都会封装到对象中 //即使查询到的元素只有一个也会封装到一个对象中 var lis = document.getElenmentsByTagName("li"); //打印lis //alert(lis); //变量lis for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn03的按钮绑定一个单击响应函数 var btn03 = document.getElementById("btn03"); btn03.onclick = function(){ //查找name=gender的所有节点 var inputs = document.getElenmentsByNmae("gender"); //alert(inputs.length); for(var i=0; i<inputs.length; i++){ //对于自结束标签，innerHTML无效 //alert(inputs[i].innerHTML); //如果需要读取元素节点属性直接使用：元素.属性名 //class属性不能采用这种方式，读取class属性时需要使用：元素.className alert(inputs[i].value); alert(inputs[i].name); alert(inputs[i].className); } }; };（2）图片切换的练习<html> <head> <mata charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #outer{ width:500px; margin:50px auto; padding:10px; background-color:yellowgreen; /* 设置文本居中 */ text-align:center; } </style> <script type="text/javascript"> window.onload = function(){ // 点击按钮切换图片 // 获取两个按钮 var prev = document.getElementById("prev"); var naxt = document.getElementById("naxt"); // 获取img标签 var img = docunments.getElementsByTagName("img")[0]; //创建一个数组，用来保存图片的路径 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"] //创建一个变量来保存当前正在显示的图片的索引 var index = 0; //获取id为info的p元素来修改提示文字 var info = document.getElementById("info"); //设置提示文字 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" // 分别为两个按钮绑定单击响应函数 prev.onclick = function(){ //alert("上一张"); // 切换到上一张，索引自减 index--; //判断index是否小于0，小于0则改变为0 if(index<0){ //index = 0; //让图片可以循环 index = imgArr.length - 1; }; img.src = imgArr[index]; //当点击按钮以后，重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" }; next.onclick = function(){ //alert("下一张"); //切换图片就是修改img的src属性 //要修改一个元素的属性元素：元素.属性 = 属性值 // 切换到下一张，索引自增 index++; //判断index是否大于最后一个索引，最后一个索引为imgARrr.length - 1 if(index>imgArr.length - 1){ //index = imgArr.length - 1; //让图片可以循环 index = 0; }; img.src = imgArr[index]; //当点击按钮以后，重新设置信息 info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张" }; } </script> </head> <body> <div id="outer"> <p id="info"></p> <img src="img/1.jpg" alt="冰棍" /> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html>（3）获取元素节点的子节点window.onload = function(){ //为id为btn04的按钮绑定一个单击响应函数 var btn04 = document.getElementById("btn04"); btn04.onclick = function(){ //获取id为city的元素 var city = document.getElementById("city"); //查找#city下所有的li节点 var lis = city.getElementsByTagName("li"); for(var i=0; i<lis.length; i++){ alert(lis[i].innerHTML); } }; //为id为btn05的按钮绑定一个单击响应函数 var btn05 = document.getElementById("btn05"); btn05.onclick = function(){ //返回id为city的节点 var city = document.getElementById("city"); //返回#city下所有子节点 //childNodes属性会获取包括文本节点在内的所有节点 //根据DOM标准，标签与标签之间的空白也会当成文本节点 //但是IE8及以下的浏览器，不会将空白文本当成子节点 var cns = city.childNodes; //alert(cns.length); // for(var i=0; i<cns.length; i++){ // alert(cns[i]); // } //children属性可以获取当前元素的所有子元素 var cns2 = city.chileren; alert(cns2.length); }; //为id为btn06的按钮绑定一个单击响应函数 var btn06 = document.getElementById("btn06"); btn06.onclick = function(){ //获取id为phone的元素 var phone = document.getElementById("phone"); //返回#phone的第一个子节点 //phone.childNodes[0]; //firstChild属性可获取到当前元素的第一个子节点（包括空白文本节点） var fir = phone.firstChild; //firstElementChild属性可以获取当前元素的第一个子元素，IE8及以下不支持 // fir = phone.firstElementChild; alert(fir.innerHTML); }; };（4）获取元素节点的父节点和兄弟节点//定义一个函数，专门为指定的元素绑定单击函数 /* 参数 idStr 要绑定单击响应函数的对象的id属性值 fun 事件的回调函数，当单击元素时，该函数将会被触发 */ function myClick(idStr,fun){ var btn = document.getElementById("idStr"); btn.onclick = fun; }; window.onload = function(){ //为id为btn07的按钮绑定一个单击响应函数 myClick("btn07",function(){ // 获取id为bj的节点 var bj = document.getElementById("bj"); // 返回#bj的父节点 var pn = bj.parentNode; // alert(pn.innerHTML); // innerText 该属性可以获取到元素内部的文本内容，会去除html标签 alert(pn.innerText); }); //为id为btn08的按钮绑定一个单击响应函数 myClick("btn08",function(){ // 获取id为Android的元素 var and = document.getElementById("android"); //返回id为Andrid的前一个兄弟元素(也可能获取到空白文本) var ps = and.previousSibling; // 获取前一个元素兄弟（不包含空白文本），IE8以下不支持 var pe = and.previousElementSibling alert(ps.innerHTML); alert(pe.innerHTML); }); // 读取#username的value属性值 myClick(btn09,function(){ // 获取id为username的元素 var um = document.getElementById("username"); // 读取um的value属性值 // 文本框的value属性值，就是文本框中填写的内容 alert(um.value); }); // 读取#username的value属性值 myClick(btn10,function(){ // 获取id为username的元素 var um = document.getElementById("username"); // 设置um的value属性值 um.value = "今天天气真不错"; }); // 返回#bj的文本值 myClick(btn11,function(){ // 获取id为bj的元素 var bj = document.getElementById("bj"); // alert(bj.innerHTML); // alert(bj.innerText); // 获取bj中的文本 // var fc = bj.firstChild; // alert(fc.nodeValue); // 与上面相同 alert(bj.firstChild.nodeValue); }); };{nextPage/}（5）全选练习<html> <head> <meta content="text/html; charset=UTF-8"> <title>全选练习</title> <script type="text/javascript"> window.onload = function(){ // 获取四个多选框items var items = document.getElementsByName("items"); // 1.全选按钮，点击按钮后四个多选框全部选中 // 给id为checkAllBtn的按钮绑定一个单击响应函数 var checkAllBtn = document.getElementById("checkAllBtn"); // 给id为checkedAllBox的按钮绑定一个单击响应函数 var checkedAllBox = document.getElementById("checkedAllBox"); checkAllBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 通过多选框的checked属性可以来获取或者设置多选框的选中状态 // alert(items[i].checked;) // 设置四个多选框变为选中 items[i].checked = true; } // 将全选/全不选设置为选中 checkedAllBox.checked = true; }; // 2.全不选按钮，点击按钮后四个多选框全部不选中 // 给id为checkNoBtn的按钮绑定一个单击响应函数 var checkNoBtn = document.getElementById("checkNoBtn"); checkNoBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 设置四个多选框变为不选中 items[i].checked = false; } // 将全选/全不选设置为不选中 checkedAllBox.checked = false; }; // 3.反选按钮，点击按钮后选中的变为不选中，没选中的变为选中 // 给id为checkRevBtn的按钮绑定一个单击响应函数 var checkRevBtn = document.getElementById("checkRevBtn"); checkRevBtn.onclick = function(){ // 设置checkedAllBox为默认选中状态 checkedAllBox.checked = true; // 遍历items for(var i=0; i<items.length; i++){ // 判断多选框状态 // if(items[i].checked){ // // 证明多选框为已选中，则设置为没选中状态 // items[i].checked = false; // }else{ // // 证明多选框为没选中，则设置为选中状态 // items[i].checked = true; // } // 直接取反 items[i].checked = !items[i].checked; // 在反选时也需要判断四个多选框是否全都选中 // 判断四个多选框是否全选 // 只有有一个没选中则不是全选 if(!items[i].checked){ // 一旦进入判断则证明不是全选 // 将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; } } }; // 4.提交按钮，点击按钮后，将弹出所有选中的多选框的value属性值 // 给id为sendBtn的按钮绑定一个单击响应函数 var sendBtn = document.getElementById("sendBtn"); sendBtn.onclick = function(){ // 遍历items for(var i=0; i<items.length; i++){ // 判断多选框是否选中 if(items[i].checked){ alert(items[i].value); } } }; // 5.全选/全不选多选框，当他选中时其余的也选中，当他取消时其余的也取消 // // 给id为checkedAllBox的按钮绑定一个单击响应函数 // var checkedAllBox = document.getElementById("checkedAllBox"); checkedAllBox.onclick = function(){ // 在事件响应函数中，响应函数是给谁绑定的，this就是谁 // alert(this == checkedAllBox); // 设置多选框的选中状态 for(var i=0; i<items.length; i++){ // items[i].checked = checkedAllBox.checked; items[i].checked = this.checked; } }; // 如果四个多选框全选中，则checkedAllBox也应该选中 // 如果四个多选框没有全选中，则checkedAllBox也不应该选中 // 6.为四个多选框分别绑定点击函数 for(var i=0; i<items.length; i++){ items[i].onclick = function(){ // 设置checkedAllBox为选中状态 checkedAllBox.checked = true; for(var j=0; j<items.length; j++){ // 判断四个多选框是否全选 // 只有有一个没选中则不是全选 if(!items[j].checked){ // 一旦进入判断则证明不是全选 // 将checkedAllBox设置为没选中状态 checkedAllBox.checked = false; // 一旦进入判断则已经得出结果，不用再继续执行循环 break; } } }; } }; </script> </head> <body> <form method="post" action=""> 你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选 <br/> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球" />篮球 <input type="checkbox" name="items" value="羽毛球" />羽毛球 <input type="checkbox" name="items" value="乒乓球" />乒乓球 <br/> <input type="button" id="checkAllBtn" value="全 选"/> <input type="button" id="checkNoBtn" value="全不选"/> <input type="button" id="checkRevBtn" value="反 选"/> <input type="button" id="sendBtn" value="提 交"/> </form> </body> </html>（6）DOM查询的其他方法<html> <head> <script> window.onload = function(){ // 获取body标签 // var body = document.getElementsByName("body")[0]; // 在document中有一个属性body，他保存的是body的引用 var body = document.body; console.log(body); // document.documentElenment保存的是html的根标签 var html = document.documentElenment; console.log(html); // document.all代表页面中的所有元素 var all = document.all; console.log(all.length); //输出6 for(var i=0; i<all.length; i++){ console.log(all[i]); } all = document.getElementsByTagName("*"); //相等于document.all console.log(all.length); // 根据元素的class属性值查询一组元素节点对象 // getElementsByClassNmae可以根据元素的class属性值查询一组元素节点对象 // 但是不支持IE8及以下浏览器 var box1 = document.getElementsByClassNmae("box1"); console.log(box1.length); // 获取页面中所有的div元素 var divs = document.getElementsByTagName("div"); // 获取class为box1中所有的div // 通过css选择器选择来获取 /* document.querySelector() 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象 可以兼容IE8浏览器 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个也只会返回第一个 */ var div = document.querySelector(".box1 div"); console.log(div.innerHTML); var box1 = document.querySelector(".box1"); console.log(box1); // document.querySelectorAll() // 该方法与querySelector()用法类似，但是可以将所有满足条件的元素封装到一个数组中返回 // 即使符合条件的元素只有一个也会返回为数组 var box1 = document.querySelectorAll(".box1"); console.log(box1.length); }; </script> </head> <body> <div class="box1"> 我是box1中的div <div>我是box1中的div</div> </div> <div class="box1"> <div>我是box1中的div</div> </div> <div class="box1"> <div>我是box1中的div</div> </div> <div> </div> </body> </html>（7）DOM增删改<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript"> window.onload = function() { //1.创建一个"广州"节点,添加到#city下 myClick("btn01",function(){ //创建广州节点 <li>广州</li> //创建li元素节点 // document.createElement()可以用于创建一个元素节点对象， // 它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回 var li = document.createElement("li"); //创建广州文本节点 // document.createTextNode()可以用来创建一个文本节点对象 // 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 var gzText = document.createTextNode("广州"); //将gzText设置li的子节点 // appendChild()向一个父节点中添加一个新的子节点 // - 用法：父节点.appendChild(子节点); li.appendChild(gzText); //获取id为city的节点 var city = document.getElementById("city"); //将广州添加到city下 city.appendChild(li); }); //2.将"广州"节点插入到#bj前面 myClick("btn02",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // insertBefore()可以在指定的子节点前插入新的子节点 // - 语法：父节点.insertBefore(新节点,旧节点); city.insertBefore(li , bj); }); //3.使用"广州"节点替换#bj节点 myClick("btn03",function(){ //创建一个广州 var li = document.createElement("li"); var gzText = document.createTextNode("广州"); li.appendChild(gzText); //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // replaceChild()可以使用指定的子节点替换已有的子节点 // - 语法：父节点.replaceChild(新节点,旧节点); city.replaceChild(li , bj); }); //4.删除#bj节点 myClick("btn04",function(){ //获取id为bj的节点 var bj = document.getElementById("bj"); //获取city var city = document.getElementById("city"); // removeChild()可以删除一个子节点 // - 语法：父节点.removeChild(子节点); //city.removeChild(bj); // 子节点.parentNode.removeChild(子节点); bj.parentNode.removeChild(bj); }); //5.读取#city内的HTML代码 myClick("btn05",function(){ //获取city var city = document.getElementById("city"); alert(city.innerHTML); }); //6.设置#bj内的HTML代码 myClick("btn06" , function(){ //获取bj var bj = document.getElementById("bj"); bj.innerHTML = "昌平"; }); myClick("btn07",function(){ //向city中添加广州 var city = document.getElementById("city"); // 使用innerHTML也可以完成DOM的增删改的相关操作 // 一般我们会两种方式结合使用 //city.innerHTML += "<li>广州</li>"; //创建一个li var li = document.createElement("li"); //向li中设置文本 li.innerHTML = "广州"; //将li添加到city中 city.appendChild(li); }); }; function myClick(idStr, fun) { var btn = document.getElementById(idStr); btn.onclick = fun; } </script> </head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? </p> <ul id="city"> <li id="bj">北京</li> <li>上海</li> <li>东京</li> <li>首尔</li> </ul> </div> </div> <div id="btnList"> <div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div> <div><button id="btn02">将"广州"节点插入到#bj前面</button></div> <div><button id="btn03">使用"广州"节点替换#bj节点</button></div> <div><button id="btn04">删除#bj节点</button></div> <div><button id="btn05">读取#city内的HTML代码</button></div> <div><button id="btn06">设置#bj内的HTML代码</button></div> <div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div> </div> </body> </html>（8）添加删除记录-删除<html> <head> <title>添加删除记录练习</title> <script> window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = function(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; } }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>{nextPage/}（9）添加删除记录-添加<html> <head> <title>添加删除记录练习</title> <script> // 删除tr的响应函数 function delA(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = delA; } // 添加员工的功能，点击按钮后将员工信息添加到表格中 // 为提交按钮绑定一个单击函数 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function(){ // 获取用户提交的员工信息 // 获取员工的名字 var name = document.getElementById("empName").value; // 获取员工的email和salary var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; //需要将获取到的信息保存到tr中 // 创建一个tr var tr =document.createElement("tr"); // 创建四个td var nameTd =document.createElement("td"); var emailTd =document.createElement("td"); var salaryTd =document.createElement("td"); var aTd =document.createElement("td"); // 创建一个a元素 var a = document.createElement("a"); // 创建文本节点 var nameText = document.createTextNode(name); var emailText = document.createTextNode(email); var salaryText = document.createTextNode(salary); var delText = document.createTextNode("Delete"); // 将文本添加到td中 nameTd.appendChild(nameText); emailTd.appendChild(emailText); salaryTd.appendChild(salaryText); // 向a中添加文本 a.appendChild(delText); // 将a添加到td中 aTd.appendChild(a); // 将td添加到tr中 tr.appendChild(nameTd); tr.appendChild(emailTd); tr.appendChild(salaryTd); tr.appendChild(aTd); // 向a中添加href属性 a.href = "javascript:;"; // 为新添加的a再绑定一次单击响应函数 a.onclick = delA; // 获取table var employeeTable = document.getElementById("employeeTable"); // 获取employeeTable中的tbody var tbody = employeeTable.getElementsByTagName("tbody")[0]; // 将tr添加到table中 tbody.appendChild(tr); }; }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>（10）添加删除记录-修改<html> <head> <title>添加删除记录练习</title> <script> // 删除tr的响应函数 function delA(){ // 点击超链接后要删除超链接所在行 // 这里点击哪个超链接this就是谁 // 获取a标签父元素的父元素 tr var tr = this.parentNode.parentNode; // 获取要删除的员工的名字 // var name = tr.getElementsByTagName("td")[0].innerHTML; var name = tr.children[0].innerHTML; // 删除之前弹出提示框 // alert("确认删除吗？"); // confirm()用于弹出一个带有确认和取消的提示框，需要一个字符串作为参数，该字符串会作为提示文字显示 // 如果用户点击确认返回true，点击取消返回false var flag = confirm("确认删除"+name+"吗？"); // 如果用户点击确认 if(flag){ // 删除tr，tr的父元素删除子元素tr tr.parentNode.removeChild(tr); } // 点击超链接后会跳转页面，是超链接的默认行为 // 但是此时不需要默认行为，可以通过在响应函数的最后return false来取消默认行为 return false; }; window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ allA[i].onclick = delA; } // 添加员工的功能，点击按钮后将员工信息添加到表格中 // 为提交按钮绑定一个单击函数 var addEmpButton = document.getElementById("addEmpButton"); addEmpButton.onclick = function(){ // 获取用户提交的员工信息 // 获取员工的名字 var name = document.getElementById("empName").value; // 获取员工的email和salary var email = document.getElementById("email").value; var salary = document.getElementById("salary").value; //需要将获取到的信息保存到tr中 // 创建一个tr var tr =document.createElement("tr"); // 设置tr中的内容 tr.innerHTML = "<td>"+name+"</td>"+ "<td>"+email+"</td>"+ "<td>"+salary+"</td>"+ "<td><a href='javascript;:'>Delete</a></td>"; // 获取刚添加的a元素，并为其绑定单击响应函数 var a = tr.getElementsByTagName("a")[0]; a.onclick = delA; // 获取table var employeeTable = document.getElementById("employeeTable"); // 获取employeeTable中的tbody var tbody = employeeTable.getElementsByTagName("tbody")[0]; // 将tr添加到table的tbody中 tbody.appendChild(tr); }; }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>（11）添加删除记录-a的索引问题<html> <head> <title>添加删除记录练习</title> <script> window.onload = function(){ // 点击超链接后删除一个员工信息 // 获取所有的超链接 var allA = document.getElementsByTagName("a"); // 为每一个超链接都绑定一个单机响应函数 for(var i=0; i<allA.length; i++){ // for循环会在页面加载完成之后立即执行 // 而响应函数会在超链接被点击才会执行 // 当响应函数执行时，for循环早已经执行完毕 alert("for循环正在执行"+i)； allA[i].onclick = function(){ alert("响应函数正在执行"+i); // alert(allA[i]); return false; }; } }; </script> </head> <body> <table id="employeeTable"> <tr> <th>Name</th> <th>Email</th> <th>Salary</th> <th> </th> </tr> <tr> <td>Tom</td> <td>tom@tom.com</td> <td>5000</td> <td><a href="deleteEmp?id=001">Delete</a></td> </tr> <tr> <td>Jerry</td> <td>jerry@sohu.com</td> <td>8000</td> <td><a href="deleteEmp?id=002">Delete</a></td> </tr> <tr> <td>Bob</td> <td>bob@tom.com</td> <td>10000</td> <td><a href="deleteEmp?id=003">Delete</a></td> </tr> </table> <div id="formDiv"> <h4>添加新员工</h4> <table> <tr> <td class="word">name:</td> <td class="inp"> <input type="text" name="enmName" id="empName" </td> </tr> <tr> <td class="word">email:</td> <td class="inp"> <input type="text" name="email" id="email" </td> </tr> <tr> <td class="word">salary:</td> <td class="inp"> <input type="text" name="salary" id="salary" </td> </tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc"> Submit </button> </td> </tr> </table> </div> </body> </html>{nextPage/}（12）操作内联样式<html> <head> <title></title> <style> #box1{ width:100px; height:100px; background-color:red; } </style> <script> window.onload = function(){ // 点击按钮后，修改box1的大小 // 获取box1 var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 修改box1的宽度 // 通过JS修改元素的样式 // 语法：元素.style.样式名 = 样式值 // 如果CSS的样式名中含有减号-，这种名称在JS中是不合法的 // 需要将这种样式名修改为驼峰命名法，去掉减号-，然后将-后的字母大写 // border-top-width需要改为borderTopWidth // 通过style属性设置的样式都是内联样式，优先级较高 // 通过JS修改的样式基本都会立即显示，但是如果在样式中写了!important，则此样式会有最高的优先级，即使通过JS也不能覆盖此样式 box1.style.width = "300px"; box1.style.height = "300px"; // box1.style.background-color = "blue"; box1.style.backgroundColor = "blue"; }; // 点击按钮2后读取元素的样式 var btn02 = document.getElementById("btn02"); btn02.onclick = function(){ // 读取box1的样式 // 语法：元素.style.样式名 // 通过style设置或读取的都是内联样式 // 无法读取到样式表里的样式 // alert(box1.style.width); alert(box1.style.backgroundColor); } }; </script> </head> <body> <button id="btn01">点我一下</button> <button id="btn02">点我一下2</button> <div id="box1"></div> </body> </html>（13）获取元素的样式元素.currentStyle.样式名getComputdeStyle()方法<html> <head> <style> #box1{ width:100px; height:100px; background-color:yellow; } </style> <script> window.onload = function(){ var box1 = document.getElementById("Box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ // 获取元素当前显示的样式 // 语法：元素.currentStyle.样式名 // 如果当前没有设置样式，则返回样式的默认值 // currentStyle只有IE支持 // alert("box1.currentStyle.backgroundColor"); // 在其他浏览器中可以使用getConputedStyle()方法来获取元素当前的样式，这个方法是window的方法，可以直接使用 // 需要两个参数（第一个：要获取样式的元素，第二个：可以传递一个伪元素，一般都传null） // 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过对象.样式来读取样式 // var obj = getComputedStyle(box1,null); // alert(obj); // 如果获取的样式没有设置样式，则还是会返回一个值 // IE8及以下不支持该方法 // 通过currentStyle和getComputdeStyle()读取到的样式都是只读的，不能修改，如果要修改必须通过style属性 // 正常浏览器的方式 // alert(getComputedStyle(box1,null).backgroundColor); // IE8的方式 // alert(box1.currentStyle.backgroundColor); alert(getStyle(box1,"width")); }; }; // 定义一个函数用来获取指定元素当前的样式 // 参数：obj 要获取样式的元素，name要获取的样式名 function getStyle(obj,name){ // 正常浏览器的方式 return getConputedStyle(obj,null)[name]; // IE8的方式 return obj.currentStyle[name]; }; </script> </head> <body> <button id="btn01">点我一下</button> <br/> <div id="box1"></div> </body> </html>getStyle方法<html> <head> <style> #box1{ width:100px; height:100px; background-color:yellow; } </style> <script> window.onload = function(){ var box1 = document.getElementById("Box1"); var btn01 = document.getElementById("btn01"); btn01.onclick = function(){ alert(getStyle(box1,"width")); }; }; // 定义一个函数用来获取指定元素当前的样式 // 参数：obj 要获取样式的元素，name要获取的样式名 function getStyle(obj,name){ // 加入window后getConputedStyle会变成对象的属性 if(window.getConputedStyle){ // 正常浏览器的方式,具有getConputedStyle()方法 return getConputedStyle(obj,null)[name]; }else{ // IE8的方式,没有getConputedStyle()方法 return obj.currentStyle[name]; } // 在IE11中优先级会改变 // if(obj.currentStyle){ // return obj.currentStyle[name]; // }else{ // return getConputedStyle(obj,null)[name]; // } // 与第一种一样，但是结构较为复杂 // return window.getConputedStyle?getConputedStyle(obj,null)[name]:obj.currentStyle[name]; } </script> </head> <body> <button id="btn01">点我一下</button> <br/> <div id="box1"></div> </body> </html>（14）其他样式相关的属性HTML DOM Element 对象<html> <head> <style> #box1{ width:100px; height:150px; background-color:red; padding:10px; border:10px solid yellow; } #box2{ padding:100px; background-color:#bfa; } #box4{ width:200px; height:300px; backgroun-color:#bfa; overflow:atuo; } #box5{ width:450px; height:600px; backgroun-color:yellow; } </style> <script> window.onload function(){ var box1 = document.getElementById("box1"); var btn01 = document.getElementById("btn01"); var box4 = document.getElementById("box4"); btn01.onclick = function(){ // clientWidth和clientHeight可以获取元素的可见宽度与高度 // 不带px的数字，可以直接计算 // 会获取元素的宽度和高度，包括内容区和内边距 // 这些属性都是只读的，不能修改 alert(box1.clientWidth); alert(box1.clientHeight); // offsetWidth和offsetHeight可以获取元素的整个宽度和高度，包括内容区、内边距、边框 alert(box1.offsetWidth); // offsetParent可以用来获取当前元素的定位父元素 // 会获取到离当前元素最近的开启了定位的祖先元素 // 如果所有的祖先元素都没有开启定位，则返回body var op = box1.offsetParent; alert(op.id) // offsetLeft当前元素相对于其定位父元素的水平偏移量 // offsetTop当前元素相对于其定位父元素的垂直偏移量 alert(box1.offsetLeft); //输出100px // scrollHeight滚动高度、scrollWidth滚动宽度，可以获取到元素整个滚动区域的高度和宽度 alert(box4.scrollHeight); alert(box4.scrollWidth); // scrollLeft可以获取水平滚动条滚动的距离 // scrollTop可以获取垂直滚动条滚动的距离 alert(box4.scrollLeft); // alert(box4.clientHeight); //283 alert(box4.scrollHeight - box4.scrollTop); //滚动条拉到最底部输出283 // 当满足scrollHeight - scrollTop == clientHeight说明垂直滚动条滚动到底了 // 当满足scrollWidth - scrollLeft == clientWidth说明水平滚动条滚动到底了 }; }; </script> </head> <body id="body"> <button id="btn01"></button> <div id="box4"> <div id="box5"></div> </div> <br/><br/> <div id="box3"> <div id="box2" style="position:relative"> <div id="box1"></div> </div> </div> </body> </html>练习<html> <head> <style> #info{ width:300px; height:500px; background-color:#bfa; overflow:auto; } </style> <script> window.onload = function(){ // 当垂直滚动条滚动到底时使表单项可用 // onscroll该事件在滚动条滚动时会触发 var info = document.getElementById("info"); // 获取表单项 var inputs = document.getElementsByTagName("input"); // 为info绑定一个滚动条滚动事件 info.onscroll = function(){ // 检查垂直滚动条是否滚动到底 // 这里出现了一个小问题，滚动条滚动到最底部时始终还差一点，所以只好使用离滚动条底部距离<1来判断 if (info.scrollHeight - (info.scrollTop + info.clientHeight) < 1) { // 滚动条滚到底时使表单项可用 // alert("我到底了"); inputs[0].disabled = false; inputs[1].disabled = false; } }; // 添加一个必须勾选阅读完成才能注册 inputs[1].onclick = function(){ // 判断表单项是否勾选 if(inputs[0].checked == true){ alert("恭喜您，注册成功！") }else{ alert("请勾选同意本协议") } }; }; </script> </head> <body> <h3>欢迎亲爱的用户注册</h3> <p id="info"> 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 亲爱的用户，请仔细阅读以下协议，如果不仔细阅读就无法注册 </p> <!-- 如果为表单项添加disabled="disabled"则表单项将变为不可用的状态 --> <input type="checkbox" disabled="disabled" />我已仔细阅读 <input type="submit" value="注册" disabled="disabled" /> </body> </html>15、事件对象<html> <head> <style> #areaDiv{ border:1px solid black; width:300px; height:100px; margin-bottom:10px; } #showMsg{ border:1px solid black; width:300px; height:20px; } </style> <script> window.onload = function(){ // 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标 var areaDiv = document.getElementById("areaDiv"); var showMsg = document.getElementById("showMsg"); // onmousemove该事件将会当鼠标在元素中移动时被触发 // 事件对象： // 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数 // 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个按键被按下 areaDiv.onmousemove = function(event){ // 在IE8中，响应函数被触发时，浏览器不会传递事件对象 // 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 // 解决兼容性问题 /* if(!evet){ event = window.event; } */ event = event || window.event; // clientX可以获取获取鼠标的水平坐标 // clientY可以获取获取鼠标的垂直坐标 var x = event.clientX; var y = event.clientY; // 在showMsg中显示鼠标的坐标 showMsg.innerHTML = "x = " +x + ",y="+y; }; }; </script> </head> <body> <div id="areaDiv"></div> <div id="showMsg"></div> </body> </html>{nextPage/}练习：跟随鼠标移动<html> <head> <style> #box1{ width:100px; height:100px; background-color:red; /* 开启box1的绝对定位 */ position:absolute; } </style> <script> window.onload = function(){ // 使div可以跟随鼠标移动 var box1 = document.getElementById("box1"); document.onmousemove = function(event){ // 解决兼容性问题 event = event || window.event; // 获取滚动条滚动的距离 // Chrome可以获取到body的scrollTop // IE等浏览器获取不到body的scrollTop，但是能获取到html的scrollTop // 解决兼容问题 // var st = document.body.scrollTop; // var st = document.documentElement.scrollTop; var st = document.body.scrollTop || document.documentElement.scrollTop; var sl = document.body.scrollLeft || document.documentElement.scrollLeft; // 获取鼠标的坐标 // clientX和clientY用于获取鼠标在当前可见窗口的坐标 // div的偏移量是相对于整个页面的 // pageX和pageX可以获取鼠标相对于整个页面的坐标，不兼容IE8 // var left = event.pageX; // var top = event.pageY; var left = event.clientX; var top = event.clientY; // 设置div的偏移量 box1.style.left = left + sl +"px"; box1.style.top = top + st +"px"; }; }; </script> </head> <body style="height:1000px;width:2000px"> <div id="box1"></div> </body> </html>(16)事件冒泡事件的冒泡：指事件的 向上 传导，当后代元素上的事件被触发时，其祖先元素的 相同事件 也会被触发在开发中，大部分的事件冒泡都是有用的。如果不希望发生事件冒泡可以通过事件对象来取消冒泡可以将事件对象的canceBubble=true用来取消冒泡<html> <head> <style> #box1{ width:200px; height:200px; background-color:yellowgreen; } #s1{ background-color:red; } </style> <script> window.onload = function(){ // 为s1绑定一个单击响应函数 var s1 = document.getElementById("s1"); s1.onclick = function(event){ event = event || window.event; alert("我是span的单击响应函数"); // 可以将事件对象的canceBubble设置为true用来取消冒泡 event.cancelBubble = true; }; // 为box1绑定一个单击响应函数 var box1 = document.getElementById("box1"); box1.onclick = function(){ alert("我是div的单击响应函数"); }; // 为body绑定一个单击响应函数 document.body.onclick = function(){ alert("我是body的单击响应函数"); }; }; </script> </head> <body> <div id="box1"> 我是box1 <span id="s1">我是span</span> </div> </body> </html>（17）冒泡的应用—事件的委派事件委派：将事件统一绑定给元素的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能<html> <head> <script> window.onload = function(){ // 点击按钮后添加超链接 // 获取btn01 var btn01 = document.getElementById("btn01"); // 获取ul var u1 = document.getElementById("u1"); btn01.onclick = function(){ // 创建一个li var li = document.createElement("li"); li.innerHTML = "<a href='javascript:;' class="link">新建的超链接</a>"; // 将li添加到ul中 u1.appendChild(li); }; // 为每一个超链接都绑定一个单击响应函数 // 本方法操作比较麻烦，且只能为已有的超链接设置事件，而新添加的超链接必须重新绑定 // 获取所有的a var allA = document.getElementsByTagName("a"); // 遍历a /*for(i=0; i<allA.length; i++){ allA[i].onclick = function(){ alert("我是a的单击响应函数") }; }*/ // 希望只绑定一次即可应用到多个元素上，即使元素是后添加的 // 为ul绑定一个单级响应函数 u1.onclick = function(event){ event = event || window.event; // event中的target表示触发事件的对象 // alert("event.target"); // 如果触发事件的对象是期望元素则执行，否则不执行 if(event.target.className == "link"){ alert("我是ul的单击响应函数"); } }; }; </script> </head> <body> <button id="btn01">添加超链接</button> <ul id="u1"> <li> <p>我是P元素</p> </li> <li><a href="javascript:;" class="link">超链接一</a></li> <li><a href="javascript:;" class="link">超链接二</a></li> <li><a href="javascript:;" class="link">超链接三</a></li> </ul> </body> </html>（18）事件的绑定<html> <head> <script> window.onload = function(){ // 点击按钮后弹出一个内容 // 获取按钮对象 var btn01 = document.getElementById("btn01"); // 使用对象.事件 = 函数的形式绑定响应函数 // 只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个则后边的会覆盖掉前边的 // 为btn01绑定一个单击响应函数 /*btn01.onclick = function(){ alert(1); };*/ // 为btn01绑定第二个单击响应函数 /*btn01.onclick = function(){ alert(1); };*/ /* addEventListener() *通过这个方法也可以为元素绑定单击响应函数 *参数： *1.事件的字符串，不要on *2.回调函数，是事件触发时该函数会被调用 *是否在捕获阶段触发，需要一个布尔值，一般都为false *使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数将会按照函数的绑定顺序执行 *不支持IE8及以下浏览器 */ btn01.addEventListener("click",function(){ alert(1); },false); btn01.addEventListener("click",function(){ alert(2); },false); btn01.addEventListener("click",function(){ alert(3); },false); /*attachEvent()可以在IE8中来绑定事件 *1.事件的字符串，要on *2.回调函数 *可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，执行顺序和addEventListener()相反 *不支持IE8以上 */ btn01.attachEvent("onclick",function(){ alert(1); }); btn01.attachEvent("onclick",function(){ alert(2); }); // 自定义bind函数 bind(btn01,"click",function(){ alert(this); }); bind(btn01,"click",function(){ alert(2); }); }; // 自定义一个函数，用来为指定元素绑定响应函数 // addEventListener()中的this是绑定事件的对象 // attachEvent()中的this是window，需要统一两个方法的this /*参数： *obj要绑定事件的对象 *eventStr事件的字符串(不要on) *callback回调函数 */ function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body> <button id="btn01">点我一下</button> </body> </html>（19）事件的传播事件的冒泡和捕获阶段{alert type="success"}微软公司认为事件是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向元素当前元素的祖先元素上传播，也就是事件在冒泡阶段执行网景公司认为事件是由外向内传播，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后再向内传播给后代元素w3c综合了两个公司的方案，将事件传播分成了三个阶段捕获阶段：在捕获阶段时从外（最外层祖先元素）向内（目标元素）进行捕获，但是默认此时不会触发事件目标阶段：事件捕获到目标元素，捕获结束，开始在目标目标元素上触发事件冒泡阶段：事件从目标向他的祖先元素传递，依次触发祖先元素上的事件如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true一般不会希望在捕获阶段触发事件，所以这个参数一般都是false{/alert}<html> <head> <style> #box1{ width:300px; height:300px; background-color:yellowgreen; } #box2{ width:200px; height:200px; background-color:yellow; } #box3{ width:150px; height:15px; background-color:skyblue; } </style> <script> window.onload = function(){ // 分别为三个div绑定单击响应函数 var box1 = document.getElementById("box1"); var box2 = document.getElementById("box2"); var box3 = document.getElementById("box3"); bind(box1,"click",function(){ alert("我是box1的响应函数"); }); bind(box2,"click",function(){ alert("我是box2的响应函数"); }); bind(box3,"click",function(){ alert("我是box3的响应函数"); }); }; function bind(obj,eventStr,callback){ if(obj.addEventListener){ // 大部分浏览器兼容的方式 obj.addEventListener(eventStr,callback,flase); }else{ // this是由调用方式决定 // 可以使用匿名函数调用回调函数，这样就可以指定this // IE8及以下浏览器，加一个on // obj.attachEvent("on"+eventStr,callback); obj.attachEvent("on"+eventStr,function(){ // 在匿名函数中调用回调函数 callback.call(obj); }); } }; </script> </head> <body> <div id="box1"> <div id="box2"> <div id="box3"></div> </div> </div> </body> </html>
-
『笔记』JavaScript基础学习笔记 4 内建对象二、函数的方法1、 call() 和 apply(){alert type="success"}这两个方法都是函数对象的方法，需要通过函数对象来调用当对函数调用call()和apply()都会调用函数执行在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的 thiscall()方法可以将实参在对象之后依次传递apply()方法需要将实参封装到一个数组中统一传递{/alert}this的情况：{alert type="error"}以函数形式调用时，this永远都是window以方法的形式调用时，this是调用方法的对象以构造函数的形式调用时，this是新创建的那个对象使用call()和apply()调用时，this是指定的那个对象{/alert}function fun(){ // alert(this.name); console.log("a="+a); console.log("b="+b); } var obj = { name:"obj", sayName:function(){ alert(this.name); } }; // fun.call(); // fun.apply(); // fun(); fun.call(obj,2,2); fun.apply(obj,[2,3]); var obj2 = { name:"obj2" }; fun.call(obj); fun.apply(obj2); // fun(); //this为window obj.sayName.apply(obj2); 三、 arguments 对象在调用函数时，浏览器每次都会传递进两个隐含的参数函数的上下文对象this封装实参的对象argumentsarguments是一个类数组对象，可以通过索引来操作数据，也可以获取长度在调用函数时，所传递的实参都会在arguments中保存arguments.length可以用来获取实参的长度即使不定义形参，也可以通过arguments来使用实参arguments[0]表示第一个实参arguments[1]表示第二个实参。。。。。。arguments里面有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象function fun(){ // console.log(arguments instanceof Array); // console.log(Array.isArray(arguments)); // console.log(arguments.length); // console.log(arguments[1]); console.log(arguments.callee); } fun("hello",true);四、 Date对象在JS中使用Date对象来表示一个时间{alert type="success"}如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数日期的格式： 月份/日/年份 时:分:秒 {/alert}{alert type="error"}getDate() 获取当前日期对象是几日getDay() 获取当前日期对象是周几， 会返回0-6的值，0表示周日getMonth() 获取当前时间对象的月份， 会返回0-11的值，0表示1月.....11表示12月getFullYear() 获取当前时间对象的四位数年份getTime() 获取当前日期对象的时间戳时间戳，指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数 （1秒=1000毫秒）计算机底层在保存时间时使用的都是时间戳可以使用时间戳来测试代码执行的性能{/alert}//创建一个Date对象 var d = new Date(); //创建一个指定的时间对象 var d2 = new Date("12/03/2016 11:10:30") var date = d2.getDate(); var day = d2.getDay(); var month = d2.getMonth(); var year = d2.getFullYear(); var time = d2.getTime(); console.log("date="+date); console.log("day="+day); console.log("month="+month); console.log("year="+year); console.log("time="+time/1000/60/60/24/365); var d3 = new Date("1/1/1970 0:0:0");// 表示东八区北京时间 time = d3.getTime(): console.log(time); //获取当前的时间戳 time = Date.now(); console.log(time); var start = Date.now(); for(var i=0; i<100; i++){ console.log(i); } var end = Date.now(); console.log("执行了："+(end - start)+"毫秒");五、 Math对象Math和其他的对象不同，他不是一个构造函数，属于工具类不用创建对象，他里面封装了数学运算相关的属性和方法{callout color="#f0ad4e"}Math.PI 返回圆周率Math.abs() 返回数的绝对值Math.ceil() 可以对一个数进行向上取整，小数位只要有值就自动进1Math.floor() 可以对一个数进行向下取整，小数部分会被舍掉Math.round() 可以对一个数进行四舍五入取整Math.random() 可以用来生成0-1之间的随机数，生成一个x-y之间的随机整数： Math.round(Math.random()*(y-x)+x)Math.max() 可以获取多个数中的最大值Math.min() 可以获取多个数中的最小值Math.pow(x,y) 返回x的y次幂Matn.sqrt() 对一个数进行开方运算{/callout}console.log(Math.PI); //返回圆周率 console.log(Math.abs(-1)); //返回绝对值1 console.log(Math.ceil(1.1)); //向上取整，返回2 console.log(Math.floor(1.99)); //向下取整，返回1 console.log(Math.round(1.4)); //进行四舍五入取整，返回1 console.log(Math.random()); //生成一个0-1之间的随机数 //生成一个0-10的随机整数 for(var i=0; i<100; i++){ console.log(Math.round(Math.random()*10)); } var max = Math.max(10,45,30,100); var max = Math.min(10,45,30,100); console.log(max); console.log(min); console.log(Math.pow(12,3)); console.log(Math.sqrt(2)); console.log(max); console.log(min); console.log(Math.pow(12,3)); console.log(Math.sqrt(2)); //开方运算六、包装类基本数据类型： String Number Boolean Null Undefined引用数据类型：Object1、包装类在JS中提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象在实际应用中不会使用基本数据类型的对象String() 可以将基本数据类型字符串转换为String对象Number() 可以将基本数据类型的数字转换为Number对象Boolean() 可以将基本数据类型的布尔值转换为Boolean对象var a = 123; var num = new Number(3); var num2 = new Number(3); var str = new String("hello"); var bool = new Boolean(true); var bool2 = true; //向num中添加一个属性 num.hello = "abcdef"; console.log(num.hello); console.log(num == num2);//返回false，对象永远不会相等 console.log(bool == bool2); // 返回true，会做转义比较 var b = new Boolean(fasle); if(b){ alert("能运行") } //方法和属性只能添加给对象，不能添加给基本数据类型 //当对一些基本数据类型使用包装类将其转换为对象，然后再调用对象的属性和方法 //调用完以后，再将其转换为基本数据类型，但是不会保存 var s = 123; s = s.toString(); s.hello = "你好"; console.log(s); console.log(s.hello);//返回undefined2、字符串的相关方法在底层字符串是以字符数组的形式保存的{callout color="#f0ad4e"}length属性 可以用来获取字符串的长度charAt() 可以返回字符串中指定位置的字符charCodeAt() 可以返回字符串中指定字符的字符编码（Unicode编码）formCharCode() 可以根据字符编码去获取字符concat() 可以用来连接两个或多个字符串indexOf() 可以从前向后检索一个字符串中是否含有指定内容,如果有则返回第一次出现的引索，如果不存在则返回-1，可以指定第二个参数指定开始查找的位置lastIndexOf() 该方法用法与indexOf()一样，不同的是该方法是从后往前找slice(开始截取索引,结束位置索引) 可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到的内容返回substring(开始截取索引,结束位置索引) 可以截取一个字符串，和slice()类似，不同的是该方法不能接收负值，负值默认变为0，还会自动调整参数的位置，如果第二个参数小于第一个参数，则自动交换位置substr(开始位置的索引,截取的长度) 可以用来截取字符串split(字符串作为参数) 可以将一个字符串拆分为一个数组，如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素toUpperCase() 将一个字符串转换为大写并返回toLowerCase() 将一个字符串转换为小写并返回{/callout}//创建一个字符串 var str = "Hello nihao"; console.log(str.length); console.log(str[0]); // 返回H var result = str.charAt(1); console.log(result); //返回e var result1 = str.charCodeAt(1); console.log(result1); //返回101 //可以根据字符编码去获取字符 var result2 = String.formCharCode(0x2692); console.log(result2); //返回 锤子 var result3 = str.concat("你好","再见"); console.log(result3); //返回 hello你好再见 var result4 = str.indexOf("e",); console.log(result4); //返回1 str = "absadksbdjka"; result = str.slice(1,2); console.log(result); result = str.substring(2,1); console.log(result); str = "abc,bcd,def,fgh"; result = str.split(""); console.log(Array.isArray(result)); console.log(result); str = "abcdefg"; result = str.toUpprCace(); str = "ABCDEFG"; result = str.toLowerCace(); console.log(result);七、正则表达式1、正则表达式的简介用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来语法： var 变量 = new RegExp("正则表达式","匹配模式";使用typeof检查正则对象，会返回object在构造函数中可以传递一个匹配模式作为第二个参数 i 忽略大小写g 全局匹配模式{alert type="success"}正则表达式的方法test() 可以用来检查一个字符串是否符合正则表达式的规则，符合返回true，否则返回false{/alert}//创建正则表达式的对象 var reg = new RegExp("a"); var str = "a"; var result = reg.test(str); console.log(result); console.log(reg.test("bcabc"));2、使用字面量创建正则表达式语法： var 变量 = /正则表达式/匹配模式; 使用字面量的方式创建正则表达式更加简单，但是使用构造函数创建更加灵活 var reg = new RegExp("a","i"); reg = /a/i; console.log(typeof reg); console.log(reg.test("abc")); //创建一个正则表达式，检查一个字符串中是否有a或b //使用|表示 或 的意思 reg = /a|b/; //创建一个正则表达式检查一个字符串在是否有字母 //[]里的内容也是 或 的关系 //[ab]=a|b //[a-z] 任意小写字母 //[A-Z] 任意大写字母 //[A-z] 任意字母 //[0-0] 任意数字 reg = /[A-z]/; //检查一个字符串中是否含有abc或adc或aec reg = /a[bde]c/; // [^ ] 除了方括号里的内容 reg = /[^ab]/; console.log(reg.test("bacd")); reg = /[0-9]/ console.log(reg.test(123));3、字符串和正则表达式相关的方法（1） split()将一个字符串拆分为一个数组该方法中可以传递一个正则表达式作为参数，则将会根据正则表达式去拆分字符串该方法即使不指定全局匹配，也会全部拆分var str = "1a2b3c4d5e6f7"; var result = str.split(/[A-z]/); console.log("result="+result);（2） search()可以搜索字符串中是否含有指定内容如果搜索到指定内容，则会返回第一次出现的索引，没有搜索到则返回-1可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串只会查找第一个，即使设置全局匹配也没用var str = "hello abc hello aec"; // 搜索字符串中是否含有abc或aec或afc var result = str.search(/a[bef]c/); console.log(result);（3） match()可以根据正则表达式从一个字符中将符合条件的内容提取出来{alert type="success"}默认情况下match只会找打第一个符合要求的内容，找到后就会停止检索可以设置正则表达式为全局匹配模式，这样会匹配到所以的内容可以为一个正则表达式设置多个匹配模式，且无顺序要求match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果{/alert}var str = "1a2b3c4d5e6f7A8B9C"; var result = str.match(/[a-z]/ig); console.log("result="+result[2]);（4） replace()可以将字符串中指定内容替换为新的内容,默认只会替换第一个语法： replace(被替换的内容,新的内容)var str = "1a2b3c4d5e6f7A8B9C"; // 搜索字符串中是否含有abc或aec或afc var result = str.replace(/a-z/gi,""); console.log(result);4、正则表达式语法（1） 量词：可以设置一个内容出现的次数语法：var reg = /元素{次数}/{alert type="success"}量词只对它前边的一个内容起作用{n} 正好出现n次{m,n} 出现m至n次{n,} 出现n次以上+ 出现至少1次，相当于{1,}* 出现0个或多个，相当于{0,}? 出现0次或1次，相当于{0,1}^ 表示开头$ 表示结尾如果在正则表达式中同时使用 ^ 和 $ 则要求字符串必须完全符合正则表达式{/alert}//创建一个正则表达式，检查一个字符串中是否含有aaa var reg = /a{3}/; reg = /(ab){3}/; reg = /b{3}/; reg = /ab{3}c/; reg = /ab{1,3}c/; reg = /ab{3,}c/; reg = /ab+c/; reg = /ab*c/; reg = /ab?c/; console.log(reg.test("abbbbbc")); //检查一个字符串是否以a开头 reg = /^a/; //匹配开头的a reg = /a$/; //匹配结尾的a console.log(reg.test("abbbbbca")); reg = /^a$/; console.log(reg.test("a"));例：创建一个正则表达式，用来检查一个字符串是否为一个合法的手机号/*手机号的规则 1 3 567890123（11位） 1、以1开头 2、第二位3-9任意数字 3、三位以后任意数字9个 ^1 [3-9] [0-9]{9}$ */ var phoneStr = "13567890123"; var phoneReg = /^1[3-9][0-9]{0}$/; console.log(phoneReg.test(phoneStr));（2）元字符{callout color="#b8cf89"}. 表示任意字符在正则表达式中使用作为转义字符\. 表示.\\ 表示\注意：使用构造函数时，由于他的参数是一个字符串，而 \ 是字符串中转义字符，如果要使用 \ 则需要使用 \\ 来代替{/callout}{alert type="success"}\w 任意字母、数字、_ ，相当于 [A-z0-9_]\W 除了字母、数字、_ ，相当于 [^A-z0-9_]\d 任意数字，相当于[0-9]\D 除了数字，相当于[/^0-9]\s 空格\S 除了空格\b 单词边界,用来标记一个独立的单词\B 除了单词边界{/alert}//检查一个字符串中是否含有. var reg = /\./; console.log(reg.test("@#ad.c")); var reg = /\\/; console.log(reg.test("b.\\")); console.log("b.\\");//输出 b.\ reg = new RegExp("\\."); console.log(reg); reg = /\w/; reg = /\W/; console.log(reg.test("_")); reg = /\s/; reg = /\S/; //创建一个正则表达式检查一个字符串中是否含有单词child reg = /\bchild\b/; console.log(reg.test("hello child")); //接收一个用户的输入 //var str prompt("请输入你的用户名:"); var str = " he llo "; //去除字符串中的空格 //去除空格就是使用""空串来替换空格 console.log(str); //str = str.replace(/\s/g,""); //去除开头的空格^ str = str.replace(/^\s*/,""); //去除结尾的空格$ str = str.replace(/\s*$/,""); //整合为一个表达式，使用|和g来进行全局匹配 str = str.replace(/^\s*|\s*$/g,""); console.log(str);5、邮件的正则表达式/* hello.nihao@abc.com.cn 任意字母数组下划线.任意字母下划线@任意字母数组.任意字母（2-5位）.任意字母（2-5位） */ // \w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5})(1,2) var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5})(1,2)$/; var email = "abc@abc.com.123"; console.log(emailReg.test(email));
-
『笔记』JavaScript基础学习笔记 3 this解析器（浏览器）在调用函数时每次都会向函数内部传递进一个隐含的参数1、this的定义{alert type="success"}这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象根据函数的调用方式的不同，this会指向不同的对象1、 以函数的形式调用时，this永远都是window2、 以方法的形式调用时，this就是调用方法的那个对象 {/alert}function fun(){ //console.log("a=" +a+",b="+b); console.log(this.name); } fun();//输出object.window //创建一个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //console.log(obj.sayName == fun);//输出true var name = "全局的name属性" obj.sayName();//输出object.object [name:"孙悟空",sayName:fun] //以函数形式调用,this时window fun(); //以方法的形式调用，this是调用方法的对象 obj.sayName(); obj2.sayName();2、this补充//创建一个name变量 var name = "全局"; //创建一个fun()函数 function fun(){ console.log(this.name); } //创建两个对象 var obj = { name:"孙悟空", sayName:fun }; var obj2 = { name:"沙和尚", sayName:fun }; //调用obj.sayName()时输出obj的名字 obj.sayName();//输出 孙悟空 obj2.sayName();//输出 沙和尚对象1、使用工厂方法创建对象可以使用该方法大批量创建对象使用工厂方法创建的对象使用的构造函数都是Object所以创建的对象都是Object类型，导致无法区分出多种不同类型的对象function createPerson(name,age,gender){ //创建一个新的对象 var obj = new Object(); //向对象中添加属性 obj.name = name; obj.age = age; obj.gender = gender; obj.sayName = function(){ alert(this.name); } //将新的对象返回 return obj; } var obj2 = createPerson("猪八戒",18,"男"); var obj3 = createPerson("白骨精",17,"女"); var obj4 = createPerson("蜘蛛精",16,"女"); console.log(obj2); console.log(obj3); console.log(obj4); obj2.sayName();2、构造函数{alert type="success"}构造函数就是一个普通函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写构造函数和普通函数的区别就是调用的方式不同，普通函数是直接调用， 而构造函数需要使用 new 关键字俩调用使用同一个构造函数创建的对象称为一类对象，也将一个构造函数称为一个类将通过一个构造函数创建的对象称为该类的实例 {/alert}构造函数的执行流程： {alert type="warning"}立刻创建一个新的对象将新建的对象设置为函数中的this逐行执行函数中的代码将新建的对象作为返回值返回{/alert}使用同一个构造函数创建的对象，称为一类对象，也将构造函数称为一个类{alert type="success"}通过一个构造函数创建的对象，称为该类的实例{/alert}使用instanceof可以检查一个对象是否是一个类的实例 语法： 对象 instanceof 构造函数 {alert type="success"}如果是返回true，否则返回false所有的对象都是Object的后代任何对象和Object作instanceof检查时都会返回true {/alert}//创建一个构造函数，专门用来创建Person对象 var per = new Person(); function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; this.sayNmae = function(){ alert(this.name); }; } var per = new Person("孙悟空",18，"男") var per = new Person("玉兔精",17，"女") console.log(per); console.log(per instanceof Person);this的情况： {alert type="error"}1、当以函数的形式调用时，this是window2、当以方法的形式调用时，谁调用方法this就是谁3、当以构造函数的形式调用时，this就是新创建的那个对象{/alert}3、构造函数修改在Person构造函数中，为每一个对象都添加了一个sayName方法//创建一个Person构造函数 function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = function(){ alert("Hello大家好，我是："+this.name); }; } //创建一个Person的实例 var per = new Person("孙悟空",18,"男"); var per = new Person("猪八戒",19,"男"); per.sayName();方法是在构造函数内部创建的，构造函数每执行一次就会创建一个新的sayName方法， 也就是所有实例的sayName都是唯一的会导致构造函数每执行一次就会创建一个新的方法可以将将sayName方法在全局作用域中定义（尽量不要将函数定义在全局作用域）{alert type="info"}将函数定义在全局作用域会污染全局作用域的命名空间而且定义在全局作用域中也很不安全{/alert}//创建一个Person构造函数 function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; //向对象中添加一个方法 this.sayName = fun; }; } //将sayName方法在全局作用域中定义 function fun(){ alert("Hello大家好，我是："+this.name); //创建一个Person的实例 var per = new Person("孙悟空",18,"男"); var per = new Person("猪八戒",19,"男"); per.sayName();4、原型对象原型 prototype 创建的每一个函数，解析器都会向函数中添加一个属性prototype{alert type="success"}这个属性对应着一个对象，这个对象就是原型对象如果函数作为普通函数调用prototype没有任何作用当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，可以通过 __proto__ 来访问该属性原型对象就相当于一个公共的区域，所以同一个类的实例都可以访问到这个原型对象可以将对象中共有的内容，统一设置到原型对象中当访问对象的一个属性时，它会先在对象自身找，如果有则直接使用，如果没有则会向原型对象中选择，如果找到会直接使用{/alert}function MyClass(){ } //向MyClass的原型中添加属性a MyClass.prototype.a = 123; //向MyClass的原型中添加一个方法 MyClass.prototype.sayHello = function(){ alert("hello"); }; var mc = new MyClass(); console.log(MyClass.prototype); console.log(mc.__proto__ == MyClass.prototype);//输出true console.log(mc.a);//输出123 //向mc中添加a属性 mc.a = "我是mc中的a"; console.log(mc.a);//输出 我是mc中的a mc.sayHello();//输出 弹窗hello创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中这样不用分别为每一个对象添加，就可以使每个对象都具有这些属性和方法，也不会影响到全局作用域例：//创建一个Person构造函数 function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; //向中添加一个方法 // this.sayName = fun; }; } //向原型中添加sayName方法 Person.prototype.sayName = function(){ alert("Hello大家好，我是："+this.name); //创建一个Person的实例 var per = new Person("孙悟空",18,"男"); var per = new Person("猪八戒",19,"男"); per.sayName(); // 输出弹窗补充： {alert type="success"}使用 in 检查对象中是否含有某个属性时，如果对象中没有单数原型中有，也会返回true可以使用对象的 hasOwnProperty() 来检查对象自身是否含有该属性使用该方法只有当对象自身含有该属性时才会返回true原型对象也是对象，所以他也有原型 当使用一个原型一个对象的属性或方法时，会先在自身中寻找，自身中如果有则直接使用，如果没有则去原型对象中寻找，如果原型对象中有则使用，如果没有则去原型的原型中寻找，直到找到Object对象的原型 Object对象的原型没有原型，如果在Object的原型中依然没有找到则返回undefined {/alert}//创建一个构造函数 function MyClass(){ } //向MyClass的原型中添加一个name属性 MyClass.prototype.name = "我是原型中的name"; var mc = new MyClass(); console.log(mc.name); //使用in检查对象中是否含有某个属性时，如果对象中没有单数原型中有，也会返回true console.log("name" in mc); //输出 true //可以使用对象的hasOwnProperty()来检查对象自身是否含有该属性 //使用该方法只有当对象自身含有该属性时才会返回true console.log(mc.hasOwnProperty("name"));//返回false console.log(mc.hasOwnProperty("hasOwnProperty"));//返回false console.log(mc.__protp__.hasOwnProperty("hasOwnProperty"));//输出false console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));//输出true5、toString{alert type="success"}当直接在页面中打印一个对象时，实际上是输出的对象的 toString() 方法的返回值如果希望在输出对象时不输出 [object Object] ，可以为对象添加一个 toString() 方法{/alert}function Person(name,age,gender){ this.name = name; this.age = age; this.gender = gender; } //修改Person原型中的toString Person.prototype.toString = function(){ return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]" }; //创建一个Person实例 var per = new Person("孙悟空",18,"男"); var per2 = new Person("猪八戒",28,"男"); //console.log(per); //console.log(per.toString);//与上面相同 /*输出Person[name=孙悟空,age=18,gender=男] per.toString = function(){ return "Person[name="+this.name",age="+this.age",gender="+this.gender"]" }; */ var result = per.toString(); //console.log("result = "+result); //console.log(per.__pro__.__pro__.hasOwnProperty("toString"));//返回true console.log(per); console.log(per2);6、垃圾回收（GC）当一个对象没有任何的变量或者属性对它进行引用时，将永远无法操作该对象，此时这种对象就是一个垃圾这种对象过多会占用大量的内存空间，导致程序运行过慢，所以这种垃圾必须进行清理{alert type="success"}程序运行过程中会产生垃圾，垃圾积攒过多以后，会导致程序运行的速度过慢所以需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁不需要也不能进行垃圾回收的操作， 要做的只是将不再使用的对象设置null即可 {/alert}//创建一个对象 var obj = new Object(); //对对象进行各种操作。。。。 obj = null;{nextPage/}内建对象对象的类型：内建对象、宿主对象、自定义对象一、数组1、数组（Array）的简介{alert type="success"}数组也是一个对象，和普通对象功能类似，也是用来存储一些值的不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素的索引（index）：从0开始的整数就是索引数组的存储性能比普通对象要好 ，所以在开发中经常使用数组来存储一些数据{/alert}向数组中添加元素，语法： 数组[索引] = 值读取数组中的元素，语法： 数组[索引]{alert type="error"}如果读取不存在的索引，不会报错而是返回undefined可以使用 length 属性来获取数组的长度（元素的个数），语法： 数组.length对于连续的数组，使用 length 属性可以获取数组的长度（元素的个数）对于非连续的数组，使用 length 属性会获取数组的最大索引+1尽量不要创建非连续的数组,会空出不存在的元素的位置，占用内存向数组的最后一个位置添加元素，语法： 数组[数组.length] = 元素; {/alert}//创建数组对象 var arr = new Array(); //使用typeof检查一个数组时，会返回Object console.log(typeof arr); //向数组中添加元素 arr[0] = 10; arr[1] = 33; arr[2] = 22; arr[3] = 25; //arr[10] = 21; //arr[100] = 210; //console.log(arr[3]);//输出undefined //获取数组的长度 console.log(arr.length); console.log(arr); //修改length /* 如果修改的length大于原长度，则会空出多出的元素 如果修改的length小于原长度，则会删除多出的元素 */ //arr[10] = 21; arr[2] = 22; //向数组的最后一个位置添加元素 arr[arr.length] = 20; console.log(arr.length); console.log(arr);2、数组字面量使用字面量来创建数组，语法：[]{alert type="success"}使用字面量创建数组时，可以在创建时就指定数组中的元素使用构造函数创建数组时，也可以同时添加元素，将要添加的元素作为构造函数的参数传递元素之间使用 , 隔开数组中的元素可以是任意的数据类型，也可以是对象，亦可以是一个函数{/alert}//var arr = new Array(); /* 无意义 arr[0] = 123; arr.hello = "abc"; console.log(arr.hello); */ //使用字面量来创建数组 //var arr = []; var arr = [1,2,3,4,5,6,10]; console.log(arr[1]); console.log(arr.length); var arr = new Array(10,20,30); console.log(arr2); //创建一个数组中只有一个元素10 arr = [10]; //创建一个长度为10的数组 arr2 = new Array(10); console.log(arr[0]); console.log(arr2); //数组中的元素可以是任意的数据类型 arr = [10,"hello",true,null,undefined]; var obj = {name:"孙悟空"}; arr[arr.length] = obj; arr = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}] console.log(arr[1].name); arr = [function(){alert(1)},function({alert(2)})]; //console.log(arr); arr[0](); //数组中可以放数组，如下这种数组称为二维数组 arr = [[1,2,3],[3,4,5],[5,6,7]]; console.log(arr[1]);3、数组的方法（1） push() ：语法： 数组.push(参数一,参数二,参数N); 可以向数组的末尾添加一个或多个元素，并返回数组新的长度{/alert}{alert type="success"}可以将要添加的元素作为方法的参数传递，这些元素将会自动添加到数组的末尾该方法会将数组新的长度作为返回值返回{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精"); console.log(arr); console.log("result = "+result); （2） pop() :语法： 数组.pop(); 该方法可以删除啊数组的最后一个元素，并将被删除的元素作为返回值返回，删除几次就写几次//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); arr.pop(); arr.pop(); console.log(arr); console.log("result = "+result); （3） unshift()语法： 数组.unshift(参数一,参数二，参数N); {alert type="success"}向数组开头添加一个或多个元素，并返回新的数组长度向前边插入元素以后，其他的元素索引会依次调整{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); arr.unshift("牛魔王","二郎神"); console.log(arr); console.log("result = "+result);（4） shift()语法： 数组.shift(); 可以删除数组的第一个元素，并将被删除的元素作为返回值返回,要删除几个就写几个//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); arr.shift(); console.log(arr); result = arr.shift(); console.log("result = "+result);（5） slice()语法： 数组.slice(参数一,参数二); 可以从已有的数组中返回选定的元素参数：截取开始的位置的索引，包含开始索引截取结束的位置的索引，不包含结束索引{alert type="success"}该方法不会改变原数组，而是将截取到的元素封装到一个新的数组中返回第二个参数可以省略不写，此时会截取从开始索引以后的所有元素索引也可以传递一个负值，如果传递负值则从后往前计算，例：-1：倒数第一个{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"]; var result = arr.slice(0,2); console.log(result);（6） splice()语法： 数组.splice(参数一,参数二,参数三,参数N); 可以用于删除数组中的指定元素，并向数组中添加新的元素参数：第一个：开始的位置的索引第二个：删除的数量第三个及以后的参数可以传递一些新的元素，这些元素将会自动插入到开始位置的索引前面{alert type="success"}使用该方法会改变原数组，会将指定元素从原数组中删除，并将被删除的元素作为返回值返回{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"]; var result = arr.splice(1,0,"牛魔王","红孩儿"); console.log(result);（7）数组去重练习//创建一个数组 var arr = [1,2,3,2,1,3,4,2,5]; //去除数组中重复的数字解法：//创建一个数组 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个函数 for(var i=0; i<arr.lenth; i++){ //console.log(arr[i]); for(var j=i+1; j<arr.lenth; j++){ //console.log(arr[j]); //判断两个元素的值是否相等 if(arr[i] == arr[j]){ //如果相等则证明出现了重复的元素，删除j对应的元素 arr.splice(j,1); //当删除了当前j所在的元素以后，后面的元素会自动补位 //此时将不会再比较这个元素，需要再比较一次j所在位置的元素 //当删除一个元素后，使j自减 j--; } } } console.log(arr);（8） concat()语法： 数组.concat(); 连接两个或多个数组，并将新的数组返回{alert type="success"}该方法不会改变原数组，可以添加数组，也可以添加元素{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr2 = ["二郎神","太乙真人","太上老君"]; var result = arr.concat(arr2,arr3,"牛魔王"); console.log(result);（9） join()语法： 数组.join("连接符"); 该方法可以将数组转换为一个字符串{alert type="success"}该方法不会改变原数组，而是将转换后的字符串作为结果返回在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符如果不指定连接符，则默认使用 , 连接{/alert}//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; var result = arr.join("-"); console.log(typeof result);//输出string console.log(result);//输出 孙悟空-猪八戒-沙和尚（10） reverse()语法： 数组.reverse(); 该方法用来反转数组（前边的去后边，后边的去前边）该方法会直接修改原数组//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; arr.reverse(); console.log(arr);//输出 沙和尚,猪八戒,孙悟空（11） sort()语法： 数组.sort(); 该方法可以用来对数组中的元素进行排序该方法会影响原数组，默认会按照Unicode编码进行排序{alert type="error"}使用sort()排序时，即使对于纯数字进行排序，也会按照Unicode编码来排序，可能会得到错误的结果可以指定排序的规则可以在sort()添加一个回调函数，来制定排序规则，回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数浏览器会根据回调函数的返回值来决定元素的顺序 1. 如果返回一个大于0的值，则元素交换位置2. 如果返回一个小于0的值，则元素位置不变 3. 如果返回一个等于0的值，则认为两个元素相等，也不交换位置 {/alert}//创建一个数组 var arr = [5,4,2,1,3,6,8,7]; arr.sort(); console.log(arr);//输出 a,b,d //arr.reverse(); console.log(arr);//输出 d,b,a arr.sort(function(a,b){ // if(a>b){ // return 1; // }else if(a<b){ // return -1; // }else{ // return 0; // } //升序排列 return a - b; //降序排列 return b - a; }); console.log(arr);4、数组的遍历遍历数组：就是将数组中的所有元素都取出来//创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"]; /*console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); */ for(var i=0; i<arr.length; i++){ console.log(arr[i]); }5、数组练习创建一个函数，可以将perArr中的满18岁的Person提取出来，然后封装到一个新的数组中并返回，arr 形参：要提取信息的数组function Person(name,age,gender){ this.name = name; this.age = age; } //修改Person原型中的toString Person.prototype.toString = function(){ return "Person[name="+this.name+",age="+this.age+"]" }; //创建一个Person对象 var per = new Person("孙悟空",18); var per2 = new Person("猪八戒",28); var per3 = new Person("红孩儿",8); var per4 = new Person("蜘蛛精",16); var per5 = new Person("二郎神",38); //将这些person对象放入到一个数组中 var perArr = [per,per2,per3,per4,per5]; /*创建一个函数，可以将perArr中的满18岁的Person提取出来，然后封装到一个新的数组中并返回 arr 形参，要提取信息的数组 */ function getAdult(arr){ //创建一个新的数组 var newArr = []; //遍历arr，获取arr中的Person对象 //判断Person对象的age是否大于等于18 //如果大于等于18，则将这个对象添加到newArr中 //将新的数组返回 return newArr; } var result = getAdult(perArr); console.log(result);解法：//遍历arr，获取arr中的Person对象 for(var i=0; i<arr.length; i++){ var p = arr[i]; //判断Person对象的age是否大于等于18 if(p.age>=18){ //如果大于等于18，则将这个对象添加到newArr中 newArr.push(p); } }6、 forEach()一般都是使用for循环遍历数组，JS中还提供了一个 forEach() 方法来遍历数组，但是只支持IE8以上浏览器，所以需要兼容IE8尽量不要使用该方法{alert type="success"}forEach()方法需要一个函数作为参数这种函数有我们创建单数不由我们调用的，称为回调函数数组中有几个元素，函数就会执行几次，每次执行时浏览器会将遍历到的元素以实参的形式传递进来，可以定义形参来读取这些内容浏览器会在回调函数中传递三个参数第一个参数：当前正在遍历的元素，第二个参数：当前正在遍历的元素的索引，第三个参数：当前正在遍历的数组 {/alert}var arr = ["孙悟空","猪八戒","沙和尚","唐僧","玉兔精"]; arr.forEach(function(value,index,obj){ console.log("value ="+value); console.log("index ="+index); console.log("obj ="+obj); });
-
『笔记』JavaScript基础学习笔记 2 对象JS中的数据类型{alert type="success"}String 字符串Number 数值Boolean 布尔值Null 空值Undefined 未定义以上五种类型属于基本类型，只要不是以上五种，都是对象Object 对象{/alert}基本数据类型都是单一的值，值和值之间没有任何联系在JS中用来表示一个人的信息（name gender age）var name="张三"; var gender="男"; var age="18";如果使用基本数据类型，创建的变量都是独立的，不能成为一个整体对象属于一种复合的数据，在对象中可以保存多个不同数据类型的属性一、对象的分类1、内建对象{alert type="success"}由ES标准中定义的对象，在任何的ES的实现中都可以使用比如：Math String Number Boolean Function Object……{/alert}2、宿主对象{alert type="success"}由JS的运行环境提供的对象，主要由浏览器提供的对象比如：BOM(浏览器对象模型) DOM(文档对象模型){/alert}console.log(); document.write(); //都是由浏览器提供3、自定义对象{alert type="success"}由开发人员自己创建的对象{/alert}二、创建对象1、 使用 new 关键字调用的函数，是构造函数constructor2、 构造函数是专门用来创建对象的函数3、 使用typeof来检查一个对象时，会返回object{alert type="warning"}在对象中保存的值称为属性向对象添加属性，语法： 对象.属性名=属性值; {/alert}var obj = new Object(); //console.log(typeof obj); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj);{alert type="warning"}读取对象中的属性语法： 对象.属性名; 如果读取对象中没有的值，不会报错而是会返回undefined{/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; console.log(obj.name);//输出“张三”{alert type="warning"}修改对象中的属性语法： 对象.属性名 = 新值; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //修改obj的name属性值 obj.name="孙悟空" console.log(obj.name);//输出“孙悟空”{alert type="warning"}删除对象中的属性语法： delete 对象.属性名; {/alert}var obj = new Object(); //向obj添加一个name属性 obj.name="张三"; //向obj添加一个gender属性 obj.gender="男"; //向obj添加一个age属性 obj.age="18"; //删除obj的name属性值 delete obj.name; console.log(obj.name);//没有该值，输出undefined三、属性名和属性值1、属性名对象的属性名不强制要求遵守标识符的规范尽量按照标识符的规范设置{alert type="success"}如果使用特殊的属性名，不能采用.的方式来操作需要使用另一种方式，语法： 对象["属性名"]=属性值;读取时也需要采用这种方式使用[]这种形式去操作属性更加灵活在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性{/alert}var obj = new Object(); obj["123"]=567; obj["nihao"]="你好"; var n = "nihao" console.log(obj["123"]); console.log(obj[n]); 2、属性值JS对象的属性值，可以是任意的数据类型， 甚至也可以是一个对象 {alert type="warning"}in 运算符通过该运算符可以检查一个对象中是否含有制定的属性，有返回true，没有则返回false语法："属性名" in 对象{/alert}var obj = new Object(); obj.name="孙悟空"; obj.test= true; obj.test= null; obj.test= undefined; var obj2 = new Object(); obj2.name="猪八戒"; obj.test=obj2; console.log(obj.test);//返回 name=“猪八戒” console.log(obj.test.name);//返回 “猪八戒” console.log("name" in obj);//返回true四、基本、引用数据类型（一）基本数据类型String Number Boolean null Undefined{alert type="success"}JS中的变量都是保存在栈内存的基本数据类型的值直接在栈内存中存储值与值之间是独立存在的，修改一个变量不会影响其他变量{/alert}var a = 123; var b = a; a++; console.log("a"= +a); //输出为124 console.log("b"= +b); //输出为123（二）引用数据类型对象：Object{alert type="success"}JS中的变量都是保存在栈内存的对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用当通过一个变量修改属性时，另一个也会受到影响{/alert}var obj = new Object(); obj.name = "孙悟空"; var obj2 = obj; console.log(obj.name);//输出 孙悟空 console.log(obj2.name);//输出 孙悟空 //修改obj的name属性 obj.name = "猪八戒"; console.log(obj.name);//输出 猪八戒 console.log(obj2.name);//输出 猪八戒 obj2 = null; console.log(obj);//输出 Object console.log(obj2);//输出 null{alert type="success"}当比较两个基本数据类型的值时，就是比较他们的值当比较两个引用数据类型时，是比较对象的内存地址 如果两个对象一模一样，但是地址不同，它也会返回false{/alert}var a = 10; var b = 10; console.log(a == b); // 返回true var obj3 = new Object(); var obj4 = new Object(); obj3.name = "沙和尚"; obj4.name = "沙和尚"; console.log(obj3 == obj4); // 返回false五、对象字面量使用对象字面量，可以在创建对象时，直接指定对象的属性语法： {属性名:属性值,属性名:属性值....} {alert type="success"}对象字面量的属性名可以加引号也可以不加， 建议不加如果要使用一些特殊的名字，则必须加引号属性名和属性值是一组一组的名值对结构名和值之间使用冒号 : 连接多对名值之间使用逗号 , 隔开如果一个属性之后没有其他属性时， 就不要写逗号 , 了 {/alert}//创建一个对象 //var obj = new Object(); //使用对象字面量来创建一个对象 var obj = {}; obj.name = "孙悟空"; var obj2 = { name:"猪八戒", age:28, gender:"男" test:{ name:"沙和尚", age:27 } }; console.log(obj2.test);//输出name:沙和尚 age:27函数一、函数的简介函数（function）：也是一个对象{alert type="warning"}普通对象只能封装属性函数对象可以封装一些功能（代码），在需要时可以执行这些功能函数可以保存一些代码在需要时调用使用typeof检查一个函数时会返回function{/alert}1、使用构造函数的方式来创建函数{alert type="success"}可以将要封装的代码以字符串的形式传递给构造函数封装到函数中的代码不会立即执行函数中的代码会在函数调用的时候执行调用函数，语法： 函数对象() 当调用函数时，函数中封装的代码会按照顺序执行在实际开发中很少使用构造函数来创建一个函数 {/alert}var fun = new Function( "console.log('这是我的第一个函数');" ); fun.hello = "你好"; console.log(fun.hello);//输出 你好 fun();//输出 这是我的第一个函数2、使用函数声明来创建一个函数语法：中括号可选，可不写function 函数名([形参1，形参2，形参n]){ 语句... }function fun2(){ console.log("这是我的第二个函数"); alert("哈哈哈哈"); document.write("你好"); } fun2();//按顺序输出3个函数3、使用函数表达式来创建一个函数语法：var 函数名 = function([形参1,形参2,形参n]){ 语句... }将一个匿名函数赋值给一个变量var fun3 = function (){ console.log("这是一个匿名函数"); } fun3();二、函数的参数1、形参与实参可以在函数的()中来指定一个或多个形参（形式参数）{alert type="success"}多个形参之间使用 , 隔开，声明形参就相当于在函数内部声明了对应的变量，但是 并不赋值在函数调用时，可以在()中指定实参（实际参数）实参将会赋值给函数中对应的形参调用函数时解析器不会检查实参的类型（可能会存在非法参数）调用函数时解析器也不会检查实参的数量（多余实参不会被赋值）函数的实参可以是任意的数据类型如果实参的数量少于形参的数量，则没有对应实参的形参将会是undefined{/alert}function sum(){ var a = 1; var b = 1; console.log(a+b); } sum(); // 输出 求和值2 //a,b都是形参 function sum (a,b){ cosole.log(a+b+c); } //1,2都是实参，实参可以是任意数据类型 sum(1,2);//输出 求和值3 //3没有对应的形参，将变为undefined sum(1,2,3);//输出 求和值null2、函数的返回值可以使用return来设置函数的返回值语法： return 值{alert type="success"}return后的值将会作为函数的执行结果返回可以定义一个变量来接受该结果在return后的语句不会再执行如果return语句后不跟任何值就相当于返回一个undefined函数中不写return也会返回undefined{/alert}function sum(a,b,c){ // alert(a+b+c); var d = a+b+c; return d; //return; alert("hello"); } //调用函数 // sum(1,2,3) //变量result的值就是函数的执行结果 //函数返回什么result的值就是什么 var result = sum(4,7,8); console.log("result="+result);//输出 求和值193、实参的类型例1： 定义一个函数，判断一个数字是否为偶数，如果是返回true，否则返回falsefunction isOu(num){ if(unm % 2 == 0){ return true; }else{ return false; } //相等于上面的式子 return num % 2 == 0 ; } var result = isOu(2); console.log("result = "+result);//输出true例2： 定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果function mianji(r){ return 3.14*r*r; } var result = mianji(10); console.log("result = "+result);//输出314例3： 创建一个函数，可以在控制台输出一个人的信息实参可以是任意的数据类型，也可以是一个对象当参数过多时，可以将参数封装到一个对象中，然后通过对象传递function sayHello(o){ console.log("我是"+o.name+",今年我"+o.age+"岁了，"+"我是一个"+o.gender+"人，我住在"+o.address); } //创建一个对象 var obj = { name:"孙悟空", age:18, address:"花果山", gender:"男" }; sayHello(obj);例4： 实参可以是一个对象，也可以是一个函数{alert type="warning"}fun(sayHello) 函数对象，相当于直接调用函数对象fun(sayHello()) 调用函数，相当于使用函数的返回值{/alert}function sayHello(o){ console.log("我是"+o.name+",今年我"+o.age+"岁了，"+"我是一个"+o.gender+"人，我住在"+o.address); } //创建一个对象 var obj = { name:"孙悟空", age:18, address:"花果山", gender:"男" }; function fun(a){ console.log("a = "+a);//输出sayHello整个函数 a(obj);//输出sayHello(obj);的结果 } fun(sayHello); fun(sayHello());//输出函数sayHello的返回值4、返回值的类型function fun(){ alert("函数要执行了")； for(var i=0; i<5; i++){ console.log(i); if(i == 2){ break;//break可以退出当前循环 continue;//用于跳过当次循环 return;//可以结束整个函数 } console.log(i); } alert("函数执行完了"); } fun();{alert type="warning"}返回值可以是任意数据可以是对象，也可以是一个函数{/alert}function fun2(){ //var obj = {name:"沙和尚"}; //return obj; return {name:"沙和尚"}; } var a = fun2(); console.log("a="+a.name); function fun3(){ //在函数内部再声明一个函数 function fun4(){ alert("我是fun4"); } //fun4(); return fun4;//fun4函数作为返回值返回 return fun4(); } //a = fun3(); //console.log(a); //a(); fun3()();5、立即执行函数{alert type="warning"}h函数定义完成立即被调用，这种函数叫做立即执行函数立即执行函数一般只会执行一次{/alert}(function(){ alert("我是一个匿名函数"); })(); (function(a,b){ console.log("a = "+a); console.log("b = "+b); })(123,456);6、对象的方法对象的属性值可以是任意数据内心，也可以是一个函数{alert type="warning"}如果一个函数作为一个对象的属性保存，那么这个函数就是这个对象的方法调用这个函数就是调用对象的方法（method）但是它只是名称上的区别，没有其他区别{/alert}var obj = new Object(); obj.name = "孙悟空"; obj.age = 18; obj.sayName function(){ console.log(obj.name); }; function fun(){ console.log(obj.name); } //console.log(obj.sayName); //调用obj的sayName方法 obj.sayName(); //调用函数 fun(); var obj2 = { name:"猪八戒", age:18, sayNme:function(){ console.log(obj2.name); } }; obj2.sayName();7、枚举对象中的属性使用 for...in 语句来枚举对象中的属性语法：for(var 变量 in 对象){ }{alert type="success"}for...in 语句，对象中有几个属性，循环体就会执行几次每次执行时会将对象中的一个属性的名字赋值给变量{/alert}var obj = { name:"孙悟空", age:18, gender:"男", address:"花果山" }; //[]可以传变量 for(var n in obj){ console.log("属性名:"+n); console.log("属性值:"+obj[n]); }三、作用域{alert type="success"}作用域指一个变量的作用的范围在JS中共有两种作用域1、全局作用域2、函数作用域（区域作用域） {/alert}（一）全局作用域{alert type="success"}直接编写在script标签中的Js代码，都在全局作用域全局作用域在页面打开时创建，在页面关闭时销毁在全局作用域中有一个全局对象window（代表的是一个浏览器的窗口，由浏览器创建，可以直接使用）在全局作用域中，创建的变量都会作为window对象的属性保存在全局作用域中，创建的函数都会作为window对象的方法保存全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到{/alert}function fun(){ var a = 123; } fun(); console.log(a);//报错 var a = 10; var b = 20; var c = "hello"; console.log(window.c);//输出hello function fun(){ console.log("我是fun函数"); } window.fun();//与下面效果相同 fun();1、变量的声明提前{alert type="success"}使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值）但是如果声明变量时不使用var关键字，则变量不会被声明提前{/alert}var a; console.log("a = "+a); var a = 123;2、函数的声明提前{alert type="success"}使用函数声明形式创建的函数function 函数(){},它会在所有的代码执行之前就被创建， 可以在函数声明前调用函数使用函数表达式创建的函数，不会被声明提前，所有不能在声明前调用{/alert}var fun();//已经赋值 fun();//输出我是fun函数 var fun2;//没有赋值 fun2();//报错，不存在fun2()函数 //函数声明，会被提前创建 function fun(){ console.log("我是fun函数"); } //函数表达式，不会被提前创建 var fun2 = function(){ console.log("我是fun2函数"); }（二）函数作用域（区域作用域）{alert type="success"}调用函数时创建函数作用域，函数执行完毕后函数作用域销毁每调用一次函数，就会创建一个新的函数作用域，他们时=是互相独立的在函数作用域中可以访问到全局作用域的变量，在全局作用域无法访问到函数作用域的变量当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有就向上一级作用域中寻找，直到找到全局作用域，如果全局作用域也没用就会报错在函数中想要访问全局域中的变量可以使用window对象{/alert}var a = 10; function fun(){ var a = "我是函数中的变量a"; var b = 20; //console.log("a = "+a); function fun2(){ console.log("a = "+window.a)； } fun2(); } fun(); console.log("a = "+a);在函数作用域中也有声明提前的特性{alert type="warning"}使用var关键字声明的变量，会在函数中所有代码执行前被声明(不会被赋值)函数声明也会在函数中所有代码执行前被创建在函数中不使用var声明的变量都会变成全局变量定义形参就相当于在函数作用域中声明了变量{/alert}function fun3(){ fun4(); console.log(a); var a = 35; function fun4(){ alert("我是fun4"); } } fun3(); var c = 33; function fun5(){ console.log("c = "+c); var c = 10; //没有var关键字，则会变为全局变量，相当于window.d d = 100; } fun5(); //在全局输出c console.log("d = "+d); //定义形参就相当于在函数作用域中声明了变量 function fun6(e){ alert(e); } fun6();四、debugalert(c); var a = 10; var b = "hello"; c = true; function fun(){ alert("hello"); } var d = 35;使用浏览器F12检查功能进行debug检查
-
『原创』『教程』首页及文章页滚动广告栏 前言因为之前在很多网站上都能看到广告，虽然但是，这对很多博主来说也是一笔额外的收入，我一直是入不敷出！:@(吐血倒地) 然后我看到了执念博客的首页广告栏，虽然曝光确实大，但是用户体验极其不好，因为要翻很多广告才能翻到文章，就像这样：所以我就想到了滚动广告，一个广告的位置，能够显示多条广告成果展示{tabs}{tabs-pane label="首页"}{/tabs-pane}{tabs-pane label="文章页"}{/tabs-pane}{/tabs}教程开始灵感及相关代码来自于Joe主题的首页轮播图一、添加后台打开 functions.php 添加以下代码{tabs}{tabs-pane label="代码"}$JADPost = new Typecho_Widget_Helper_Form_Element_Textarea( 'JADPost', NULL, NULL, '文章页顶部广告', '介绍：用于设置文章页顶部广告 <br /> 格式：广告图片 || 跳转链接 （中间使用两个竖杠分隔）<br /> 注意：如果您只想显示图片不想跳转，可填写：广告图片 || javascript:void(0) <br /> 其他：一行一个，一行代表一个轮播广告图' ); $JADPost->setAttribute('class', 'joe_content joe_post'); $form->addInput($JADPost);{/tabs-pane}{tabs-pane label="代码位置"}因为有位小伙伴放错了位置，所以再贴一张图{/tabs-pane}{/tabs}这是文章页的代码，因为首页广告主题自带了二、添加滚动广告栏{tabs}{tabs-pane label="首页"} 因为首页已经有广告位了，所以直接替换就行了将主题 index.php 的以下代码直接替换为新代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="新代码" open}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/tabs-pane}{tabs-pane label="文章页"}文章页直接在主题的 post.php 文件内合适的地方加入以下代码{collapse}{collapse-item label="代码位置" open}{/collapse-item}{collapse-item label="代码" open}隐藏内容，请前往内页查看详情{/collapse-item}{/collapse}{/tabs-pane}{/tabs}三、修改广告栏样式{tabs}{tabs-pane label="首页"} 直接在 Joe/assets/css 打开 joe.index.min.css 然后在最后添加以下代码.joe_index__ad .swiper-container{height: 180px!important;border-radius: var(--radius-inner);}.joe_index__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_index__ad .swiper-container{height: 120px!important}.joe_index__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{tabs-pane label="文章页"}直接在 Joe/assets/css 打开 joe.post.min.css 然后在最后添加以下代码.joe_post__ad .swiper-container{height: 180px!important;margin-top:15px;border-radius: var(--radius-inner);}.joe_post__ad .swiper-container .icon{position:absolute;z-index:1;top:10px;right:10px;font-size:12px;background:rgba(0,0,0,0.25);padding:2px 5px;border-radius:2px;color:#ebebeb;pointer-events:none}@media (max-width: 768px){.joe_post__ad .swiper-container{height: 120px!important}.joe_post__ad .swiper-container .image{height: 120px;object-fit: cover;border-radius: var(--radius-inner);}}{/tabs-pane}{/tabs}四、添加滚动效果{tabs}{tabs-pane label="首页"}首页因为引入了滚动效果，所有不需要设置，会直接调用首页轮播图的滚动效果但是会根据首页轮播图的滚动方式滚动，效果不太好，暂时没想到比较好的解决方法{/tabs-pane}{tabs-pane label="文章页"}首先在主题的 post.php 文件内 <head>标签内加入以下代码<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css" /> <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>然后再在 Joe/assets/js 打开 joe.post_page.min.js 然后在最后添加以下代码if(0!==$(".joe_post__ad .swiper-container").length){let e="vertical";new Swiper(".swiper-container",{keyboard:!1,direction:e,loop:!0,autoplay:!0,mousewheel:!0,pagination:{el:".swiper-pagination"},})}添加位置{/tabs-pane}{/tabs}教程结束大功告成，快刷新你的网站看看效果吧！
-
『笔记』JavaScript基础学习笔记 1 前言学无止境，继续加油！代码块 {alert type="success"}程序是由一条一条语句构成的语句是按照自上而下的顺序一句一句执行的在JS中可以使用 {} 来为语句进行分组同一个 {} 中的语句称为一组语句，也叫代码块 代码块要么都执行，要么都不执行在代码块的后面不需要再编写 ; 结束JS中的代码块只具有分组的作用 ，没有其他用途 代码块内部的内容，在其外部是完全可见{/alert}{ alert("hello"); document.write('class="link"') } { var a = 10; alert("hello"); document.write('class="link"') } console.log("a = "+a)流程控制语句 通过流程控制语句可以控制程序执行流程，使程序可以根据一定的条件来选择执行一、条件判断语句在执行某个语句之前进行判断，成立才会执行语句，不成立则语句不执行 注意：条件判断语句不要使用赋值运算符 = 否则会直接返回true（一）语法一：if语句if(条件表达式){ 语句… }{alert type="success"}if 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后的语句，为false则不会执行if后的语句if语句只能控制紧随其后的那个语句 如果希望if语句可以控制多条语句，可以将这些语句放到一个代码块内代码块不是必须的，但是开发中建议编写,哪怕只有一条语句{/alert}var a = 20; if(a > 10 && a <= 20){ alert("a比10大,并且小于等于20"); }（二）语法二：if…else语句if(条件表达式){ 语句… }else{ 语句… }{alert type="success"}if…else 语句在执行时，会先对条件表达式进行求值判断，如果条件表达式的值为true则执行if后的语句，为false则会执行else后的语句{/alert}var age = 60; if(a >= 60){ alert("你已经退休了"); }else{ alert("你还要继续工作") }（三）语法三：if…else if…else语句if(条件表达式){ 语句… }else if{ 语句… }else if{ 语句… }else{ 语句… }{alert type="success"}if…else if…else 语句执行时，会从上到下依次对条件表达式进行求值判断 如果值为true则执行当前语句，如果值为false则继续向下判断只会有一个代码块被执行，一旦执行语句会直接结束{/alert}var age = 60; if(a > 100){ alert("活着挺没意思"); }else if(a > 60){ alert("你该退休了"); }else if(a > 50){ alert("你还要继续工作"); }else if(a > 17){ alert("你已经成年了"); }else{ alert("你还只是个孩子"); }4、prompt()函数{alert type="warning"}可以在页面弹出一个带有文本框的提示框用户可以在文本框中输入内容，该函数需要一个字符串作为参数prompt()函数的返回值都是字符串string类型{/alert}var score = prompt("参数"); alert(score);（四）实例练习：1、练习一输入0-100的成绩后进行判断并输出相应的结果var score = prompt("请输入成绩"); // 排除小于0大于100的值，同时排除非数字number类型的值 if(score >100 || score < 0 || isNaN(score)) { alert("毙了"); }else{ if(score ==100) { alert("奖励BMW"); }else if(score >= 80){ alert("奖励手机"); }else if(score >= 60){ alert("奖励参考书"); }else{ alert("啥都没有"); } }2、练习二输入三个数据后进行判断并输出相应的结果var height = prompt("请输入身高（cm）"); var money = prompt("请输入财富（万）"); var face = prompt("请输入颜值（px）"); if(height >180 && money > 1000 && face > 500) { alert("一定嫁"); }else if(height >180 || money > 1000 || face > 500) { alert("将就一下"); }}else{ alert("坚决不嫁"); }3、练习三输入三个数据后进行排序并从小到大输出var num1 = +prompt("请输入第一个数"); var num2 = +prompt("请输入第二个数"); var num3 = +prompt("请输入第三个数"); if(num1 < num2 && num1 < num3) { // num1最小，比较num2和num3 if(num2<num3){ alert(num1 + "，" +num2 +" ，"+num3); }else{ alert(num1 + "，" +num3 +" ，"+num2); } }else if(num2 < num1 && num2 < num3) { // num2最小，比较num1和num3 if(num1<num3){ alert(num2 + "，" +num1 +" ，"+num3); }else{ alert(num2 + "，" +num3 +" ，"+num1); } }else{ // num3最小，比较num1和num2 if(num1<num2){ alert(num3 + "，" +num1 +" ，"+num2); }else{ alert(num3 + "，" +num2 +" ，"+num1); } }二、条件分支语句条件分支语句也叫 switch 语句（一） switch 语法switch(条件表达式){ case 表达式: 语句… break; case 表达式: 语句… break; default: 语句… break; }(1)switch…case 语句执行时，会依次将case后的表达式的值和switch后的表达式的值进行全等比较{alert type="success"}① 如果比较结果为true则从当前case处开始执行代码 ② 如果比较结果为false则从继续向下比较 ③ 如果所有的比较结果都为false，则执行default后的语句 {/alert}(2)使用 break; 可以退出switch语句(3)Switch语句和if语句有重复，可以互相代替var num = 1; switch(num){ case 1: console.log("壹") break; case 2: console.log("贰") break; default: console.log("数据不合法") break; }（二） 实例练习：对大于60分的输出“合格”，低于60分的输出“不合格”var score = 61; switch(parseInt(score/10)){ case 10: case 9: case 8: case 7: case 6: console.log("合格") break; default: console.log("不合格") break; }第二种方法var score = 61; switch(ttrue){ case sscore>=60: console.log("合格") break; default: console.log("不合格") break; }三、循环语句（一） while 循环 语法：while(条件表达式){ 语句…… }（1）while在语句执行时，先对条件表达式进行求值判断{alert type="success"}如果值为true，则执行循环体，循环体执行完毕后，继续对表达式进行判断如果为true则继续执行循环体如果值为false，则终止循环{/alert}（2）将条件表达式写死为true的循环叫做死循环，该循环不会停止，除非关闭浏览器（3）可以使用 break; 来终止循环while(true){ alert(n++); //判断n是否为10 if(n == 10){ //退出循环 break; } }（4）创建一个循环，往往需要三个步骤{alert type="error"}① 创建一个初始变量② 在循环中设置一个条件表达式③ 定义一个更新表达式，每次更新初始化变量{/alert}//① 创建一个初始变量 var n = 0; //② 在循环中设置一个条件表达式 while(n < 10){ //③ 定义一个更新表达式，每次更新初始化变量 document.write(n++ +'</br>'); }（二） do…while 循环 语法：do{ 语句…… }while(条件表达式);（1）do…while 循环会先执行循环体，再对while后的表达式进行判断{alert type="success"}如果值为true，则执行循环体，循环体执行完毕后，继续对表达式进行判断如果为true则继续执行循环体如果值为false，则终止循环{/alert}（2）do…while 可以保证循环体至少执行一次var n = 11; do{ document.write(n++ +'</br>'); }while(n <= 10);（3）死循环{callout color="#ff0000"} 尽量不要写死循环，会造成系统内存占用溢出，导致卡死 {/callout}（4）while 实战练习① 假如投资年利率为5%，试求从1000增长到5000需要多少年//定义一个变量，表示当前钱数 var money = 1000; //定义个一个计数器 var count = 0； while(money < 5000){ money *= 1.05; //使count自增 count++; } console.log("一共需要"+count+"年")②输入0-100的成绩后进行判断并输出相应的结果while(true){ var score = prompt("请输入成绩"); // 判断用户输入的值是否合法 if(score >=0 && score <= 100) { //满足该条件则证明用户的输入合法，退出循环 break; } alert("请输入有效的分数"); } if(score ==100) { alert("奖励BMW"); }else if(score >= 80){ alert("奖励手机"); }else if(score >= 60){ alert("奖励参考书"); }else{ alert("啥都没有"); }（三） for 循环 在for循环中，提供了专门的位置来放 初始化表达式 、 条件表达式 、 更新表达式 1、语法：for(①初始化表达式;②条件表达式;④更新表达式){ ③语句…… }（1）执行流程{alert type="error"}① 执行初始化表达式，初始化变量（只会执行一次）② 执行条件表达式，判断是否执行循环 如果为true则执行循环语句③，如果为false则终止循环 ④执行更新表达式，更新表达式执行完毕继续重复执行条件表达式②{/alert}（2）for循环中的三个表达式可以省略，也可以写在外部 如果在for循环中不写任何表达式，只写两个;;则变成死循环。 慎用！！！for(var i = 0 ; i < 10 ; i++ ){ alert(i); } for(;;){ alert("hello"); }2、实例练习（1）打印1-100之间所有奇数之和for(var i=1 , sum=0; i<=100 ; i++){ //判断i是否是奇数（不能被2整除的数就是奇数） //如果i除以2余数不为0则为奇数 if(i%2 != 0){ sum = sum+i; } }（2）打印1-100之间所有7的倍数的个数及总和for(var i=1 , sum=0 , count=0; i<=100 ; i++){ //如果i除以7余数为0则就是7的倍数 if(i%7 == 0){ sum += i; //使计数器自增 count++; } } console.log("总和为"+sum); // 输出总和 console.log("总数量为"+count); // 输出总和（3）打印所有水仙花数（一个3位数，它的每个位上的数字的3次幂之和等于它本身） 例如1^3+5^3+3^3=153//打印所有的三位数 for(var i=100; i<1000; i++){ //获取i的百位数字 var bai= parseInt(i/100); //获取十位数字 var shi= parseInt((i-bai*100)/10); //获取个位数字 var ge= i % 10; //判断i是否为水仙花数 if(bai*bai*bai + shi*shi*shi + ge*ge*ge == i){ console.log(i); } }（4）质数练习： 判断是否为质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）var num =prompt("请输入一个大于1的整数"); //判断这个值是否合法 if(num <= 1){ alert("该值不合法"); }else{ // 判断num是否是质数 for(var i=2 ; i<num ; i++){ // 判断num是否能被i整除 if(num % i == 0){ // 如果num能被i整除则说明该值一定不是质数（反向证明） flag = false; } } // 创建一个变量来保存当前的数的状态，默认当前num为质数 var flag = true; //如果num是质数则输出 if(flag){ alert(num+ "是质数"); }else{ alert("这个数不是质数"); } }3、嵌套的的 for循环 （1）外部循环执行1次，内部循环就执行5次//向页面中输出内容 for(var i=0; i<5; i++){ for(var n=0; n<i+1; n++){ document.write("星 "); } //输出一个换行 document.write("<br/>"); }（2）实例练习打印99乘法表<javascript> for(var i=1; i<=9; i++){ for(var n=1; n<=i; n++){ document.write("<span>"+ n+ "*" + i+ "=" + i*n +"</span>"); } } </javascript> <style> //添加span的属性 span{ display: inline-block; width: 80px; } </style>四、 break 和 continue1、break关键字{alert type="success"}（1）break关键字可以用来退出switch或循环语句（2）不能在 if语句 中使用break和continue关键词（3）break关键字会立即终止离它最近的循环语句（不影响外层循环）for(var i=0; i<5; i++){ console.log("外层循环"+i); for(var j=0; j<5; j++){ break; console.log("内层循环"+j); } }{/alert}（4）可以为循环语句创建一个label，来标识当前的循环label:循环语句使用break语句时，可以在break后跟着一个label，这样break将会结束指定的循环，而不是最近的outer: for(var i=0; i<5; i++){ console.log("外层循环"+i); for(var j=0; j<5; j++){ break outer; console.log("内层循环"+j); } }2、continue关键词{alert type="success"}（1）continue关键词可以用来跳过当次循环（2）默认只会对离它最近的循环起作用（3） 与break用法类似 {/alert}outer: for(var i=0; i<5; i++){ for(var j=0; j<5; j++){ if(j == 1){ continue outer; } console.log("内层循环"+j); } console.log("外层循环"+i); }3、测试程序执行时间//开启计时器 console.time("test"); //停止计时器 console.timeEnd("test");4、 质数练习的改进 质数（大于1的自然数，除了1和它本身不能被其他自然数整除的数叫做质数）{alert type="success"}可以通过 Math.sqrt() 对一个数进行开方{/alert}//开启计时器 console.time("test"); for(var i=2; i<1000; i++){ var flag = true; for(var j=2; j<=Math.sqrt(i); j++){ if(i%j==0){ flag = false; //一旦进入判断，则证明i不可能位质数了，此时循环没有再执行的意义 //可以使用break来结束循环 break; } } if(flag){ console.log(i); } } //停止计时器 console.timeEnd("test");
-
『笔记』JavaScript基础学习笔记 0 JS简介JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向 对象、命令式、声明式、函数式 编程范式。JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。JS基础语法从上至下按行顺序执行<script type="text/javascript"> alert("警告"); //弹出警告框 document.write("在文档输出内容"); //在body中输出内容 document：文档 console.log("控制台输出内容"); //向控制台中输出内容 </script>JS编写的位置1、可以直接编写到标签的onclick属性中<!--可以直接编写到标签的onclick属性中 -当点击该属性时，js代码才会执行 --> <button onclick="alert('点击执行')"> <!--可以直接编写到超链接的href属性中 -当点击该超链接时，js代码才会执行 --> <a herf="javascript:alert('超链接内的JS代码');">可以点击的超链接</a> <a herf="javascript:;">不可点击的超链接</a>2、可以将JS编写到script标签中<script> alert("script标签中的代码") </script>3、可以将js代码编写到外部js文件中，再通过script标签引入<script type="text/javascript" src="js/script.js"></script>注意： script标签一旦用于引入外部文件了，就不能再编写代码，即使写了浏览器也会忽略 如果需要，可以再创建一个新的script标签用于编写内部代码JS基本语法<script type="text/javascript"> /* 多行注释：注释的内容不会被执行，但是在源代码中查看 可以通过注释来对代码进行一些简单的调试 */ // 单行注释，只注释//后的内容，换行即无效 /* 1、JS中严格区分大小写 2、JS中每一条语句以分号（;）结尾 -如果不写分号，浏览器会自动补齐，但是会消耗系统资源 而且有些时候会加错分号导致错误，所以在开发中分号必须写 3、JS中会忽略多个空格和换行 */ </script>字面量和变量字面量：都是一些不可改变的值 比如：1 2 3 4 等 字面量都是可以直接使用，但是一般不会直接使用字面量变量：可以用来保存字面量，变量的值是可以改变的 -变量更加方便使用，开发中通常通过变量保存一个字面量 -可以通过变量对字面量进行描述，例如 var age = 18;声明变量：在js中使用var关键字来声明一个变量// 声明变量 var a; // 为变量赋值 a = 123; //声明与赋值同时进行 var a = 123; 标识符在js中所有可以自主命名的都可以称为标识符例如：变量名、函数名、属性名都属于标识符命名一个标识符时需要遵守以下规则 1、标识符中可以含有字母、数字、_、$ 2、标识符不能以数字开头 3、标识符不能使用ES中的关键字或保留字 4、一般使用驼峰命名法：首字母小写，每个单词开头字母大写，其他字母小写。 例如：xxxYyyZzz JS底层保存标识符时是采用的Unicode编码，所以理论上所有utf-8中含有的内容都可以作为标识符数据类型数据类型指的就是字面量的类型在JS中一共有六种数据类型{alert type="success"}String 字符串Number 数字Boolean 布尔值Null 空值Undefined 未定义Object 对象{/alert}其中String、Number、Boolean、Null、Undefine属于基本数据类型，而Object属于引用数据类型一、String字符串在JS中字符串需要使用引号引起来使用单引号或者双引号都可以，但是不能混着用引号不能嵌套：双引号内不能放双引号，单引号内不能放单引号在字符串中可以使用作为转义字符{alert type="info"}当表示一些特殊符号时可以使用进行转义" 表示 "n 表示换行t 制表符\ 表示\{/alert}var str = "hello"; str = '我说："你好"'; alert(str); //输出变量值，值为 我说：“你好” alert("str"); //输出字面量str，值为 str 二、Number数字在JS中所有的数字都是Number类型，包括整数和浮点数（小数点后的数）JS中可以便是数字的最大值：Number.MAX_VALUE如果使用Number表示的数字超过了最大值，则会返回一个Infinity{alert type="warning"}Infinity表示正无穷-Infinity表示负无穷{/alert}使用typeof检查Infinity会返回Number大于0的最小值为：Number.Min_VALUENaN是一个特殊的数字，表示Not A Number使用typeof检查NaN也会返回Number//数字123 var a = 123; //字符串123 var b= "123"; 可以使用typeof检查变量类型 -语法：typeof 变量 -检查字符串时会返回string -检查数值时会返回number console.log(typeof a); console.log(typeof b);{callout color="#ff0000"}在JS中整数的运算基本可以保证精确如果使用JS进行浮点元素运算，可能得到一个不精确的结果{/callout}var a = 1; var b = 2; var c = a+b; console.log(c);三、Boolean布尔值布尔值只有两个，主要用来做逻辑判断{alert type="success"}true -表示真false -表示假{/alert}四、Null和UndefinedNull类型的值只有一个，就是Null{alert type="success"} null这个值专门用来表示一个为空的对象使用typeof检查null值时，会返回object{/alert}Undefined类型的值只有一个，就是undefined{alert type="success"} 当声明一个变量，但是不给变量赋值时，他的值就是undefined使用typeof检查undefined值时，会返回undefined{/alert}强制类型转换将一个数据类型强制转换为其他数据类型类型转换主要指，将其他数据类型转换为String Number Boolean一、将其他数值类型转换为String{alert type="success"} 1、调用被转换数据类型的toString()方法 - 该方法不会影响到原变量，它会将转换的结果返回 - Null和Undefined两个值没有toString方法，会报错 {/alert}var a = 123; a.toString(); a = a.toString(); console.log(a); console.log(typeof a);{alert type="success"} 2、调用String()函数，并将被转换的数据作为参数传递给函数 - 使用String()函数做强制类型转换时， 对于Number和Boolean实际上就是调用的toString()方法 对于null和undefined就不会调用toString()方法 会将null直接转换为"null",将undefined直接转换为"undefined"{/alert}var a = 123; a = String(a); console.log(a); console.log(typeof a);二、将其他数值类型转换为Number1、使用Number()函数{alert type="success"} 字符串转换为数字 ① 如果是纯数字的字符串，直接转换为数字 ② 如果字符串中有非数字内容，则转换为NaN ③ 如果是一个空串或者是一个全是空格的字符串，则转换为0{/alert}var a = "123"; var a = "abc"; var a = " "; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} 布尔值转换为数字 ① true 转为 1 ② false 转为 0{/alert}var a = true; var a = false; a = Number(a); console.log(a); console.log(typeof a);{alert type="success"} null转换为数字时为 0undefined转换为数字时为 NaN{/alert}var a = null; var b = undefined; a = Number(a); b = Number(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b);2、字符串专用转换方法{alert type="success"} parseInt()将一个字符串转换为一个整数 parseInt()可以将一个字符串中的有效整数内容取出来，然后转换为NumberparseFloaf()将一个字符串转换为一个浮点数 parseFloaf()可以将一个字符串中的有效浮点数内容取出来，然后转换为Number如果对非String使用parseInt()和parseFloaf()，会先将其转换为String再换为Number{/alert}var a = "123px"; var b = "123.321px"; a = parseInt(a); b = parseFloaf(b); console.log(a); console.log(typeof a); console.log(b); console.log(typeof b); 其他进制数字 {card-describe title="在JS中"}如果需要表示16进制的数字，则需要以0x开头如果需要表示8进制的数字，则需要以0开头如果需要表示2进制的数字，则需要以0b开头（某些浏览器会不支持）可以在parseInt()中传递一个第二个参数，用来指定数字的进制{/card-describe}var a = "070"; a = parseInt(a,8); // 制定解析为8进制 console.log(a); console.log(typeof a);三、将其他数值类型转换为Boolean1、 直接使用Boolean()函数{alert type="success"}数字转Boolean，除了0和NaN，其余都是true字符串转Boolean，除了空字符串都是truenull和undefined转Boolean都为false对象也会转换为true{/alert}var a = 0; var b = " "; var c = null; var c = undefined; a = Boolean(a); b = Boolean(b); c = Boolean(c); console.log(a); console.log(b); console.log(c); console.log(typeof a);2、可以为任意一个数据类型取两次反!!，将其转换为布尔值var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值运算符运算符也叫操作符，可以对一个或多个值进行运算，并获取运算结果tpyeof就是运算符，可以用来获得一个值的类型tpyeof会将该值的类型以字符串的形式返回，如number、string、boolean、undefined、object等var a = 123; var result = typeof a; console.log(result); console.log(typeof a);{nextPage/}一、算数运算符（1）当对非Number类型的值进行运算时，会将这些值转换为Number，然后再进行运算（2）任何数和NaN进行运算都会输出NaN（3）+ 可以对两个值进行加法运算，并将结果返回{alert type="success"} ① 如果对两个字符串进行加法运算，会将两个字符串拼成一个字符串，然后再将结果返回 ② 任何值和字符串做加法运算，都会现转换为字符串然后再和字符串做拼串操作 ③ 为任意的数据类型加一个空字符串""即可将其转换为String，这是一种隐式的类型转换，由浏览器自动完成，实际也是调用的String() ④ 加法从左向右运算，会根据数据类型进行转换后再运算 {/alert}var a = 123; a + 1; var result = a + true; // true会转换为1，输出为124 var result = a + NaN; // 输出为NaN var result = "I" + "Love" + "You"; // 输出为ILoveYou var result = 123 + "1"; // 输出为1231 console.log(result); console.log(typeof result); console.log("a=" + a); // 输出为a=124(4) - 可以对两个值进行减法运算，并将结果返回(5) * 可以对两个值进行乘法运算，并将结果返回(6) / 可以对两个值进行除法运算，并将结果返回任何值做 - * / 运算时都会自动转换为Number可以通过为一个值 -0 *1 /1 将其转换为Number，原理和Number()函数一样var a = "123"; var b = a - 0; console.log(b); console.log(typeof b);(7) % 取模运算（取余数）var a = 9; var b = a % 3; var c = a % 4; var d = a % 5; console.log(b); // 输出9/3的余数为0 console.log(c); // 输出9/4的余数为1 console.log(d); // 输出9/5的余数为4 console.log(typeof b);二、一元运算符一元运算符，只需要一个操作数(1) + 正号正号不会对数字产生任何影响(2) - 负号负号可以对数字进行负号的取反(3) 对于非Number类型的值{alert type="success"}会先将其转换为Number，然后再运算可以对一个其他的数据类型使用 + 来将其转换为Number，原理和Number()函数一样{/alert}var a = true; var b = -a; console.log(b); // true转换为1，输出为-1 console.log(typeof b);三、自增和自减(1) 自增 ++ {alert type="success"}通过使用自增可以使变量在自身的基础上增加 1一个变量自增以后，原变量的值会立即自增 1自增分为两种： 后++ （a++）和 前++ （++a）{/alert}var a = 1; a++; console.log(a); // 输出为2 console.log(typeof a);无论是 前++ 还是 后++ ，都会立即使原变量的值自增1 不同的是a++和++a的值不一样a++ 的值等于原变量的值（自增前的值）++a 的值等于原变量的新值（自增后的值）var a = 1; console.log(a++) ; // 输出为1 console.log(++a) ; // 输出为2 // a++为1，++a是在a++的基础上自增所以为3，a相当于原变量a已经在自身基础上自增两次所以也为3 var b = a++ + ++a +a ; console.log("b = "+b) ; // 输出为1+3+3=7(1) 自减 -- {alert type="success"}通过使用自减可以使变量在自身的基础上减少 1一个变量自减以后，原变量的值会立即自减 1自减分为两种： 后-- （a--）和 前-- （--a）{/alert}var a = 10; a--; console.log(a); // 输出为9 console.log(typeof a);无论是 前-- 还是 后-- ，都会立即使原变量的值自减 1 不同的是a--和--a的值不一样a-- 的值等于原变量的值（自减前的值）--a 的值等于原变量的新值（自减后的值）var a = 10; console.log(a--) ; // 输出为10 console.log(--a) ; // 输出为9 // a--为10，--a是在a--的基础上自减所以为8，a相当于原变量a已经在自身基础上自减两次所以也为8 var b = a-- + --a +a ; console.log("b = "+b) ; // 输出为10+8+8=26练习：var n1=10, n2=20; var n = n1++; // n1 = 11 n1++ = 10 console.log('n='+n); // 10 console.log('n1='+n1); // 11 n = ++n1; // n1 = 12 ++n1 = 12 console.log('n='+n); // 12 console.log('n1='+n1); // 12 n = n2--; // n2 = 19 n2-- = 20 console.log('n='+n); // 20 console.log('n1='+n2); // 19 n = --n2; // n2 = 18 --n2 = 18 console.log('n='+n); // 18 console.log('n1='+n2); // 18四、逻辑运算符{callout color="#00fbff"} 布尔值的逻辑运算 {/callout}JS中提供了三种运算符(1) ! 非，可以用来对一个值进行 非 运算{alert type="success"}非运算就是对一个布尔值Boolean进行取反操作true变false，false变true{/alert}var a = true; a = !a; console.log(a); // 输出为false{alert type="success"}如果对一个值进行两次取反，值不会变如果对非布尔值进行非运算，会先将其转换为布尔值再进行取反 可以为任意一个数据类型取两次反!!将其转换为布尔值，可以用来将其他数据类型转换为布尔值{/alert}var a = "hello"; var a = !!a; console.log(a); // 输出为true console.log(typeof a); //类型为Boolean布尔值(2) && 与，可以对符号两侧的值进行 与 运算并返回结果{alert type="success"}两个值中只要有一个值为false就会返回false两个值都为true才会返回trueJS中如果第一个值为false，就不会检查第二个值，直接返回false如果两端的值都为true，返回true var a = true && true; console.log(a); // 输出为true 只要有一个false，都返回false var a = true && false; console.log(a); // 输出为false{/alert}(3) || 或，可以对符号两侧的值进行 或 运算并返回结果{alert type="success"}两个值都是false，则返回false两个值中只要有一个true，则返回trueJS中如果第一个值为true，就不会检查第二个值，直接返回true如果两端的值都为false，返回false var a = false || false; console.log(a); // 输出为false 只要有一个true，都返回true var a = true || false; console.log(a); // 输出为true{/alert}{callout color="#00fbff"} 非布尔值的 与 、 或 运算 {/callout}对非布尔值进行 与 、 或 运算时会先将其转换为布尔值，然后再运算，并且返回原值(1) && 与 运算：找false{alert type="success"}如果第一个值为true，则必然返回第二个值如果第一个值为false，则直接返回第一个值var a = 1 && 3; console.log(a); // 输出为3 var a = NaN && 0; console.log(a); // 输出为NaN{/alert}(2) || 或 运算：找true{alert type="success"}如果第一个值为true，则直接返回第一个值如果第一个值为false，则直接返回第二个值var a = 1 || 3; console.log(a); // 输出为1 var a = NaN || 0; console.log(a); // 输出为0{/alert}五、赋值运算符(1) = 可以将符号右侧的值赋值给左侧的变量var a = 3; console.log(a); // 输出为3(2) += 可以将符号右侧的值相加后再赋值给左侧的变量(3) -= 可以将符号右侧的值相减后再赋值给左侧的变量(4) *= 可以将符号右侧的值相乘后再赋值给左侧的变量(5) /= 可以将符号右侧的值相除后再赋值给左侧的变量(6) %= 可以将符号右侧的值取模（取余数）后再赋值给左侧的变量var a = 10; a += 5; // 等价于a = a + 5 输出为15 a -= 5; // 等价于a = a - 5 输出为5 a *= 5; // 等价于a = a * 5 输出为50 a /= 5; // 等价于a = a / 5 输出为2 a %= 5; // 等价于a = a % 5 取模（取余数）输出为0 console.log(a); 六、关系运算符通过关系运算符可以比较两个值之间的大小关系{alert type="success"}如果关系成立会返回true，如果关系不成立则返回false对于非数字进行比较时，会将其转换为数字再进行比较 任何值和NaN比较都是false如果符号两侧都是字符串时，不会将其转换为数字进行比较，而会比较两个字符串的Unicode编码 比较字符编码时会一位一位进行比较，如果两位一样则比较下一位，第一位与第一位比，第二位于第二位比，以此类推console.log( "a" > "b"); // 输出false console.log( "abc" > "aa"); // 输出true{/alert}（1） > 大于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 > 5; //返回true a = 5 > 5; //返回false a = 5 > 10; //返回false console.log(a); （2） >= 大于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 >= 5; //返回true a = 5 >= 5; //返回true a = 5 >= 10; //返回false console.log(a); （3） < 小于号{alert type="info"}判断符号左侧的值是否大于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 < 5; //返回false a = 5 < 5; //返回false a = 5 < 10; //返回true console.log(a); （4） <= 小于等于号{alert type="info"}判断符号左侧的值是否小于 或 等于右侧的值如果关系成立则返回true，如果关系不成立则返回false{/alert}var a = 10 <= 5; //返回false a = 5 <= 5; //返回true a = 5 <= 10; //返回true console.log(a); Unicode编码 在JS中的字符串中使用转义字符输入Unicode编码\u四位编码 数字为16进制console.log( "\u2620"); // 输出 ☠ 在网页中使用Unicode编码&#编码 数字为10进制，必须先从16进制转换为10进制<h1 style="font-size: 50px;">☠</h1> // 输出 ☠ 七、相等运算符(1) == 相等运算相等运算符用来比较两个值是否相等，相等返回true，否则返回false{alert type="success"}当使用 == 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较undefined 衍生自 null，所以这两个值比较时会返回trueNaN 不和任何值相等，包括它本身可以通过isNaN()函数来判断一个值是否是NaN 如果该值是NaN则返回true，否则返回false{/alert}console.log( 1 == 1 ); // 输出true var a = 10 console.log( a == 4 ); // 输出false console.log( "1" == 1 ); // 输出true console.log( null == 0 ); // 输出false console.log( undefined == null ); // 输出true console.log( NaN == NaN ); // 输出false var b = NaN; console.log(isNaN(b)); // 输出true(2) != 不相等运算相等运算符用来比较两个值是否不相等，不相等返回true，否则返回false{alert type="success"}当使用 != 比较两个值时，如果两个值类型不同，则会自动转换为同一类型，然后再进行比较 {/alert}console.log( 2 != 1 ); // 输出true var a = 4 console.log( a != 4 ); // 输出false console.log( "1" != 1 ); // 输出false(3) === 全等运算相等运算符用来比较两个值是否全等，全等返回true，否则返回false{alert type="success"}当使用 === 比较两个值时，如果两个值类型不同，则直接返回false{/alert}console.log( 1 === 1 ); // 输出true console.log( "1" === 1 ); // 输出false(4) !== 不全等运算相等运算符用来比较两个值是否不全等，不全等返回true，否则返回false{alert type="success"}当使用 !== 比较两个值时，如果两个值类型不同，则直接返回true{/alert}console.log( 1 !== 1 ); // 输出false console.log( "1" !== 1 ); // 输出true八、条件运算符条件运算符也叫三元运算符语法： 条件表达式?语句1:语句2条件运算符在执行时，首先对条件表达式进行求值 如果该值为true则执行语句1并返回执行结果，否则执行语句2并返回执行结果 如果条件表达式的求值结果是一个非布尔值，会先将其转换为布尔值再执行下一步true?alert("语句1"):alert("语句1"); // 返回语句1 false?alert("语句1"):alert("语句1"); // 返回语句1 var a = 30; var b = 20; a > b ?alert("a大"):alert("b大"); // 返回a大 var a = 30; var b = 20; var c = 40; var max = a > b ? a : b; max = max > c ? max : c; var max = a > b ? (a >c ? a :c) : (b > c ? b : c) // 不推荐，不易阅读 console.log( "最大值max = "+max); // 谁大输出谁 "hello"?alert("语句1"):alert("语句1"); // hello转换为true然后执行输出语句1，逗号运算符使用 ， 可以分割多个语句，可以使用， 逗号运算符同时声明多个变量并进行赋值var a , b , c; var a=1 , b=2 , c=3; alert(b);九、运算符的优先级{alert type="success"}在JS中运算符也有优先级，比如：先乘除后加减在JS中有一个运算符的优先级标准表，优先级越高越优先计算，如果优先级相同，则从左向右计算{/alert}最后因为学习笔记较为详细，字数比较多，所以只好另开一篇继续（ 再水一篇文章 :@(装大款) ）
-
『笔记』『代码』CSS3 Flex 布局详解文档 网页布局（layout）是 CSS 的一个重点应用布局的传统解决方案，基于 盒状模型 ，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法。一、Flex 布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。.box{ display: flex; }行内元素也可以使用 Flex 布局。.box{ display: inline-flex; }Webkit 内核的浏览器，必须加上 -webkit 前缀。.box{ display: -webkit-flex; /* Safari */ display: flex; }注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。二、基本概念采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end ；交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size 。三、容器的属性以下6个属性设置在容器上。{card-describe title=" flex-direction "}flex-wrapflex-flowjustify-contentalign-itemsalign-content{/card-describe}3.1 flex-direction属性flex-direction 属性决定主轴的方向（即项目的排列方向）。.box { flex-direction: row | row-reverse | column | column-reverse; }它可能有4个值。row （默认值）：主轴为水平方向，起点在左端。row-reverse ：主轴为水平方向，起点在右端。column ：主轴为垂直方向，起点在上沿。column-reverse ：主轴为垂直方向，起点在下沿。3.2 flex-wrap属性默认情况下，项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何换行。.box{ flex-wrap: nowrap | wrap | wrap-reverse; }它可能取三个值。（1）nowrap（默认）：不换行。（2）wrap：换行，第一行在上方。（3）wrap-reverse：换行，第一行在下方。3.3 flex-flowflex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap 。.box { flex-flow: <flex-direction> || <flex-wrap>; }3.4 justify-content属性justify-content 属性定义了项目在主轴上的对齐方式。.box { justify-content: flex-start | flex-end | center | space-between | space-around; }它可能取5个值，具体对齐方式与轴的方向有关。下面假设主轴为从左到右。flex-start （默认值）：左对齐flex-end ：右对齐center ： 居中space-between ：两端对齐，项目之间的间隔都相等。space-around ：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。3.5 align-items属性align-items属性定义项目在交叉轴上如何对齐。.box { align-items: flex-start | flex-end | center | baseline | stretch; }它可能取5个值。具体的对齐方式与交叉轴的方向有关，下面假设交叉轴从上到下。flex-start ：交叉轴的起点对齐。flex-end ：交叉轴的终点对齐。center ：交叉轴的中点对齐。baseline : 项目的第一行文字的基线对齐。stretch （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。3.6 align-content属性align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }该属性可能取6个值。flex-start ：与交叉轴的起点对齐。flex-end ：与交叉轴的终点对齐。center ：与交叉轴的中点对齐。space-between ：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around ：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch （默认值）：轴线占满整个交叉轴。四、项目的属性以下6个属性设置在项目上。orderflex-growflex-shrinkflex-basisflexalign-self4.1 order属性order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。.item { order: <integer>; }4.2 flex-grow属性flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。.item { flex-grow: <number>; /* default 0 */ }如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。4.3 flex-shrink属性flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。.item { flex-shrink: <number>; /* default 1 */ }如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。负值对该属性无效。4.4 flex-basis属性flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。.item { flex-basis: <length> | auto; /* default auto */ }它可以设为跟 width 或 height 属性一样的值（比如350px），则项目将占据固定空间。4.5 flex属性flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。4.6 align-self属性align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }该属性可能取6个值，除了auto，其他都与 align-items 属性完全一致。转自： Lovestu
