工作笔记-1
1.ajax实例
<script type="text/javascript"> $(function(){ var url = "http://localhost/opencart/index.php?route=product/category&path=28_28"; var data={}; $.ajax({ type : "post", url : url, data : data, success : function(data){//返回数组对象 var obj = JSON.parse(data);//转成jsonobj ==eval(data)不建议使用,不安全,会执行表达式 var products_str = JSON.stringify(obj['products']); var products = JSON.parse(products_str); var products_html = $("#products"); for(var i=0; i<products.length; i++){ var thumb = products[i]['thumb']; var product_li = $("<li class=\"row\"></li>"); var img_div = $("<div class=\"col-xs-3\"></div>").append("<a href=\"CaiPinJieShao.html\"></a>") .append("<img src='"+products[i]['thumb']+"' width=\"100%\" max-width:\"68px\" max-height:\"68px\"/>"); product_li.append(img_div); var desc_div = "<div class=\"col-xs-9\">"+ "<div class=\"row\">"+ "<div class=\"col-xs-8 a_block\" style=\"padding: 0; margin: 0;\">"+ "<a href=\"CaiPinJieShao.html\">"+products[i]['name']+"</a>"+ "<a href=\"CaiPinJieShao.html\">材料:<span class=\"a_color\">"+products[i]['description']+"</span></a>"+ "<a href=\"CaiPinJieShao.html\">功效:<span class=\"a_color\">润肺止咳,清热化痰</span></a>"+ "</div>"+ "<div class=\"col-xs-4 text-center gouwuche_style\">"+ "<a href=\"#\">"+ "<span class=\"glyphicon glyphicon-shopping-cart\"></span>"+ "</a>"+ "</div>"+ "</div>"+ "<div class=\"row\">"+ "<hr>"+ "</div>"+ "</div>"; product_li.append(desc_div); products_html.prepend(product_li); } }, error: function (msg) { console.log(url); console.log("error"+JSON.stringify(msg)); } }); }); </script>
2.订单列表——订单详情页
有两种方法:一种是url传值,另一种是html5的本地存储。
url传值 :例子:原始页面链接长这样:
var info_a=$("<a href=\"order_details.html?id="+id+"\"></a>");
跳转页面链接这样获取地址:
var url=window.location.search; var tmp1=url.split("?")[1]; var tmp2=tmp1.split("=")[1]; var id=tmp2; url= "http://localhost/opencart/index.php?route=account/order/info&order_id="+id,
其中,split()用于将一个字符串分割成数组;
也可以用window.location.search(返回所有地址栏从?开始的字符串,题中例子即返回id=X);
本地存储:
window.sessionStorage.setItem("名",值);//先将要存储的数据存起来 //调用 var name=window.sessionStorage.getItem("名"); //清除 window.sessionStorage.removeItem("名");
很方便有木有o(∩_∩)o 哈哈
3.正则:
把所有的<br /> 换成空格;
function repstr(s){ return s.replace(/<br \/>/g," "); }
4.巧用“+-”转换类型
num-0 数字
num+"" 字符串
5.逻辑判断:
逻辑表达式最终的结果不一定是true或false,而是停止计算前最后一个操作数的值。
不理解时看这句:(js中,逻辑运算返回的是最早能判断表达式结果的那个值。)
即 与/或,最早能判断出表达式是true or false的那个值,就是逻辑表达式的结果。哈哈 有点绕。
举例:
var a=false; var b=6; console.log(a||b); //6(其中,括号里的是逻辑表达式,执行时会对他做判断,即a或b 是否true? 本例中a不是,b,true.故结果为6) var c=false; var d=6; console.log(d&&e); //false 括号里要判断d&&e是否true? d=false,那么后面的就不用看了,结果已出,false
6.个人总结
自学了三个多月,每天学习3——4个小时,终于找到第一份工作。目前的状态不可松懈,多多学习。成为一名优秀的前端工程师0.0