11 2018 档案
摘要：查看元素的几何尺寸
domEle.getBoundingClientRect()
在获取的dom元素上，有一个getBoundingClientRect方法，这个方法可以获取到元素的宽高和左上点的位置以及有下点的位置（width、height、top、left、right、bottom），注意这里的宽高是指除去了margin的盒子模型的宽高。
但是老版本的IE浏览器没有实现width和height，那么我们在老版本的IE计算宽高的时候就需要用bottom-top和right-left来计算宽高值了。
还有一点需要注意的是，这里的宽高也不是实时更新的，数据只是一个副本。
我们依然可以封装一个函数，可以返回元素的宽高。
阅读全文
摘要：视口就是我们的可视区，因为我们改变浏览器的大小的时候会改变可视区的大小，那么我们如何来查看当前浏览器的可视区大小？
这里我们依然有两套方法：
第一套是window.innerHeight/window.innerWidth;
这个方法可以直接获取到当前可视区的宽高，但是依然很遗憾的是IE8以及以下的版本不兼容。
这个时候就需要第二套方法了：
在标准模式下，doucment.documentElement.clientWidth/document.documentElement.clientHeight
在任何浏览器都兼容。
阅读全文
摘要：js中有两套方法可以查看当前滚动条的滚动距离。
第一套是这样的：
window.pageXOffset/window.pageYOffset
这个方法可以查看滚动条的横轴和纵轴的滚动距离，但是很遗憾的是IE8以及以下的版本不兼容。
因此针对于IE，我们就需要有第二套方法：
document.body.scrollLeft/doucment.body.scrollTop
document.documentElement.scrollLeft/document.documentElement.scrollTop
阅读全文
摘要：定时器是javascript的重点部分，在以后的很多实战项目里都会用到。
在javascript中，与定时器有关的方法是：
setInterval、clearInterval
以及
setTimeout、clearTimeout
阅读全文
摘要：日期对象也是javascript的内置对象之一，我们可以直接使用。
var date = new Date();
在文档中我们也可以看到它的方法很多，但是常用的其实并没有那么多。
|Date()|返回当日的日期和时间。|
|getDate()|从 Date 对象返回一个月中的某一天 (1 ~ 31)。|
|getDay()|从 Date 对象返回一周中的某一天 (0 ~ 6)。|
|getMonth()|从 Date 对象返回月份 (0 ~ 11)。|
|getFullYear()|从 Date 对象以四位数字返回年份。|
|getYear()|请使用 getFullYear() 方法代替。|
|getHours()|返回 Date 对象的小时 (0 ~ 23)。|
阅读全文
摘要：一些重要的标签
• ol li
这是一组标签，它们二者都是成对出现的，每一个标签单独出现都是没有意义的事情。
这一组标签叫做有序列表，ol是外面的列表框，li是里面的子项，并且每一个li子项的前面都会带有序号。
阅读全文
摘要：• html中的标签数量是很多的，据人统计大概有300个左右，并且每年都会以20-30个的速度增加着，但是这么多的标签我们不必都去记住，因为很多标签都是不常用的或者可以用基础的标签搭配组合，实际上我们需要掌握的大概在30个左右。
• 在前端开发中我们要知道，并不是你用的技术多么先进就显得多么厉害，我们要考虑到代码的可读性以及后期的可维护性，用常见的标签来写才会让其他人都能读懂你的代码。
阅读全文
摘要：H5中拖拽属性：
draggable： auto | true | false
拖动事件：
- dragstart 在元素开始被拖动时触发
- dragend 在拖动操作完成时触发
- drag 在元素被拖动时触发
释放区事件：
阅读全文
摘要：对于已经讲解给大家的DOM基础操作实战，我今天给大家几个实战代码，可以让大家加深对此的理解！
1.用DOM动态生成这样一个结构：
阅读全文
摘要：DOM剩余的两个操作一并带来！
1.删除操作
2.替换操作
阅读全文
摘要：插入操作
1.appendChild(child);
这个是父级调用的方法，它会将child元素插入到父级里面，而且是放到逻辑后面的位置上。
阅读全文
摘要：DOM的基本操作有四种，我们会逐一给大家进行展示
增加操作
1.创建元素节点 createElement
我们可以通过document.createElement(‘div’);这个方法来创建一个元素，里面的参数填写我们要创建的标签名称，像div、p、span等等。
阅读全文
摘要：上一篇给大家的三段代码不知到大家有没有练习呢？今天再给大家带来两段DOM的练习！
4.封装函数，实现children功能，最好哎原型链上编程
阅读全文
摘要：1.遍历元素节点2.封装函数，返回元素e的第n层父节点3.封装函数，返回元素e的第n个兄弟元素节点，如果n为正，返回后面的兄弟元素节点，n为负，返回前面的，n为0，返回自己
阅读全文
摘要：我们页面里面的节点类型很多，比如元素节点、文本节点、注释节点、属性节点等等。
我们可以通过nodeType属性来查看这个节点的类型是什么。而nodeType返回的是一些数字，下面介绍几个基础的类型和数字的对应关系：
阅读全文
摘要：DOM的全称是Document Object Model 文档对象模型，DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。
DOM对象即为宿主对象，由浏览器厂商定义，用来操作html的css功能的一类对象和集合。不过浏览器厂商之间大部分都遵循w3c标准。
简单来说，DOM就是用来操作html和css的，它是一系列对象的集合。
阅读全文
摘要：1. history 是什么？
window上的一个对象，由来存储浏览器访问过的历史
2. 用途：
可以动态跳转任意一个已在历史记录中的地址
3..history方法：
1.forward() : 向后翻一页
2. back(): 回退一页
3. go(num) : num为负值时 表示回退 num为正值时表示前进
4. pushState(data, title, url): 添加一条历史记录，受同源策略限制，添加历史纪录后页面地址改变但是页面不会更新——H5新增的方法 IE9以下不兼容 5. replaceState(data, title, url) 替换当前的历史记录，受同源策略限制，添加历史纪录后页面地址改变但是页面不会更新 —— H5新增的方法 IE9以下不兼容 4. history事件：
阅读全文
摘要：1，search()用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。search()方法不支持全局搜索，因为会忽略正则表达式参数的标识g，并且也忽略了regexp的lastIndex属性，总是从字符串的开始位置进行检索，所以它会总是返回str的第一个匹配的位
阅读全文
摘要：RegExp对象中的方法 1，test()方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。 reg规定匹配以a开头的字符串，利用test进行测试，字符串str满足reg匹配规则，利用test方法进行测试，满足当前规则返回true，不满足返回
阅读全文
摘要：节点关系； 两大类: 1、父子关系 elem.parentNode => 获得elem的父节点 elem.chlidNodes => 获得elem的所有直接子节点 elem.firstChild =>获得 elem的第一个子节点 elem.lastChild=>获得elem最后一个子节点 2、兄弟关
阅读全文
摘要：网页中的 一切内容都是DOM节点对象 节点对象有共同类型，叫 Node Node当中提共了三大属性：第一个 node.nodeType: 值啊 是一个数字，nodeType表示这个节点的类型。 何时使用：区分节点的类型的时候，或者判断节点类型时候。 如何使用： document：9 元素节点：1 属
阅读全文
摘要：1、元字符 正如之前我们所提到的匹配手机号规则，正则表达式中的所有字母和数字都是按照字面含义进行匹配的。同样js中的正则表达式语法也支持非字母的字符匹配,这些字符需要通过反斜线(\)作为前缀去转义。比如上文提到的\d就是用来匹配查找数字。 2、特殊字符 3、量词 贪婪匹配：匹配字符是尽可能多的匹配，
阅读全文
摘要：给10000000000三位打点 变成 10.000.000.000 a 梳理思路 要先明白的是，我们将要转换成的数字格式是这样：从个位往左数起，每三位前插入一个千位分隔符,，即可以想象成我们要把每三位数字前面的那个空""匹配出来，并替换成千位分隔符,。每个千位分隔符后面的数字个数是3个或3的倍数个
阅读全文
摘要："display"属性 display 是CSS中最重要的用于控制布局的属性。每个元素都有一个默认的 display 值，这与元素的类型有关。对于大多数元素它们的默认值通常是 block 或 inline 。一个 block 元素通常被叫做块级元素。一个 inline 元素通常被叫做行内元素。 di
阅读全文
摘要：表单筛选器 对象属性 名称 :input JQ语法 jQuery( ":input" ) 说明 :input选择器用于匹配所有的表单控件元素，将其封装为jQuery对象并返回。 这里的表单控件包括<input>、<select>、<textarea>和<button>标签。 名称 :text JQ语
阅读全文
摘要：DOM Tree 什么是DOM树：网页的所有内容在内存当中，其实是以树形结构存储的 何时创建：当浏览器，读取html中内容的时候，会马上开始创建DOM树。 如何创建： 1、读到HTML的时候还没有度内容的时候，先创建根节点对对象 2、开始顺序读取HTML文档的内容，在创建子节点。 网页当中一切内容，
阅读全文
摘要：String它即是内置对象，也是 包装类型之一，所有的String API都无法修改原字符串，而是返回一个新的字符串。 1、大小写转换 str.toUpperCase(); str = str.toLowerCase(); 何时使用：只要不区分大小写时候 2、获取指定位置的字符 str.charAt
阅读全文
摘要：1、正则表达式中的特殊属性 （1）g 代表的是global全局匹配 （2）i 代表ignoreCase忽略大小写， （3） m 代表multiline多行匹配，、 2、特殊字符 \ 反斜线 表示转义 | 表示或 匹配该符号的左边或者右边 3、方括号 小练习 a，匹配由大小写英文字母组成的字符串 b，
阅读全文
摘要：字符串是我们在编程中涉及到的非常多的一种数据结构，涉及到很多的字符串的方法操作，同样判断一个字符串是否满足某种格式是我们会场遇到的问题，比如验证邮件手机密码等字符串格式。我们可以利用正则表达式来处理。设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串，我们就认为它“匹配”了，否
阅读全文
摘要：子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第一个子元素的元素，将其封装为jQuery对象并返回。:first-child选择器等价于:nth-child(1)选择器
阅读全文
浙公网安备 33010602011771号