<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[shirlyran的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/shirlyran</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; shirlyran]]></copyright><item><title><![CDATA[JavaScript(ES6)之面向对象和类的继承]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107740679</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107740679</guid><author>shirlyran</author><pubDate>Tue, 22 Sep 2020 23:48:53 +0800</pubDate><description><![CDATA[1. 面向对象编程oop

1.1 两大编程思想


面向过程编程pop

面向对象编程oop


1.2 面向对象编程


特性

封装性
	继承性
	多态性


1.3 对比


			面向过程
			面向对象
		优点
			性能比面向对象高,适合跟硬件联系很紧密的东西,例如单片机就采用的面向过程编程。
			易维护、易复用、易扩展，由于面向对象有封装、继承、多态性的特性,可以设计出低耦合的系统，使系统更加灵活、更加易于维护
		缺点
			没有面向对象易维护、易复用、易扩展
			性能比面向过程..]]></description><category></category></item><item><title><![CDATA[jQuery学习笔记之jQuery事件]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107620750</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107620750</guid><author>shirlyran</author><pubDate>Tue, 28 Jul 2020 21:39:32 +0800</pubDate><description><![CDATA[1. jQuery注册事件

单个注册事件


语法：


&lt;body&gt;
    &lt;script&gt;
        // element.事件(function(){})
        $("div").click(function(){
            ...;  //事件处理程序
        })
    &lt;/script&gt;
&lt;/body&gt;


其他事件和原生基本一致，如mouseover，mouseout，blur，focus，change]]></description><category></category></item><item><title><![CDATA[jQuery学习笔记--介绍、使用、API（API速查表）]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107593190</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107593190</guid><author>shirlyran</author><pubDate>Mon, 27 Jul 2020 20:31:50 +0800</pubDate><description><![CDATA[目录

1. 概述

1.1 jQuery？

2. jQuery的使用

2.1 下载

2.2 jQuery 的入口函数

2.3 jQuery的顶级对象 $

2.3.1 $ 是jQuery的别称

2.3.2$ 是 jQuery的顶级对象

2.4 jQuery对象和DOM对象

2.4.1 两种对象之间的相互转换

3. jQuery 选择器

3.1 基础选择器

3.2 层级选择器

3.3 隐式迭代

3.4 筛选选择器

3.5 筛选方法

1. 概述

1.1 jQuery？


...]]></description><category></category></item><item><title><![CDATA[JavaScript之移动端网页特效]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107578686</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107578686</guid><author>shirlyran</author><pubDate>Sat, 25 Jul 2020 19:16:31 +0800</pubDate><description><![CDATA[1. 触屏事件

触屏touch事件
			说明
		touchstart
			手指触摸到一个DOM元素时触发
		touchmove
			手指在一个DOM元素上滑动时触发
		touchend
			手指从一个DOM元素上移开时触发
		1.1 触摸事件对象 TouchEvent

三个常见的触摸事件对象
	触摸列表
			说明
		touches
			正在触摸屏幕的所有手指的一个列表
		targetTouches
			正在触摸当前DOM元素上的手指的一个列表
		changedTouches
]]></description><category></category></item><item><title><![CDATA[JavaScript之PC端网页特效]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107541791</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107541791</guid><author>shirlyran</author><pubDate>Sat, 25 Jul 2020 14:05:08 +0800</pubDate><description><![CDATA[1.元素偏移量 offset系列

1.1 概述


offset翻译过来就是偏移量,我们使用ofet系列相关属性可以动态的得到该元素的位置(偏移).大小等。

获得元素距离带有定位父元素的位置
	获得元素自身的大小(宽度高度)
	注意:返回的数值都不带单位


offset系列常用属性
	offset系列属性
			作用
		element.offsetParent
			返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
		element.offsetTop
			返回元素相对带有定位]]></description><category></category></item><item><title><![CDATA[JavaScript之BOM 浏览器对象模型]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107516408</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107516408</guid><author>shirlyran</author><pubDate>Thu, 23 Jul 2020 16:01:53 +0800</pubDate><description><![CDATA[前言：BOM（浏览器对象模型），他提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

1.BOM概述

1.1 对比DOM,BOM:

DOM
			BOM
		文档对象模型
			浏览器对象模型
		DOM就是把[文档」当做一个「对象」来看待
			把「浏览器」当做一个「对象」来看待
		DOM的顶级对象是document
			BOM的顶级对象是window
		DOM主要学习的是操作页面元素
			BOM学习的是浏览器窗口交互的一些对象
		DOM是W3C标准规范
			BOM]]></description><category></category></item><item><title><![CDATA[DOM高级事件]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107498144</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107498144</guid><author>shirlyran</author><pubDate>Wed, 22 Jul 2020 16:09:20 +0800</pubDate><description><![CDATA[1. 注册事件（绑定事件）

1.1传统注册方式


利用on开头的事件，如onclick，onmouseover等
	特点：注册事件的唯一性
	同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数


1.2方法监听注册方式

1.2.1 addEventListener（）


addEventListener（）方法
	ie9之前用attachEvent() 代替
	特点：同一个元素同一时间可以注册多个监听器
	按注册顺序执行




eventTarget.a...]]></description><category></category></item><item><title><![CDATA[JavaScript之DOM-- 获取元素、事件基础、操作元素、节点操作]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107462446</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107462446</guid><author>shirlyran</author><pubDate>Tue, 21 Jul 2020 15:19:59 +0800</pubDate><description><![CDATA[DOM：DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”]]></description><category></category></item><item><title><![CDATA[JavaScript 学习笔记之数组、函数、字符串]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107414934</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107414934</guid><author>shirlyran</author><pubDate>Sun, 19 Jul 2020 22:19:02 +0800</pubDate><description><![CDATA[1.创建数组：数组元素的数据类型可以不同。

1.1 new数组


        // 空数组
        var arr=new Array();

1.2 利用数组字面量创建数组


        // 空数组
        var arr = [];
        // 非空数组
        var arr = [1, 12, 123];


...]]></description><category></category></item><item><title><![CDATA[JavaScript学习笔记--变量、循环]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107366033</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107366033</guid><author>shirlyran</author><pubDate>Fri, 17 Jul 2020 11:11:32 +0800</pubDate><description><![CDATA[JS的组成：
	ECMAScript（JavaScript语法）
		DOM（页面文档对象模型）
		BOM（浏览器对象模型）
	
	JS输入输出语句
	方法
				说明
			alert(msg)
				浏览器弹出警示框
			console.log(msg)
				浏览器控制台打印输出信息
			prompot(info)
				浏览器弹出输入框，用户可以输入
			
	特殊变量：不声明变量只赋值也能正常使用但不提倡这种写法
	
age=18；
console.log(age);//能在控制..]]></description><category></category></item><item><title><![CDATA[移动web开发之bootstrap]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107304674</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107304674</guid><author>shirlyran</author><pubDate>Wed, 15 Jul 2020 10:37:38 +0800</pubDate><description><![CDATA[1.响应式开发

1.1 响应式开发原理


使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。




1.2 响应式布局容器


响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现在不同屏幕下，看到不同的页面布局和样式变化


平时我们的响应式尺寸划分



也可根据实际情况划分尺寸

2.bootstrap前端开发框架


bootstrap是基于htm...]]></description><category></category></item><item><title><![CDATA[移动web开发之rem、媒体查询、less]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107300292</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107300292</guid><author>shirlyran</author><pubDate>Sun, 12 Jul 2020 20:11:18 +0800</pubDate><description><![CDATA[前言：

页面布局文字随着屏幕大小变化而变化
	流式布局和flex布局主要针对于宽度布局，rem布局针对高度设置
	rem布局能在屏幕发生变化时，元素的高度和宽度等比例缩放


1.rem基础

rem单位


rem是一个相对单位，类似于em，em是父元素字体大小
	不同的是rem的基准是相对于html元素的字体大小
	比如，根元素（html）设置font-size：12px；非根元素设置width：2rem；则换成px表示就是24px（即非根元素的width：24px）。
	rem的优点：可以通过修改.]]></description><category></category></item><item><title><![CDATA[移动web开发之flex布局]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107287024</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107287024</guid><author>shirlyran</author><pubDate>Sat, 11 Jul 2020 21:39:56 +0800</pubDate><description><![CDATA[1.flex布局体验

1.1传统布局与flex布局

传统布局


兼容性好
	布局繁琐
	局限性，不能在移动端很好的布局


flex布局


操作方便，布局即为简单，移动端应用很广泛
	PC端浏览器支持情况较差
	IE11或更低版本不支持或仅部分支持


怎么选择：


1.如果是PC端页面布局，选择传统布局

2.如果是移动端或者不考虑兼容性问题的PC端页面布局，选择flex弹性布局


1.2体验

1.搭建HTML结构


&lt;body&gt;
    &lt;div&gt;
      .]]></description><category></category></item><item><title><![CDATA[移动端web开发--开发选择、技术解决方案、常见布局]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107257880</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107257880</guid><author>shirlyran</author><pubDate>Fri, 10 Jul 2020 20:59:27 +0800</pubDate><description><![CDATA[1.移动端开发选择

1.1 移动端主流方案

1.单独制作移动端页面（主流）

2.响应式页面兼容移动端（其次）

1.2单独移动端页面（主流）

通畅在网址域名前加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。

1.3响应式兼容PC移动端

通过判断屏幕宽度来改变样式，以适应不同终端。如：三星官网

缺点：制作麻烦，需要花大量精力去调兼容性问题

2.移动端技术解决方案

2.1移动端浏览器


移动端浏览器基本以webkit内核为主，因此我们就考虑webkit]]></description><category></category></item><item><title><![CDATA[移动web开发--移动端基础、视口、二倍图]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107199897</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107199897</guid><author>shirlyran</author><pubDate>Fri, 10 Jul 2020 15:50:47 +0800</pubDate><description><![CDATA[1移动端基础

.1.1浏览器现状

国内的UC和QQ，百度等手机浏览器都是根据webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

总结：兼容移动端浏览器，处理webkit内核浏览器即可。

1.2手机屏幕现状

现在移动端设备无论是Android还是iPhone，屏幕尺寸非常多，碎片化严重，分辨率也不同。作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是px。

1.3常见移动端屏幕尺寸



1.4移动端调试方法

Chrome Dev]]></description><category></category></item><item><title><![CDATA[浏览器前缀]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107199223</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107199223</guid><author>shirlyran</author><pubDate>Wed, 08 Jul 2020 10:21:16 +0800</pubDate><description><![CDATA[浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1.私有前缀

-moz-：firefox
	-ms-：IE
	-webkit-：Safari，Chrome
	-o-：Opera
2.提倡写法


-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;


...]]></description><category></category></item><item><title><![CDATA[css3 3D转换-移动、旋转、透视、呈现]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107164426</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107164426</guid><author>shirlyran</author><pubDate>Wed, 08 Jul 2020 10:08:34 +0800</pubDate><description><![CDATA[1.移动


]]></description><category></category></item><item><title><![CDATA[css3 动画animation]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107163963</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107163963</guid><author>shirlyran</author><pubDate>Mon, 06 Jul 2020 17:36:51 +0800</pubDate><description><![CDATA[前言：相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

动画的基本使用：
	制作动画
		先定义动画
			用kerframes定义动画（类似定义类选择器）​​​​​​

				
@keyframes 动画名称{
    0%{
        width:100px;
    }
    100% {
        width:200px;
    }
}

				
				
				
				

				
				
			
			再使用（调用）动画
		
	
   ...]]></description><category></category></item><item><title><![CDATA[css3 2D转换-移动、旋转、缩放]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107154564</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107154564</guid><author>shirlyran</author><pubDate>Mon, 06 Jul 2020 16:11:11 +0800</pubDate><description><![CDATA[转换（transform）是css3中具有颠覆性的特征之一，可以实现元素的移动（translate）、旋转（rotate）和缩放（scale）。

1.移动

语法：



重点：



2.旋转

语法：



重点：



转换中心点：



重点：



注：1.transform-origin后可以跟方位名词，如左下角：left bottom；

2.transform-origin默认的是50% 50% 等价于 center center；

3.可以是px像素，如：transform-orig.]]></description><category></category></item><item><title><![CDATA[CSS3 选择器-属性选择器、结构伪类选择器、伪元素选择器]]></title><link>https://blog.youkuaiyun.com/shirlyran/article/details/107141273</link><guid>https://blog.youkuaiyun.com/shirlyran/article/details/107141273</guid><author>shirlyran</author><pubDate>Sun, 05 Jul 2020 21:22:32 +0800</pubDate><description><![CDATA[1.属性选择器

用法：



举例：



2.结构伪类选择器：

普通用法：



特殊用法：



举例：






&lt;head&gt;
    &lt;style&gt;
        div:nth-child(1){
            background-color:pink;
        }
        div:nth-child(2){
            background-color:red;
        }
        /*下面这个写法选不到..]]></description><category></category></item></channel></rss>