- 博客(40)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 面向对象基础三
一、复习面向对象* 原型: * 每个实例对象中都有一个属性__proto__,是原型,浏览器使用的,不标准的属性 * 每个构造函数中都有一个属性prototype,是原型,程序员使用的, * 面向对象和面向过程都是编程思想 * 面向对象注重的是结果,面向过程注重的是过程 * 面向对象的特性:封装,继承,多态 * 继承: * 1.通过原型实现继承,改变原型的...
2018-04-29 08:43:05
186
原创 面向对象基础二
一、基础知识复习实例对象的_proto_和构造函数的prototype的指向是相同的。实例对象中的_proto_是原形，浏览器使用的构造函数中的prototype是原形是给程序员使用的下面介绍的原型链是一种关系，是实例对象和原形对象之间的关系。关系是通过_proto_来联系的。二、原形的指向_proto_最终指向了哪里？ 实例对象中有__proto__原型 构造函数中有prototy...
2018-04-28 19:24:09
1471
原创 js面向对象基础一
JS中的面向对象是在语言的发展中经历了汇编语言，面向过程，面向对象语言。面向过程是亲力亲为，所有代码自己写。而面向对象是对现实世界的模拟，JS准确说是基于对象的语言，不像Java有类的概念。面向对象注重的结果，是抽象出现实世界的世间万物的特征，行为加以描述。一、了解创建对象的三种方式 创建对象三种方式： 1 字面量的方式，只能描述一个对象。 2 调用系统的构造函数，是字面量方式...
2018-04-28 17:01:31
231
原创 有关面向对象中的构造器__proto__和.constructor
有关构造函数中的构造器__proto__和.constructor是我们理解的面向对象的基础。面向对象是先抽象出现实世界然后，在具体到现实世界中的具体某个东西，就是实例化过程。比如：抽象的过程Person---->实例化的过程 peopel=new Person()， 其中分析就是一个抽象的过程，分析人都有的行为，小苏这个人 属性/特性：姓名,年龄,性别, 行为：吃饭,打招呼,睡觉。先把抽...
2018-04-26 19:11:05
237
原创 两侧跟随广告
var top = pic.offsetTop; target = scroll().top + top; // 把最新的 scrolltop 给 target 在这里例子当中最为重要的是两句。为什么要加上，top的值。我们知道，水平滚到条滚动的时候。图片是需要动的，我 打印了scroll().top 和target的值。我们看到是图片变化的距离和scroll().top的变化的距离...
2018-04-25 20:38:41
229
原创 封装自己的scroll
由于不同版本的浏览器对于scroll的兼容性的支持不一样，所以我们需要做兼容性的考虑。为了避免每次使用的时候都要做兼容性的考虑。我们封装了scroll的函数。可以引入到样式中。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>&
2018-04-25 20:05:52
173
原创 屏幕滑动效果图
一、是源代码可以复制粘贴直接看效果，点击每个导航栏目，body的背景颜色都将是导航条的背景颜色，会出现滑动的效果。二、这个实现的关键是，如何让背景，回到body中，这个target值如何设置。,在每次的背景变化中，注意背景在整个documeng文档中什么是不变的。缓动动画的原理都知道是 var leader=leader+(target-leader)/10;<!DOCTYPE html&g...
2018-04-25 20:02:04
701
原创 html的结构访问
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>我的页面</title></head><body></body>&
2018-04-25 19:38:51
153
转载 模拟垂直滚动条
一，模拟垂直滚动条的事件分析首先是，滚动条和内容的位置，应该是同级关系，所以我们需要把他们放入到同一个盒子中。在拖动滚到条的时候内容跟着变化。二、效果实现，首先是获取元素，内容、盒子、滚动条。然后，分析滚动条的大小和内容的高度之间的关系。再确定事件，想想用了什么事件，首先是onmousedown事件，然后是onmousemove鼠标移动。在鼠标移动的过程中，又有几个问题，移动的时候滚动条的大小怎么...
2018-04-25 19:33:19
210
原创 鼠标经过的时候放大镜的效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * {margin: 0;padding: 0;} img
2018-04-24 16:35:59
902
原创 水平拖动滚动条
这个过程分为三步走： 一、分析首先获取元素 记得onmousemove 一定要写在onmousedown当中，善于利用var that=this 在onmosedown中最为重要的是获取移动的距离 首先是event.client-leftVal 的值； 二、 判断移动的距离是否超出范围，由于that.style.left获取的是字符串所以使用 paseInt转化为数字判断。最后把移动的...
2018-04-24 16:01:20
645
1
原创 体会event 事件中的 client offset page 中的区别
点击桌面上的div 都会产生一个对象，存放着点击之后的相关的信息；相关信息的集合。其中event的属性和方法有，width该窗口的或者框架的宽度 pageX光标相对于网页的水平位置 clientX相对于网页中可视区域水平位置。比如鼠标点击之后的坐标等等；既然是对象就有很多的属性和方法。<!DOCTYPE html><html><head lang="en">...
2018-04-24 15:37:04
451
原创 导航栏筋斗云特效
这个导航栏的效果非常简单是，在鼠标经过的时候，筋斗云会在导航中运动，一旦鼠标点击之后，筋斗云会停止在导航栏上。分析解觉思路： 思路首先获取元素 再次，有个鼠标onmouseover事件和onclick事件 最后是 onmouseout事件遍历 lis然后 执行 onmouseover事件 事件处理的过程中我们需要那些数据，一是存储鼠标经过的位置 二是存储鼠标离开的位置 最后是鼠标点击的位...
2018-04-24 15:12:20
1122
1
转载 字符串容器中常用的函数
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body><
2018-04-23 16:03:21
176
转载 有关函数的执行环境和作用域
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body></body><
2018-04-23 15:48:59
110
原创 上传正确格式的图片文件方法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><input type="file
2018-04-22 19:22:30
3304
原创 网址编码
encodeURLComponent()函数可以把字符串作为URL组件进行编码decodeURLComponent()函数可以把字符串作为URl组件进行解码由于后台对于传输过去的网址中的特殊的符号，他们并不认识，所以需要解码成，后台能够认识和识别的符号，比如符号？// 都需要进行转义。<!DOCTYPE html><html><head lang="en"> ...
2018-04-22 19:12:45
374
原创 JS中关于字符串返回的操作
1.1 复习1. 按钮不可用 disabled = “disabled” || true 2. setTimeout 只执行一次 setInterval 执行很多次 3. 递归调用 ： 函数自己调用自己 函数递归调用 不提倡用函数名 而喜欢用的是 arguments.callee 返回的是 正在执行的函数 本身4. 逻辑运算符 与 &...
2018-04-22 19:04:27
4875
原创 无缝滚动效果图
无缝滚动的效果是背后的图片滚动，当鼠标放上去的时候就停止滚动。在鼠标离开的时候就继续滚动。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style>
2018-04-22 18:40:05
280
原创 javascript的焦点图
焦点图，思路我感觉，JS在网页中的运用，只要有清晰的思维就可以。第一步需要做什么，第二步不要做什么。在我们做一些消过毒时候，运用了那些JS的知识，需要用到的事件是什么，执行的步骤，是什么。 这个效果的目的是让我们的鼠标放上去的时候背后的图片跟着滑动，按钮的颜色跟着变化。我们首先分析，按钮的颜色变化需要用到排他思想使用排他思想先遍历所有的元素，对于获取的元素执行onmouse...
2018-04-22 17:34:52
467
原创 Ajax基础知识点一
一、有关客户端和服务器端的知识点客户端是用户接受信息的平台分为浏览器、ＡＰＰ 应用软件，手机QQ、微博、邮箱等等。那他们是从哪里获取的数据的？那就需要说服务器，服务器是为谁服务的？为广大的网民提供服务，提供什么服务？提供用户需要的数据，比如一个网站的数据都保存服务器上，如果用户需要网站 数据只需要发送请求就可以。根据不同的数据有不同的服务种类，有网页服务，使用的服务器是（Apache tomcat...
2018-04-22 08:56:39
208
原创 jQuery中的DOM知识点
一、 jQuryz对象和DOM对象的区别：DOM是文档对象模型，每个DOM对象都可以看成一棵树，构建了基本的网页。而jquery对象是通过包装之后产生的。jquery对象是jquery自己所独有的。DOM对象和jquery对象的任何方法都是私有的，不可以相互使用。比如：获取值的方法$("li').html和ＤＯＭ中回去值的方法是document.getElementById("li").inner...
2018-04-21 20:25:16
215
原创 document.getElementByClassName的ｃｌａｓｓ封装问题
封装自己class类 使得浏览器识别className获取元素的方法 原理： （核心） 我们要取出所有的盒子， 利用遍历的方法 ， 通过每一个盒子的className 来判断。 如果相等就留下。<script> window.onload = function(){ //封装自己class类名 function getClass(classna...
2018-04-21 19:31:05
2866
转载 jquery中的属性操作和事件介绍02
jQuery特殊属性操作val方法val方法用于设置和获取表单元素的值，例如input、textarea的值//设置值$("#name").val(“张三”);//获取值$("#name").val();【案例：京东搜索.html】html方法与text方法html方法相当于innerHTML text方法相当于innerText//设置内容$(“div”).html(“<span...
2018-04-21 19:05:27
172
原创 jQuery 选择器介绍01
1.1 课程介绍Ø jQuery初识jQuery让js的开发变得更加简单jQuery解决了浏览器的兼容性问题Ø 学习目标使用jQuery设计常见的效果掌握jQuery的思想设计与理念Ø 总体课程安排：前三天：jQuery的基本概念、选择器、DOM操作、动画、事件以及扩展。第四天：项目实战 1.2 jQuery基本概念1.2.1 为什么要学习jQuery？ 1.2.2 什么是jQuery...
2018-04-21 19:02:45
181
原创 normalize.css&reset.css区别
normalize.css是外部的插件，是bootstrap引用的功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><b
2018-04-21 16:35:48
199
原创 有关bootstrap入门的知识讲解
一、boostrap是做什么用的，我们需要用它来做什么？bootstrap就是一个框架集合，集合我们常用的工程组件。让我们不用做重复性质的工作。比如它封装了常用的导航样式、按钮样式、轮播图等等。我们需要做的是引入boostrap然后利用现有的功能组件，组合成我们想要的效果。二、 bootstrap的组成部分介绍基础CSS样式概要预置排版样式统一预制标签样式按钮样式表格样式表单样式图片样式辅助工具类...
2018-04-21 16:23:17
206
原创 响应式框架简单知识介绍
响应式框架英文 respond layout意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。一、出现的背景在移动互联日益成熟的时候，我们在桌面浏览器上开发的网页已经无法满足移动设备的阅读。通常的做法是针对移动端单独做一套特定的版本。但是如果终端越来越多那么你需要开发的版本就会越来越多（大屏移动设备普及）。那么Ethan Marco...
2018-04-21 15:48:46
1947
原创 bootstrap案例解析
一、由于案例比较长我们先简单分析首页中header 部分的制做情况。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8">二、下面表示用最新的的浏览器解析网站代码，为了保证网站解析效果的完整性 <meta http-equiv="X-UA-Compatible
2018-04-20 22:29:25
1264
原创 有关CSS中媒体查询的知识点讲解
在有关bootstrap的文章中简单介绍了媒体查询的用法。但是可能很多人还是不太理解所以这里认真说一下。我们知道我们的PC端口和移动端口的屏幕大小不一致，如何显示一样的效果呢？如果不进行规定和设置，一旦设备的屏幕宽度发生了变化我们的网页也就完全变了样子。布局被打乱。所以我们引入虚拟的浏览器视口就是viewport为啥是虚拟的呢？我们手机不就那么大吗？所谓虚拟就是把手机的浏览器的宽度加大，然后按照规...
2018-04-20 19:54:54
299
翻译 bootstrap框架知识分享
一、简单介绍bootstrap的框架## 简介### 什么是Bootstrap？- 框架：库 lib library- jQuery作为一个框架来讲，提供一套比较便捷的操作DOM的方式- 把大家都需要的功能预先写好到一些文件 这就是一个框架- Bootstrap 让我们的 Web 开发更简单，更快捷；- 注意是 Bootstr...
2018-04-20 17:08:58
237
翻译 CSS3知识点总结
CSS3 目录 2第1章 CSS3简介 41.1 CSS3的现状 41.2 如何对待 4第2章 准备工作 42.1 统一环境 42.1 如何使用手册 5第3章 基础知识 53.1 选择器 53.1.1 属性选择器 53.1.2 伪类选择器 63.1.3 伪元素选择器 63.2 颜色 63.3 文本 73.4 边框 73.4.1 边框圆角 83.4.2 边框图片 83.4.3 边框阴...
2018-04-20 09:30:11
310
原创 H5知识点总结
一发展历史1991年出现html，只能简单把网页上传到网站上。1996年出现了JS和CSS极大美化了网页。在这儿阶段，html一直没有发展，一直到2009年W3C正式推出H5的草案。2014年在移动端大力发展，越来越普及的时期，H5在移动端逐步推广开来。H5的前身是web application 其实H5=css+html+javacript API只是在原有的基础上的一个提升。是新一代的富客户端...
2018-04-20 08:30:50
1202
原创 有关拖放的操作
我们鼠标选择文件的过程中，如何用鼠标把文件拖放进入我们的页面呢？我们需要那些事件。获取那些内容呢？这里是效果图。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>拖放操作</title> <m
2018-04-19 22:15:45
216
原创 跳转页面的操作
一、对于跳转页面的操作首先，我们分析需要在页面上输入，可以用div包装这个跳转的指令。在浏览器中输出。<body><div id="demo"></div></body></html>二、我们分析，需要确定获取的元素，#demo ，然后确定用定时器设置，setInterval(函数名，时间，我们有时候需要更改数据，更改时间怎么办。我们能不...
2018-04-19 16:48:25
344
原创 时钟效果制做
首先准备四张图片，分别代表时分秒和背景。在这里我就省略css 部分。主要的东西是设置时分秒为绝对定位，然后设置背景图片。注意background-postion的定位为center center居中显示就可以了。<body><div class="clock"> <div class="h" id="hour"></div>
2018-04-19 14:21:27
274
原创 倒计时是如何操作
对于倒计时操作我们首先需要获取的是将来的时间，然后拿将来的时间减去现在的时间，通过运算得到距离将来时间的事件差，需要把时间转化为整数进行计算。由于微秒除得的结果是小数，所以我们需要转化。取得天数是second取整之后，再除以２４进行取整，h 的取得是取余数，是不够二十四小时的余数是小时的时间。而秒数是整个除以６０之后取余数的结果。最后用三元运算符进行美化操作。在不够二位数时候，在前面加上０...
2018-04-18 16:43:12
196
原创 微博发布
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul{ list-style-type: none;
2018-04-18 16:03:53
271
原创 如何动态创建轮播图的图标
关于动态创建轮播图所用的知识点是关于JS中节点的操作和JS中属性的操作。关于JS中的效果图，首先我们需要考虑图片和轮播图图标怎么能结合在一起。我们需要那些元素。在这里我呢，就简单介绍一下。一、设置属性节点的样式。在父元素box后面添加一个div，现在style 中设置div的样式。二、我所做的是插入6张图片，然后在图片上动态创建小圆点。三、ＪＳ部分获取父元素。然后自父元素后面插入一个div元素。然...
2018-04-18 15:36:57
863
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人