No pay no gain.

jquery中attr和prop的区别分析

post @ 2015-09-08

在高版本的

1
2
3
4
5
6
7
8
9
关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：
• 对于HTML元素本身就带有的固有属性，在处理时，使用```prop```方法。

• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用```attr```方法。
上面的描述也许有点模糊，举几个例子就知道了。
复制代码代码如下:

```javascript
<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

这个例子里

1
复制代码代码如下:

删除

1
2
3
4
这个例子里```<a>```元素的DOM属性有```href```、```id```和```action```，很明显，前两个是固有属性，而后面一个```action```属性是我们自己自定义上去的，```<a>```元素本身是没有这个属性的。这种就是自定义的DOM属性。处理这些属性时，建议使用```attr```方法。使用```prop```方法取值和设置属性值时，都会返回```undefined```值。
再举一个例子：

复制代码代码如下:

是否可见 

1
2
3
是否可见
像```<checkbox>```，```<radio>```和```<select>```这样的元素，选中属性对应```checked```和```selected```，这些也属于固有属性，因此需要使用```prop```方法去操作才能获得正确的结果。
复制代码代码如下:

$(“#chk1”).prop(“checked”) == false $(“#chk2”).prop(“checked”) == true

1
2
如果上面使用```attr```方法，则会出现：
复制代码代码如下:

$(“#chk1”).attr(“checked”) == undefined
$(“#chk2”).attr(“checked”) == “checked”
```
全文完。

阅读此文

条件注释

post @ 2015-09-08 
1
2
3
4
5
6
7
8
9
10
11
12
<!--[if IE]>
<h1>您正在使用IE浏览器</h1>
<![endif]-->
<!--[if IE 5.5]>
<h1>版本 5.5</h1>
<![endif]-->
<!--[if IE 6]>
<h1>版本 6</h1>
<![endif]-->
<!--[if IE 7]>
<h1>版本 7</h1>
<![endif]-->

下面的代码是在非IE浏览器下运行的条件注释

1
2
3
<!--[if !IE]><!-->
<h1>您使用不是 Internet Explorer</h1>
<!--<![endif]-->

最终在非IE和特殊的IE浏览器下起作用
(或者使用 lte lt 或者 gt gte来判断，如：

1
2
3
4
5
6
7
8
<!--[if lte IE 6]>
在IE 6下显示的信息
<![endif]-->
).
<!--[if IE 6]><!-->
<h1>您正在使用Internet Explorer version 6<br />
或者 一个非IE 浏览器</h1>
<!--<![endif]-->

条件注释简介

  1. IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
  2. 条件注释只能用于IE5以上。
  3. 如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
  4. 条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
  5. IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

    条件注释属性

    gt : greater than，选择条件版本以上版本，不包含条件版本
    lt : less than，选择条件版本以下版本，不包含条件版本
    gte : greater than or equal，选择条件版本以上版本，包含条件版本
    lte : less than or equal，选择条件版本以下版本，包含条件版本
    ! : 选择条件版本以外所有版本，无论高低

1、Css if hack条件语法

1
< !--[if IE]> Only IE <![endif]-->

仅所有的WIN系统自带IE可识别

1
< !--[if IE 5.0]> Only IE 5.0 <![endif]-->

只有IE5.0可以识别

1
< !--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->

IE5.0包换IE5.5都可以识别

1
< !--[if lt IE 6]> Only IE 6- <![endif]-->

仅IE6可识别

1
< !--[if gte IE 6]> Only IE 6/+ <![endif]-->

IE6以及IE6以下的IE5.x都可识别

1
<!--[if lte IE 7]> Only IE 7/- <![endif]-->

仅IE7可识别

1
< !--[if gte IE 7]> Only IE 7/+ <![endif]-->

IE7以及IE7以下的IE6、IE5.x都可识别

1
<!--[if IE 8]> Only IE 8/- <![endif]-->

仅IE8可识别

1
<!--[if IE 9]> Only IE 9/- <![endif]-->

仅IE9可识别

注：在 if 后加 lt gte有不同效果 （参加其它参数同理）

1
2
3
<!–[if IE 8]> = IE8 仅IE8可识别
<!–[if lt IE 8]> = IE7或更低版本
<!–[if gte IE 8]> = 高于或者等于IE8版本

下面的代码是在非IE浏览器下运行的条件注释

1
<!--[if !IE]><!-->

您使用不是 Internet Explorer

1
2
<!--<![endif]-->
<!--[if IE 6]><!-->

您正在使用Internet Explorer version 6或者 一个非IE 浏览器

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV IF条件实例</title>
</head>
<body>
你正在使用：
<!--[if IE 7]>
<h2>IE7</h2>
<![endif]-->
<!--[if IE 6]>
<h2>IE6</h2>
<![endif]-->
<!--[if IE 8]>
<h2>IE8</h2>
<![endif]-->

<!--[if IE 9]>
<h2>IE9</h2>
<![endif]-->
<br><br>
<strong>说明</strong>：如果你的浏览器版本为多少即会显示IE多少，针对IE6-IE9实验</body>
</html>

阅读此文

git ignore配置

post @ 2015-09-08

  • 忽略.o和.a文件

    1
    *.[oa]

  • 忽略.b和.B文件，my.b除外

    1
    *.[bB]

!my.b

  • 忽略dbg文件和dbg目录

    1
    2
    * 只忽略dbg目录，不忽略dbg文件
    ```dbg/

  • 只忽略dbg文件，不忽略dbg目录

    1
    2
    3
    !dbg/
    * 只忽略当前目录下的dbg文件和目录，子目录的dbg不在忽略范围内
    ```/dbg
阅读此文

webpack配置 注意点

post @ 2015-09-08

  • 获取绝对路径

    1
    path.resolve(__dirname, "js") 拼接字符串

  • 同步获取文件夹下文件

    1
    fs.readdirSync(dirs) 返回数组

  • 不加g,返回数组，一个为匹配值，后面为子正则（括号内）的匹配项

    1
    ```/(.+)\.js$/

  • 安装plugin
    npm install commons-chunk-plugin –save-dev

阅读此文

重学正则

post @ 2015-09-08

两种正则不同写法

  • javascript写法reg = new RegExp(“规则”，”选项”) 用于字符串拼接

规则在new的时候特殊情况，需要转义
eg: new RegExp(“\d”) 一个数字

  • perl写法reg = /a/
    选项：
    +多个 \d 数字 \b边界 |或 ^行首 $行尾 -范围 \s空格

    1
    2
    3
    4
    [\u4e00-\u9fa5] //中文
    /^(0[1-9]\d{1,2}-)?[1-9]\d{6,7}$/ //电话
    /^\w+@[a-z0-9\-]+(\.[a-z]{2,6}){1,2}$/i //邮箱
    1[3578]\d{9} //手机

  • 选项：
    i(忽略大小写) m(多行) g(全局找)

用法

  1. search
    str.search(re) ;// 找到 返回index 没找到 返回 -1
  2. match
    str.match(re) 匹配 返回一个数组（符合正则）
  3. replace
    屏蔽关键字
    eg1: str = str.replace(/Chrome/g,function(s){
    var str = “”;
    for(var i = 0; i < s.length; i++){
    str += “*”;
    }
    eg2: document.write(str.replace(/a/g,function(s){
    return “+”;
    }));
    document.write(str.replace(/a/g,”+”));等同于
  4. test唯一特殊
    reg.test(str)

应用

  • trim函数 首尾去空格

    1
    2
    3
    function trim(str){
     return str.replace(/^\s+|\s+$/g,"");
    }

  • class取dom

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function getByClass(oParent,sClass){

     if(oParent.getElementsByClassName){
      return oParent.getElementsByClassName(sClass);
     }

     var result = [];

     var re = new RegExp("\\b" + sClass + "\\b");
     var aEle = oParent.getElementsByTagName("*");
     for(var i = 0; i < aEle.length; i++){

      if(re.test(aEle[i].className)){
       result.push(aEle[i]);
      }
     }

     return result;
    }
阅读此文

Jqurey deferred对象学习

post @ 2015-09-08

jQuery的deferred对象详解

JS魔法堂：jsDeferred源码剖析

deferred 对象，让异步程序有了链式写法

  • 写法一：

    优势：更加原生

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var wait = function(dtd){
    var dtd = $.Deferred(); //在函数内部，新建一个Deferred对象
    　　　　var tasks = function(){
    　　　　　　alert("执行完毕！");
    　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
    　　　　};

    　　　　setTimeout(tasks,5000);
    　　　　return dtd.promise(); // 返回promise对象
    　　};
    $.when(wait())
    　　.done(function(){ alert("哈哈，成功了！"); })
    　　.fail(function(){ alert("出错啦！"); });

写法二：

优势：更加简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function wait(dtd) {　　　　
  var tasks = function() {　　　　　　
    alert("执行完毕！");　　　　　　
    dtd.resolve(); // 改变Deferred对象的执行状态
  };
  setTimeout(tasks, 3000);
};　　
$.Deferred(wait)
  .done(function() {
    alert("哈哈，成功了！");
  })
  .fail(function() {
    alert("出错啦！");
  });

写法三：

优势：用promise方法部署deferred对象，让程序更加顺畅

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 部署开始
var dtd = $.Deferred(); // 生成Deferred对象
　　var wait = function(dtd){
　　　　var tasks = function(){
　　　　　　alert("执行完毕！");
　　　　　　dtd.resolve(); // 改变Deferred对象的执行状态
　　　　};
　　　　setTimeout(tasks,5000);
　　};
dtd.promise(wait);
// 部署结束
　　wait.done(function(){ alert("哈哈，成功了！"); })
　　.fail(function(){ alert("出错啦！"); });
　　wait(dtd);

阅读此文

js 异步调用研究

post @ 2015-09-08 
1
2
3
4
5
6
7
8
9
10
11
12
13
function A(fn){
    console.log("a");
    setTimeout(function(){
      fn();
    },1)
  }
  function B(){
    console.log("b");
  }
  (function C(){
    A(B);
    console.log("c");
  })()
  • setTimeout 会对队列栈进行重拍。

下个例子，函数c用时很长，b在0.1秒后执行，然而b还是在c执行完之后再执行了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function A(fn){
      console.log("a");
      setTimeout(function(){
        fn();
      },0.01)
    }
function B(){
  console.log("b");
}
(function C(){
  A(B);
  // setTimeout(function(){
  for(var i = 0 ; i < 1000000000; i++){
    var j = i*i;
  }
    console.log("c");
  // },1)
})()

阅读此文

半透明背景 IE兼容 最佳实践

post @ 2015-09-08

IE8下实现兼容rgba

1
2
3
4
5
6
7
sub{
    background: rgba(0,0,0,0);
    background: url("../../images/space.png") 0 0 repeat;
    &:hover{
      background: rgba(0,0,0,.3);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4c000000,endColorstr=#4c000000);
    }

元素内文字，加filter：alpha（opacity=0）opcity: 0 做兼容

阅读此文

MIME 整理

post @ 2015-09-08
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
阅读此文

input file类型研究

post @ 2015-09-08
id="file"type="file" name="file"/>```
1
2
3
4
5

属性值有以下几个比较常用：
* accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。
* multiple：是否可以选择多个文件，多个文件时其value值为第一个文件的虚拟路径。
```<input id="file"type="file" name="file"/>

选取元素var file = document.getElementById(“file”)
元素内容var content = file.files 数组
事件变化file.onchange = function(){}

  • 图片预览
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <body>
    <form class="" action="index.html" method="post" id="form">
      <input type="file" name="name" value="" id="file">
      <input type="submit" name="name" value="提交">
      <button type="button" name="button" id="btn2">获取对象</button>
    </form>
    <div class="" id="div">

    </div>
    </body>
    <script type="text/javascript">
    window.onload = function(){
      var file = document.getElementById("file");
      var btn2 = document.getElementById("btn2");
      var form = document.getElementById("form");
      var div = document.getElementById("div");
      btn2.onclick = function(){
        console.log(window.URL.createObjectURL(file.files[0]));
        var img = new Image();
        img.src = window.URL.createObjectURL(file.files[0]);
        div.appendChild(img);
      }
    }
    </script>
阅读此文
⬆︎TOP