自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(93)
  • 收藏
  • 关注

原创 jQuery的基本使用

jQuery的下载:官网地址:https://jquery.com/版本:1x:兼容 IE 678等低版本浏览器,官网不再更新2x:不兼容 IE 678等低版本浏览器,官网不再更新3x:不兼容 IE 678等低版本浏览器,是官方主要更新维护的版本各版本的下载地址:https://code.jquery.com/jQuery的使用步骤1.引入jQuery文件<!DOCTYPE...

2020-03-29 21:42:54 63

原创 jQuery入门

jQuery概述JavaScript库:即library,是一个封装好的特定集合(方法和函数),从封装一大堆的函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如animate,hide,show,比如获取元素等。简单理解:就是一个JS文件,里面对我们原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了。比如jQuery,就是为了快速方便的操作...

2020-03-29 21:08:24 112

原创 给下面的这个字符串变成科学计数法,每隔三位打一个点,方法不限

给下面的这个字符串变成科学计数法,每隔三位打一个点,方法不限(\d{3})+):3的倍数位个数值的空并且以):3的倍数位个数值的空并且以):3的倍数位个数值的空并且以结尾(\B)非单词边界 var str = '100000000000'; var reg = /(?=(\B)(\d{3})+$)/g; // str.replace(str, '.'); con...

2020-03-29 18:16:13 208 1

原创 正则表达式(2)

选择在 a 后面跟着 b 的 a, a 的后面跟的是 b ,但是 b 不参与选择,b 只参与修饰正向预查 正向断言 var str = 'abaaaaaaa'; var reg = /a(?=b)/g;将 a 的后面不是 b 的匹配出来 var str = 'abaaaaaaa'; var reg = /a(?!b)/g;贪婪原则: var str = '...

2020-03-29 18:12:13 80

原创 将the-first-name经过处理之后变成小驼峰式写法theFirstName

// 将the-first-name经过处理之后变成小驼峰式写法theFirstName var reg = /-(\w)/g; var str = 'the-first-name'; console.log(str.replace(reg, function($, $1) { return $1.toUpperCase(); }));...

2020-03-29 15:51:30 690

原创 RegExp对象方法

方法compile 编译正则表达式exec 检索字符串中指定的值。返回找到的值,并确定其位置test 检索字符串中指定的值。返回true或false var reg = /ab/g; var str = 'ababab'; console.log(reg.lastIndex); console.log(reg.exec(str...

2020-03-27 22:37:36 229

原创 RegExp对象属性

属性描述globalRegExp对象是否具有标志 gignoreCaseRegExp是否具有标志 ilastIndex一个整数,标示开始下一次匹配的字符位置multilineRegExp对象是否具有标志 msource正则表达式的源文本...

2020-03-27 22:14:54 184

原创 量词

n+ {1, }n* {0, }n? {0,1}n{X} {x}n{x,y} {x,y}n{x, } {x, }//一到正无穷贪婪匹配原则\w+ 表示+前面的变量可以出现一次或多次 var reg = /\w+/g;//\w+ 表示+前面的变量可以出现一次或多次 var str = 'abc'; var reg = /\w*/g; var...

2020-03-27 21:59:56 202

原创 Unicode编码

Unicode 编码一有十七层编码第0层:\u0000 这个后面的四个0代表的是16进制的数第一层:\u010000 - \u01ffff 前两位代表的层01,后面的四位代表的是Unicode编码的范围第二层:\u020000 - \u02ffff第十六层:\u100000 - \u10ffff...

2020-03-26 17:40:01 748

原创 正则表达式-元字符

// word\w===[0-9A=z_] \w代表的是0-9,A-z,加上一个下划线 _\W === [^\w]\d===[0-9] 指0到9\D===[^\d] 指非0到9\s===[\t\n\r\v\f ]\s元字符用于查找空白字符,空白字符可以是:空格符制表符回车符换行符垂直换行符换页符\S 查找非空白字符\b 匹配单词边界\B 匹配非单词边界\0 查找...

2020-03-26 17:38:50 230

原创 正则表达式

exmaple1:字符串满足前三位是0-9之间的数组字 var reg = /[1234567890][1234567890][1234567890]/g; //字符串满足前三位是0-9之间的数组字 var str = '23452u6324ihuyghuiju328';exmaple2:var reg = /[ab][cd][d]/g; var str = 'abc...

2020-03-24 16:17:31 169

原创 RegExp正则表达式

正则表达式作用:匹配特殊字符或有特殊搭配原则的字符的最佳选择。两种创建方式:1.直接量exmaple:/ abc/代表正则表达式要求字符串里面的内容含有abc,要求和/ /里面的内容一模一样, var reg = /abc/; var str = 'abcd'; var reg = /abce/; var str = 'abcd';2.new RegExp()...

2020-03-19 22:59:20 91

原创 文件I/O

存储器:寄存器: 非常快,数量少内存: 速度快,容量较大,数据掉电消失外存: 速度慢,容量非常大1、文件IOLinux上一切皆是文件文件描述符: 非负整数,当创建或打开文件时会返回一个顺序分配的非负整数,这个整数就是文件描述符, 文件IO就是通过文件描述符来对文件进行操作 一个程序中有3个文件自动打开: 标准输入(键盘): 0 标准输出(屏幕):1 标准错误输出(...

2020-03-18 19:09:03 84

原创 时间线

js加载时间线js时间线1.创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readState=‘loading’.2.遇到link外部css,创建线程加载,并继续解析文档,3.遇到script外部js,并且没有设置async,defer,浏览器加载,并阻塞,等待js加载完成并执行该脚...

2020-03-18 17:11:13 139

原创 异步加载js

异步加载js为什么js加载会阻断加载的进行?因为js会修改html和cssjs加载的缺点:加载工具方法没必要阻塞文档,过的js加载会影响页面效率,一旦网速不好,那么整个网页将等待js加载而不进行后续渲染等工作。有些工具方法需要按需加载,用到再加载,不用不加载。javascript 异步加载 的 三种方案1.defer异步加载,但要等到dom文档全部解析完才会被执行。只有 IE 能用,也...

2020-03-17 18:01:30 84

原创 JSON

json:json是一种传输数据的格式(以对象为样板,本质上就是对象,但用途有区别,对象就是本地用的,json是用来传输的)JSON.parse(); string ———— > jsonJSON.stringify(); json ———— > stringjson{“name”:“deng”,“age”:123,}json里面规定的对象名必须加双引号,传...

2020-03-17 17:35:40 120

原创 文本操作事件

input focus blur change输入就触发 var input = document.getElementsByTagName('input')[0]; input.oninput = function(e) { console.log(this.value); }点enter就触发 input.onchange = functi...

2020-03-16 21:17:35 136

原创 键盘事件

键盘事件:keydown keyup keypresskeydown > keypress > keyupkeydown和keypress的区别:1.keydown可以响应任意键盘按键,keypress只可以响应字符类键盘按键2.keypress返回ASCII码,可以转换成响应字符 document.onkeypress = function() { ...

2020-03-16 21:13:47 82

原创 事件分类

事件分类:鼠标事件click,mousedown,mousemove,mouseup,contextmenu,mouseover,mouseout,mouseenter,mouseleave用button来区分鼠标的按键,0/1/2DOM3标准规定:click事件只能监听左键,只能通过mousedown和mouseup来判断鼠标键如何解决mousedown和click的冲突封装一个鼠标...

2020-03-16 20:26:57 168

原创 事件委托

事件委托:利用事件冒泡,和事件源对象进行处理优点:1.性能 不需要循环所有元素一个个绑定事件2.灵活 当有新的子元素时不需要重新绑定事件

2020-03-15 19:17:00 71

原创 事件对象

事件对象:event||window.event用于IE事件源对象:event.target 火狐只有这个event.srcElement ie只有这个这俩chrome都有兼容性写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt...

2020-03-15 19:10:30 58

原创 事件对象的小例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...

2020-03-15 19:05:51 52

原创 取消冒泡事件和阻止默认事件

取消冒泡事件和阻止默认事件取消冒泡:W3C标准event.stopPropagation();但不支持IE9以下版本IE独有event.cancelBubble=true;封装取消冒泡的函数stopBubble(event)阻止默认事件:默认事件 —— 表单提交,a标签跳转,右键菜单等1.return false;以对象属性的方式注册的事件才生效。2.event.preventDe...

2020-03-15 18:23:40 163

原创 事件处理模型 —— 事件冒泡、捕获

事件处理模型 ————— 事件冒泡、捕获事件冒泡:结构上(非视觉上)嵌套关系的元素,会存在事件冒泡的功能,即同一事件,自子元素冒泡向父元素。(自底向上)事件捕获:结构上(非视觉上)嵌套关系的元素,会存在事件捕获的功能,即同一事件,自父元素捕获至子元素(事件源元素)。自顶向下IE没有捕获事件触发顺序,先捕获,后冒泡focus, blur, change, reset, select...

2020-03-15 16:31:47 141

原创 解除事件处理程序

解除事件处理程序ele.οnclick=false/’’/null; div.onclick = function() { console.log('a'); this.onclick = null; }ele.removeEventlistener(type,fn,false); div.addEventListener('click...

2020-03-14 15:39:15 79

原创 事件处理程序的运行环境

事件处理程序的运行环境1.ele.onXXX=function(){}程序this指向是dom元素本身2.obj.addEventListener(type,fn,false);程序this指向是dom 元素本身3.obj.attachEvent(‘on’+type, fn);程序this指向windowexmaple:改变this指向。让this指向由window改为指向divd...

2020-03-14 14:20:14 89

原创 如何绑定事件处理函数

如何绑定事件处理函数1.ele.onXXX=function(event){}兼容性很好,但是一个元素的同一个事件上只能绑定一个处理程序基本等同于写在HTML行间上var div = document.getElementsByTagName('div')[0]; // 句柄 div.onclick = function() { th...

2020-03-14 13:53:26 452

原创 改变样式小案例

改变元素样式最好在css中改,因为效率比较高<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2020-03-14 12:33:02 57

原创 获取伪元素样式的小案例

通过点击事件改变伪元素的颜色<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...

2020-03-14 12:21:46 117

原创 获取伪元素样式的方法

window.getComputedStyle(ele,null);这个方法的第二个参数可以获取伪元素的样式exmaple:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width...

2020-03-14 12:12:54 413 2

原创 脚本化CSS(1)

脚本化CSS:读写元素css属性dom.style.prop可读写行间样式,没有兼容性问题,碰到float这样的保留字属性,前应加csseg:float————> cssFloat复合属性必须拆解,组合单词变成小驼峰式写法写入的值必须是字符串格式exmaple:<div style="width: 100px;height: 100px;background-color...

2020-03-13 12:11:24 74

原创 JavaScript小程序写一个自动阅读定时器

DOM基本操作:window上有三个方法scroll(),scrollTo(), scrollBy();三个方法功能类似,用法都是将x,y坐标传入。即实现让滚动轮滚动到当前位置。区别:scrollBy()会在之前的数据基础之上做累加。eg:利用scrollBy()快速阅读的功能。<div style="width: 100px;height: 100px;backgroun...

2020-03-13 11:39:06 220

原创 日期对象Date()

日期对象是系统提供的封装函数,打印当前是何年何月何日何时,几分几秒。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <script>...

2020-03-12 13:09:30 93

原创 封装函数insertAfter();功能类似insertBefore(); 提示可忽略老版本浏览器,直接在Element.prototype上编程

封装函数insertAfter();功能类似insertBefore(); 提示可忽略老版本浏览器,直接在Element.prototype上编程Element.prototype.insertAfter = function(targetNode, afterNode) { var beforeNode = afterNode.nextElementSiblin...

2020-03-12 12:35:35 312

原创 JavaScript的DOM的基本操作

Element节点的一些属性innerHTML:可读可写exmaple: <div></div> <script> var div = document.getElementsByTagName('div')[0]; div.innerHTML = '123'; ...

2020-03-12 11:40:35 61

原创 JavaScript节点的增删改查

增:创建一个div标签(创建元素节点)var div = document.createElement(‘div’);创建文本节点var text=document.createTextNodes(‘zaoshanghaoa’);创建注释节点var comment = document.createComment(‘this is comment’);document.body.ap...

2020-03-12 10:54:49 206

原创 完整版封装函数,返回元素e的第n个兄弟元素节点,n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己

完整版的封装函数,返回元素e的第n个兄弟元素节点,n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body&gt...

2020-03-11 21:57:43 112

原创 封装函数,返回元素e的第n个兄弟元素节点,n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己

封装函数,返回元素e的第n个兄弟元素节点,n为正,返回后面的兄弟元素节点,n为负,返回前面的,n为0,返回自己<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> ...

2020-03-11 21:36:51 148

原创 JavaScript编辑函数,封装myChildren功能,解决以前部分浏览器的兼容性问题(找该节点的子元素节点)

编辑函数,封装myChildren功能,解决以前部分浏览器的兼容性问题(找该节点的子元素节点)<div> <b></b> abc <!-- this is comment --> <strong> <span> <i...

2020-03-11 21:10:21 156 1

原创 JavaScript封装函数,返回元素e的第n层祖先元素节点

封装函数,返回元素e的第n层祖先元素节点<div> <strong> <span> <i></i> </span> </strong> </div> <script&g...

2020-03-11 20:54:06 281

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除