常用js片段

Posted on   |   In   |  

本文主要介绍一下常用的js片段， 将持续添加。

Js搜索实现

原理： 使用indexOf 来进行关键字匹配

1
2
3
4
5
6
7
8
9
10
11
$('#go-search').click(function() {
    var searchkey = $('#key-word').val()  //获取搜索关键词
    $('li.search-hosp').each(function() {  //用jquery each来遍历每个元素
        var hospName = $(this).find('span').html()  //获取元素里面提取词
        if(hospName.indexOf(searchName) !== -1) {  //采用indexOf搜索，== -1 则无匹配词
            $(this).show()  //有匹配，则显示
        } else {
            $(this).hide()  //无匹配隐藏
        }
    })
})

jquery怎么跳出当前的each循环

说明
return false;——跳出所有循环；相当于 javascript 中的 break 效果。
return true;——跳出当前循环，进入下一个循环；相当于 javascript 中的 continue 效果

1
2
3
4
5
6
7
$("input[type='text']").each(function (i){  
      var _val=$(this).val();
      alert(_val);
      if(_val=='2'){   
           return false; //跳出循环
      }
 })

js 时区转换，标准时间转换成本地时间

将时间戳时间，切换成本地时间

1
2
var d = new Date(1474218082000)
d.setTime(d.getTime() + (d.getTimezoneOffset()*6000))

注册一次性事件

一次性事件： 即事件使用一次即删除，再次使用需要注册 dom 事件

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
27
//注册函数
var addEventOnce = function(dom, type, handler) {
    if(dom.addEventListener) {  //注册事件
        dom.addEventListener(type, handler.__wrapper = function(e) {
            return handler.call(dom, e)
        }, false)
        return {
            removeEvent: function() { //删除事件，及其对应的回调
                dom.removeEventListener(type, handler.__wrapper, false)
            }
        }
    } else if(dom.attachEvent) {  //兼容IE
        dom.attachEvent('on' + type, handler.__wrapper = function(e) {
            return handler.call(dom, e)
        }, false)
        return {
            removeEvent: function() {
                context.detachEvent('on' + type, handler.__wrapper);
            }
        }
    }
}
//使用
var rightFoo = addEventOnce(rightButton, 'click', function() {
    //code ...
    rightFoo.removeEvent() //用完后，删除事件
})

js 对象深拷贝

对象直接通过 = 号赋值都是， 只是为对象新添加一个引用， 而指向的内存空间还是同一个， 例如： var objB = objA; objB 只是 objA的引用，指向同一个内存空间， objA 改变了，同时 objB 也改变了。
深拷贝是： objB 与 objA 值相同，但是拥有各自独立的内存空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let deepCopy = function(obj) {
    let str 
    let newObj = obj.constructor === Array ? [] : {}
    if(typeof obj !== 'object') {
        return
    } else if(window.JSON) {
        str = JSON.stringify(obj) //序列化, 
        newObj = JSON.parse(str)  //还原
    } else {
        for(let i in obj) {
            newObj[i] = typeof obj[i] === 'object' ? deepCopy(obj[i]) : obj[i]
        }
    }
    return newObj
}

采用表单提交方式上传图片

html 标签 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="load-wrap" id="load-wrap">
    //fakeframe 用于阻止表单提交后的页面刷新/跳转
    <iframe id="fakeframe" name="fakeframe" style="display: none;"></iframe>
    <form method="POST" enctype="multipart/form-data" action="/api/pic" 
        target="fakeframe" class="img-upload" id="img-upload">
        <div id='params' style="display: none;">
        //用于传递 post变量 //name为post参数名
            <input type="hidden" name="csrfmiddlewaretoken" value="' + csrftoken + '">
            <input type="hidden" name="id" value="' + data.id + '">
        </div>
        <h4 id="frame-head">上传图片<span class="close" id="close">X</span></h4>
        <span></span>
        <div class="file-chs">
            <input type="file" name='pic'>
        </div>
        <input type="submit" value="确定" class="sub-btn">
        </form>
    </div>

Js 处理上传事件

1
2
3
4
$("#fakeframe").on('load',function(){
    var data = $.parseJSON($("#fakeframe").contents().text());  //获取接口返回参数
    console.log(data)
    })