- 博客(47)
- 收藏
- 关注
RSS订阅原创 H5 canvas
canvas和svg canvas: javaScript动态生成。“位图”，适用于像素处理和动态渲染。修改需要重绘 svg：xml静态生成。“矢量图”，不需要重绘canvas基本结构html<canvas id="canvas" width="200" height="300" style="border: 1px solid blue"></canvas>jswindow.onl
2017-09-22 14:01:08
336
原创 jquery选择器
基础选择器$("divId")id选择器$("a") 元素选择器$(".class1") 类选择器$("*") 所有选择器$("#divId,a,.class2") ","间隔层次选择器$(.class div)子代$(.class>li)直接子结点$(#id+img)id后面的img$(#id~[title])带有title属性的id基本过滤器$("tr:first")tr第
2017-09-20 18:50:40
535
原创 轮播图（一）原生js
1.大框架，获取需要用到的html元素并定义js变量window.onload=function () { var container=document.getElementById('container'); var list=document.getElementById('list'); var buttons=document.getElementById('butt
2017-09-16 08:47:58
300
原创 JavaScript移动
分享栏1.初始HTML<div class="move_box" id="move_box"> <img src="img/move_pic.jpg" > <span>分享</span></div>CSS<style> body,div,span,p{ padding: 0; margin: 0; }
2017-09-13 09:48:41
186
原创 javascript数组的常见算法
数组的去重方法1：效率低 <script type="text/javascript" charset="UTF-8"> var arr=[1,2,3,3,2,1,4,3,1]; var result=[]; //创建一个新数组，并遍历两个数组 for(var i=0;i<arr.length;i++){ //如果有
2017-09-08 16:53:37
168
原创 JavaScript常见字符串方法
短横变驼峰student-man-xiaoming 变为studentManXiaoming 方法1： （1）用字符串的split方法变为数组 （2）遍历数组每一项，首字母都变为大写，然后与剩余字母连接join <script type="text/javascript" charset="UTF-8"> var str="student-man-xiaoming";
2017-09-06 10:30:40
271
原创 JavaScript排序方法
冒泡排序 <script type="text/javascript" charset="UTF-8"> var arr=[1,8,9,6,7,5,4]; for(var i=0; i<arr.length-1;i++){ for(var j=1;j<arr.length;j++){ if (arr[j]>
2017-09-06 09:32:18
255
原创 CSS揭秘 第二章 背景与边框
半透明边框body{ background: url("02.jpg") no-repeat;}.box{ width: 200px; height:150px; margin: 40px ; border:30px solid hsla(0,0%,20%,.5); background: white; background-clip: p
2017-08-20 11:07:01
362
原创 CSS揭秘 第一章 引言
浏览器前缀Firefox的-moz-IE的-ms-Opera的-o-Safari和Chrome的-webkit-CSS编码技巧.button{ width: 150px; height: 60px; margin: 50px auto; border: 1px solid #446d88; text-align: center; line-h
2017-08-20 10:31:23
263
原创 JavaScript高级程序设计 第三章 javascript基本概念
严格模式定义了一种不同的解析和执行模型。在严格模式下，ECMAScript3中的一些不确定行为将得到处理，对某些不安全的操作也会抛出异常“use strict”启用局部变量和全局变量声明function test(){ var message="hi";//，用var声明，是局部变量}test();alert(message);//错误function test(){ m
2017-08-19 17:55:17
233
原创 JavaScript高级程序设计 第二章 在HTML中使用javascript
< script >元素6个属性：async：可选。表示应该立即下载脚本，但不妨碍页面中的其他操作。只对外部脚本文件有用。charset:可选。通过src属性指定的代码字符串，少用defer：可选。表示脚本可以延迟到文档language:废弃。src：可选。要执行代码的外部文件。type：可选。text/javascript延迟脚本虽然把< script >元素放在了< head >元
2017-08-19 09:57:54
193
原创 JavaScript高级程序设计 第一章 javascript介绍
JavaScript组成1.核心 2.文档对象模型 3.浏览器对象模型一、ECMAScript1.与Web浏览器没有依赖关系，Web浏览器只是ECMAScript实现可能的宿主环境之一组成部分有：语法类型语句关键字保留字操作符对象二、文档对象模型（DOM）1.DOM是针对XML但经过拓展用于HTML的应用程序接口（API） 2.DOM把整个页面映射为一个多层节点结构。页面的每个
2017-08-18 20:17:33
202
原创 第八章 javascript函数笔记摘要
函数1.定义一次，执行多次 2.是一种对象函数调用1.作为函数直接调用foo();2.作为对象方法o.method();3.作为构造函数new Foo();4.通过call（）和apply（）方法间接调用func.call(o);定义函数函数声明function add(a,b){ return a+b;}函数表达式 1.匿名函数赋值给一个变量var add=function(a,b){
2017-08-15 06:29:43
289
原创 精通css 第六章 (2)图片热点定位
flickr风格图像映射效果<style> .imgmap{ width:333px ;/*等于大图片尺寸*/ height: 500px; position: relative; } .imgmap ul{ margin:0; padding: 0; list-style: no
2017-08-10 08:26:58
1063
原创 精通CSS 第五章 立体按钮
有效的链接变化a:link,a:visited{color:red;}a:hover,a:focus,a:active{color:blue;}//顺序调换不起作用简单按钮 <style> p{margin: 5em;} a{ font-size: 30px;font-weight: 500;} a.button{ dis
2017-08-09 09:35:07
187
原创 第七章 javascript的数组笔记摘要
数组：值的有序集合。 元素：数组中的每一个值 索引：每个元素在数组中的位置，用基于0的32位数值表示1.javascript数组是动态的。根据需要会增长或者缩减。初始创建时无需声明一个固定大小，数组大小变化无需重新分配空间。 2.可能是稀疏的，索引不一定连续 创建数组数组直接量创建var misc=[1.1 ,ture, ,"a",{x:1},[2,3]];//值为常量,省略值为undefi
2017-08-02 18:03:52
223
原创 精通CSS 第四章 背景图片效果
*css3效果做法简单，其他方法仅作了解，利于深入了解css做圆角背景图片做圆角效果.container{ width:424px;/*图片宽度*/ background: url("tile2.gif") repeat-y;}h2{ background: url("top2.gif") no-repeat left top; padding: 20px 0 0
2017-08-02 11:07:41
471
原创 CSS深入理解（2）z-index
1.支持负值 2.支持CSS3 animation动画z-index与CSS定位属性position：relative/absolute/fixed/sticky定位元素未发生嵌套 1.后来居上 2.数值大的就在上 定位元素发生嵌套 1.祖先优先原则（非auto）CSS3中的层叠上下文和层叠水平层叠上下文： Html的三维概念，人的视线垂直于屏幕的线为z轴。元素在z轴上的显示顺序。 层
2017-07-31 16:36:35
258
原创 CSS深入理解（1）margin
css margin可改变容器的尺寸 可视尺寸：实线包含部分（border及border以内） 占据尺寸：虚线包含部分（margin及margin以内）margin与可视尺寸1.适用于没有设定weight，height的普通block水平元素 如float元素，absolute，inline，table-cell都不适用 2.只适用于水平方向 改水平方向的值：有变化 改垂直方向的
2017-07-29 17:29:23
525
原创 CSS Sprite雪碧图
background-position的运用在原图上进行定位显示background-position:-100 0;sprite工具自动生成：CssGageHTML<div class="cat"> <ul> <li class="cat-1"> <i></i> <h3>服装</h3>
2017-07-29 11:04:09
311
原创 照片墙
.container{ width: 960px; height: 450px; margin: 60px auto; position: relative;/*相对定位*/}img{ padding: 10px 10px 15px; background-color: white; border: 1px solid #dddddd;
2017-07-27 17:17:24
211
原创 精通css 第六章 (1)导航栏
下拉菜单.nav li{ list-style-type: none; line-height: 30px; text-align: center;}.nav>li{ float: left;}.nav li a{ display: inline-block; width: 100px; height: 30px; text-d
2017-07-26 11:52:26
319
原创 JavaScript正则表达式
RegExp检索某一文本时，用正则表达式来描述要检索的内容 简单模式：可以是一个单独的字符串 复杂模式：多种字符，用于解析、格式检测、替换 可以规定字符串中检索位置，以及要检索的字符类型等RegExp属性source:只读字符串 global:只读布尔值 ignoreCase:只读布尔值 multiline：只读布尔值 lastIndex：可读/写整数 声明正则表达式，并匹配该字符v
2017-07-23 07:32:04
287
原创 HTML、CSS初级前端试题汇总（持续补充）
1.浏览器内核IE：tridentFirefox:geckoSafari:webkitOpera:以前是presto,现在是BlinkChrome:Blink2.HTML文件开头的DOCTYPE是干什么的？<!DOCTYPE>声明位于文档最前，在<html>标签之前。告诉浏览器按何种规范解析页面
2017-07-22 08:41:48
619
原创 弹性盒模型
Flexble Box弹性容器（flex container） 弹性子元素（flex item） 主轴（main axis）、侧轴（cross axis） 弹性子元素排列起始位置：主轴开始（main start）、侧轴开始（cross start） 结束位置：主轴结束（main end）、侧轴结束(cross end)属性flex-direction row row-reverse c
2017-07-20 20:20:20
251
原创 GitHub和Git（待补充）
仓库（Repository）:存放项目代码，每个项目对应一个仓库。 收藏（Star） 复制（Fork）：克隆并生成新的仓库，from某某。以此为基础修改或应用项目。pull request，源仓库会查看修改，合并。 关注（Watch） 提问（Issue）：发现bug，一起讨论，并解决
2017-07-20 08:54:31
135
原创 CSS3背景相关新增属性
background-clipborder-box：充满边框和内边距，内容. padding-box：充满内边距，内容 content-box：只充满内容background-originborder-box：在边框开始绘制 padding-box：在内边距开始绘制 content-box：只在内容里开始绘制border-imageborder-image=url(“01.png”) 50
2017-07-19 11:29:27
299
原创 CSS3变换、过渡、动画效果
为元素创建圆角1.四个相同的圆角-webkit-border-radius:10px;border-radius:10px;2.一个圆角-webkit-border-top-left-radius:10px;border-top-left-radius:10px;3.椭圆型圆角-webkit-border-radius:10px/50px； /*前者是圆角在水平方向的半径，后者是圆角在垂直方向
2017-07-14 20:10:15
1131
原创 HTML5的Rang对象
基本概念Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。 Selection与Range对象的使用<body> <script> function rangeTest() { var html; showRangeDiv=document.getElementById("showR
2017-07-12 21:02:47
255
原创 HTML5开发和布局（待补充）
移动开发准则1.尽量使用单页面开发（SPA） 2.慎选UI框架 3.动画、特效使用（60fps）**浏览器消耗最小的CSS属性**位置：transform:translate(x,y,z)大小：transform:scale(n)旋转：transform:rotate(ndeg)透明度：opacity:0~14.长度单位用rem基本布局流式布局 绝对定位布局 Flexbox布局
2017-07-12 20:36:00
249
原创 JavaScript浏览器对象
window对象window对象 1.BOM的核心，当前浏览器的窗口 2.所有Javascript全局对象、函数、变量将自动成为window对象 3.全局对象是window对象的属性，HTML的DOM也是window对象属性之一 4. 全局函数是window对象的方法 window尺寸 1.浏览器窗口内部高度：window.innerHeight 2.浏览器窗口内部宽度：window
2017-07-12 10:09:46
127
原创 JavaScript+DOM编程艺术 第三章 DOM
DOM简介1.HTML DOM：网页被加载时，浏览器会创建文档对象模型 2.DOM操作HTML：改变HTML的元素、属性、CSS样式、对所有事件作出反应DOM操作HTML不要在文档加载完成后使用document.write()<script> document.write("hello");//改变文档输出流</script>
2017-07-10 21:34:27
667
原创 Html5与Css3元素可见性、浮动、定位、对齐（九）
控制元素的显示类型块级元素 dispaly：block； 行内元素（显示设置设置宽度、高度不起作用） display:inline； 1.不接受padding设置，但padding-top和padding-bottom会越界进入相邻元素的区域，而不是局限于该元素本身的空间 2.可以通过设置行高改变行内元素框的高度 3.可以通过设置水平边框、内边距、外边距改变行内元素框的宽度混合显示:该元
2017-07-09 21:17:30
3480
原创 第四章 javascript的语句、对象、属性笔记摘要
块block快语句常用于组合0-多个语句。用一对｛｝定义表达式语句greeting ="Hello"+name;//赋值语句i*=3;count++;delete o.x; //删除alert(greeting); //函数window.close();y=Math.cos(x);复合语句和空语句function(){ x=Math.PI; cons
2017-07-08 16:33:46
260
原创 Html5与Css3表单、文本框、复选框、image新增属性（八）
css5新增的元素与属性表单内元素的属性 1. form属性 之前必须书写在表单内部。而在Html5中，可以放在任何位置，为元素指定一个form属性，属性值为该表单的id，就可以声明该元素属于指定表单//原来用法<form id="textform"> <input type="text"> <textarea form="textform"></textarea></for
2017-07-07 12:30:20
1060
原创 Html5与Css3布局、盒模型（七）
布局实例：规范的命名和编排<body><div class="page"><!--page开始--> <header class="masthead" role="banner"><!--masthead开始--> <p class="logo"><a href="#"><img src="logo.png"/>Logo图片</a></p> <ul clas
2017-07-06 21:59:01
963
原创 Html5与Css3Web字的属性（六）
web字号px（） 百分比（较常用） em（最常用）：一般1em=16px，相对单位。以父元素作参照系,父元素大小是不确定的body{ font-size:100%; /*父元素默认为16px*/}h1{ font-size:2.1875em; /*35px/16px*/}css3新增：rem，以根元素为参照系，根元素大小是确定的html{ font-size
2017-07-06 14:23:28
396
原创 第三章 表达式和运算符笔记摘要
表达式 JS中的一个短语，解释器会将其计算出一个结果。 变量名也是一种简单的表达式，它的值就是复制给变量的值。 复杂表达式：使用运算符，由简单表达式组成
2017-07-02 18:39:41
190
原创 Html5与Css3颜色和选择器（五）
css3更新的颜色RGBA:红、绿、蓝、不透明度rgba（89，0，127，0.4）;HSL和HSLA：色相、饱和度、亮度、不透明度hsl(282,100%,25%);hsl(282,100%,25%,.75);使用与媒体相关的样式表link或style：添加属性media属性 有all、aural、braille、handheld、print、projection（投影设备）、screen、t
2017-07-01 18:38:18
1842
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人