前端小站


  • 首页

  • 归档

  • 标签

获取表单值的方法

发表于 2016-03-24

input的文本类型

<input type="text" name="mingzi" value="名字" checked="checked"/>

我们可以通过以下方式获取到input的value值

例1:$("input").val();
例2:$("input").attr("value");
例3:$("input").attr("value","名字");这个是修改input的值
以上代码就可以获取input的value值了。

以上是获取到了,input没有改写之前的值,要想获取到改变之后输入框的值,需要用到change事件。

例:$("input").change(function(){
    var num=$("input").val();
    console.log(num)
})//这里的num就是你输入的值。

input的复选框和单选框

对于单选和复选的操作更多的是判断他们有没有被选中的状态,下面这个例子是获取到checkbox中选中的多个值。主要是通过class来控制的。

<input type="checkbox" name="test" value="1"/><span>1</span>
<input type="checkbox" name="test" value="2"/><span>2</span>
<input type="checkbox" name="test" value="3"/><span>3</span>
<input type="checkbox" name="test" value="4"/><span>4</span>
<input type="checkbox" name="test" value="5"/><span>5</span><br>
<input type='button' value='提交' onclick="fun()"/>
<script type="text/javascript">
    function fun(){
    obj = document.getElementsByName("test");
    check_val = [];
    for(k in obj){
        if(obj[k].checked){
            check_val.push(obj[k].value);
            }            
        }    
    alert(check_val);
}

input的select属性值

微信开发的环境配置流程

发表于 2016-03-14

好久没写东西了,闲来无事,写点东西。每天过的充实点。

##微信开发
一、首先大家应该了解以下内容:

1、一个注册好的微信公众号,订阅号和服务号都行。不过一般个人开发用的是订阅号。服务号需要企业的认证才能申请。比较麻烦。至于需要哪一种,看个人选择。

2、一个版本控制工具GitLab和SourceTree(本地的软件)。对修改后的代码进行一个跟新和版本的控制。GitLab还具备服务器的作用。使得开发的微信页面得以显示。(当然这里你也可以使用其他的服务器比如说:新浪的SAE工具)

3、下载微信的开发者文档。我们需要用到当中的“微信网页开发”部分的文档。

接下来就跟大家分享下具体的操作步骤:

###微信订阅号的申请:
1、你可以在百度中搜索微信公众平台:进行账号的注册。如下图填写信息完成注册。

由于我申请的是订阅号,所以在开发中需要借助微信的测试账号进行操作。接下来继续申请测试账号。如下图所示:点击左下角的开发者工具,找到右图的公众平台测试账号

2、进入到测试账号之后,需要记住自己的appID和appsecret账号。在以后的开发文档中需要用到。当然你也可以之后粘贴复制。接着还需要修改“js接口安全域名”,这个域名就是在gitlab上面需要关联的域名了。需要注意的是,这个域名一定要是一级域名。因为使用的是测试号的原因,这里在使用之前需要先关注下测试公众号。具体的方法就是扫描左下角的二维码。以上操作可以参考下图:

###GitLab的配置

说实话本人是最烦这种配置环境的事情,不过有时候工作需要,我们也是没有办法的,凡事慢慢来吧。
1、登录GitLab,点击左下角的profile setting ,弹出如下页面,设置自己的名字(英文名),自己的邮箱,然后点击左下角的按钮。
如图所示:


2、以上设置完之后,点击返回首页,点击help按钮,然后找到右边的ssh,点进去如下图所示,复制例如:ssh-keygen -t rsa -C “zh66j66w66@qq.com”的代码,邮箱以刚才设置的邮箱为准。
如图所示


3、把刚才复制的代码添加到终端中。如下图所示

对微信开发文档的操作

1、找到微信的开发者文档。我们需要用到当中的“微信网页开发”部分中的“微信JS-SDK”文档。 在网页的底部找到示例代码:下载下来。这是一个文件。我们可以需要用到文件中的php中的sample.php文件。
代码如下:需要改动的看后面的注释部分

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("wxe7438173d2c401dd", "47b14e27c12de2e3213be5721ccab28c");//这里是要用字上面需要大家记住的appID和appsecret账号
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
  /*
   * 注意:
   * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
   * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。
   * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
   *
   * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:
   * 邮箱地址:weixin-open@qq.com
   * 邮件主题:【微信JS-SDK反馈】具体问题
   * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。
   */
  wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中。这里是添加文件的代码。具体的参考开发文档。
        'onMenuShareTimeline',
        'onMenuShareAppMessage' 
    ]
  });
  wx.ready(function () {
    var link=location.href;
    // 在这里调用 API
    wx.onMenuShareTimeline({
    title: '什么玩意', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

    wx.onMenuShareAppMessage({
    title: '什么意思', // 分享标题
    desc: '没什么意思', // 分享描述
    link: '链接是吧', // 分享链接
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
        alert("什么意思");
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
  });
</script>
</html>

使用SourceTree对文件进行管理:

1、打开界面如下

2、对修改的文件:先进行提交,在进行推送。
3、之后登录例如:“http://sh01-james.ilanou.com/sample.php”进行在手机上进行二维码的扫描。
之后就可以看到自己在开发者文档中修改的内容。包括主题、描述、图片、内容等。
经过以上的千辛万苦终于完成了配置。其实这才是微信号开发的开始,接下来继续努力吧!

js对dom的操作

发表于 2016-03-05

js中的dom对象,也就是对html的操作

一.获取到html中元素

通过id获取:var document.getElementById("id名")/document.querySelector("#id名")
通过class名获取:var document.getElementsByClassName("class名")/document.querySelector(".class名")
通过标签获取:var documnet.getElementsByTagName("标签名")/document.querySelector("标签名")

二、改变html

改变输出流:document.write(Date());向网页中添加今天的日期。
改变html元素的内容:document.querySelector('p').innerHTML="内容"。
改变html元素的属性:document.querySelector("img").src="新的路径"

三、改变css

document.getElementById(id).style.property=new style
例:document.getElementById("p2").style.color="blue";

四、dom事件

点击事件:onclick
onmousedown/onmouseup:首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 和 onunload 事件可用于处理 cookie
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onchange:常结合对输入字段的验证来使用。适用于<input> <textarea> <select>。
onmouseover和onmouseout:用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
onfocus:在对象获得焦点时发生。

五、对dom节点的操作(添加、删除html元素)

创建新的HTML节点:必须先创建该元素,在向一个已存在的元素添加该元素
    var para = document.createElement('p')
    var div1=document.createElement('div')
    div1.appendChild(para)
删除已有的HTML元素:你必须首先获取该元素
    <div id="div1">
        <p id="p1">这是一个段落。</p>
        <p id="p2">这是另一个段落。</p>
    </div>
    <script>
        var parent=document.getElementById("div1");
        var child=document.getElementById("p1");
        parent.removeChild(child);
    </script>                    

apply和call方法

发表于 2016-03-01

js中的call函数和apply函数

a.call(b)

 a.call(b,a1,a2)
  把a对象的方法应用到b对象上。b对象也就拥有了a对象所有的内容。b继承a对象。一般用于对象的继承。
  例:function class1()
{
   this.name = function(){
    alert("class1的方法name()");
   }
}
function class2()
{
class1.call(this);//要想实现class2继承class1 this就是当前对象class2。

}

a.apply(b)

a.apply(obj,args)
obj:这个对象代替a对象
args:这个是数组,它将作为参数传给a

call()和apply()的区别

注意到,call()与apply()的区别:功能一样。第二个参数形式不一样。call传递多个参数,是任意形式。apply第二个参数必须是数组形式。

用代码来理解它们区别最好:

a.call(b,2,3); ==> a.apply(b,[2,3]);//数组形式传入

清除浮动的方法

发表于 2016-03-01

清除浮动的常见方法

在我们布局样式的时候,经常会用到float来达到我们的目的。为了使浮动后不影响其他布局,就常常需要把浮动的效果给清除。混迹前端,岂能没有一技之长。下面就传授给你清除浮动的几种方法。

1、结尾处加上空div标签:clear:both

  <style type="text/css">
    .div1{background:#000080;border:1px solid red}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    /*清除浮动代码*/
    .clearfloat{clear:both}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
    <div class="clearfloat"></div>
</div>
<div class="div2">
    div2
</div>

原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度

优点:简单、代码少、浏览器支持好、不容易出现怪问题

缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
2、父级div定义 伪类:after 和zoom

<style>
    .left{
        float:left;
        width:200px;
        height:200px;
    }
    .right{
        float:right;
        width:200px;
        height:200px;
    }
    .clearfloat:after{
        display:block;
        clear:both;
        content:"";
        visibility:hidden;
        height:0
    }
    .clearfloat{
        zoom:1;//兼容ie6、7
    }
</style>      
  <div class='div1 clearfloat'>
      <div class="left">left</div>
      <div class="right">right</div>  
  </div>

推荐使用这种方法,可以封装到公共css或res css文件中

3、父级div定义 overflow:hihhden

  <style type="text/css">
    .div1{background:#000080;border:1px solid red;/*解决代码*/width:98%;overflow:hidden}
    .div2{background:#800080;border:1px solid red;height:100px;margin-top:10px;width:98%}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
    <div class="left">Left</div>
    <div class="right">Right</div>
</div>
<div class="div2">
    div2
</div> 

该方法不能和position配合使用,因为超出的尺寸的会被隐藏。

js小结

发表于 2016-03-01

javascript 浏览器脚本语言 最大的特点就是单线程了。JavaScript的主要用途是与用户互动,以及操作DOM。负责内容 样式 行为分离环节中的分离部分。

- js的组成

  • ECMAScript 核心 几乎没有兼容问题 担任解析器的角色 处理我们的逻辑代码

  • DOM 文档对象模型;文档指的就是网页;把网页变成一个JS可以操作的对象;给了JS可以操作页面元素的能力;document;有一些兼容性问题;

  • BOM 浏览器对象模型;给了JS操作浏览器的能力;window;有许多兼容性问题

- js的引用

- 外部文件 script标签 src属性

- 内部 script标签区域

- 注释方式 单行注释 多行 注释

- 数据类型

基本类型(primitive) 

1.Undefined

在使用var声明变量,但未对其加以初始化时,这个变量的类型就是undefined,且其默认初始化值为undefined

对未声明与初始化的变量,直接使用,那么这个变量的类型也是undefined,但是没有默认初始化值。

type test;//undefined  直接调用就会报错

2.Null

null类型的默认值是null,表示一个空对象指针,如果定义的变量准备在将来用于保存对象,那么就该将该变量初始化为null。

3.Boolean

该类型有两个值:true false

Boolean()方法 可以转换其他数据类型为布尔值

4.Number

整数 可以通过10进制 8进制 16进制表示

浮点数 该数值必须包含一个小数点,小数点后面必须有一位数字,如果小数点后只有0,自动转换成整数

浮点数占据的空间内存是内存的两倍,极大极小的数字会用e科学表示法。

NaN 

1、即非数值,是一个特殊的值,这个数值用于表示一个本来要返回数值的操作数,未返回数值的情况。比如任何数值除以0,本是不符合规范的,js里,这样的操作返回NaN(但是实际上,只有0除以0时返回NaN,其他则无穷值)。
2、NaN有两个不同寻常的特点:任何涉及NaN的操作都会返回NaN,NaN值与任何值都不相等,包括本身。
3、isNaN()函数,这个函数可以判断,传递的参数是否“不是数值”这里涉及数值转换的问题,例如“10”这个字符串就可以转换为10,但是“blue”这个字符串则无法转换为数字,所以isNaN("blue")==true

Number() 可以    任何类型

parseInt()  parseFloat() 只用于字符串类型


5.string 



'' ""单引号 双引号

基本类型的特点:

基本类型的值是不可变得


复杂对象类型 Object 对象是属性和方法的集合

基本类型以外 就是引用类型

引用类型的特点

引用类型的值是可变的

- 变量 var (let const)

变量是一个杯子,它的类型是由它里面存放的东西决定的

可以通过 typeof

命名规范 一般推荐驼峰式命名

-语句

-运算符

() 括号 提升运算级别 优先运算

++ -- 递增 递减 有前置和后置

前缀形式是先运算再赋值

后缀形式是先赋值在运算

! && || 逻辑非

*/%

+ 加法  拼接

<= >= 

== != 

=== !==

< >

?: 三元条件表达式

= += -=

流程控制语句:

if 最基本的条件判断语句

switch 

?:

for、while、do-while 

for-in 遍历对象

forEach 遍历数组

try catch

width

eval

- 作用域

- this:可以参考this这篇文章。

this是Javascript语言的一个关键字。

它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用

随着函数使用场合的不同,this的值会发生变化。但是有一个总的原则,那就是this指的是,调用函数的那个对象。

1. 普通函数调用

2. 作为对象方法的调用

3. 作为构造函数调用

4. apply() call()

- “构造函数”,其实就是一个普通函数,但是内部使用了this变量。对构造函数使用new运算符,就能生成实例,并且this变量会绑定在实例对象上

用构造函数生成实例对象,有一个缺点,那就是无法共享属性和方法。

  • 继承

    对象之间的继承方法
    
    1. 构造函数绑定
    
    使用call或apply方法,将父对象的构造函数绑定在子对象上
    
任何一个prototype对象都有一个constructor属性,指向它的构造函数

每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。

css小结2

发表于 2016-02-29

再次认识font

http://www.cnblogs.com/fsjohnhuang/p/4310533.html#a32

  • 盒模型

  • 标准盒模型

外盒模型

元素空间宽度 = content width + padding + border + margin的宽度

元素空间高度 = content height + padding + border + margin的高度

内盒模型

元素宽度 = content width + padding + border的宽度

元素高度 = content height + padding + border的高度

- IE盒模型 当IE6~8处于怪异模式下就会使用IE盒子模型,否则将使用W3C标准盒子模型。

外盒模型

元素空间宽度 = content width + margin的宽度

元素空间高度 = content height + margin的高度

内盒模型

元素宽度 = content width

元素高度 = content height

-box-sizing IE8+

box-sizing有三个值,默认是content-box(表示元素使用W3C盒子模型),而border-box(表示元素使用IE盒子模型),inherit(从父元素上继承)

-float 浮动

具有包裹性 本意作用是做文字环绕 float布局只是歪打正着的产物
  • 清除浮动

    使用带clear属性的空元素
    使用CSS的overflow属性 给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动,另外在 IE6 中还需要触发 hasLayout ,例如为父元素设置容器宽高或设置 zoom:1。
    
    在添加overflow属性后,浮动元素又回到了容器层,把容器高度撑起,达到了清理浮动的效果。
    

-给浮动的元素的容器添加浮动

给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。

-使用邻接元素处理 给浮动元素后面的元素添加clear属性。

-使用CSS的:after伪元素 结合 zoom

结合 :after 伪元素(注意这不是伪类,而是伪元素,代表一个元素之后最近的元素)和 IEhack ,可以完美兼容当前主流的各大浏览器,这里的 IEhack 指的是触发 hasLayout。

给浮动元素的容器添加一个clearfix的class,然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素(Block element)清理浮动。

    .clearfix:after{
      content: "."; 
      display: block; 
      height: 0; <!--line-height:0-->
      clear: both; 
      visibility: hidden;  
      }

    .clearfix {
      /* 触发 hasLayout */ 
      zoom: 1; 
    }
    添加到父级,清除浮动
  • IE hack 有IE就有hack hack主要是针对IE浏览器

    所有 IE{property:value\9;}
    大于或等于 IE 8{property:value\0;}
    小于或等于 IE 7{*property:value;}
    .IE 8/9{property:value\0;}
    .IE 9{property:value\9\0;}
    .IE 7{+property:value;}
    .IE 6{_property:value;}
    非 IE{property//:value;}
    

- zoom 定义缩放比例。不允许负值 有兼容问题 主要用于IE67浏览器 触发haslayout 达到清除浮动等功能

zoom:1

- 垂直居中

- 使用绝对定位垂直居中

flex居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,body{margin: 0;padding: 0;height: 100%;}
        div{
            display: flex;
            height: 100%;
            justify-content:center;
            align-items:center;
            background: blue;
        }
        h2{
            text-align: center;
            line-height: 100px;
            width: 100px;
            height: 100px;
            border: 2px red solid;
        }

    </style>
</head>
<body>
        <div><h2>默认值</h2></div> 
</body>
</html>

兼容性最好 absolute结合margin 需要知道尺寸

http://www.cnblogs.com/dojo-lzz/p/4419596.html

-自动换行

word-wrap 是控制换行的

break-word 是将强制换行 

word-break 表明是否断开单词换行 面对长度较长单词

break-all 允许断开单词换行

white-space

pre :空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签

nowrap: 文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止

pre-wrap: 保留空白符序列,但是正常地进行换行

当文本溢出包含元素时发生的事情

  • text-overflow: clip|ellipsis|string;

clip默认值 超出裁剪
ellipsis 超出显示…

-单行文本溢出显示省略号(…)

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap; 不换行

部分浏览器 需要带上width

-多行文本溢出显示省略号(…) 仅支持webkit内核浏览器 移动端

display: -webkit-box; 将对象作为弹性伸缩盒子模型显示
-webkit-box-orient: vertical; 伸缩盒对象的子元素的排列方式
-webkit-line-clamp: 3; 用来限制在一个块元素显示的文本的行数
overflow: hidden;

利用 after

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;

-Opacity属性用来设置一个元素的透明度,取值范围是0~1之间,不可为负值。opacity取值为1是完全不透明,取值为0是完全透明

opacity:0.5;
filter:alpha(opacity=50);/* IE 4+ */  ||

filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  /*i e 8+*/ 

-Overflow

overflow属性有四个值:visible (默认), 

hidden 将所有超出盒子的所有内容都给隐藏掉。

scroll 始终出现滚动条

auto 现代浏览器的默认属性 有超出内容 才有滚动条


overflow-x

overflow-y 

css小结

发表于 2016-02-26

css盒模型:

margin padding border 

css标签的默认值和属性

div:
a:link hover visit active
img:background-size,background-position

浮动和清除浮动的方法

float:left,right.
overflow:hidden
clear:both

定位

相对定位:position:relative
绝对定位:position:absolute
固定定位:position:fixed

引入css的3中方式

外部样式、行间样式、内联样式<br>
优缺点,格式,权重
内联:优先级高,不会被覆盖,不会产生再次请求。不利于代码维护。没有样式内容分离。
行间样式:style 位于head 试用于单页面开发,
外部样式:link 内容 样式 行为 分离。代码复用。利于维护。
会增加请求次数。
reset.css/publice.css
@import url 引入方式,不常用

css构成

一般由选择器,属性和属性值构成
例:div{
        width:100px;
        height:100px;
    }
如果值为若干个单词,则要给值加引号;
例:p{font-family:"sans serif";}

css选择器

1、统配选择器:

*

2、元素选择器:

div/a/h1/p/span{color:red}

3、id选择器:

#id名{color:red;}

4、类选择器:

.类名{fot-size:12px;}

5、属性选择器:

a[属性值:href/title/src/url]{color:red;}一般用于input标签

6、后代选择器:

div a{color:red;}

7、子元素选择器:

h1 > em{color:green;}.只作用于某个元素的子元素。

8、兄弟选择器:

h1 + p {margin-top:50px;}.同一个父级,h1和p是相邻的元素。

9、nth选择器:

nth-child(),nth-first-child(),nth-last-child()

10、状态选择器:

focus,checked,enabled,disabled 例:input[type="text"]:disabled { background:#ddd;}

11、伪元素选择器:

E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字母
E::before 在E元素之前插入生成的内容
E::after 在E元素之后插入生成的内容

12、伪类选择器:

a:link{color:red} 未被访问的链接
a:visited{color:green} 已被访问的链接
a:hover{color:black} 鼠标移动到链接上
a:active{color:glod} 选的的链接

13、分组选择器:

偏重代码优化,对于重复的代码合并到一块。

选择器的优先级:id >class>标签

!important

属性的继承

可继承属性:line-height color font font-family font-size font-style font-variant
不可继承属性:display margin border padding background width height overflow position left right top right top bottom z-index float 

颜色值

red green 等英文单词
#0000 #号加16进制的数字
rgb:red green blue
<img src="http://p3.pstatp.com/large/23b00095416e3d2f534"/>
rgba: red green blue a代表透明度,取值0~1之间
hsl (IE8-浏览器不支持) HSL模式是通过对色调(H)、饱和度(S)、亮度(L)三个颜色通道的变化以及它们相互的叠加得到各式各样的颜色。HSL标准几乎可以包括人类视力所能感知的所有颜色.h:色调(hue)可以为任意整数。0(或360或-360)表示红色,60表示黄色,120表示绿色,180表示青色,240表示蓝色,300表示洋红(当h值大于360时,实际的值等于该值模360后的值).s:饱和度(saturation),就是指颜色的深浅度和鲜艳程度。取0-100%范围的值,其中0表示灰度(没有该颜色),100%表示饱和度最高(颜色最鲜艳).l:亮度(lightness),取0-100%范围的值,其中0表示最暗(黑色),100%表示最亮(白色)


hsla (IE8-浏览器不支持)HSLA模式是HSL的扩展模式,在HSL的基础上增加一个透明通道alpha来设置透明度

单位:

px 具体单位 像素
百分比 单位根据父级
em 单位被定义为当前字体大小 根据body 例如:bidy{font-size:14px} 单位变化根据父级来改变
 rem root em 基于根元素html进行设置 
 vh/vm 视窗单位 h等于viewport高度的1/100.例如,如果浏览器的高是900px,1vh求得的值为9px。同理,如果显示窗口宽度为750px,1vw求得的值为7.5px

line-height

可以用来居中

font

设置字体样式

BFC

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”

BFC的生成

满足下列css声明之一的元素便会生成BFC。
根元素:html 就是一个大的bfc
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

BFC的约束规则

生成BFC元素的子元素会一个接一个的放置。垂直方向上他们的起点是一个包含块的顶部,两个相邻子元素之间的垂直距离取决于元素的margin特性。在BFC中相邻的块级元素外边距会折叠。
生成BFC元素的子元素中,每一个子元素做外边距与包含块的左边界相接触,(对于从右到左的格式化,右外边距接触右边界),即使浮动元素也是如此(尽管子元素的内容区域会由于浮动而压缩),除非这个子元素也创建了一个新的BFC(如它自身也是一个浮动元素)。
内部的Box会在垂直方向上一个接一个的放置
垂直方向上的距离由margin决定。(完整的说法是:属于同一个BFC的两个相邻Box的margin会发生重叠,与方向无关。)
每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而    position为absolute的元素可以超出他的包含块边界)
BFC的区域不会与float的元素区域重叠
计算BFC的高度时,浮动子元素也参与计算
BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面元素,反之亦然

闭包

发表于 2016-02-25

for循环中遍历不到i值的解决方法。也就是闭包的问题。

for获取值的问题(闭包)

for(var i=0;i<a.length;i++){}在循环内的数值,变化是把i遍历了一边。
在循环外得到的值是循环结束后的值。

1、将变量i保存在每个段落对象(p)上。如果在循环下出现点击事件函数,函数中获取不到i的遍历值。需要给点击事件增加一个属性

来保存遍历的i值。在点击事件中使用时,需要用到this(需要分清此时的this指向的那个
对象)。例:

for(var i=0;i<a.length;i++){
    a[i].index=i;
    // console.log(a)
    a[i].onclick=function(){
        console.log(a[i])//a[i]获取不到。this指向单个p;
        }
    }

2、如果在循环下面出现函数时,获取遍历值时,函数的执行需要在for循环下才能遍历到i的值

例:
var a=document.querySelectorAll('p');
for(var i=0;i<a.length;i++){
    console.log(i)    
    function woqu (){
     console.log(i)
    }
    woqu()//在此处执行函数时,可以遍历到i的值
}
woqu()//在此处执行函数时,不可以遍历到i的值

3、加一层闭包,i以函数参数形式传递给内层函数。

例: 
var a=document.querySelectorAll('p');
    console.log(a)
        for(var i=0;i<a.length;i++){            
        (function(i){
            a[i].onclick=function(){
                console.log(a[i])
            };
        })(i);
    }

4、加一层闭包,i以局部变量形式传给内存函数。

例:
var a=document.querySelectorAll('p');
for(var i=0;i<a.length;i++){
    (function(){
        var temp=i;        
        a[i].onclick=function(){
            console.log(temp)
            console.log(i)
        }
    })()
}

以上就是闭包问题的几种方法,当然还有其他的方法。找到一个合适自己的使用吧

苦难

html回顾

发表于 2016-02-25

html结构

html的基本结构:
doctype的作用:<!DOCTYPE>声明位于文档中的最前的位置,处于标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范。

html的基本结构:

<html>
    <head>
    </head>
    <body>
    </body>
</html>

html标签

1、<html>是根标签
2、<head>标签是头文件。里边有:
    <title>标题</title>
    <link rel="stylesheet" src="css文件路径"/>
    <style>
    行间样式
    </style>
    <script type="text/javascript" src="js文件路径"></script>
    <script>
     行间样式
    </script>
    <meta charset="uft-8"/><!--声明编码。--!>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>优先使用IE最新版本和Chrome
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    浏览器内核控制。国内浏览器很多都是双内核(webkit和trident),webkit内核高速浏览。ie内核兼容网页和旧版本网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。
    <meta name="keywords" content="your tags关键字内容,"/>页面关键字
    <meta name="descripition" content="120|150words"/>
    <meta name="robots" content="index,follow"/>
    搜索引擎索引方式。all:文件将被索引,且页面上的链接可以被查询;none:文件将不被检索,且页面上的链接不可以被查询;index:文件将被检索;follow:页面上的链接可以被查询;noindex:文件将不被检索;nofollow:页面上的链接不可以被查询。
    <meta http-equiv="refresh" content="0; url="/>
    content内的字数代表时间(秒),即多少时间后刷新,如果加url,则会重定向到指定网页
    <meta name="author" content="author name"/>网页作者信息
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>运用于移动设备的屏幕自适应
    <meta name="apple-mobile-web-app-capable" content="yes"/>webapp全屏模式:伪装app,离线应用。
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> 
    content的值为default|black|black-translucent.运用于隐藏状态栏/设置状态栏颜色:只有在开启webapp全屏模式时才生效。
    <meta name="apple-mobile-web-app-title" content="标题">content的值为default|black|black-translucent.
    <meta content="telephone=no" name="format-detection"/>忽略数字自动识别为电话号码。
    <meta content="email=no" name="format-detection/">
    以上是可以写在<head>中的标签
3、<body>里面放置的标签,标签分为块级和行级标签
  内容参考html和css知识总结部分

当阅读成为一种习惯

12
我就是我,不一样的水果。

我就是我,不一样的水果。

13 日志
© 2016 我就是我,不一样的水果。
由 Hexo 强力驱动
主题 - NexT.Muse