这是第 100 篇不掺水的原创，想要了解更多，请戳上方蓝色字体：政采云前端团队 关注我们吧～ 本文首发于政采云前端团队博客：JS常用的循环遍历你会几种 https://www.zoo.team/
###JavaScript中对象分类 内置对象: number/string/boolean等 浏览器相关对象BOM: Browser Object Model浏览器对象模型 页面相关对象DOM: Document Object Model文档对象模型 ###BOM浏览器相关内容 window: 该对象的属性和方法称为全局属性和全局方法,访问时可以省略掉window. window中常见的方法: window.isNaN() 判断变量是否是NaN window.alert() 弹出提示框 window.c
标签属性 属性 描述 ALIGN align 设置或获取表格排列。 ALLOWTRANSPARENCY allowTransparency 设置或获取对象是否可为透明。 APPLICATION APPLICATION 表明对象的内容是否为 HTML 应用程序(HTA)，以便免除浏览器安全模式。 ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。 ACCELERATOR accelerator 设置或获取表明对象是否包含快捷键的字符串。 BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。 BORDER border 设置或获取框架间的空间，包括 3D 边框。 background-attachment backgroundAttachment 设置或获取背景图像如何附加到文档内的对象中。 background-color backgroundColor 设置或获取对象内容后的颜色。 background-position-x backgroundPositionX 设置或获取 backgroundPosition 属性的 x 坐标。 background-position-y backgroundPositionY 设置或获取 backgroundPosition 属性的 y 坐标。 behavior behavior 设置或获取 DHTML 行为的位置。 border-bottom borderBottom 设置或获取对象下边框的属性。 border-bottom-color borderBottomColor 设置或获取对象下边框的颜色。 border-bottom-style borderBottomStyle 设置或获取对象下边框的样式。 border-bottom-width borderBottomWidth 设置或获取对象下边框的宽度。 border-color borderColor 设置或获取对象的边框颜色。 border-left borderLeft 设置或获取对象左边框的属性。 border-left-color borderLeftColor 设置或获取对象左边框的颜色。 border-left-style borderLeftStyle 设置或获取对象左边框的样式。 border-left-width borderLeftWidth 设置或获取对象左边框的宽度。 border-right borderRight 设置或获取对象右边框的属性。 border-right-color borderRightColor 设置或获取对象右边框的颜色。 border-right-style borderRightStyle 设置或获取对象右边框的样式。 border-right-width borderRightWidth 设置或获取对象右边框的宽度。 border-style borderStyle 设置或获取对象上下左右边框的样式。 border-top borderTop 设置或获取对象上边框的属性。 border-top-color borderTopColor 设置或获取对象上边框的颜色。 border-top-style borderTopStyle 设置或获取对象上边框的样式。 border-top-width borderTopWidth 设置或获取对象上边框的宽度。 border-width borderWidth 设置或获取对象上下左右边框的宽度。 bottom bottom 设置或获取对象相对于文档层次中下个定位对象的底部的位置。 canHaveChildren 获取表明对象是否可以包含子对象的值。 canHaveHTML 获取表明对象是否可以包含丰富的 HTML 标签的值。 CLASS className 设置或获取对象的类。 contentWindow 获取指定的 frame 或 iframe 的 window 对象。 clear clear 设置或获取对象是否允许在其左侧、右侧或两边放置浮动对象，以防下段文本显示在浮动对象上。 clip clip 设置或获取定位对象的哪个部分可见。 cursor cursor 设置或获取当鼠标指针指向对象时所使用的鼠标指针。 display display 设置或获取对象是否要渲染。 DATAFLD dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。 DATASRC dataSrc 设置或获取用于数据绑定的数据源。 disabled 获取表明用户是否可与该对象交互的值。 END end 设置或获取表明元素结束时间的值，或者元素设置为重复的简单持续终止时间。 firstC
本文并非原创，只是真心觉得好，特别是图解的很到位，我在js中经常会用到，就记下来，与大家分享。
总是会被javascript的event对象的clientX,offsetX,screenX,pageX 弄得头晕，于是决定做个图来区分一下(画得我手那个酸呀。。。。)
2，获取对象元素的位置(offset()方法) var offset = obj.offset(); 获取对象元素的位置，分别是元素的top和left，调用方法是：offset.left和offset.top，可知当前对象的左部和顶部位置。
为什么要总结innerHTML和outerHTML的区别呢，主要是在看vue.js官方文档时，看到生命周期时
OpenCV可以用来生成，但是文字换行等场景就比较难实现，这里使用HTML生成答题卡。
在我本地测试当中： 在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。 而在公司项目当中： Opera仍然使用 document.body.clientWidth document.body.clientHeight 可是IE和FireFox则使用 document.documentElement.clientWidth document.documentElement.clientHeight 原来是W3C的标准在作怪啊
版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
屏幕的有效宽高： window.screen.availHeight window.screen.availWidth 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
上边在定义Vue实例时，内部定义了el挂载点，挂载点的作用在于指明要应用到的标签，例如上面实例中利用ID选择器#app指定应用于id为app的标签，同时我们需要关注Vue实例的作用范围，Vue会管理el选项所命中的元素及其内部的后代元素，例如：
一.window相关 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth 二.body相关 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth
1.类外面添加对象属性 class Washer(): def wash(self): print('do some laundry stuff') haier1 = Washer() #添加属性，对象名、属性名 = 值 haier1.width = 400 haier1.height = 500 对象属性既可以在类外面添加和获取，也可以在类里面添加和获取 在类外面获取对象属性： 在上方代码上添加： print(f’洗衣机宽度为{haier1.width}’) print(f’洗衣机高度为
作为一个半路出家的前端，随着项目经验的积累，也越来越意识到原生js的博大精深，最近正在研究js设计模式，接下来每学一个设计模式就是写篇文章做笔记，其实主要还是代码和设计思想的结合，努力体会，多思考合适自己项目中的应用场景，争取实际应用到实际项目中。
安装插件。Chinese,Live Server(模拟tomcat功能)，Vetur&vue-helper(支持vue的开发，方便其使用)。
面向对象编程（Object-Oriented Programming，简称OOP）是一种程序设计思想，它将数据和处理数据的方法组合成一个类（Class），并通过实例化（Instantiation）这个类来创建对象（Object）。这些对象可以互相协作，通过消息传递（Message Passing）来完成程序的功能。
今天给大家分享一个用原生JS实现的图片跑马灯特效，效果如下： 实现的代码如下，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv
五一 Windwos Blogs 推了一篇博客， Babylon.js v3.2 发布了。因为一直有想要在自己博客上加载 3D 对象的冲动，这两天正好看到了，就动手研究研究。本人之前也并没有接触过 WebGL ，这方面算是知识盲区，需求完成之后感觉非常炫酷，顺手写篇博客记录下来。不得不说 3D 打印和 VR 慢慢的开始走进平时的生活了，技术的成熟与硬件成本的变低，结合内容跨平台共享与各种简单的 js 框架， WebGL 和 WebVR 很可能就是未来 Web 方向的主流技术。期待美好而炫酷的未来ing Ba
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 IE，FireFox 差异如下： IE6.0、FF1.06+： clientWidth = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5： clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height (需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
1、alert:弹出警示框（用的非常少，用户体验不好） 完整写法：window.alert（“执行语句”）； window对象，窗口，一般情况可省略 alert(123);
网页可见区域宽： document.body.offsetWidth(包括边线的宽);
网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的高宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： document.body.scrollHeight; 网页被卷去的高： document.body.scrollTop; 网页被卷去的左： document.body.scrollLeft; 网页正文部分上： window.screenTop; 网页正文部分左： window.screenLeft; 屏幕分辨率的高： window.screen.height; 屏幕分辨率的宽： window.screen.width; 屏幕可用工作区高度： window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth; scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
手洗：找盆 - 放水 - 加洗衣粉 - 浸泡 - 搓洗 - 拧干水 - 倒水 - 漂洗N次 - 拧干 - 晾晒。
其中：dateObject 所指的月份中的某一天，使用本地时间。返回值是 1 ~ 31 之间的一个整数。
面向对象就是将编程当成是一个事物，对外界来说，事物是直接使用的，不用去管他内部的情况。而编程就是设置事物能够做什么事
IE中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中： document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 Opera中： document.body.clientWidth ==> 可见区域宽度 document.body.clientHeight ==> 可见区域高度 document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 没有定义W3C的标准，则 IE为： document.documentElement.clientWidth ==> 0 document.documentElement.clientHeight ==> 0 FireFox为： document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）
HTML精确定位：scrollLeft,scrollWidth,clientWidth,offsetWidth
滚动条操作 浏览器滚动条并没有提供相应的操作方法。在这种情况下，就可以借助JavaScript也就是JS来控制浏览器的滚动条。 WebDriver提供了execute_script()方法来执行JavaScript代码。 js="window.scrollTo(100,450);" driver.execute_script(js) 当页面上的元素超过一屏后，想操作屏幕下方的元素，是不能直接定位到，会报元素不可见的。 这时候需要借助滚动条来拖动屏幕，使被操作的元素显示在当前的屏幕上。 滚动条是无法直接用定位工具来定位的。selenium里面也没有直接的方法去控制滚动条，这时候只能借助JS了，还好selenium提供了一个操作js的方法: execute_script()，可以直接执行js的脚本。 --scrollHeight 获取对象的滚动高度。 --scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 --scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth 获取对象的滚动宽度。
gitHub地址 1，移动端minimvvm框架qvm实现 qvm概念，一个适用于移动端的mini mvvm(什么是mvvm？没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思
网页可见区域宽：document.body.clientWidth; 网页可见区域高：document.body.clientHeight; 网页可见区域高：document.body.offsetWeight: 网页可见区域高：document.body.offsetHeight; 网页正文全文宽：document.body.scrollWidth; 网页正文全文高：document.body.scrollHeight; 网页被卷去的高：document.body.scrollTop; 网页被卷去的左：document.body.scrollLeft; 网页正文部分上：window.screenTop; 网页正文部分左：window.screenLeft; 屏幕分辨率的高：window.screen.height; 屏幕分辨率的宽：window.screen.width; 屏幕可用工作区高度：window.screen.availHeight; 屏幕可用工作区宽度：window.screen.availWidth;
经常碰到offset、scroll、client这几个关键字，每次都要各种实验，这里总结一下。
模拟浏览器功能，自动执行网页中的js代码，实现动态加载。使请求更加真实(好像是真的浏览器在请求)
常用语法 只需要记两种特殊符号： {{ }}和 {% %} 变量相关的用{{}}，逻辑相关的用{%%}。 变量 {{ 变量名 }} 变量名由字母数字和下划线组成。 点（.）在模板语言中有特殊的含义，用来获取对象的相应属性值。 几个例子： view中代码： def template_test(request): l = [11, 22, 33] d = {"name": "alex"} class Person(object): def __init__(self,
官方文档 常用语法 只需要记两种特殊符号： {{ }}和 {% %} 变量相关的用{{}}，逻辑相关的用{%%}。 变量 {{ 变量名 }} 变量名由字母数字和下划线组成。 点（.）在模板语言中有特殊的含义，用来获取对象的相应属性值。 几个例子： view中代码： def template_test(request): l = [11, 22, 33] d = {"name": "alex"} class Person(object): def __init__(
注意： speed = (end - box.offsetLeft)/20; 代表用（终点位置-当前位置）/动画系数 动画系数可以控制动画的快慢
41.height height() 类型：number height(value) 类型：self height(function(index,oldHeight){...}) 类型：self 获取对象集合中第一个元素的高度，或者设置对象集合中所有元素的高度。 $('#foo').height() //123 $(window).height() //838（viewport height）
使用var、let和const来声明一个变量。var是函数作用域，而let和const是块作用域。 在这个挑战中，我们使用 ES6 及以上的 JavaScript 特性。避免使用var。
既然我们是使用的YUI这个js库，那么肯定第一步就是引用这个文件，刚才在上面已经说了我们要使用的是yui-min.js这个文件，当然你可以对他进行改名，你只需要到你下载的yui库的文件中找到他，将其拷到你需要的目录就OK啦，那么掉用方法的是：
qvm概念，一个适用于移动端的mini mvvm(什么是mvvm？没了解的同学自己去了解)框架。参考了angular和vuejs的设计实现思路，并进行简化封装，目前使用的zepto基本依赖库，使用最少的代码实现了基础功能版。
链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader/onload
selenium并不是万能的，有时候页面上操作无法实现的，这时候就需要借助JS来完成了。
所有JS程序猿（甚至不止JS）都知道，数组（Array）是有length的，通过length属性，可以很方便的获取数组的长度。可以说，只要使用到了数组，就必会使用到其length属性。 而Object对象是没有length属性或方法的，它确实没有存在的必要，因为人们只会在乎该对象能提供什么样的方法，而没有必要知道它到底有多少方法。的确，这确实不是一个普遍性的需求， 因此ECMAScript中也不会为自己增加额外的负担。 我之前一直没有考虑过这个问题，我们通过CGI获取数据，对于一条一条的数据，后台将其做成数
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频
