zoukankan      html  css  js  c++  java
  • 项目三遇到的知识点总结

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

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

    1、HTML

    <input id="file" type="file" name="file"  accept="image/*" />
    <button id="upload" type="button">上传</button>
    

    2、js

    • 引入jq

        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
        	var files = document.getElementById('file').files[0];
        	var data = new FormData();
        	data.append('file',files);
      
        	$('#upload').click(function(){
        		$.ajax({
        			type: 'POST',
        			url: '地址',
        			dataType: 'json',
        			data: data,
        			//cache: false, 
        			processData: false, //processData 默认为false,当设置为true的时候,jquery ajax 提交的时候不会序列化 data,而是直接使用data
                	contentType: false,
        			success:function(res){
        			},
        			error:function(err){
        			}
      
        		})
        	})
        </script>
      

    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 = {'name': '李木子','password': '123456'}
      

    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:遍历得到的对象元素();

        <body>
        	<div class="main">
        	</div>
        </body>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
        <script>
        	$(function() {
               	var obj = [
               		{ name: "迪丽热巴", birthday: "1992-06-03"},
               		{ name: "易烊千玺", birthday: "2000-11-28"},
               	];
               //下面使用each进行遍历
               var html = ''
               $.each(obj, function (index, value) {
                   html += "<tr><td>" + '爱豆:'+value.name + "</td><td style='30px;'>"+''+"</td><td>" + '生日:'+value.birthday + "</td></tr>";
      
               });
      
               $(".main").append(html);
        	})
        </script>
      

    ``

    <script type="text/javascript">
    	$().ready(function(){
    		var anObject = {one:1,two:2,three:3};//对象
    		$.each(anObject,function(name,value) {
    			alert(name);
    			alert(value);
    		});
    		var anArray = ['one','two','three'];//数组
    		$.each(anArray,function(n,value){
    			alert(n);
    			alert(value);
    		});
    	});
    </script>
    

    3.inArray

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

        <script>
        	$().ready(function(){
        		var anArray = ['one','two','three'];
        		var index = $.inArray('two',anArray);
        		alert(index);//返回该值在数组中的键值,返回1
        		alert(anArray[index])// two
        	})
        </script>
      

    4.map

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

        <script>
        	$().ready(function(){
        		var strings = ['0','1','2','3','4','5','6']
        		var values = $.map(strings,function(value){
        			var result = new Number(value);					
        			return isNaN(result) ? null:result;
        		})
        		for (key in values) {
        			alert(values[key])
        		}
        	})
        </script>
      

    3、原生js遍历json对象

    遍历json对象:

    1. 无规律

    <script>
    	var json = [{迪丽热巴: '女神',易烊千玺: 18,aaa: 'haha'},{ddd: '测试',ccc: '结果'}];
    	for (var i = 0,l < json.length;i < l; i++){
    		for(var key in json[i]){
    			alert(key+':'+json[i][key]);	
    		}
    	}
    </script>
    

    2.有规律

    <script>
    	packJson = [
    	 
    		{"name":"nikita", "password":"1111"},
    		 
    		{"name":"tony", "password":"2222"}
    		 
    	];
    	 
    	for(var p in packJson){//遍历json数组时,这么写p为索引,0,1
    	 
    	  alert(packJson[p].name + " " + packJson[p].password);
    	 
    	}
    </script>
    

    或者

    <script>
    	for(var i = 0; i < packJson.length; i++){
    	 
    	  alert(packJson[i].name + " " + packJson[i].password);
    	 
    	}
    </script>
    

    4.遍历json对象

    <script>	
    	var obj = {'name': '张长弓','password': '123456','department': '技术部','sex': '男','old': '24'};
    	for( var p in obj){
    		console.log(obj[p])
    	}
    </script>
    

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

    index.html

     <footer class="footer"></footer>
     <script>
            $('.footer').load('footer.html',function(responseTxt,statusTxt,xhr){
                console.log('responseTxt,statusTxt,xhr')
             
            })
    </script>
    

    footer.html

    • footer.html不需要是完整的HTML

        <ul class="g-flex">//公共内容
              <li class="g-flex-auto"><a href="#" class="i-b">首页</a></li>
              <li class="g-flex-auto"><a href="#" class="i-b">分类</a></li>
              <li class="g-flex-auto"><a href="#" class="i-b">订单</a></li>
              <li class="g-flex-auto"><a href="#" class="i-b">我的</a></li>
         </ul>
      

    注意

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

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

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

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

    四、jQuery cookie操作

    • 下载与引用:jquery.cookie.js基于jquery;先引jquery,再引用jquery.cookie.js;下载 http://plugins.jquery.com/cookie/

        <script src='js/jquery-3.3.1.js'></script>
        <script src='js/jquery.cookie.js'></script>
      

    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;
    	}
  • 相关阅读:
    博客园
    未释放的已删除文件
    ssh连接缓慢
    剑指 Offer 38. 字符串的排列
    剑指 Offer 37. 序列化二叉树
    剑指 Offer 50. 第一个只出现一次的字符
    剑指 Offer 36. 二叉搜索树与双向链表
    剑指 Offer 35. 复杂链表的复制
    剑指 Offer 34. 二叉树中和为某一值的路径
    剑指 Offer 33. 二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/DCL1314/p/9664282.html
Copyright © 2011-2022 走看看