发表于 | 分类于

正则表达式

使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
可用于文本搜索和文本替换的操作

var patt= /string/i

语法

/pattern/modifieres:/模式/修饰符

阅读全文 »

发表于 | 分类于

函数

系统函数

isNaN(参数)：判断参数是否不是一个数字；

自定义函数

语法

function name(参数){}

声明函数的关键字:function

return:函数的返回值，在函数中，执行到return，函数结束执行。return后的代码不执行。

函数的调用

函数只有被调用才会执行代码

函数名(参数组);

BOM模型

浏览器对象模型
包括对象：

window:整个BOM的核心

常用方法

prompt();
alert();
confirm(); 确定—取消，返回值为布尔型数值
close();
open(“1.html”,”_selt“,”窗口特征”,true);新打开一个页面
true:会在浏览器的历史记录中记录当前页和新打开的页面
srtInterval(函数,1000);间隔一定时间(毫秒)调用函数;函数会返回一个intervalId
clearInterval();清除调用函数

事件

onXXXX监听某个事件是否发生
onload:页面或图像完成加载
onclick:单击某个对象时
onmouseover:鼠标移到某个元素上
onmouseout:鼠标从某个元素上移开

history:历史对象

方法
history.back() 后退

document:文档对象

location:位置对象,页面访问的地址

(URL),把浏览器重定向到新的页面

location.hostname:返回WEB主机的域名
location.pathname:当前页面的路径和文件名

location.port:返回web主机的端口
location.protocol:协议

location.href:返回当前的(URL)可跳转页面

方法
location.reload():重新加载，刷新页面

16px * 16px
type ,引用资源的MIME类型
rel ,关系
MIME参考手册
iconfont 图标库


target="_self":跳转链接时，不重新打开一个窗口，覆盖原有页面
target="_blank":跳转链接时，重新打开一个窗口，保留原有页面（默认）

DOM模型

方法

  • getElementById()：返回带有指定ID的元素。
  • getElementsByTagName();返回包含有指定标签名的对象集合,访问方式类似数组
  • getElementsByName();返回包含指定name属性值的对象集合,访问方式类似数组
  • getElementsByClassName();

addEventListener()方法

给元素添加事件监听

语法：

element.addEventListener(event, function, useCapture);
第一个参数是事件的类型；
第二个参数是事件触发后调用的函数；
第三个参数是个布尔值用于描述事件是冒泡还会捕获，参数可选

  • 调用外部函数，第二个参数，直接填写函数名 ，不需要 函数名()

    1
    2
    3
    4
    5
    6
    7
    <button id="btn">按钮</button>
    <script type="text/javascript">
    	document.getElementById("btn").addEventListener("click",show);
    	function show(){
    		alert("点击了按钮！");
    	}
    </script>

  • 直接写函数（匿名函数）

    1
    2
    3
    4
    5
    6
    7
    <button id="btn">按钮</button>
    <script type="text/javascript">
    	document.getElementById("btn").addEventListener("click",function (){
    		alert("点击了按钮！");
    	});
    	
    </script>

removeEventListener()移除事件的监听

事件的传递方式：冒泡和捕获

默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

  • 在冒泡中，内部元素的事件会先被触发，然后再触发外部元素(从最具体的元素开始，然后逐级向上，直至文档)
  • 在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件(从最不具体的元素，到最具体的元素)

DOM事件

DOM0级事件

在JS代码中直接处理事件。同一个对象的同一个事件只能处理一次（会覆盖）
var btn1=document.getElementById("btn1");
btn1.onclick = function (){ alert("Hello DOM 0级事件处理程序")}

DOM2级事件处理

同一个对象的同一个事件可以有多个处理程序
addEventListener(事件类型, 函数, 布尔值);

节点

元素节点，文本节点，属性节点，父节点，子节点

换行符 “
“ 节点类型为文本节点。(代码中的空行也会被解读成文本节点)

获取body元素：document.body

创建节点

创建元素节点：createElement()
创建文本节点：createTextNode()
创建子节点：节点.appendChild()

删除子节点

node.removeChild(childNode);
只能根据父节点删除子节点，要删除某个节点必须先找到它的父节点
childNode.parentNode.removeChild(childNode);

替换节点

node.replaceChild(newNode,oldNode);
创建新节点，替换旧节点;也必须找到父节点

DOM查询

  • document.querySlectorAll(“选择器”);
    选择器

发表于 | 分类于

发表于 | 分类于

背景图片——响应调整大小

  • background-size:contain
    背景图片按比例自适应内容区域，图片保持原比例不变。有时不足以覆盖整个背景区域

  • background-size:100% 100%
    背景图片延展覆盖整个区域

  • background-size:cover
    背景图片扩展至足够覆盖背景区域，同时保持图片比例，因此有些部分无法显示

不同设备显示不同图片

  • 使用媒体查询，监控更换图片（断点）

HTML5元素

第一个设置的资源为首选项，用<picture>元素来提供备用选项

1
2
3
4
<picture>
	<source src="img_1.jpg" type="" media="(max-width:400px)">
	<source src="img_2.jpg" type="">
</picture>

srcset属性

解决分辨率切换问题时，需要使用srcset让浏览器可以选择。浏览器可以根据网络情况或用户行为等元素做决定

1
<img src="cat.jpg" srcset="cat1.jpg,cat-2X.jpg 2X"/>

发表于 | 分类于

响应式布局

用媒体查询实现

  • max-width:768px 当最大宽度为480px时（即屏幕宽度小于768px时）的布局

  • min-width:480px 当最小宽度为768px时（即屏幕宽度大于480px时）的布局

@media only screen and (max-width:768px){}

阅读全文 »

发表于 | 分类于

2D转换

transform 2D转换

  • translate(px,px) 平移
  • rotate(deg) 角度旋转
  • scale(1,1)放大倍数
  • skew(x-deg,y-deg)旋转 沿坐标轴旋转

transition过度效果

  • transition:all 2s ease 2s
    （变化样式，持续时间，速度，延迟）
  • 速度
    linear 匀速
    ease 变慢
    ease-in 加速
    ease-out 减速
    cubic-bezier(n,n,n,n) 贝塞尔曲线

3D转换

  • rotateX(90deg);
  • rotateY(90deg);
  • rotateZ(90deg);

动画

声明动画

1
2
3
4
5
6
7
8
9
10
@keyframes name{
	from{background:red};
	to{background:blue};
}
@keyframes name{
	0%Q{background:red};
	50%{background:blue};
	100%{background:yellow};
}

使用动画animation:

  • animation: name 2s esae-in infinite alternate
    (name 持续时间 速度 延迟 次数-无限次 反向)
    1、页面加载时，自动执行
    2、执行次数可自定义
    3、可重复调用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.dh{
	width: 200px;
	height: 200px;
	background-color: #FFA500;
	animation: mydh 3s infinite alternate;
	position: absolute;
	top: 0;
	left: 20px;
}
@keyframes mydh{
	0%{background-color: #CD5C5C;
		top: 0;
		left: 120px;}
		25%{background-image: url(img/gf2.jpg);
			background-size: 100% 100%;
			top: 100px;
			left: 120px;}
		50%{background-image: url(img/li.png);
			background-size: 100% 100%;
			top: 100px;
			left: 20px;}
		75%{background-color:#F5DEB3;
			top: 0;
			left: 20px;}
			100%{background-color: chocolate;}
}

按键动画

按钮按下弹起效果，通过设置阴影实现
按下时让阴影面积缩小，按钮向下移动5px

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*按键动画*/
#btn1{
	width: 200px;
	height: 100px;
	font-size: 30px;
	background-color: mediumseagreen;
	border-radius: 10px;
	border: 0px;
	box-shadow: 0 9px 2px darkgrey;
	color: white;
}
#btn1:active{
	border: 0px;
	box-shadow: 0 3px 2px darkgrey;
	transform: translateY(5px);			
}

照片墙

  • transform-origin: right;
    位置，以哪个边或哪个角旋转
  • transform: rotate(-30deg);
    旋转

发表于 | 分类于

背景渐变

线性渐变

background:line-grsdient()
background: linear-gradient(white,red,white);
（颜色,颜色,颜色）
background: linear-gradient(to right top,blue,red);
（渐变方向,颜色,颜色）
background: linear-gradient(90deg,blue,red);
(角度,颜色)
background: linear-gradient(90deg,blue 20%,white 0, white 30%,yellow 0,yellow 10%);

径向渐变

background:radial-gradient(circle,red,blue);

发表于 | 分类于

伪类

格式

选择器 : 伪类名{
属性:属性值
}

常用伪类

  • a:hover 鼠标滑过时的样式
  • a:link 链接没有未访问时样式
  • a:visited 链接访问过后的样式

  • a:active 鼠标点击时的样式

  • p:before 给段落前面添加内容

  • p:after{
    content:””;
    } 给段落后面添加内容

hover要在link和visited之后，active必须在hover之后。
visited访问过后的样式，在页面刷新后不会恢复成link样式。删除浏览器历史记录会重新生成

  • li:nth-child(1) 选择li的第一个子元素，不论是什么元素
  • li:nth-of-type(1)
    选择li的第一个li元素

显示小三角

1
2
3
4
5
6
7
8
9
10
11
12
.info{
	width: 0;
	height: 0;
	border-width: 5px;
	border-color:  transparent #808080 #808080  transparent; //transparent 透明色，只有一边显示颜色
	border-style: solid;
	position: absolute;
	top: 20px;
	left: 50px;
	visibility: hidden;
	z-index: 1;
}

发表于 | 分类于

CSS

选择器

  • *全部选择器
    *{}

  • 标签选择器
    div{}

  • ID选择器
    #divId{}

  • 类选择器（class）
    具有同样样式的使用类，需要重复使用的
    .divClass{}

  • 符合选择器
    后代选择器：ul li 使用空格（嵌套）

交集选择器：直接连接（第一个选择器必须是标签选择器 标签+class 符合这两个条件的）,且的关系（JQuery的交集选择器中第一个选择器没有要求）

并集选择器：使用逗号

  • 伪类选择器
    p:first
  • [class*="col-"]
    选择所有类名中含有”col-“的元素
  • [class^="col-"]
    选择所有类名中以”col-“开头的元素
  • [class$="-col"]
    选择所有类名中以”-col”结尾的元素
    阅读全文 »

发表于 | 分类于

canvas

  • 创建画布
    <canvas id="canvas1" width="500px" height="500px"></canvas>
  • 创建画布的2D图形
    var context=document.getElementById("canvas1").getContext("2d");
  • 先添加样式，然后画图

直线

  • context.beginPath();–绘制路径，开始一个画图
  • context.closePath();–关闭路径，结束一个画图
    在同一个画布上画多个图形时需要区分,设置不同样式（如：循环输出图形时）
  • context.moveTo(sx,sy); –直线起点
  • context.lineTo(ex.ey);–直线终点
  • context.strokeStyle= ;–样式，颜色（默认黑色）
  • context.lineWidth= ;–线的宽度
  • context.linCap=”butt/round/square”; –方角/圆角/方角（默认方角）
  • context.stroke();–开始画图—画直线必须要有
    阅读全文 »