绵羊万-优快云博客

原创 jQuery中使用trigger()方法完成模拟操作

我们前面说的栗子都是需要主要主动去触发事件，但是有时候需要用户进入页面之后，就自动触发事件，而不需要用户去主动触发，这就可以用到我们的trigger()方法了$('button').trigger('click');这样，加载完页面之后，就会立刻输出想要的结果，也可以用简化写法click(),来达到同样的效果$('button').click(); 1.触发自定义事件t...

2018-10-26 20:40:14 1699

原创 jQuery的两个合成事件---hover()方法和toggle()方法

1.hover()方法语法结构为：hover(enter,leave);该方法用于鼠标的悬停事件，当光标移动到元素上时，会触发第一个函数（enter），当光标移除这个元素时，会触发第二个函数（leave） $(function(){ $('div').hover(function(){ //我是第一个函数 },function(){ //我是第二个函数 ...

2018-10-26 20:18:33 1876

原创 jQuery中$(document).ready()函数的理解

$(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用$(document).ready()方法来代替传统的JS的window.onload方法的下面利用对比的方式，可以加深对$(document).ready()的理解1.执行时机JS（window.onload）：网页中所有的元素（包括元素的所有关联文件）完...

2018-10-26 19:46:03 8674

原创 jQuery事件对象的属性

1.什么是事件对象？即将触发的事件作为一个对象处理，对于事件对象，我们需要有以下几个方面的理解：$('div').click(function(event){ $(this).css('backgroundColor', red);})1)当事件触发时，事件对象就被创建了。上面的代码中当<div>被单击时，事件对象就被创建了。2)这个事件对象，只有事件处理函数能...

2018-10-26 16:56:35 739

转载 jQuery 隐式迭代和链式调用

jQuery 隐式迭代和链式调用学过 jQuery 之后，一般是不太有人再愿意写原生 JS 的，甚至有段时间 jQuery 成了 JS 的代名词。原因无他，足够简单方便。可在这简单方便的背后，可少不了两大功臣：隐式迭代和链式调用。隐式迭代对于原生 JS 来说，一般我们设置某类元素的样式，都得使用循环设置，而 jQuery 在使用的时候则无需考虑这点，简单示例如下：// 设置 .p...

2018-09-30 17:12:23 1986

转载事件委托（事件代理）

事件委托一般来说我们要给某个元素绑定事件，都会直接绑定在该元素上，如下：// 给 li 元素绑定点击事件$('li').click(function() { console.log('你点击我了');})但是这种直接的处理会有以下问题：通过 JS 新添加的 li 元素并没有该事件绑定，所以点击无效元素如果比较多的话，比喻有200个 li ，那每个 li 都绑定一...

2018-09-30 17:09:27 368

原创 jQuery事件监听

jQuery事件监听实现jQuery事件的四个要素如下所示：1）触发事件的目标元素2）触发事件的名称（即事件类型）3）事件触发时的回调（即事件处理函数）4）事件对象（即event）举个栗子来解释它的格式：$('#targrt').on('click',function(event){ console.log('target'); //被点击了 $('...

2018-09-30 17:07:48 11183

原创详细分类 jQuery选择器

jQuery选择器----->CSS选择器 jQuery选择器实际上是实现了CSS选择器jQuery选择器的分类 jQuery选择器可以分为下面三种类型的选择器基本选择器$('tag') -------按元素标签选择$('.class') -------按类名选择$('#id') -------按id选择$('*') ...

2018-09-30 16:41:11 1131

原创谈谈jQuery对象

jQuery其实就是对原生JS的封装与调用我们用jQuery时的$到底是什么呢？$就是jQuery的简写也就是说 $===jQuery返回的结果是ture jQuery对象定义$（）---------就是jQuery对象怎么理解上面这句话呢？$(element)会将所选择的元素封装为jQuery对象，使其带有额外的方法，使用超方便！！下面举几个生成jQuery对象的...

2018-09-30 16:09:42 383

原创 JS中addEventListener的用法

事件模型这是一个完整的事件流：事件捕获----处于目标----事件冒泡注意：事件捕获由于浏览器兼容问题用的比较少事件处理程序（addEventListener）格式为：element.addEventListener(type, handle, false);type: 事件触发类型，如click,keypress等等，下面我们详细的讲讲事件类型！！handle...

2018-09-30 11:30:43 27361 1

原创利用DOM来遍历所有元素（children和childNodes的区别）

如果一个元素的子元素里还有子元素，那么我们常常用到的一个方法就是递归例子如下图所示：function traversal(dom){ var len = dom.length; var d = null; for(var i=0; i<len; i++){ d = dom[i]; console.log(d); if(d....

2018-09-30 10:04:06 15739 2

原创谈谈JS中property和attribute的区别

property称为属性，而attribute称为特性！特殊的属性就叫特性！（如className,href等等）property和attribute的区别1）公认的attribute会映射到property现在我们来看一个元素的全部属性（用console.dir即可得到）里面的attributes就是特性，特性就是该元素所特有的属性，其他的都是property，所有元素都有的...

2018-09-29 22:28:46 1891 2

原创谈谈JS的DocumentFragment

DocumentFragment简单描述documentFragment是nodeType值为11，nodeName的值为#document-fragment.1) documentFragment是一个文档片段，一种‘轻量级节点’2) 通常作为仓库来使用，不存在DOM树上，是一种游离态 DocumentFragment的用途当我们用JS的DOM创建很多节点时，在加入节点到...

2018-09-29 21:45:53 3957

原创谈谈JS系统对话框

window对象window---储存了窗口相关的信息window对象---扮演的是ECMA的global对象怎么理解呢？看下面两句话1）凡是不是其他作用域的变量都是window的属性2）凡是不是其他作用域的函数都是window的方法下面谈谈window常用的几个方法系统对话框1）window.alert('注意')点击确认之后的返回值为： 2....

2018-09-29 21:26:10 441

原创谈谈JS的for/in语句的使用

for/in语句的使用 for/in语句的使用格式为：for(变量 in 对象){ 遍历执行的代码；}用一个实例来解释会更清晰，实例如下所示：var bottle = { name:'bottle', price:49, diameter:6.7, isKeepWarm:ture;}for(var key in bottle){...

2018-09-29 20:30:48 796

转载 JS函数声明与函数表达式的区别

函数声明与函数表达式的区别前面我们已经说了两种定义函数的方式：函数声明与函数表达式。那么这两种方式有区别吗，还是一样的呢？下面我们来进一步探讨探讨。下面我们定义了两个函数分别为 hello 和 hi，前者采用函数声明，后者采用函数表达式，然后再调用，如下：function hello () { console.log('Hello the world');}var hi...

2018-09-29 19:44:48 459

转载 JS数组的常用方法

数组的常用方法数组作为一种重要的数据类型，除了我们前面已经说到的 pop、push、shift、unshift 几个方法外，还有很多实用的方法也是我们的必备技能。假设我们有一队人，如下图：我们要对其进行一些排序或筛选的操作（比喻按高矮排序，筛选女性等），我们都可以通过数组来进行操作。抽出一些人首先我们用数组定义该数据（为了简单起见，我们数据就不搞那么多）：var...

2018-09-29 19:39:08 372

转载深入了解JS的Number类型

深入了解 Number 类型Number 类型作为 JS 的基本数据类型之一，被应用在程序中的各种场景，其重要性就如数字对于我们日常生活。下面就让我们来一起深入了解下，为以后的“策马奔腾”做好铺垫。定义方式一般来说我们可以直接使用数值字面量格式来定义一个数字，如下：var num1 = 15;var num2 = 7;console.log(typeof num1); ...

2018-09-29 19:31:18 1184

原创说说background-size:cover;与background-size:contain的区别

1.background-size:cover官方background-size:cover;的解释是这个样子的，截图如下所示：解释：1）是按照图片的比例放大或者缩小至充满容器，而不是按照容器的比例大小来缩放。 2）如果照片的比例和容器的比例是不一致的，必定会导致照片的不完整性。下面举一个栗子来说明这种情况：首先原始的背景图片是这样的。而设置b...

2018-09-04 21:09:08 32734 3

原创图标水平排列（间隙相同）的实现

问题描述：思路：我们可以用flex布局，对justify-content:space-between;稍作改进，即可实现上图所示的效果！！代码如下所示：<ul class="share-list"> <li class="share-item"></li> <li class="share-item"&amp

2018-08-13 16:42:09 983

原创用::before或者::after来生成箭头

1.用::before或者::after来生成箭头原理如图所示：我们可以利用::before和::after生成一个正方形框（用边框即可），接着将框旋转45度就是箭头的形状了！具体代码如下所示：.icon-share { ..... /*这里的点点点代表具体情况，具体属性*/ position: relative;}.icon-ba...

2018-08-13 16:16:02 6833

转载 CSS中1px分割线处理

1. 1px 边框变粗问题截图如下（iPhone 6截图）：如果我们把上图与我们手机系统上的 1px 边框进行对比，如下图：我们会发现，上面两个上下线条，下线条的粗细才是正确的，上线条就显得有点粗了。但是上线条我们是用纯正的 1px border生成的，而下线条我们实际是采用transform压缩了1px高度的一半模拟实现的，也就相当于 0.5px 的高度了。为什么会这样...

2018-08-13 15:52:52 4873

原创设置半透明遮罩背景

半透明遮罩背景常用于弹窗的背景如下所示：代码如下所示：.overlay { top: 0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.7); z-index: 4000; position:fixed;}小结（非常重要）：首先是fixed固定定位...

2018-08-13 15:40:21 1682

原创 CSS容器按比例缩放

常见的容器的宽高比例是16：9或者是4：3，比如说一张图片，我们只设置宽和高中的任意一个值，另外一个值就会根据原来图片的比例自动进行缩放，使得调整后的图片仍然保持与原图片相同的比例。上面的方式都是在知道宽或者高的情况下，如果宽和高都不知道的情况下，如何保证容器按比例缩放呢？方法如下所示：.container{ height: 0; padding-bottom: 56...

2018-08-13 14:53:44 3305

原创 CSS居中方案

1.水平居中1.1 行内元素或类行内元素的水平居中在文本，链接，图像，等display为inline， inline-block， inline-table， inline-flex的父类元素中直接使用text-align:center;即可如下图所示：<html><head><style type="text/css">h1 {tex...

2018-08-13 11:14:31 353

原创响应式布局详解

响应式布局的目的：为移动设备提供更好的体验，用技术使网页适应从小到大不同分辨率的屏幕有一句话对响应式布局的形容非常贴切：content like water。1.viewpointviewpoint：屏幕上用于显示网页的一块区域（可能比浏览器的视区要宽，也可能要窄）viewpoint理论移动设备上的viewpoint可分为：1）layout viewpoint （如显示器的宽度...

2018-08-12 20:42:52 1048

转载 retina 显示屏详细理解

关键词如果我们去苹果的官网查看 iPhone 7的介绍，可以看到其显示屏介绍如下：我们以 7 plus 为例抽取如下几个关键词（这些关键词跟我们今天要说的内容都息息相关）：Retina HD 显示屏 5.5 英寸 1920 x 1080 像素分辨率 401 ppi下面我们再来一一详细谈论这些关键词。我们先从第二个说起，因为第一个的解释需要用到下面的一些关键词。5.5 英...

2018-08-12 20:39:57 8340

原创【CSS3】transition和animation动画

CSS3的动画属性是我们一定要掌握的属性，能大大增加我们页面表现力。有很多同学可能会说我掌握了canvas就可以了撒！事实上，有很多地方，我们可以用transition和animation来实现动画效果，这样会简单很多，如加载页面的各种不同的样式，轮盘转动（就是网易云音乐那样的样式），所以让我们来了解一下把！！

2018-08-12 19:08:37 6000

原创 CSS的flex布局看完这篇你就懂了

我们之前已经学过一些布局模型，比如说浮动，绝对定位等等，但是这些布局方式一是不够简洁，而是使用的范围确实是太窄了。flex模型拥有比较多的属性，来设置多样的布局方式，接下来我们就详细介绍各种属性对布局的改变，最后再对属性做一个汇总先看一下flex的基本模型，如下图所示：container父容器里有三个子元素flex-item。当给父容器设置display:flex;直接子元素就有布...

2018-08-12 15:00:22 48016 6

原创 position的一些不一样的理解

position的取值有4个，分别为：static, relative, absolute, fixed;默认为static，这个没什么问题！！relative：相对自己的位置偏移absolute:相对于最近的非static的父类元素进行定位fixed:相对于浏览器视窗定位绝对定位元素：如果position不是static或者relative，那就是绝对定位元素 ...

2018-08-11 15:50:34 322

原创 clearfix清除浮动中display:table;的理解

清除浮动除了常用的clear:both;之外，还有一种就是利用重置样式表中的clearfix具体如下：.clearfix::after{content:"";diaplay:table;clear:both;}这里解析一下display:table;设置为display:table; 没有内容也会自成一行设置为display:block;没有内容不会自成一行...

2018-08-11 15:35:02 5723

原创 CSS双飞翼布局和圣杯布局margin-left:-100%;等内容理解

网上搜索双飞翼布局和圣杯布局都会有许多不错的文章，在这里给大家推荐一篇博客双飞翼布局和圣杯布局解析！！看完之后，我来补充一点细节的东西！！！如何理解margin-left:-100%及margin-left:300px；看完这个图解，上面的问题就应该没问题了！！具体的双飞翼布局方法请参考上面的文章！！本博客由博主原创，如需转载需说明出处！谢谢支持！...

2018-08-11 15:00:42 2788

原创解决行内元素因回车换行产生的空白符（水平间隙）的两种方法

由于产生的空白符，水平间隙是由于空格和换行造成的（元素节点有文本节点，在缩进代码时会占据宽度）！如下图所示：1.代码不换行根据产生间隙的原理，代码不换行即可解决问题，但是这会导致代码的可读性大大降低，这是十分不推荐的（毕竟代码是给人看的）！！2.设置font-size1）在父类元素中设置font-size为0，这样就是使父类元素中文本就不会占据宽度！！2）重置父类元素的...

2018-08-10 22:33:35 2321

原创 CSS计数器的使用

很多时候，我们在使用有序列表的时候，自带的序号并不是我们想要的。这是我们可能像自己构造一些有顺序的序号出来，就可以用到counter计数器了！！我们以下图这样一个列表为例：<html><head><style type="text/css">body {counter-reset:section;}h1 {counter-reset:subse...

2018-08-10 22:10:19 690

原创元素的隐藏和显示

1.display:none<!DOCTYPE html><html><head><style>.aaa,.bbb,.ccc{background-color:red;}</style></head><body><div class="aaa"&g

2018-08-10 21:01:31 437

原创 CSS常用伪元素使用详解

首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after1.::first-letter选...

2018-08-10 20:30:19 1354

原创 CSS常用伪类使用详解

首先伪类是用单冒号表示：如:link, :visited, :hover, :active, :focus, :first-child, :last-child, :nth-child, :nth-last-child, :not()然后伪元素用双冒号表示：如::first-letter, ::first-line, ::before, ::after1.用于链接的几个伪类元素:lin...

2018-08-10 17:20:12 12473 1

原创 <i>元素创建图标的三种方法

1.简单粗暴型直接设置<i>元素为inline-block，然后为行内级框设置大小，接着直接把图像放在这个框里面，然后调整位置和图片大小即可。<!DOCTYPE html><html><head><style>.icon{display:inline-block;width:50px;height:50px;ba...

2018-08-08 17:51:56 14560

原创 background属性详解

background属性详解background属性主要由以下5个属性组成，background-color:：规定要使用的背景颜色background-image：规定要使用的背景图像background-repeat：规定背景图像的平铺方式（取值可为no-repeat, repeat-x, repeat-y, 默认值是沿xy方向均平铺）background-position...

2018-08-07 20:51:42 2293

原创教你来使用雪碧图（CSS sprite）

什么是雪碧图？雪碧图是根据CSS sprite音译过来的，就是将很多很多的小图标放在一张图片上，就称之为雪碧图。使用雪碧图的目的：有时为了美观，我们会使用一张图片来代替一些小图标，但是一个网页可能有很多很多的小图标，浏览器在显示页面的时候，就需要像服务器发送很多次访问请求，这样一来，一是造成资源浪费，二是会导致访问速度变慢。这时候，把很多小图片（需要使用的小图标）放在一张图片上，按照一定的...

2018-08-07 17:12:29 65807 6

goWhere.zip

动态简历制作

微信朋友圈项目

空空如也