洛水三千

JS面向对象编程

摘要：什么是面向对象编程（OOP）？用对象的思想去写代码，就是面向对象编程。面向对象编程的特点抽象：抓住核心问题封装：只能通过对象来访问方法继承：从已有对象上继承出新的对象多态：多对象的不同形态对象的组成属性：对象下面的变量叫做对象的属性方法：对象下面的函数叫做对象的方法创建一个对象如阅读全文

posted @ 2017-06-16 17:19 洛水三千阅读(19297) 评论(3) 推荐(5) 编辑

事件冒泡和事件捕获

摘要： JS事件流原理图：由此可知道，一个完整的JS事件流是从window开始，最后回到window的一个过程；事件流被分为三个阶段：捕获过程（1~5）、目标过程（5~6）、冒泡过程（6~10）；事实上，捕获过程和冒泡过程是完全相反的过程，即事件由父元素向子元素传播和子元素向父元素传播的过程。事件捕获阅读全文

posted @ 2017-06-04 21:42 洛水三千阅读(977) 评论(2) 推荐(1) 编辑

JS事件绑定

摘要：给一个对象绑定一个事件处理函数的第一种形式如：obj.onclick=fn; 当需要给一个对象的同一个事件绑定多个不同的函数时，上面的方法就会被覆盖掉，这就需要用到下面的第二种形式来解决了给一个元素绑定事件函数的第二种形式 ie: obj.attachEvent(事件名称，事件函数)； 1.没有阅读全文

posted @ 2017-06-04 20:19 洛水三千阅读(253) 评论(0) 推荐(0) 编辑

ajax过程详解

摘要： Ajax是Asynchronous JavaScript and XML的缩写，意思是异步JavaScript和XML，能够节省用户操作，时间，提高用户体验，减少数据请求。例：使用ajax获取某一文本文件的内容 ajax的原理点击这里 ajax的原理这里是ajax原理的第一个案例 1、创建一个ajax对象，这里需要做个异常处理 var x... 阅读全文

posted @ 2017-04-16 23:27 洛水三千阅读(2255) 评论(0) 推荐(0) 编辑

css绘制三角形原理

摘要： 1、新建一个元素，将它的宽高都设置为0；然后通过设置border属性来实现三角形效果，下面是css绘制三角形的原理：效果:(为了jsfiddle防止被屏蔽,上面已插入了源代码) 从上面的效果可以看到，四个三角形拼成了一个正方形，我们只要把其中一个想要的三角形保留下来，其他的设置为透明的，就可以达到阅读全文

posted @ 2016-11-21 11:52 洛水三千阅读(3490) 评论(0) 推荐(0) 编辑

摘要： 1、进入官网：https://jsfiddle.net/ 可以看到如下界面，顶端的控制按钮包括：保存，运行，代码格式化等； 2、将html、css、js分别写在指定的位置当中，最后一个框result是显示效果的； 3、代码编辑完之后保存，会得到上面所写代码的链接，把这个链接复制下来，后面插入博客就用它 4、在博文中插入以下代码：效果：其中https://jsfiddle.net/mx... 阅读全文

posted @ 2016-11-21 09:34 洛水三千阅读(1578) 评论(2) 推荐(1) 编辑

负margin在布局中的运用

摘要：一、左右栏宽度固定，中间栏宽度自适应左右栏宽度固定，中间栏宽度自适应 main left right 缩小窗口的效果：二、除去列表右边框除去列表右边框除去列表右边框除去列表右边框除去列表右边框除去列表右... 阅读全文

posted @ 2016-11-20 23:53 洛水三千阅读(748) 评论(2) 推荐(0) 编辑

清除浮动

摘要：在非ie浏览器下，当容器的高度为auto，且容器中有浮动的元素，容器的高度不能自适应容器中内容的高度，使容器中的内容溢出而影响布局，为了防止浮动溢出，就要进行清除浮动。例：清除浮动的方法 1、给浮动元素的容器添加 overflow:hidden；或 overflow:auto；此外在ie6中，需阅读全文

posted @ 2016-11-18 21:54 洛水三千阅读(331) 评论(0) 推荐(0) 编辑

CSS水平垂直居中总结

摘要：行内元素水平居中把行内元素包裹在块级父元素中，且父元素中的css设置text-align:center; 块状元素水平居中将块状元素的左右外边距设置为auto即可。多个块状元素水平居中的情况： 1、传统方法：将水平排列的块状元素设置为：display：inline-block；然后父元素设置为阅读全文

posted @ 2016-11-13 19:56 洛水三千阅读(586) 评论(0) 推荐(0) 编辑

详解Bootstrap面板组件

摘要：面板组件主要作用是用来处理一些其他组件无法完成的功能，在不同的版本中具有不同的源码： LESS：panels.less SASS:_panels.scss 基础面板非常简单，就是一个div容器中运用了类.panel的样式，产生一个具有边框的文本显示块，由于panel不控制主题颜色，所以在.panel基础上增加一个控制颜色的主题的类.panel-default,在里面添加一个div.panel-bo... 阅读全文

posted @ 2016-05-03 22:50 洛水三千阅读(18166) 评论(4) 推荐(3) 编辑

详解Bootstrap列表组组件

摘要：列表组可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件，列表组在bootstrap框架中也是一个独立的组件，所以也对应有自己独立源码： LESS：list-group.less SASS:_list-group.scss 列表组看上去就是去掉了列表符号的列表项，并且配上一些特定的样式，在bootstrap框架中的基础列表组主要包括两个部分： list-group:列表组... 阅读全文

posted @ 2016-05-01 12:50 洛水三千阅读(15623) 评论(0) 推荐(1) 编辑

详解Bootstrap媒体对象

摘要：在web页面中，图片居左，内容居右排列，是非常常见的效果，它也就是媒体对象，它是一种抽象的样式，可以用来构建不同类型的组件，在bootstrap框架中其对应的版本文件如下： LESS: media.less SASS: _media.scss 媒体对象一般是成组出现，一组媒体对象一般包括以下几部分： 1、媒体对象的容器：用来容纳媒体对象的所有内容，容器上需使用类名.media 2、媒体对象的对象：... 阅读全文

posted @ 2016-04-30 16:30 洛水三千阅读(2850) 评论(0) 推荐(1) 编辑

详解Bootstrap进度条组件

摘要：在网页中，进度条的效果并不少见，如：平分系统、加载状态等，进度条组件使用了css3的transition和animation属性来完成一些特效，这些特效在IE9及IE9以下版本、Firefox的老版本中并不支持，Opera 12 不支持 animation 属性。进度条和其他独立组件一样，开发者可以根据自己的需要选择对应的版本： LESS: progress-bars.less SASS: _p... 阅读全文

posted @ 2016-04-29 17:13 洛水三千阅读(20317) 评论(3) 推荐(4) 编辑

详解Bootstrap缩略图组件及警示框组件

摘要：缩略图组件缩略图在网站中最常用的就是产品列表页面，一行显示几张图片，有的在图片底下带有标题、描述内容、按钮等信息。bootstrap框架将这部分独立成一个模块组件，通过类名.thumbnail配合bootstrap的网格系统来实现。下面是bootstrap缩略图组件不同版本的源码文件： LESS : tbumbnails.less SASS : _tbumbnails.scss 实现原理：布... 阅读全文

posted @ 2016-04-28 16:59 洛水三千阅读(7707) 评论(0) 推荐(3) 编辑

详解Bootstrap表单组件

摘要：表单常见的元素主要包括：文本输入框、下拉选择框、单选框、复选框、文本域、按钮等。下面是不同的bootstrap版本： LESS: forms.less SASS: _forms.scss bootstrap仅对表单内的fieldset、legend、label标签进行了定制除了这个几个元素之外，还阅读全文

posted @ 2016-04-26 12:11 洛水三千阅读(51475) 评论(2) 推荐(7) 编辑