JavaScript基础
关注
分享
扫一扫
用最通俗的语言讲述JavaScript的知识。
H_Cisco
路在脚下，只要走起来离目标会近一点。
展开
-
DOM初探（34）——js加载时间线
视频：https://ke.qq.com/course/231577?taid=3983676656552089js时间线创建Document对象，开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = “loading”. 遇到link外部css，创建线程加载，并继续解析文档。 遇到scr...原创 2019-03-29 16:06:06 · 13505 阅读 · 0 评论 -
DOM初探（33）——异步加载JS
视频：https://ke.qq.com/course/231577?taid=3983676656552089异步加载JS：js加载的缺点：加载工具方法没必要阻塞文档，过得js加载会影响页面效率，一旦网速不好，那么整个网站将等待js加载而不进行后续渲染等工作。 有些工具方法需要按需加载，用到再加载，不用不加载。异步加载JSJavaScript异步加载的三种方案：...原创 2019-03-27 19:39:20 · 13549 阅读 · 0 评论 -
DOM初探（32）——窗体类操作事件
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件分类：窗体类操作事件(window上的事件) scroll(当滚动条一滚动，触发事件) load() 练习50：fixed定位js兼容版 <!DOCTYPE html><html> <head> ...原创 2019-03-26 21:28:33 · 12933 阅读 · 0 评论 -
DOM初探（31）——文本操作事件
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件分类：文本操作事件 input，focus，blur，changeinput：<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...原创 2019-03-25 17:47:28 · 12940 阅读 · 0 评论 -
DOM初探（30）——键盘事件
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件分类：键盘事件 keydown keyup keypress keydown > keypress > keyup keydown和keypress的区别 keydown可以响应任意键盘按键，keypress只能响应字符类键盘按键 key...原创 2019-03-24 16:28:02 · 13089 阅读 · 0 评论 -
DOM初探（29）——鼠标事件
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件分类：鼠标事件 click,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseout,mouseenter,mouseleave用button来区分鼠标的按键，0/1/2 DOM3标准规定：click事件只...原创 2019-03-23 12:53:25 · 14550 阅读 · 0 评论 -
DOM初探（28）——事件委托
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件委托：利用事件冒泡，和事件源对象进行处理 优点： 性能 不需要循环所有的元素一个个绑定事件 灵活 当有新的子元素时不需要重新绑定事件 练习48：一个拖拽效果<!DOCTYPE html><html> ...原创 2019-03-16 15:55:56 · 12546 阅读 · 0 评论 -
DOM初探（27）——事件对象
事件对象：视频：https://ke.qq.com/course/231577?taid=3983676656552089event||window.event用于IE 事件源对象 event.target 火狐只有这个 event.srcElement IE只有这个 这俩chrome都有 兼容性写法<!DOCTYPE html>...原创 2019-03-15 21:28:24 · 8603 阅读 · 0 评论 -
JavaScript介绍，组成部分，主流浏览器和它的内核，数据类型，栈，运算符，条件判断
Javascript(Hbulid)——动态语言视频：https://ke.qq.com/course/231577?taid=3983676656552089浏览器：shell 内核js的逼格（特点）：1:解释型语言：翻译： 编译—快，移植性差eg：c，c++ 解释...原创 2018-06-30 18:22:00 · 442 阅读 · 0 评论 -
DOM初探（26）——取消冒泡和阻止默认事件
视频：https://ke.qq.com/course/231577?taid=3983676656552089取消冒泡和阻止默认事件取消冒泡 W3C标准event.stopPropagation()；但不支持IE9以下版本 IE独有(谷歌也实现了)event.cancelBubble = true; 阻止默认事件 默认事件——表单提交，a标签跳转，右键...原创 2019-03-14 13:56:49 · 8737 阅读 · 0 评论 -
DOM初探（25）——事件处理模型——事件冒泡、捕获
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件处理模型——事件冒泡、捕获事件冒泡 结构上（非视觉上）向前关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上） 事件捕获 结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源...原创 2019-03-13 12:44:38 · 8427 阅读 · 0 评论 -
DOM初探（24）——解除事件处理程序
视频：https://ke.qq.com/course/231577?taid=3983676656552089解除事件处理程序：1.ele.onclick = false或null;2.ele.removeEventListener(type,fn,false);3.ele,detachEvent(“on” + type,fn)；注：若绑定匿名函数，则无法解除。<...原创 2019-03-09 12:35:13 · 8297 阅读 · 0 评论 -
DOM初探（23）——事件处理程序的运行环境
视频：https://ke.qq.com/course/231577?taid=3983676656552089事件处理程序的运行环境：1.ele.onxxx = function(event){} 程序this指向的是dom元素本身2.obj.addEventListener(type,fn,false); 程序this指向的是dom元素本身3.obj.a...原创 2019-03-08 18:43:54 · 8271 阅读 · 0 评论 -
DOM初探（22）——如何绑定事件处理函数
视频：https://ke.qq.com/course/231577?taid=3983676656552089如何绑定事件处理函数：1.ele.onxxx = function(event){} 兼容性很好，但是一个元素的同一事件上只能绑定一个处理程序 基本上等同于写在HTML行间上2.obj.addEventListener(事件类型,处理函数,false);...原创 2019-03-08 12:57:05 · 8311 阅读 · 0 评论 -
DOM初探（21）——查询样式(IE独有的)
视频：https://ke.qq.com/course/231577?taid=3983676656552089脚本化CSS（三）：查询样式(IE独有的) ele.currentStyle 计算样式只读 返回的计算样式的值不是经过转换的绝对值 IE独有的属性练习43：封装兼容性方法getStyle(ele,prop)<!DOC...原创 2019-03-06 16:32:23 · 8331 阅读 · 0 评论 -
DOM初探（20）——查询计算样式
脚本化CSS（二）：查询计算样式 window.getComputdStyle(ele,null); 计算样式只读 返回的计算样式的值都是绝对值，没有相对单位 IE8及以下不兼容<!DOCTYPE html><html> <head> <meta charset="utf-8...原创 2019-03-05 09:34:32 · 8239 阅读 · 0 评论 -
DOM初探（19）——读写元素CSS属性
视频：https://ke.qq.com/course/231577?taid=3983676656552089脚本化CSS（一）：读写元素CSS属性 dom.style.prop可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应该加CSSeg:float -àcssFloat(用原来得div.style.float也没毛病)符合属性必须拆解...原创 2019-03-03 12:49:36 · 8301 阅读 · 0 评论 -
DOM初探（18）——让滚动条滚动
五：DOM基本操作：让滚动条滚动 window上有三个方法 scroll(x,y),scrollTo(x,y) scrollBy();三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动条滚动到当前位置。区别：scrollBy()会在之前的数据基础之上做累加。<!DOCTYPE html><html> &...原创 2019-03-02 20:14:09 · 9306 阅读 · 0 评论 -
DOM初探（17）——查看元素的尺寸与位置
四：DOM基本操作：查看元素的尺寸： dom.offsetWidth,dom.offsetHeight(视觉上的宽高，不可能包含margin)查看元素的位置： dom.offsetLeft,dom.offsetTop 对于无定位父级的元素，返回相对文档的坐标；对于有定位父级的元素，返回相对最近的有定位的父级的坐标。 dom.offsetP...原创 2019-03-02 14:18:53 · 8474 阅读 · 0 评论 -
DOM初探（16）——查看元素的集合尺寸
三：DOM基本操作：查看元素的集合尺寸 domEle.getBoundingClientRect(); 兼容性很好 改方法返回一个对象，对象里面有left,top,right,bottom等属性。left和top代表该元素左上角的x坐标和y坐标，right和bottom代表元素右下角的x和y坐标。 height和width属性 老版本IE并未...原创 2019-03-01 18:07:55 · 8215 阅读 · 0 评论 -
DOM初探（15）——查看视口的尺寸
视频：https://ke.qq.com/course/231577?taid=3983676656552089二：DOM基本操作：查看视口的尺寸 window.innerWidth/innerHeight IE8及以下不兼容 document.documentElement.clientWidth/clientHeight...原创 2019-02-27 08:29:59 · 7903 阅读 · 2 评论 -
DOM初探（14）——查看滚动条的滚动距离
一：DOM基本操作：查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及以下不兼容(只有IE9以上的浏览器能用) document.body/documentElement.scrollTop 兼容性比较混乱，用时取两个值相加，因为不可能存在两个相同的值（但凡document.body.sc...原创 2019-02-27 08:27:15 · 9407 阅读 · 0 评论 -
DOM初探（13）——JS定时器
JS定时器：setInterval(); setTimeout(); clearInterval(); clearInterval(); 全局对象window上的方法，内部函数this指向window 注意:setInterval("func()",1000)；//可以有另一种形式展现setInterval();setInterval(function () { ...原创 2019-02-24 09:59:23 · 7850 阅读 · 0 评论 -
DOM初探（12）——日期对象Date()
日期对象Date()：——系统提供好的JavaScript Date 对象Date 对象Date 对象用于处理日期和时间。创建 Date 对象的语法：var myDate=new Date()注释：Date 对象会自动把当前日期和时间保存为其初始值。Date 对象属性 属性 描述 constructor ...原创 2019-02-24 09:52:43 · 9021 阅读 · 0 评论 -
DOM初探（11）——元素节点的一些属性和方法，封装函数insertAfert()，将目标节点背部的节点顺序逆序
DOM基本操作：Element节点的一些属性 innerHTML innerText/textContent（老版本IE不好使）Element节点的一些方法： ele.setAttribute(“属性名”,”属性值”) ele.getAttribute(“属性名”)；innerHTML：<!DOCTYPE html...原创 2019-02-14 19:39:04 · 8093 阅读 · 0 评论 -
DOM初探（10）——DOM操作（选，增，插，删，替换）
DOM基本操作getElementById方法定义在Document.prototype上，即Element节点上不能使用。 getElementByName方法定义在HTMLDocument.prototype上，即非html中的document不能使用（xml document，Element）。 getElementByTagName方法定义在Document.prototype和E...原创 2019-02-14 19:31:32 · 8077 阅读 · 2 评论 -
DOM初探（9）——DOM结构树
document一回车，他就代表整个文档；Document一回车，他代表的是一个函数，什么函数需要首字母大写？构造函数吧，只不过这个Document有点特殊，你不能new他，这时系统留给自己new的。那这个构造函数对咱们有什么帮助呢？构造函数上面会有一个原型，能够给生产数来的构造函数使用，如果Document作为document的原型的话，说明在Document的prototype上，...原创 2019-02-13 11:52:18 · 8768 阅读 · 2 评论 -
DOM初探（8）——DOM节点的小练习
视频：https://ke.qq.com/course/231577?taid=3983676656552089练习30：遍历元素节点树（在原型链上编程）。练习：31封装函数，返回元素e的第n层祖先元素节点。练习32：封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己。练习33：编辑函数，封装myChild...原创 2019-02-02 15:55:11 · 8376 阅读 · 0 评论 -
DOM初探（7）——节点的一个方法(Node.hasChildNodes();)
视频：https://ke.qq.com/course/231577?taid=3983676656552089节点的一个方法 Node.hasChildNodes();<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title&...原创 2019-02-02 15:51:28 · 8171 阅读 · 0 评论 -
DOM初探（6）——节点的四个属性
视频：https://ke.qq.com/course/231577?taid=3983676656552089节点的四个属性：nodeName 元素的标签名，以大写形式表示，只读 nodeValue Text节点或Comment节点的文本内容，可读写 nodeType(重要) 该节点的类型，只读...原创 2019-02-02 15:47:36 · 8223 阅读 · 0 评论 -
DOM初探（5）——遍历节点/元素节点
视频：https://ke.qq.com/course/231577?taid=3983676656552089上面这些都是选择元素方法类的操作，还有非方法类的操作：DOM基本操作：遍历节点树： parentNode->父节点(最顶端的parentNode为#document);childNodes->子节点们...原创 2019-02-02 15:43:44 · 8347 阅读 · 0 评论 -
DOM初探（4）——DOM定义与基本操作（查）
视频：https://ke.qq.com/course/231577?taid=3983676656552089DOMDOM（document object model） DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也用人称DOM是对HTML以及XML的标准编程接口。补充：什么东西都操作不了CSS！！...原创 2019-02-01 09:44:04 · 8233 阅读 · 0 评论 -
你不知道的JavaScript（上中下三册）
链接：https://pan.baidu.com/s/1nsygodbvTXaM6pFGi0IhqQ 提取码：7m71原创 2019-01-31 17:58:13 · 8629 阅读 · 0 评论 -
DOM初探（3）——刮刮乐
滑过哪里，哪块变色，滑的越多，颜色越浅视频：https://ke.qq.com/course/231577?taid=3983676656552089当没有边线的时候，效果越好<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>abraha...原创 2019-01-17 20:55:30 · 7960 阅读 · 0 评论 -
DOM初探（2）——选项卡
视频：https://ke.qq.com/course/231577?taid=3983676656552089<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>abraham</title> ...原创 2019-01-15 15:08:39 · 8005 阅读 · 0 评论 -
DOM初探（1）——基本操作
视频：https://ke.qq.com/course/231577?taid=3983676656552089DOMDOM（document object model） DOM定义了表示和修改文档所需的方法。DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也用人称DOM是对HTML以及XML的标准编程接口。补充：什么东西都操作不了CSS！！...原创 2019-01-15 15:06:18 · 8037 阅读 · 0 评论 -
测试颜色（#000-#fff）
<html><head> <SCRIPT language=javascript> function makeArray(q) { for (i = 1; i <= q; i++) { this[i] = 0 ...原创 2019-01-09 18:10:41 · 14207 阅读 · 0 评论 -
JS——es5的严格模式（3）es5.0严格模式不让用的东西（arguments.callee和function.caller）
视频：https://ke.qq.com/course/231577?taid=3983676656552089"use strict" function test(){ console.log(arguments.callee); } test();callee，call...原创 2018-12-31 14:25:06 · 7704 阅读 · 0 评论 -
JS——es5的严格模式（2）es5.0严格模式不让用的东西（with(){}）
with(){}2. var obj = {3. name : "obj"4. }5. var name = 'window';6. function test(){7. var name = 'scope';8. ...原创 2018-12-31 14:11:25 · 7314 阅读 · 0 评论 -
JS——es5的严格模式（1）es3.0和es5.0的区别
视频：https://ke.qq.com/course/231577?taid=3983676656552089“use strict”（1）不在兼容es3的一些不规则语法，使用全新的es5规范 （2）两种用法： （2.1）全局模式 （2.2）局部函数内严格模式（推荐） （3）就是一行字符串，不会对不兼容严格模式的浏览器产生影响...原创 2018-12-30 19:53:25 · 7214 阅读 · 0 评论