自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

c__dreamer的博客

一个充满梦想的世界

  • 博客(110)
  • 资源 (1)
  • 收藏
  • 关注

原创 jQuery基础过滤

当我们需要快速选择所需要的元素的时候,那么就应该用选择器和过滤来选择了,本篇文章总结一下基础过滤目录:animated Selector:eq(index) Selector:even Selector:odd Selector:first Selector:last Selector:focus Selector:header Selector:gt(in...

2018-07-27 19:07:16 428

原创 jQuery层级选择器

    在jQuery中,为了方便层级选择,可使用层级选择器目录Child Selector ('parent > child')子元素选择器descendant Selector (后代选择器)next adjacent Selctor ('prev + next') 相邻选择器Next Sliblings Selector('prev ~ siblings)Chi...

2018-07-27 17:20:05 690

原创 jQuery属性选择器

上次总结了一下jQuery中的基础选择器,这次总结一下属性选择器   Attribute Contains Prefix Selector [name|='value']描述:选择指定属性值给定字符串或以该字符串为前缀(该字符串后跟着连字符“-”)的元素语法:jQuery("[attribute |= "value"]")或者$("[attribute |= "value"]")注...

2018-07-23 10:52:41 312

原创 jQuery基础选择器

       最近小白开始学习jQuery,也是通过看视频进行学习,来总结一下自己的学习内容,如果有不足或者出错的情况,还请在积极评论指出,相互学习。     总结一下jQuery中的基础选择器目录    All Selector(‘*’)   Class Selector(“.class”)   Element Selector("element")   ID Selec...

2018-07-23 09:21:45 279

原创 实现背景半透明的方法及兼容解决方案

        现在的CSS3有很多种实现半透明的方法,如:                CSS3新增的rgba()或者hsla()色彩值实现。                CSS的opacity属性也可以实现                针对老板本IE浏览器可以通过alpha实现(这个等下说)。        opacity                用来定义一个元素的透明级别,值介于...

2018-05-27 17:36:26 813

原创 CSS3色彩关键字currentcolor优化

        currentcolor是CSS3新增的一个可以说是变量的一个值        currentcolor                CSS3新增的色彩关键词,代表“当前的color色彩”。                可以看作为一个变量,能够接受color值定义的地方都可以使用(如:背景色,边框色,阴影色....)。                因为color属性本身具有可...

2018-05-27 17:19:25 1215

原创 了解transparent,用transparent透明实现箭头绘制

        transparent:指定透明度(版本更新:background属性->border属性->任何带有color的属性)        transparent                用来指定全透明色彩,想当于rgba(0,0,0,0)。                background-color的默认值。                CSS3可以应用于所有...

2018-05-27 17:05:09 5483

原创 定义色彩的6中方法

        随着前端体系的发展,CSS定义色彩的方法同样出现的很多,找到更便于自己的,适合在团队开发中使用的        CSS发展到CSS3至今有六种色彩模式色彩关键字        预定义的颜色名称(red,green,等等)十六进制#RRGGBBRGBrgb(red,green,blue)RGBA rgba(red,green,blue,alpha)      CSS3HSLhsl(色...

2018-05-27 15:47:39 918

原创 JavaScript设计模式-观察者模式

    观察者模式也可以称为订阅模式,是一种从发布,到订阅,再到通知的过程。    首先说什么是观察者模式:观察者模式就是定义了一个对象一对多的关系,让多个观察者同时监听一个大对象,当一个大对象发生变化时,所有的依赖它的对象都会得到通知。    比如说:淘宝上某店铺的某品牌的鞋子,有两个买家小张和小王,让他们去买鞋的时候,发现鞋子断码了,他们都问店主,这个鞋的码什么时候有货,店主回复他们说,点一下...

2018-05-26 18:49:54 4148

原创 JavaScript设计模式-单体模式

        JavaScript设计模式是一种使代码提升逼格的书写方法。        在这里说一下设计模式中的单体模式。        单体模式        单体模式是提供了一种代码组织为一个逻辑单元的手段,这个逻辑单元中的代码可以通过单一变量进行访问。        说一下单体的优点:1.可以划分命名空间,2.是代码的阅读性、维护性很好,3.可以实例化,但是只能实例化一次。       ...

2018-05-26 18:26:48 353

原创 Ajax及封装Ajax详解

    首先说道ajax必须要知道JSON,不会JSON的,请点击。    Ajax        说道ajax到底什么是ajax? ajax是一种创建交互网页应用的一门技术。        ajax的应用场景有:(地图)实时更新,表单验证等等....        ajax的优缺点:            优点:1.实现局部更新(无刷新状态下),2.减轻了服务器端的压力            缺...

2018-05-25 21:09:54 47140 6

原创 JavaScript原生运动框架

    在网页交互过程中,运动是比不可少的,每次交互产生运动的时候,都要写一次关于这次运动的代码,显然很麻烦,封装运动框架能让代码的可读性增强很多。    匀速运动        匀速运动就是让dom元素匀速的进行某一个动作(位置,大小等)。var timer = null;function anmite(dom,target){ var speed; if(dom.offset...

2018-05-19 13:19:11 462

原创 JavaScriptES6之顶层对象、global对象

        顶层对象的属性        顶层对象,在浏览器环境指的是window对象,在Node中指的是global对象。ES5中顶层对象和全局变量是等价的,全局变量对编程者来说造成了很大的麻烦,因为一个疏忽,就把变量泄露到为了全局,全局变量的属性到处都是可读可写的,非常不利于模块化编程。        ES6为了完善这一点,同时为了保持兼容性,由var ,function 定义全局变量依旧...

2018-04-05 12:37:51 4602

原创 JavaScriptES6--let、const、块级作用域

        在JavaScript语言史中,ES6.0阶段也是JavaScript进阶的一个大阶段,产生了很多新的知识和新的语法规定。        let        在ES6中出现了let命令,其语法类似于var,用于声明变量,但是所声明的变量只能在let声明的代码块内有效。        上面这句话是什么意思呢,我们来说一下。        在ES6中引入了块级作用域的特点,我们知道每...

2018-04-05 12:26:08 360

原创 JavaScript简单拖拽

        说到交互,基本上是在JavaScript语言中占据了大分量,JavaScript行为 为页面增添了光彩,而现在大多数网站都是运用交互式的,拖拽在交互这个大系统中也是很有重量的。        把一个东西放在大盒子里移动拖拽,计算拖拽公式是非常重要的,基本上明白了拖拽公式就可以写出拖拽代码了。               假设我们把物体1 拖拽到物体2 的地方,此刻可以知道拖拽的步骤...

2018-03-30 22:43:13 407

原创 JavaScript优化网络请求--节流

        在上篇博客中我们提到了优化页面请求--防抖,这两个都是做性能优化的,同样的是当前端开发过程中有一部分用户频繁操作使得频繁触发事件,所造成的页面卡顿,浏览器崩溃现象。        节流        函数节流就是预定一个函数只有在大于或者等会它的执行周期的时候才会执行,小宇执行周期不会执行该函数。        应用场景:窗口调整(resize),页面滚动(scroll),抢购疯狂...

2018-03-30 12:06:09 980

原创 JavaScript优化页面请求---防抖

        说到优化是我们在写前端的时候最需要注意的一项。页面跑的速度,页面的稳定性关乎着页面做的好不好。        我们知道当我们在前端开发过程中有一部分用户行为会频繁的触发事件执行(比如input的input事件),而对于Dom操作的资源加载所耗费性能的处理,很可能会导致页面卡顿,甚至是浏览器崩溃,函数防抖就是为了处理这种事情而来的。        防抖        当函...

2018-03-30 11:40:41 661

原创 JavaScript之函数式编程思想--函数记忆

        函数记忆编程是一种编程思想,主要是解决当我们在编程过程中有些部分或者有些功能是重叠的,可以利用记忆函数来把重叠的部分记录下来。        典型的例子就是阶乘和斐波那契数列了。这里我们用数组来示范一下。var content = 0;function jiece(n) content ++; if(n == 0 || n == 1){ return...

2018-03-29 01:05:58 754 2

原创 JavaScript之函数式编程思想-纯函数

        在任何一个语言中都避免不了Bug的存在。我们只能用一系列编程的思想尽量避免Bug的产生。        Bug守恒定律        当我们在开发网站的时候,一旦网站的应用代码量达到一定程度的时候,它将不可避免的包含某种Bug,这个东西并不是JavaScript特有的,而是几乎所有的语言都有的通病--虽然不是不可能,想要彻底清除代码中的Bug是非常难办到的,但是,这并不意味着我们不...

2018-03-29 00:41:39 822

原创 JavaScript之函数式编程不完全函数

        不完全函数编程是一种函数编程技巧,即把一次完整的函数调用拆成多次函数调用,每次传入的参数都是完成参数的一部分,每次才分开的函数就叫做不完全函数。每次函数调用就叫做不完全调用。        特点: 每次调用都返回一个函数,知道调用最终位置。        在函数式编程中ES3.0模拟bind的方法就是一个很好的例子。先看代码。Function.prototype.newBind(t...

2018-03-29 00:08:22 431

原创 JavaScript之高阶函数详解

        最近在狂刷JavaScript权威指南(第六版),看到高阶函数这里。高阶函数在稍微大一点的项目里也是很常用的。        所谓高阶函数就是以一个函数作为参数传入高阶函数里面经过一些算法再返回一个函数,精准的利用了闭包的特性--私有化变量,防止污染全局。        看例子吧    function not(f){ return function(){ var args ...

2018-03-28 21:17:22 406

原创 JavaScript之ES3.0模拟map和reduce

        我们知道浏览器的发展是相对快速的,当然浏览器的不断更新同样面临着前端的更新,在我们前端编程中由于用户所用浏览器的不同,我们是必须要做兼容性处理的,有些浏览器的版本比较低,一些前端语言不兼容,做方法的兼容性处理衡很好的避免Bug的出现。        ES3.0实现数组map方法var map = Array.prototype.map ? function(a,f){ retur...

2018-03-28 20:43:16 633

原创 JavaScript之bind及bind的模拟实现

        在JavaScript编程中有很多改变this的方法和方式,今天说的bind与众不同,像call、apply改变this指向的时候会直接执行。而bind则不是,话不多说,直接进入正题。        bind        bind是函数原型上的一个方法,作用是改变this指向并且返回一个函数等待被执行。Function.prototype.bind()        bind()...

2018-03-23 23:49:38 2378

原创 JavaScript之再谈数组之数组方法、ES5方法

        稀疏数组        在数组中有那个一种形式:忽略索引,显示长度。这种形式就是稀疏数组。          稀疏数组定义方法是:两种方式,var a = new Array(5);console.log(a.length);console.log(a);var arr = [];arr[1000] = 0;console.log(arr);        数组方法   ...

2018-03-18 23:46:48 364

原创 JavaScript之再谈对象之属性的特性

        在各种语言中对象的属性都有很对特性,JavaScript也不例外。        对象属性中除了名字和值外,还有一些标识着它们可写,可枚举,可配置的特性,存取器也是可以看成属性的特性的。        一般属性有一个名称,四个特性分别是:值(value),可写性(writable),可枚举性(enumerable),可配置性(configurable)。        存取器不具有...

2018-03-15 00:30:30 218

原创 JavaScript之再谈对象之getter、setter存取器

        在JavaScript对象中,有两种属性getter、setter。        getter 和 setter是一种存取器,也可以说成是对象定义属性是读写属性的方法,getter定义可读属性,setter定义可写属性,读取只写属性总是返回undefined。   var obj = { x : 1, get getX(){ return this.x; }, set...

2018-03-15 00:15:50 280

原创 JavaScript之再谈对象之枚举对象的工具函数

        在JavaScript中,由于JavaScript的弱类型特征,使得JavaScript变的更加灵活,同样JavaScript中对象也是如此。var o = { name : "wang", age : 20,}var p = { name : "zhou", age1 : 21,}    以上两个函数为例。        把p中的可枚举属性复制到o中,并返回o,如果...

2018-03-14 23:33:36 307

原创 JavaScript之eval用法

          在JavaScript史中,出现过这样一个方法,这个方法可以修改变量环境进行代码执行,这个方法就是eval()。        eval()        这个函数只有一个参数,当传入的参数不是字符串的时候,则返回这个参数。当传入的参数是字符串的时候,则它会把这个字符串当做js代码来执行,当然传入的字符串在语法上必须得讲得通的。        eval最重要的是调用了它的变量作...

2018-03-12 19:44:09 1161

原创 JavaScript之运算符表及含义

        在js里面运算符占有着重要的意思,今天在一本书上看到了运算符全解,特来分享一下。来自JavaScript权威指南第六版,喜欢就收藏吧--主页传送门--...

2018-03-11 20:59:28 415

原创 JavaScript之正则表达式精解

        在所有的语言中基本上都有一个通用的东西,那就是正则表达式了,正则表达式定义了字符串的组成规则,使得匹配环节更加灵活。同样,在前端领域中,我们知道处理数据源的终端在前端,随着交互式输入信息的格式的核查,使得正则表达式奇为重要。        在进入正文之前,先铺垫一点小知识        转义字符        在前端JavaScript代码编写中,有很多字符是带有语法规则的,如果你...

2018-03-10 18:58:33 297

原创 JavaScript之js加载时间线精解

        在js加载开始的时候,浏览器会记录js执行的这段过程。            1.创建Document对象,开始解析web页面,解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段Document。readyState = "loading"。            2.遇到link外部css,创建线程加载,并继续解析文档。           ...

2018-03-05 23:13:30 1922

原创 JavaScript之js异步加载精解

        在解释之前先铺垫几个知识点。        DomTree:在页面渲染时候会把html构建成一个树形结构,把标签全部挂在树形结构上,构建DOM树采用深度优先原则。        Dom解析:绘制DOM树过程中,当遇到外部引入的文件标签时候,不用等到DOM元素全部加载完成再放到DOM树上,只知道是什么就可以了,DOM树的构建完毕表示所有DOM节点解析完毕。        CssTre...

2018-03-05 23:02:12 348

原创 JavaScript之JSON

        我们知道,前端和后端进行沟通的桥梁是数据的传输。在数据的传输中不同的时代也有着各种各样的数据传输格式。从开始的XML到如今的JSON格式传输,也包含着各种各样的变化。从繁到简。        JSON        json说白了就是一种对象,也可以说是一种命名空间,json是一种数据传输格式,本质上是对象,但用途不同,对象就是本地用的,而json是作为数据传输用的。       ...

2018-03-05 22:07:09 2102

原创 JavaScript之事件的分类

        在JavaScript事件中的事件有好多种类:鼠标事件,键盘事件,文本事件,窗体事件等等。        鼠标事件                        click----点击 mousedown----鼠标落下 mousemove----鼠标移动 mouseup----鼠标抬起...

2018-02-27 15:33:35 340

原创 JavaScript之事件对象及事件委托

        事件对象        在事件处理函数里面写一个形参,系统会自动进来一个参数。        在IE浏览器系统不会不会把事件对象传到e里面,回传到window.event里面var div = document.getElementsByTagName('div')[0];div.onclick = function(e){var e = e || window.event;...

2018-02-27 14:52:53 257

原创 JavaScript之事件的处理模型---事件冒泡,捕获及取消冒泡,阻止默认事件

        在时间处理机制上分为两种:一种是事件冒泡,一种是事件捕获。而这两种中机制,一个事件对象只能触发一种事件处理模型,要么冒泡,要么捕获。        所谓事件对象:在事件处理函数里面写一个形参,系统会自动的传进来一个事件对象。        事件冒泡            结构上(非视觉上)嵌套父子关系的元素,会存在事件冒泡的功能。即。同一时间,由子元素冒泡向父元素(自下而上)。  ...

2018-02-26 23:01:17 579

原创 JavaScript之事件及事件的绑定与解除

        在网页交互过程中,事件起到了很大的作用。事件--是交互体验的核心功能。        事件的绑定        事件的绑定有三种。        1.on + 时间类型          例:div.onclick =fucntion(){};            兼容性很好,凡是一个元素在同一时间只能绑定一个处理函数。这个东西相当于作用在行间。var div = documen...

2018-02-26 21:46:45 345

原创 JavaScript之脚本化CSS

        到了实战性的东西了,JavaScript虽然不能直接改变CSS,但可以通过其他方式间接改变CSS        dom.style.prop        可读写行间样式,没有兼容性问题,碰到float这样的保留字或者关键字属性前面应加css 例:float --> cssFloat。        复合单词必须拆解,组合单词变成小驼峰式写法。写入值必须是字符串。var di...

2018-02-24 21:34:10 245

原创 JavaScript之窗口属性

    说到窗口属性,我们随着编程技能的提升,从刚开始的html到加上css再到单独的JavaScript再接着JavaScript和DOM连接我们都离不开和浏览器窗口打交道,当然,熟悉浏览器窗口操作也是我们向更深一层进阶。    查看滚动条滚动距离       随着IE版本的提升 同样浏览器窗口属性也出现了一些变化。      window.pageXOffset/windowpageYOffs...

2018-02-24 21:01:32 409

原创 Sublime text3 emmet插件安装

Emmet插件作为Sublime text3 的热门插件,首先解决如何添加安装才是使用的基础  在添加Emmet插件的时候,我也遇到了若干问题,只能卸载Sublime text3再安装,终于安装成功,现分享下经验(2017/9/20)1、首先先下载Emmet插件,下载(点击下载)2、打开Sublime Text,依次Preferences→Browse Packages… 打开了一个文件夹,把解压...

2018-02-23 23:51:10 8740 2

原生JS实现别踩白块

这是利用原生JavaScript、HTML、CSS技术实现的纯页面的别踩白块Web页面,希望可以帮助你们。

2018-08-31

空空如也

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

TA关注的人

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