项目三遇到的知识点总结

一、jQuery ajax 使用formdata对象上传单个图片

  • 上传图片并没有做出预览的效果

1、HTML


2、js

  • 引入jq


3、注意

  • processData设置为false.因为data值是FormData对象，不需要对数据做处理。
  • cache设置为false,上传文件不需要缓存。
  • 默认值为contentType = "application/x-www-form-urlencoded".在默认情况下，内容编码类型满足大多数情况。
  • 浅谈contentType = false,原文地址 https://segmentfault.com/a/1190000007207128

二、jQuery对json的各种遍历方法

1、概述

  • JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，采用完全独立于语言的文本格式，是理想的数据交换格式。同时，JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不须要任何的API或工具包

在JSON中，有两种结构:对象和数组。

1.对象

  • 一个对象以{开始，}结束。每个'key'后跟:,"key/value对"之间用,分割。

    json =

2.数组

  • 数组是值得有序集合。一个数组以[开始，]结束。值之间用,分隔。

    json = [{'name': '李木子','password': '123456'},{'name': '张长弓','password':'654321'}]

2、JSON对象和JSON字符串的转换

  • 在数据传输流程中，json是以文本，即字符串的形式传递的，而js操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换时关键

JSON字符串

var jsonStr = "{'name': '李木子','password': '123456'}";

JSON对象

var jsonObj = {'name': '李木子','password': '123456'};

1.String转换为JSON对象

  • 1.Javascript支持的转换方式

    var jsonObj = eval('(' + jsonStr + ')');

  • 注：ie8(兼容模式),ie7和ie6也可以使用eval()将字符串转为JSON对象，但不推荐这些方式，这种方式不安全eval会执行json串中的表达式。

  • 2.jQuery插件支持的转换方式

    $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象

  • 3.浏览器支持的转换方式(Firefox,chrome,opera,safari,ie9,ie8)等浏览器

    JSON.parse(jsonStr);

  • 注：ie8(兼容模式),ie7和ie6没有JSON对象，推荐采用JSON官方的方式，引入json.js。

2.Json对象转换为String字符串

JSON.stringify(jsonobj)

3、jQuery遍历json对象

1.grep

  • $.grep()函数使用指定的函数过滤数组中的元素，并返回过滤后的数组

    var array = [1,2,3,4,5,6,7,8,9];
    var filterarray = $.grep(array,function(value){
    return value > 5;//筛选出大于5的
    })
    for(var i = 0;i<filterarray.length;i++){
    console.log(filterarray[i])
    }//和下面函数效果相同
    for(key in filterarray){
    console.log(filterarray[key])
    }

2.each

each 有两种用法：

1.第一种$.each(object,callback)
  • $.each(object,callback);
  • object可以是数组，js对象，dom对象，json对象
2.第二种$(selector).each(callback)

  • $(selector).each(callback);

  • callback是回调函数，跳出使用return false;return true和continue的用法一样，但是在each中只能使用return ture;

  • callback的实体就是function(index,element);

  • index：遍历的索引位置，从0开始，如果为json对象或对象属性，则此值为对应的key值或属性；

  • element:遍历得到的对象元素();






``

3.inArray

  • 返回数组中指定元素的索引值

4.map

  • $.map()函数用于使用指定函数处理数组中的每个元素（或对象的每个属性），并将处理结果封装为新的数组返回。

3、原生js遍历json对象

遍历json对象：

1. 无规律

2.有规律

或者

4.遍历json对象

三、html引入公共的头部和底部

index.html


footer.html

注意

  • $('.footer').load()调用时必须在服务器环境中打开HTML文件才能成功，不能直接双击打开

  • 打开后浏览器的路径应该是 http://127.0.0.1:8020/index.html ，

  • 而不是file:///G:/html/index.html这样的路径，否则在大部分的浏览器上都无法使用。

  • 在此建议使用HBuilder这款编辑器，在运行时会创建服务器环境，并且在局域网中在别的手机或电脑上预览。

四、jQuery cookie操作

1.创建一个回话cookie:

$.cookie('cookieName','cookieValue');

  • 注：当没有指明cookie时间时，所创建的cookie有效期默认到用户浏览器关闭为止，故被称为会话cookie。

2.创建一个持久cookie:

$.cookie('cookieName','cookieValue',{expires:7});

  • 注：当指明时间时，故称为持久cookie，并且有效时间为天。

3.创建一个持久并带有效路径的cookie:

$.cookie('cookieName','cookieValue',{expires：7,path: '/'});

  • 注：如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。

4.创建一个持久并带有效路径和域名的cookie：

$.cookie('cookieName','cookieValue',{expires: 7,path: '/',domain: 'chuhoo.com',secure: false,raw: false});

  • 注：domain:创建cookie所在网页所拥有的域名;secure:默认是false,如果为true,cookie的传输协议需为https;raw:默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。

5.获取cookie：

$.cookie('cookieName');//如果存在则返回cookieValue,否则返回null

  • 更改cookie里的属性uid

    cookieName.uid = newUid;//newUid新的uid
    $('cookieName','cookieValue')//更改之后上传新的cookie

6.删除cookie

$.cookie('cookieName',null);

  • 注： 如果想删除一个带有效路径的cookie，如:$.cookie('cookieName',null,{path: '/'});

五、封装的获取地址的方法

function getHrefData(href) {
var href = href || window.location.href;
if(href.indexOf("?") == -1) {
return {};
}
var paramStr = href.substring(href.indexOf("?") + 1);
var paramArray = paramStr.split("&");
var reVal = {};
for(var i = 0, len = paramArray.length; i < len; i++) {
var tmp = paramArray[i].split("=");
reVal[tmp[0]] = decodeURI(tmp[1]);
}
return reVal;
}

posted @ 2018-09-17 19:14  不完美的完美  阅读(505)  评论(0)    收藏  举报