Javascript常用

来源：互联网发布：淘宝跑腿办事编辑：程序博客网时间：2024/06/02 03:04

JavaScript中的DOM

三种常见的DOM节点:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li></li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href

常见的DOM操作：
1、获取DOM元素的节点值，设置DOM元素节点值。
2、查找DOM节点
3、遍历DOM节点

jquery绑定事件的正确姿势

$(document).ready(function(){    $('#returnImage').click(function(){        alert("")   });})

jquery触发事件

$("#id_doctype").trigger("change");

如何兼容IE？

通过判断浏览器的方式：

// 通过判断浏览器类型来兼容IEvar browser=navigator.appName  // 获取浏览器名称var b_version=navigator.appVersion  var version=b_version.split(";");var trim_Version=version[1].replace(/[ ]/g,""); // 获取浏览器版本if(!(browser=="Microsoft Internet Explorer" && trim_Version=="MSIE9.0")){    if (!$('#add')[0].files.length){        alert('文件不能为空！');        return e.preventDefault();    }}else{    if($('#add')[0].value.length == 0){        alert('文件不能为空！');        return e.preventDefault();                                }}

或者说用异常检测的方式：

通过捕捉异常来兼容IE，更简洁。try {    try {        if (!$('#add')[0].files.length){            alert('文件不能为空！');            return e.preventDefault();        }    } catch(e){        if(!$('#add').val()){            alert('文件不能为空！');            return e.preventDefault();                                    }    }} catch(e){    console.log('old brower')}

JavaScript中 Json和对象互换

将对象转成json

let jsonData = []let tempList = []for(let i=0; i<areaList.length; i++){    let itemList = []    itemList[0] = areaList[i].lng    itemList[1] = areaList[i].lat    tempList[i] = itemList    jsonData.push(itemList)}areaList = JSON.stringify(jsonData);

将json转为对象

var txt = '{ "employees" : [' +  '{ "firstName":"John" , "lastName":"Doe" },' +  '{ "firstName":"Anna" , "lastName":"Smith" },' +  '{ "firstName":"Peter" , "lastName":"Jones" } ]}';  var obj = eval ("(" + txt + ")");  console.log(obj.employees[1].firstName);

JavaScript返回上一页

window.history.go(-1);  //返回上一页window.history.back();  //返回上一页//如果要强行刷新的话就是：window.history.back();location.reload();window.location.go(-1); //刷新上一页

Javascript中的时间操作

// 获取今天的Date对象var today = new Date()console.log(today)VM541:2 Mon Apr 03 2017 15:42:14 GMT+0800 (中国标准时间)// 获取某一天的Date对象(2017-02-28)var endday = new Date('2017', '1', 28)console.log(endday)VM587:2 Tue Feb 28 2017 00:00:00 GMT+0800 (中国标准时间)// 获取某一天之后的第N（2）天的Date对象endday.setDate(endday.getDate()+2)console.log(endday)VM807:2 Thu Mar 02 2017 00:00:00 GMT+0800 (中国标准时间)

JavaScript处理字符串

// 分割字符串temp1.split("/")[temp1.split("/").length - 1]// 截取字符串

JavaScript获取url中的get参数

  function getQueryString(key){      var reg = new RegExp("(^|&)"+key+"=([^&]*)(&|$)");      var result = window.location.search.substr(1).match(reg);      return result?decodeURIComponent(result[2]):null;  }

序列化form表单 ajax post请求提交

serialize()函数序列化表单对象

 $.ajax({     url: "/manager/goods/add",     type: "POST",     data: $("#demo-form2").serialize()                     }).done(function(data){     var obj = eval ("(" + data + ")");     alert(obj.msg) })

获取token存储图片到七牛云(基于tornado/django)

django部分先配置qiniu的python sdk和setting

> setting.pyimport qiniu# qiniuqn = qiniu.Auth(    'AK',    'SK')> view.pyfrom settings import qnupload_token = qn.upload_token("存储空间名")return self.render("goods-add.html", data=data, upload_token=upload_token)

前端页面的表单需要有token和file这两个input,data是要自行构造一个form对象new FormData($(“#image_form”)[0])

> goods-add.html<form id="demo-form2"">    <input name="name"></input>    <input name="price"></input>    <input name="enterprise"></input>    <button id="select_picture">选择</button>    <input type="hidden" name="images" value="" id="target_images">    <button type="button" id="submit_goods">提交</button>     </form>{% if upload_token %}<form id="image_form" method="post" action="http://up-z2.qiniu.com/" enctype="multipart/form-data">    <input name="token" type="text" value="{{ upload_token }}" style="display: none">    <input id="add_image" name="file" type="file" accept="image/*" style="visibility: hidden;"></form>{% end %}<script>    $(document).ready(function(){        $("#select_picture").click(function() {            // 触发文件选择            $("#add_image").click();        })        $("#submit_goods").click(function() {            $.ajax({                 url: "http://up-z2.qiniu.com/",                 type: 'POST',                 data: new FormData($("#image_form")[0]),                 cache: false,                 contentType: false,                 processData: false,             }).done(function( data ) {                 $("#target_images").val("http://op5q844y4.bkt.clouddn.com/"+data.hash)                  // 获取到图片的上传路径之后,可以开始提交表单的逻辑                 $.ajax({                     url: "/manager/goods/add",                     type: "POST",                     data: $("#demo-form2").serialize()                 }).done(function(data){                     var obj = eval ("(" + data + ")");                     alert(obj.msg)                 })              })        })    }</script>

js获取秒级时间戳和毫秒级时间戳

// 毫秒级var timestamp = Date.parse(new Date());// 秒级var timestamp = Date.parse(new Date())/1000;

js定时执行代码

setInterval(function(){ alert("Hello"); }, 3000);

jquery添加子元素并绑定事件

jquery的事件绑定是在渲染页面之后展示在浏览器上面之前，查找DOM元素，将事件绑定上去，如果是后面添加的DOM元素，就无法成功绑定，需要在添加DOM元素之后，立刻绑定。

$.get("/manager/notify?timestamp=" + timestamp, function(rep) {    var data = rep.data["notifications"]    var timestamp = rep.data["max_timestamp"]    if(data.length > 0){        var audio = $("#nofity-ring")        audio.get(0).play();        // 将请求回来的数据 循环生成notification        var sum = ""        console.log(i)        for(var i=0; i<data.length; i++){            var temp_notify_item = "<div class=\"notify-item\"><span class=\"glyphicon glyphicon-info-sign notify-item-icon\"></span><h4>新消息提醒</h4><p>" + data[i]["message"] + "</p><div class=\"clearfix\"></div><a href=\"#\" class=\"notify-item-cancle\">取消</a><a target=\"_blank\" href=\"" + data[i]["url"] + "\" class=\"notify-item-check\">确认</a><div class=\"clearfix\"></div></div>"            sum += temp_notify_item        }        // 先利用$将str转成jquery Object        sum = $(sum)        // 然后将jQuery Object append 到目标元素里面        $("#nofity-area").append(sum)        // 然后利用find为jquery Object绑定事件        sum.find(".notify-item-cancle").click(function() {            var target = $(this).parent(".notify-item")            console.log(target[0])            $(target[0]).fadeOut(500);        })        sum.find(".notify-item-check").click(function() {            var target = $(this).parent(".notify-item")            console.log(target[0])            $(target[0]).fadeOut(500);        })        // 设置最新的timestamp        localStorage.setItem("timestamp", timestamp)    }})

倒计时5秒后再执行某段代码

    // 倒计时5秒钟后消失    var waitTime = 5;    var seconds = 0;    var tempLength = tergetShapes.length;    int = setInterval(function(container, shapes, tergetShapes, ) {        if ((waitTime - seconds) != 0) {            seconds += 1;            countDown.text = "倒计时:" + (waitTime - seconds) + "秒";        }else{            window.clearInterval(int)            for(var i=0; i<tempLength; i++){                container.removeChild(shapes[tergetShapes[i]])            }        }            }, 1000);

0 0