JS
文章平均质量分 72
jwllwj_2018
start:2016.7-2016.12 ~~~记录
展开
-
JQuery使用及基础原理解析相关笔记(一)
1.jquery◆很强大,但是很臃肿,需要自己封装一个jquery,要用到jqery中哪些方法,就把原来jquery中的方法拿出来。◆jquery有两大特点:链式编程、隐式迭代(遍历)。2.原生js的入口函数与jquery的入口函数◆原生js的入口函数:window.onload = function () {}是页面文档和页面资源都加载完毕之后开始执行函数里面的代码,document.onrea...原创 2018-06-28 21:06:45 · 7168 阅读 · 0 评论 -
Javascript操作DOM的API及兼容性相关笔记(三)
1.数组的那些遍历方法forEach、map、filter、every、some,在IE678中不存在,dom对象的属性操作方法getAttribute、setAttribute、removeAttribute在IE678中也不存在,通过控制台打印的时候发现,返回的是一个Object类型的{},也就是空对象。◆js兼容性封装代码/** * 功能:根据id获取元素节点 * @param id ...原创 2018-06-25 16:32:04 · 189 阅读 · 0 评论 -
Javascript操作DOM的API及事件详解相关笔记(二)
1.事件三要素 如唐僧念紧箍咒 孙悟空就头疼◆事件源 --> 唐僧◆事件类型 -->念咒◆事件处理程序 --> 孙悟空头疼 2.在js中 事件源指的是 引发后续事件的标签,事件指的是 js已经定义好的可以直接使用的事件,事件驱动程序指的是 对样式和html的操作(Dom操作)。3.获取事件源的四种方式★getElement前缀表示获取一个元素对象,getElements前缀表...原创 2018-06-25 16:17:26 · 222 阅读 · 0 评论 -
Javascript操作DOM的API详解及使用小技巧相关笔记(一)
1.DOM是由节点组成的,操作DOM实际上就是操作节点,DOM是html文档的模型抽象,数据是以树的形式在内存中排列的。2.获取节点或者访问节点的方式有两种,一是直接获取,二是通过访问关系来间接获取,也就是根据自己来找与自己有关系的节点如自己的兄弟节点、父亲节点、儿子节点等等,节点的访问关系是以属性形式存在的。◆找自己上一个兄弟节点 ◇当前节点.previousElementSibling,这个找...原创 2018-06-25 15:58:07 · 208 阅读 · 0 评论 -
数组常用的API详解及使用小技巧相关笔记(一)
1.数组的栈和堆特性◆进栈 push() 可以一次性放多个参数,内部是使用 遍历argument伪数组来存的,使用push方法是将数据存数组的最末项,存进去之后会返回当前数组的长度,出栈pop() 可以从数组的最末尾取出一个数组元素并且返回,但是也会把这个数组元素移除原数组。◆进队列 unshift() 可以一次性放多个参数,是将元素存到数组的最前面,存进去之后会返回数组的长度,出队列shift(...原创 2018-06-25 15:19:15 · 374 阅读 · 0 评论 -
冒泡排序逐步详解相关笔记(一)
1.冒泡排序实际上是数组中相邻的两个元素互相比较,满足条件之后就会互换位置◆ 需要双重for循环◆比较的轮数 默认是数组元素的个数减1◆每轮比较的次数 默认是数组元素的个数减1◆满足了相邻的两个元素互相比较的条件之后,就会互换这两个元素的位置,从而达到大的值或最小的值不断的往前面放或者往后面放的目的◆随着每轮的比较,最大的或最小的会被放在最前面或最后面,那么就可以少比较几次,因为那几次没有意义,那...原创 2018-06-25 14:41:46 · 257 阅读 · 0 评论 -
自己封装jquery相关笔记(四)
1.jQuery中的属性和样式操作◆addClass:给所有元素添加新的class◆removeClass:删除所有元素指定额class◆hasClass:判断所有元素有没有指定的class◆toggleClass:有则删除,没有则添加◆attr:设置或者获取元素的属性节点值◆prop:设置或者获取元素的属性值◆css:设置或者获取元素的样式◆val:获取或者设置元素的value属性2.属性节点与...原创 2018-06-17 12:09:42 · 192 阅读 · 0 评论 -
自己封装jquery相关笔记(二)
1.IE8及以下中的apply的问题◆apply方法可以改变this指向,同时可以把数组或者伪数组平铺传入给函数◆但是ie8,apply只能平铺真数组或者内置的伪数组arguments,如果是自定义的伪数组,那么就会直接报错。★IE8中需要先把自定义的伪数组转换为真数组,才能借用apply【var obj={0:'abc',1:'cba',length:2};var o={};//使用普通的方式来...原创 2018-06-17 12:09:27 · 141 阅读 · 0 评论 -
自己封装jquery相关笔记(一)
1.复习jQuery的常用方法,复习js原生的方法,了解jQuery的大概实现,锻炼编码能力。2.jquery对外暴露的两个方法:jQuery和$,这两种方式实际上是同一个方法,通过调用这两个方法,可以得到一个jQuery实例对象◆jQuery实例对象是一个伪数组对象【 //验证实例是伪装数组对象 console.log(({}).toString.call ($("<div><...原创 2018-06-17 12:09:21 · 186 阅读 · 0 评论 -
js+面向对象+html5+canvas相关笔记(四)
1.函数的四种调用模式◆函数调用 == window◆方法调用 == 宿主◆构造器 == 实例对象◆上下文(间接调用) == 自由指定★函数执行时,内部的this指向才会确定,函数执行时this的指向与定义无关,与调用方式有关。2.绘制环境的保存与回滚◆状态可以保存多份◆回滚每次回滚到最近的状态保存◆状态的保存与回滚与路径无关。3.判断点在不在路径中:◆ctx.isPointInPath(要判断的...原创 2018-06-17 12:09:11 · 159 阅读 · 0 评论 -
js+面向对象+html5+canvas相关笔记(三)
1.绘制图片的API,ctx.drawImage()◆绘制图像的第一种方式,三参数版本,把图像绘制到指定的坐标:【img.onload=function(){//在图片加载完毕后,开始画图片,没有设置图片的宽高,所以超出部分会被隐藏ctx.drawImage(img,10,10);},第一个参数是图片元素对象,第二个参数是位于画布的x轴坐标点,第三个参数是位于画布的y轴坐标点】◆绘制图像的第二种方...原创 2018-06-17 12:09:03 · 217 阅读 · 0 评论 -
js+面向对象+html5+canvas相关笔记(一)
1.Canvas是Html5提供的一个展示绘图效果的标签<canvas></canvas>◆使用canvas标签,即可在页面中开辟一个区域,可以设置width和height来设置该区域的尺寸◆默认canvas的宽高为300和150◆不要使用css的方式设置宽高,应该使用html属性◆如果浏览器不支持canvas标签,那么就会将其解释为div标签,因此常常在canvas中嵌入...原创 2018-06-17 12:08:48 · 300 阅读 · 0 评论 -
Javascript操作BOM的API及小技巧相关笔记(一)
1.DOM操作表格,很少见到使用的场景,但不代表没有一点用处。◆创建表格:var table=document.createElement("table");◆在表格中插入行:var tr=table.insertRow(0);表示在表格的第一行之前插入一行,table.insertRow(1);表示在表格的第二行之前插入一行,如果你table.insertRow(5);然后你前面的一行不存在,那...原创 2018-06-25 17:46:57 · 375 阅读 · 0 评论 -
Javascript常用API及事件原理相关笔记(一)
1.定义Date日期对象的四种方式及对日期对象进行操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Date日期对象的定义方式</title></head>&am原创 2018-06-25 22:37:05 · 194 阅读 · 0 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(一)
1.offset家族◆offsetWidth和offsetHeight表示盒子真实的宽度高度,这个真实的宽度包括 四周的边框、四周的padding、及定义的宽度高度或内容撑开的高度和宽度,可以用来检测盒子实际的大小,属性也是只读不可写的,返回的是不带单位的数值,返回值为number类型。◆offsetLeft和offsetTop表示当前盒子在定位后距离定位了的父容器的左偏移与上偏移,该属性是只读的...原创 2018-06-25 23:20:04 · 169 阅读 · 0 评论 -
Javascript的正则表达式相关笔记(一)
1.正则表达式定义的方式有两种:内置对象定义法、字面量定义法◆数组使用字面量定义的方式是[]、对象使用字面量定义的方式是{}、正则使用字面量定义的方式是/abc/(/占位置不能为空/)var reg=new RegExp(/abc/);,通过new 关键字和构造函数来定义var reg=/abc/;,通过正则表达式字面量来定义◆<!DOCTYPE html><html lan...原创 2018-06-28 20:12:40 · 576 阅读 · 0 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(六)
1.图片轮播之旋转木马◆原理:将每张图片的样式都存到一个数组中,每一张图片的样式有多个,所以那个数组里面的元素都是对象,通过制作的缓速框架,移动每一张图片对象,缓速改变图片的样式,缓速改变的样式都在数组元素的对象里,所以改变了数组中元素的位置,就让图片轮播起来,并且还是以旋转木马的方式,通过将第一个元素shift然后push达到顺时针旋转,通过将最后一个元素pop然后unshift达到逆时针旋转。...原创 2018-06-28 18:08:02 · 838 阅读 · 0 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(五)
1.client家族◆box.clientWidth:表示盒子的宽度加padding◆box.clientHeight:表示盒子的高度加padding◆box.clientTop:表示盒子上边的border大小◆box.clientLeft:表示盒子左边的border大小◆<!DOCTYPE html><html lang="en"><head> &...原创 2018-06-28 17:33:19 · 11141 阅读 · 0 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(四)
1.图片轮播基础之缓速轮播◆使用封装的缓慢速动画来DIY滑动轮播图,也就是鼠标移动到123456这些数字上后,图片以缓慢速滑动的方式进行切换。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用封装的缓速动画制作滑动轮播图&原创 2018-06-28 16:24:27 · 74807 阅读 · 1 评论 -
HTML5的使用及基本注意说明相关笔记(二)
1.使用HTML5来DIY彩虹播放器◆html5新增的语义化标签,多媒体盒子标签 figure,专门用来放视频标签、音频标签、图片标签等,<figure><figcaption>视频</figcaption></figure>◆document.querySelector("button:nth-child()3"),是可以获取到元素的,html5新...原创 2018-07-02 13:56:53 · 450460 阅读 · 0 评论 -
CSS3的使用及基本注意说明相关笔记(四)
1.使用CSS3来DIY图片i无缝轮播效果:图片大小:126*86<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>使用css3动画制作自动无缝轮播图</title> <sty原创 2018-07-02 12:19:48 · 160111 阅读 · 1 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(三)
1.scroll家族◆scrollWidth表示元素的内容宽度加上padding,不包括border和margin,scrollHeight表示元素的内容高度和padding,当内容小于盒子定义的高度时scrollHeight就是盒子定义的高度加上padding,主要是以元素内容的高度和padding来决定大小的,注意在IE7及以下scrollHeight只有元素的内容的高度和padding来决定...原创 2018-06-26 15:24:34 · 260 阅读 · 0 评论 -
Javascript使用三大家族和事件来DIY动画效果相关笔记(二)
1.offset家族补充◆offset取值返回时一个number类型的数值,但是它不会返回带小数的整数,内部做了四舍五入的处理,如style.left=9.4px,offsetLeft获取到的值是9,然而style.left=9.5px,offsetLeft获取到的值是10。2.缓速动画与匀速动画的原理◆匀速动画的原理:this.style.left=this.offsetLeft+步长(也就是每...原创 2018-06-26 14:51:14 · 368 阅读 · 0 评论 -
HTML5的使用及基本注意说明相关笔记(一)
1 网页开发方式上的两个层次:◆HTML4.1 ◇结构:html4.0 ◇样式:css css2 ◇行为:js◆HTML5 ◇结构:html5 ◇样式:css3 ◇行为:js API 有所增强 如 地理定位 web存储 拖拽 重力感应 硬件访问等2.HTML5◆HTML5狭义的概念上就是HTML4的升级版本,HTML5广义上的概念上就是代表着浏览器技术发展的的一个阶段,也就是 html5+css3...原创 2018-07-01 12:51:15 · 400 阅读 · 0 评论 -
JQuery使用及基础原理解析相关笔记(三)
1.jQuery的核心–所有版本:https://code.jquery.com/jquery/2.jQuery属性操作:◆设置属性:当前节点.attr(属性名,属性值);◆获取属性:当前节点.attr(属性名);◆移除属性:当前节点.removeAttr(属性名);◆设置属性:当前节点.prop(属性名,属性值);◆获取属性:当前节点.prop(属性名);◆移除属性:当前节点.removePro...原创 2018-07-01 11:41:20 · 257 阅读 · 0 评论 -
JQuery使用及基础原理解析相关笔记(二)
1.jquery操作css样式◆设置样式: $(element).css({"width":"100px","height":"100px"});◆设置样式: $(element).css({"width":100,"height":100});◆ 设置样式:$(element).css("backgound-color","#f00");◆ 设置样原创 2018-07-01 10:01:57 · 234 阅读 · 0 评论 -
js+面向对象相关笔记(七)
1.代码进行压缩处理的时候,系统的内置对象无法进行压缩,如果想压缩的话,只能通过传递参数的方式来进行压缩处理。2.沙箱模式◆【(function(w){//变量的定义//逻辑的代码//如果需要,使用window向外界暴露接口//window==w})(window)】3.上下文调用模式◆call apply,你想将函数中的this变成谁,就把谁作为方法的第一个参数,当方法中的第一个参数为null时...原创 2018-06-17 12:08:39 · 198 阅读 · 0 评论 -
js+面向对象相关笔记(六)
1.绘制作用域链◆先画0级作用域链◆在全局作用域中查找,函数和变量的声明,然后将这些变量和函数,以小方块儿的形式放到0级作用域链上◆从0级作用域中的函数引出1级作用域◆再去每个1级作用域中查找变量和函数的声明,然后将这些变量和函数放到1级作用域链上◆依次重复这样的步骤2.线程:◆js是单线程的,单线程表示一次只能够处理一个问题,多线程表示一次能够处理多个问题 ◆js中,分了三个线程,不是并行的【 ...原创 2018-06-15 09:53:46 · 166 阅读 · 0 评论 -
js+面向对象相关笔记(五)
1.作用域(起作用的范围)◆块儿级作用域:ECMAScript6之前js中没有块儿级作用域◆词法作用域:就是在代码写好的一刻,变量的作用域就已经确定了,这种作用域,就是所谓的词法作用域,和词法作用域相对的叫动态作用域,js中的词法作用域不是动态作用域◆ECMAScript6之前js中唯一能够产生作用域的东西是 函数◆词法作用域的规则【 ◇函数允许访问函数外的数据 ◇整个代码结构中只有函数可以限定作...原创 2018-06-15 09:53:35 · 163 阅读 · 0 评论 -
js相关笔记(八)
1.对象字面量,字面量是指表面上的值,对象字面量默认是{},所以对象也可以是用{}来创建并且来添加属性和方法,如:◆var student={name:"flag",age:20,sayHi:function(){}};◆var student={"name":"flag","age":20,"sayHi":function(){}};◆这种方式类似于var student=new Object...原创 2018-06-10 18:04:47 · 116 阅读 · 0 评论 -
js相关笔记(七)
1.当你没有精神的时候,我嘲笑你,你心里一毛,嘿,立马就精神了。2.匿名函数,是没有名字的函数,存在方式有三种,不允许直接定义,会报错◆存在方式一:定义完直接调用(function(){console.log(1);})();◆存在方式二:绑定事件 document.onclick=function(){console.log(1);}◆存在方式三:绑定定时器 setInterval(functi...原创 2018-06-10 18:04:37 · 104 阅读 · 0 评论 -
js相关笔记(六)
1.函数就是方法,具有一定功能的代码块儿,用来重复执行的功能代码块儿,功能的复用性很强用到的地方比较多。2.函数由 函数名 参数 返回值 函数体组成,函数也由 功能名 参数 返回值 功能 组成。3.如果出现函数名相同的函数,后面的函数会覆盖掉前面的函数,所以javascript中不存在函数重载。4.定义函数时给的参数叫做形参,也就是表面形式上参与功能实现的参数,调用函数是给的参数叫做实参,也就是实...原创 2018-06-10 18:04:27 · 129 阅读 · 0 评论 -
js相关笔记(五)
1.javascript的意义◇最开始是用来进行表单验证的。★现在是 ◆页面特效(pc端的网页效果) ◆移动端(移动web和app) ◆异步和服务器交互 ◆服务端开发(nodejs)2.CoffeeScript,TypeScript 3.浏览器工作原理 推荐网站:https://www.2cto.com/kf/201202/118111.html4.<script type="text/ja...原创 2018-06-09 07:27:41 · 231 阅读 · 0 评论 -
js相关笔记(四)
1.使用fireworks时,如果是直接打开一张图片,那么你就要锁定那个图层,否则,因为图片会随着的点击移动而移动。2.站点就是 项目文件夹 就是 根目录3.css 是层叠样式表,公共的样式放在上面,因为后面的样式表会把前面的样式层叠掉。4.推荐的制作图标的网站 bitbug.net5.那些所谓跳出历史舞台的html标签 如 i s u b ,其实只是他们的语义化跳出历史舞台 ,被em del ...原创 2018-06-09 07:22:43 · 137 阅读 · 0 评论 -
js相关笔记(三)
1.使用switch时 必须注意,每一个case结束后必须使用break,否则就会出现自己的case结束后会继续跳到下一个case去,这么做就像是case的集体声明一样,当多个case中结果一致时才可以这样做。4.switch中的判断是绝对等于 === 不光要数据类型一致还要内容也一样才行。5.自增自减◆i++,++i 当不参与运算的情况下 ++在前面和在后面是一样的,都是 i=i+1;◆i++...原创 2018-06-09 07:22:32 · 105 阅读 · 0 评论 -
js相关笔记(一)
1.js是基于对象的,基于对象就是简单直接的操作现有的对象,没有面向对象那样自己过多的去手动继承封装多态,直接操作现有的对象的属性,编写少量的代码就可以完成目标。2.js的三大作用◆表单验证◆轮播特效◆开发游戏3.js五种输出信息的方式◆alert(""); 提醒框 早期js调试的时候用◆confirm(""); 确认框 返回false 或true◆prompt(""); 输入框 返回你输入的信...原创 2018-06-09 07:22:05 · 175 阅读 · 0 评论 -
js相关笔记(二)
1.其实很多文件都是经过压缩后改变后缀名的,如果想看被压缩的文件,你就可以改后缀为.rar,然后解压即可,如excel或者chm。2.学习就是把没意思变成有意思。3.日期对象 Date◆Date() 全格式的日期字符串输出◆new Date() 全格式的日期字符串输出◆new Date().getDay() 返回一周中的第几天的数字 0-6之间 0是星期天◆new Date().getDate...原创 2018-06-09 07:22:22 · 166 阅读 · 0 评论 -
Javascript中交换两个变量值的十种方法相关笔记(一)
交换两个变量的值十种方法:◆第1、6、7、8、10既可以交换简单数据类型也可以交换复杂数据类型的,基本可以确定是任何类型的值。◆第2,3,4,5,9只可以交换简单数据类型的,基本可以确定是数字类型的值。<script type="text/javascript"> //第1种使用第三方变量 { let a=10, b=20,temp=0; temp=a;//10 a=b...原创 2018-06-22 15:07:29 · 339 阅读 · 0 评论 -
js相关笔记(九)
1.dom和bom与前端的关系是水火交融,不可分割。2.编程到了极致,就是内存和算法。3.事件三要素 如唐僧念紧箍咒 孙悟空就头疼◆事件源 --> 唐僧◆事件类型 -->念咒◆事件处理程序 --> 孙悟空头疼 4.在js中 事件源指的是 引发后续事件的标签,事件指的是 js已经定义好的可以直接使用的事件,事件驱动程序指的是 对样式和html的操作(Dom操作)。5.获取事件源...原创 2018-06-10 18:04:56 · 149 阅读 · 0 评论 -
js相关笔记(十)
1.禁用文本框 可以使用disabled属性,但是使用了disabled属性后提交表单时会出现提交的成员中没有这个文本框,所以禁用文本框可以使用 readonly属性,表单提交会提交设置了readonly属性的表单而不会提交设置了disabled属性的表单。2.在函数中使用this,函数加载时只加载函数名不加载函数体,所以谁调用了当前的函数,这个this就指向谁,行内绑定事件的方式使用的是第三种定...原创 2018-06-10 18:05:05 · 114 阅读 · 0 评论