web前端知识点小结 （五）

##javascript解析json数据 ##

JSON.parse() 用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify() 用于将 JavaScript 值转换为 JSON 字符串。
eg:

<script>
var text = '{ "sites" : [' +
	'{ "name":"Runoob" , "url":"www.runoob.com" },' +
	'{ "name":"Google" , "url":"www.google.com" },' +
	'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
	
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;
</script>

JSON.stringify(str)里面的str内容必须为 {“key1”：values1, “key2”:value2,…},大括号外不能有单引号或者双引号，eg:

   var data = {
       "first_name":first_name,
       "last_name":last_name
   };
   JSON.stringify(response);//success

   var data = '{
       "first_name":first_name,
       "last_name":last_name
   }';
   JSON.stringify(response);//fail

页面定位

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
eg:

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

自调用函数

函数表达式可以 “自调用”。
自调用表达式会自动调用。
如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。
通过添加括号，来说明它是一个函数表达式 eg：

(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();

JavaScript 闭包

闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。eg:

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。

国内推荐使用 BootCDN 上的库

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- 可选的Bootstrap主题文件（一般不使用） -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script>
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

移动设备优先

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width 属性控制设备的宽度。假设您的网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为 device-width 可以确保它能正确呈现在不同设备上。
initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
在移动设备浏览器上，通过为 viewport meta 标签添加 user-scalable=no 可以禁用其缩放（zooming）功能。
通常情况下，maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让您的网站看上去更像原生应用的感觉。

响应式图像

<img src="..." class="img-responsive" alt="响应式图像">

.img-responsive {
	  display: block;
	  height: auto;
	  max-width: 100%;
	}

通过添加 img-responsive class 可以让 Bootstrap 3 中的图像对响应式布局的支持更友好，img-responsive class 为图像赋予了 max-width: 100%; 和 height: auto; 属性，可以让图像按比例缩放，不超过其父元素的尺寸。
如果需要让使用了 .img-responsive 类的图片水平居中，请使用 .center-block 类，不要用 .text-center。

javascript修改element的属性

element.style.backgroundColor = color;
element.className = className;
//其他属性类似

启动和停止循环

var a = setInterval(func, 1000);//启动
...
clearInterval(a);//停止

function func() {
  ...
}

javascript多线程

var worker = new Worker(../static/js/testworker.js);//直接启动
worker.onmessage = function() {
    var i = event.data;
}

-----------testworker.js------------

...
var count = 0
postMessage(count);

jquery访问和修改属性

$('p').height();//访问
$('p').height(50);//修改
//其他属性类似

jquery监听窗口大小改变

$(window).resize(function() {
  //add some actin
});