<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[madman0621的博客]]></title><description><![CDATA[技术分享，这条路上我们并不孤独。]]></description><link>https://blog.youkuaiyun.com/madman0621</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; madman0621]]></copyright><item><title><![CDATA[JS 基础篇(七)：JS中的遍历函数]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/87384360</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/87384360</guid><author>madman0621</author><pubDate>Fri, 15 Feb 2019 20:12:29 +0800</pubDate><description><![CDATA[目录：

Array.prototype.map()
Array.prototype.forEach()
Array.prototype.fliter()
Array.prototype.some()与Array.prototype.every()
Array.prototype.reduce()
区别总结

在JS中的map()、filter()、forEach()、reduce()函数都是对数...]]></description><category></category></item><item><title><![CDATA[jQuery Validation插件问题]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/87383339</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/87383339</guid><author>madman0621</author><pubDate>Fri, 15 Feb 2019 19:56:33 +0800</pubDate><description><![CDATA[问题
$(&amp;amp;quot;#commentForm&amp;amp;quot;).validate({
	rules:{
		username:{
			required:true,
			minlength:2
		}
	},
	messages:{
		username:{
			required:&amp;amp;quot;请输入用户名！&amp;amp;quot;,
			minlength:&amp;amp;quot;用户名必须大于2个字符&amp;amp;quot;
		}
	},
]]></description><category></category></item><item><title><![CDATA[JS 基础篇(六)：事件冒泡与捕获]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82947110</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82947110</guid><author>madman0621</author><pubDate>Fri, 05 Oct 2018 21:12:33 +0800</pubDate><description><![CDATA[目录：

事件冒泡
事件捕获
addEventListener的第三个参数
事件冒泡与事件捕获同时存在
如何阻止事件冒泡或者事件捕获

通过event.stopPropagation()终止事件传播
对触发事件元素进行过滤



一、事件冒泡
微软提出了名为事件冒泡(event bubbling)的事件流。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。也就是说，事件会从最内...]]></description><category></category></item><item><title><![CDATA[JS 基础篇(五)：JS严格模式]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82933373</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82933373</guid><author>madman0621</author><pubDate>Thu, 04 Oct 2018 11:00:21 +0800</pubDate><description><![CDATA[目录：

严格模式介绍
严格模式使用

为整个脚本开启严格模式
为函数开启严格模式


严格模式的改变

普通变量
重名问题
禁止this关键字指向全局对象
静态绑定
arguments对象的限制
禁止在函数内部遍历调用栈
保留字



一、严格模式介绍
除了正常运行模式，ECMAscript 5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascrip...]]></description><category></category></item><item><title><![CDATA[JS 基础篇(四)：JS中的函数]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82933208</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82933208</guid><author>madman0621</author><pubDate>Thu, 04 Oct 2018 11:00:11 +0800</pubDate><description><![CDATA[目录：

函数的参数
函数的返回值
立即执行函数

简单介绍下关于JS函数使用过程中的一些情况。
一、函数的参数
1、调用函数时没有提供足够的参数，缺少的参数将会被underfined替代。
function add(a,b){
    console.log(&amp;amp;quot;a:&amp;amp;quot;+a); // a:1
    console.log(&amp;amp;quot;b:&amp;amp;quot;+b);// b:underfined
    r]]></description><category></category></item><item><title><![CDATA[JS 应用篇(三)：var、let、const的区别]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82933166</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82933166</guid><author>madman0621</author><pubDate>Thu, 04 Oct 2018 11:00:01 +0800</pubDate><description><![CDATA[目录：

var定义
let定义
const定义

在JS中，定义变量的方法有var、let、const 三种方式。下面我们一一介绍他们之间的区别。
一、var定义
1、“var”处理所有变量声明，不管在哪里声明，最后都会在函数作用域顶端（如果在函数内部声明）或则在全局作用域顶端（在函数外部声明），即变量提升。
console.log(varDemo1); //underfined 并不会报错
i...]]></description><category></category></item><item><title><![CDATA[JS 基础篇(三)：原型继承]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932937</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932937</guid><author>madman0621</author><pubDate>Thu, 04 Oct 2018 10:59:40 +0800</pubDate><description><![CDATA[目录：

构造函数绑定
prototype模式
直接继承prototype
利用空对象作为中介
寄生组合式继承:保证原型继承中父级引用对象属性的独立性
ES6继承通过Babel编译成ES5的实现方法
拷贝继承

以下将介绍对象之间“继承”的五种方法。
目前我们有一个父类为Animal类，我们需要在它的基础上，继承创建一个Cat类，即让Cat类继承Animal类。
function Animal()...]]></description><category></category></item><item><title><![CDATA[JS 基础篇(二)：理解JS原型对象与原型链]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932863</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932863</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 17:45:15 +0800</pubDate><description><![CDATA[目录：

什么是原型对象和原型链
为什么使用原型对象
原型对象的理解
“prototype&quot;和”__proto__&quot;区别
查找属性
原型对象操作

一、什么是原型对象和原型链
JavaScript 常被描述为一种基于原型的语言 (prototype-based language)——每个对象对应拥有一个原型，对象以其原型为模板、从原型继承方法和属性。而同时原型也是对象，它也拥有原型，并从中继承方法...]]></description><category></category></item><item><title><![CDATA[JS 基础篇(一)：创建对象的四种方式]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932776</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932776</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 17:29:28 +0800</pubDate><description><![CDATA[目录：

声明一个对象的语法
通过构造方法
使用Object()构造函数
使用create()方法

一、声明一个对象的语法
直接声明一个对象：
var person1 = {
    name : &quot;Jie&quot;,
    age: 23,
    say: function(){
        alert(&quot;Hi!,I'm &quot; + this.name);
    }
};

person1.sa...]]></description><category></category></item><item><title><![CDATA[JS 应用篇(二)：== 与 === 的区别]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932729</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932729</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 17:23:36 +0800</pubDate><description><![CDATA[目录：

== 与 === 的概念
严格运算符===的运算规则
相等运算符==的运算规则
== 中的坑
总结

一、== 与 === 的概念
1、 &quot;==“叫做相等运算符，”===&quot;叫做严格运算符。
2、 ==，等同的意思，两边值类型不同的时候，要先进行类型转换为同一类型后，再比较值是否相等。
===，恒等的意思，不做类型转换，类型不同的结果一定不等。
3、 &quot;==“表示只要值相等即可为真，而”=...]]></description><category></category></item><item><title><![CDATA[JS 应用篇(一)：Underfined与Null的区别]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932641</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932641</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 17:11:20 +0800</pubDate><description><![CDATA[目录：

基本数据类型
underfined

声明一个变量，但是没有赋值
访问对象上不存在的属性或者未定义的变量
函数定义了形参，但没有传递实参
使用void对表达式求值


null

两种情况下我们会将变量赋值为null
特殊的typeof null


underfined与null

一、基本数据类型
在介绍undefined与null之前，我们先来了解一下ECMAScript中的数据类...]]></description><category></category></item><item><title><![CDATA[CSS 技巧篇(七)：设置元素居中]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932568</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932568</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 17:00:14 +0800</pubDate><description><![CDATA[目录：

水平居中

1、使用margin:0 auto配合元素的width(需要固定元素宽度)
2、使用绝对定位配合margin(需要固定元素宽度)
3、块级父元素让行内元素居中
4、利用relative定位与行内样式
5、通过transform进行设置
6、通过flex-box


垂直居中

1、通过line-height(需要固定父元素高度)
2、使用绝对定位搭配margin(需要固定元素...]]></description><category></category></item><item><title><![CDATA[CSS 技巧篇(六)：display设置元素为行内元素时，元素之间存在间隙问题]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932529</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932529</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 16:55:55 +0800</pubDate><description><![CDATA[在使用display将元素设置为行内元素的同时(例如：inline、inline-block等)，将margin全部设置为0，padding全部设置为0的时候，我发现了元素之间居然还存在着间隙！！！？？？如下图所示：

不知道哪里冒出来的这个间隙，现在给出解决方案：
第一步：在这些行内元素的父元素上设置font-size设置为0；
第二步：在行内元素上设置正常的字体显示大小，例如:font-siz...]]></description><category></category></item><item><title><![CDATA[CSS 普通属性篇(二)：Display属性]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932501</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932501</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 16:51:36 +0800</pubDate><description><![CDATA[目录：

display属性介绍
display:none
display:block
display:inline
display:inline-block

一、display属性介绍
display 属性规定元素应该生成的框的类型。
以下是一些关于display比较常用的属性值：




值
描述




none
元素不会显示


block
此元素将显示为块级元素，此元素前后会带有换行符...]]></description><category></category></item><item><title><![CDATA[CSS 技巧篇(五)：理解CSS优先度]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932452</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932452</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 16:43:25 +0800</pubDate><description><![CDATA[目录：

CSS优先级

CSS优先级介绍
CSS优先级计算
基于类型的优先级
not伪类不参与优先级计算
优先级计算无视DOM树中的距离


!important

!important介绍
什么情况下可以使用!important
如何覆盖!important



一、CSS优先级
1、CSS优先级介绍
浏览器根据优先级来决定给元素应用哪个样式，而优先级仅由选择器的匹配规则来决定。
下面列表中...]]></description><category></category></item><item><title><![CDATA[CSS 技巧篇(四)：伪类与伪元素的区别]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932370</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932370</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 16:32:59 +0800</pubDate><description><![CDATA[目录：

伪类介绍
伪元素介绍
区别
总结

一、伪类介绍
CSS 伪类用于向某些选择器添加特殊的效果。

二、伪元素介绍
CSS 伪元素用于将特殊的效果添加到某些选择器。

三、区别
我们通过使用伪类 :first-child 和伪元素 :first-letter 来进行比较。
1）、伪类:first-child 添加样式到第一个子元素
div&amp;amp;amp;gt;p:first-child{color:re...]]></description><category></category></item><item><title><![CDATA[CSS3 新属性篇(五)：background-size属性]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82932323</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82932323</guid><author>madman0621</author><pubDate>Wed, 03 Oct 2018 16:25:01 +0800</pubDate><description><![CDATA[目录：

background-size属性介绍
演示代码
background-size属性分析

设置固定尺寸的背景图片
背景图片的宽高是根据自身所属元素的宽高以百分比进行缩放
背景图片扩展并覆盖填充满整个所属元素区域
背景图片尺寸宽度和高度完全适应内容区域



一、background-size属性介绍
CSS3 的  background-size 属性能调整背景图片的大小，从而替代了用...]]></description><category></category></item><item><title><![CDATA[CSS3新属性篇(四)：box-sizing属性]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82454210</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82454210</guid><author>madman0621</author><pubDate>Thu, 06 Sep 2018 09:33:26 +0800</pubDate><description><![CDATA[在CSS中，你设置一个元素的 width 与 height 只会应用到这个元素的内容区。如果这个元素有任何的 border 或 padding ，绘制到屏幕上时的盒子宽度和高度会加上设置的边框和内边距值。这意味着当你调整一个元素的宽度和高度时需要时刻注意到这个元素的边框和内边距。当我们实现响应式布局时，这个特点尤其烦人。

box-sizing 属性可以被用来调整这些表现:


content-b...]]></description><category></category></item><item><title><![CDATA[CSS技巧篇(三)：background-position和雪碧图(CSS Sprites)用法]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82454183</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82454183</guid><author>madman0621</author><pubDate>Thu, 06 Sep 2018 09:32:19 +0800</pubDate><description><![CDATA[&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp;&amp;amp;amp;nbsp; &amp;amp;amp;nbsp; background-position属性使用频率非常高，大量的网站为了减少http请求数，会将大量的图片图片合成一张雪碧图（Sprite）来使用。雪碧图的使用就是通过控制background-position属性值来确定图片呈现的位置，不得不说它的作用非常重要，当然除了在使用雪碧图的场景外，别的某些场景也常常会使用到这个属性]]></description><category></category></item><item><title><![CDATA[CSS3新属性篇(三)：Flex弹性盒子]]></title><link>https://blog.youkuaiyun.com/madman0621/article/details/82454088</link><guid>https://blog.youkuaiyun.com/madman0621/article/details/82454088</guid><author>madman0621</author><pubDate>Thu, 06 Sep 2018 09:27:47 +0800</pubDate><description><![CDATA[一、Flex介绍

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 
任何一个容器都可以指定为 Flex 布局:



.box{
  display: flex;
}

行内元素也可以使用 Flex 布局:



.box{
  display: inline-flex;
}

Webkit 内核的浏览器，必须加上-webkit前缀:



....]]></description><category></category></item></channel></rss>