JS和JQuery知识点

1.平滑滚动到页面顶部
我们以一个热门，实用的代码片段开始：下面的4行jquery代码，页面访问者通过点击id 为[#top]，滑动到页面的顶部；
$(“a[href=‘#top’]”).click(function() {
$(“html, body”).animate({ scrollTop: 0 }, “slow”);
return false;
});
2.克隆表格的表头到表格底部
为了使自己的表格可读性更强，将表格的表头克隆到表格底部是个不错的注意。下面就是这个实用的代码片段。
var $tfoot = $(‘’);
$($(‘thead’).clone(true, true).children().get().reverse()).each(function(){
$tfoot.append($(this));
});
$tfoot.insertAfter(‘table thead’);
3.加载外部内容
你需要添加外部内容到div标签么？如果使用jquery，这就变得很简单，具体实例如下：
$(“#content”).load(“somefile.html”, function(response, status, xhr) {
// error handling
if(status == “error”) {
$(“#content”).html(“An error occured: " xhr.status " " xhr.statusText);
}
});
4.相同高度的标签纵列
当你的网站是用纵列来显示的内容是，如果所有的模块列都是等高度的将会更好看，更整洁。下面的代码将会，将为所有类为.col的div标签自适应为（所有纵列高度最高）的等高模块：
var maxheight = 0;
KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){ if((this).height() > maxheight) { maxheight = $(this).height(); }
});
$(“div.col”).height(maxheight);
5.表格的条纹（斑马条纹）
在表格上展示数据时，颜色交替无疑会增加可读性；下面这段代码，将为两行中间的的一行自动加上CSS类（css类自己定义）：
$(document).ready(function(){
$(“table tr:even”).addClass(‘stripe’);
});
6.页面局部刷新
如果你需要刷新页面的一部分，下面会有一定的帮助，只需要3行代码。在这个例子中，#refresh div每10秒自动刷新：
setInterval(function() {
$(”#refresh").load(location.href " #refresh>*“,”“);
}, 10000); // milliseconds to wait
Preload images
jQuery轻松预载图像背景中的游客不会永远等待时，他们将要显示的图像。此代码可以使用，更新图像列表只需8行：
$.preloadImages = function() {
for(var i = 0; i<arguments.length; i ) {
$(”").attr(“src”, arguments[i]);
}
}
$(document).ready(function() {
$.preloadImages(“hoverimage1.jpg”,“hoverimage2.jpg”);
});
7.在新标签/窗口打开链接
target=”blank”属性允许你链接在新窗口打开的力量。当打开一个新窗口或标签的外部链接是相关，同域的链接一定要在同一个窗口中打开。
此代码检测，如果一个链接是外部的，如果是，增加了一个目标 target=”blank”的属性给它。
$(‘a’).each(function() {
var a = new RegExp(‘/’ window.location.host ‘/’);
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, ‘_blank’);
});
}
});
8.使用jQuery让div满宽度/高度
这个方便的代码允许你根据视图窗口创建一个全屏宽度/高度的div。代码也处理窗口大小调整。对模态对话框或弹出窗口来说不错。
// global vars
var winWidth = $(window).width();
var winHeight = $(window).height();

// set initial div height / width
$(‘div’).css({
‘width’: winWidth,
‘height’: winHeight,
});

// make sure div stays full width/height on resize
$(window).resize(function(){
$(‘div’).css({
‘width’: winWidth,
‘height’: winHeight,
});
});
9.检验密码强度
当你让用户定义的密码时，这是表示密码一般是多么强大的好东西。这就是下面代码要做的事:
首先，假设HTML是：


这里是相应的jQuery代码。输入的密码将被评估使用正则表达式和一个消息将被返回给用户，让他知道如果他选择的密码强，中，弱，或过短。
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲pass').keyup(fu…“, “g”);
var mediumRegex = new RegExp(”^(?=.{7,})(((?=.[A-Z])(?=.[a-z]))|((?=.[A-Z])(?=.[0-9]))|((?=.[a-z])(?=.[0-9]))).*$","g");varenoughRegex=newRegExp("(?=.6,).\ast ","g");if(false==enoughRegex.test($(this).val())) {
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲passstrength').…(this).val())) {
$(‘#passstrength’).className = ‘ok’;
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲passstrength').…(this).val())) {
$(‘#passstrength’).className = ‘alert’;
$(‘#passstrength’).html(‘Medium!’);
} else {
$(‘#passstrength’).className = ‘error’;
$(‘#passstrength’).html(‘Weak!’);
}
return true;
});
10.使用jQuery调整图像大小
尽管你应该调整您的图像在服务器端（使用PHP和GD）。使用jQuery调整图像也非常有用。下面的代码将诠释怎么用。
$(window).bind(“load”, function() {
// IMAGE RESIZE
$(‘#product_cat_list img’).each(function() {
var maxWidth = 120;
var maxHeight = 120;
var ratio = 0;
var width = $(this).width();
var height = $(this).height();

	if(width > maxWidth){
		ratio = maxWidth / width;
		$(this).css("width", maxWidth);
		$(this).css("height", height * ratio);
		height = height * ratio;
	}
	var width = $(this).width();
	var height = $(this).height();
	if(height > maxHeight){
		ratio = maxHeight / height;
		$(this).css("height", maxHeight);
		$(this).css("width", width * ratio);
		width = width * ratio;
	}
});
//$("#contentpage img").show();
// IMAGE RESIZE

});
11.页面滚动自动加载内容
一些网站如Twitter通过滚动加载内容。这意味着一个页面所有的内容是通过你向下滚动来实现动态加载的。
这里将介绍怎么做的，你可以复制到自己网站看看效果：
var loading = false;
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ction(){ if((((window).scrollTop() $(window).height())250)>=$(document).height()){
if(loading == false){
loading = true;
$(‘#loadingbar’).css(“display”,“block”);
$.get("load.php?start="$(‘#loaded_max’).val(), function(loaded){
$(‘body’).append(loaded);
KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲loaded_max').va…(‘#loaded_max’).val()) 50);
$(‘#loadingbar’).css(“display”,“none”);
loading = false;
});
}
}
});

$(document).ready(function() {
$(‘#loaded_max’).val(50);
});
12.检查图片是否已加载
这段代码是我使用图片时经常用到的，它是了解一个图片是否加载完毕最好的方式：
var imgsrc = ‘img/image1.png’;
$(‘’).load(function () {
alert(‘image loaded’);
}).error(function () {
alert(‘error loading image’);
}).attr(‘src’, imgsrc);
13.列表按字母顺序排列
在某些场景，按照字母顺序来排列一个长长的列表将非常有用，这段代码可以将任何列表按元字母顺序排序：
$(function() {
$.fn.sortList = function() {
var mylist = $(this);
var listitems = $(‘li’, mylist).get();
listitems.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : 1;
});
$.each(listitems, function(i, itm) {
mylist.append(itm);
});
}

$("ul#demoOne").sortList();

});
14.主要用到两个属性：
$(window).scroll(); // 监听页面滚动
$(this).scrollTop()； // 代表获取滚动条的刻度
15.下面为我的监听代码：
KaTeX parse error: Expected '}', got 'EOF' at end of input: …s_top = Number((this).scrollTop()); // 获取滚动条，滚动刻度
// var c_top = Number($(‘.cdnstat_nav’).offset().top);
if(s_top >= 137 ){
$(‘.cdnstat_nav’).addClass(“affix”); // 添加属性，让他固定
$(‘.cdnstat_nav’).css(“top”,10);
}else{
$(‘.cdnstat_nav’).removeClass(“affix”); // 删除属性，让他释放
}
})
效果非常不错。。。
最近需要掉一个接口，我的项目，通过js获取同事项目接口的数据；
请看大屏幕，问题出现了，js跨域会被同源策略给弄掉，何为跨域，就是我是一个服务器，别人是一个服务器，这时到网上找到一个解决方案jsonp；
就是带src标签的都可以跨域取东西，如img可以取到其他网页其他图像，还有link，还有script，所以就这样了：
我使用的是jquery，代码贴出，天王盖地虎有图有真相：
var remoteurl = ‘http://www.url.com/index.php/data/get?cdncallback=?’;
$.get(remoteurl,obj.param,obj.func,‘json’);
remoteurl：地址；
obj.param：为参数，你需要传的参；
obj.func：为函数，自己随便定义的；
‘json’：为json格式；
?cdncallback=?：注意需要在地址结尾加上这句；
这才是真正需要做的，cdncallback可以随便取名，=？中的？代表funciton，这里是obj.func;
由于有的服务器不支持jsonp，所以最好需要去提供接口那儿，让接口开发者加上下面这句：
echo $_GET[‘cdncallback’].‘(’.json.‘)’;
总结下：这是正常的json调用，不支持跨域：
客户端：
var remoteurl = ‘http://www.url.com/index.jsp’;
$.get(remoteurl,obj.param,obj.func,‘json’);
服务器：
echo json;
修改后，支持跨域：
客户端：
var remoteurl = ‘http://www.url.com/index.php/data/get?cdncallback=?’;
$.get(remoteurl,obj.param,obj.func,‘json’);
服务器：
echo $_GET[‘cdncallback’].‘(’.json.‘)’;
接下来解释下原因：浏览器中js的函数会被解析成对应规则的命名方式如：
function test(){};解析成：jquery246541313245;
所以利用jsonp传送函数的参数过去cdncallback=jquery246541313245；
接口返回结果为jquery246541313245（data）；
你的浏览器在解析回来就是test（data）；
然后你就可以用data了；
最近研究了下许愿墙的功能，还不错，贴出来分享下。
许愿墙的几个功能点：
1、设置随机背景；
2、设置随机位置；
3、支持拖拽；
就这么简单，下面的代码可以直接用，为了方便，没有为卡片设置背景，都是随机分配背景色，以下的代码段，完全胜任，刚刚说的三点；

// 鼠标点击监听 每个wishmian下面的div
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲wishmain div").…(this);
mx = e.pageX;my = e.pageY; // 鼠标第一次点击获取坐标
ox = parseInt(obj.css(“left”)); // 对象的坐标
oy = parseInt(obj.css(“top”));
});
// 鼠标移动监听
$(document).mousemove(function(e){
if(!obj)return; // 表示选中了对象
var cx=e.pageX-mx ox;
var cy=e.pageY-my oy;
obj.css(“z-index”,getz());// 显示在最前面
obj.css({“top”:cy “px”,“left”:cx “px”});
})
// 鼠标抬起监听
$(document).mouseup(function(){
obj=null; // 释放对象
});
// 获取当前最前面的值
function getz(){
var max = 0;
var tmp = 0;
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲wishmain div").…(this).css(“z-index”));
if( max < tmp){max=tmp;}
});
return max 1;
}
/下面自己设置**/
// 设置许愿条背景随机
function setback(){
var arr = new Array(‘#7E7DD4’,‘#A0D581’,‘#E2BBA7’,‘#E3ABC4’,‘#CAB3E6’);
return arr[parseInt(Math.random()5)];
}
// 设置许愿条开始随机位置
function setpos(){
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲wishmain div").…(this).width()));
var ry = parseInt(Math.random()(sy-$(this).height()));
$(this).css(“background”,setback());
$(this).css({“top”:ry “px”,“left”:rx “px”});
});
}
setpos();

使用JS实现网页的预加载，比如图片的呈现、web相册，预加载后别人查看图片不会重新缓冲，从而增强用户体验。达到秒杀的境界。 使用到的技术很简单，主要就是image 的 onload属性； 简单说几个步骤：1、获取图片路径 2、预加载图片 直接代码介绍： // 预加载 function imgpreload(){ var imgattr = window.location.href 'img/'; // 图片存在文件这个下面 $(".setbg").each(function(){ var info = $(this).children('img').attr('src'); // 具体的图片名称 var img = new Image(); img.src = imgattr info; // 图片的完整路径 img.onload = function(){}; // 图片预加载 }); } imgpreload(); // 执行预加载函数; JS在web客户端保存cookie信息 这里介绍在浏览器客户端保存cookie信息，下次浏览的时候可以获取相应信息，比如淘宝联盟根据这个cookie信息来判断是哪个网站引来的流量，然后给对应网站分账；以及根据用户浏览历史比较商品等；自己可以再web客户端留下具体信息，方便控制，简单如记住用户名，上次浏览时间，用户上次保存信息等等； cookie是浏览器提供的一种机制，javascript可以调用document 对象的cookie属性，并不是js的性质； cookie是存储在硬盘的，以域名为键名，下次打开该域名网站便可启用该cookie； cookie机制将信息存储于用户硬盘，可作为全局变量，是它最大的优点。 我这里用到它主要是使用它存储天气预报地区信息，不用每次用户设置后，重新打开网页都要重新设置地区； 说说js怎么使用cookie，最后将给出实例： 1、介绍cookie； document.cookie // document的一个属性； 2、为cookie赋值； cookie赋值是多个值使用分号 ‘ ; ‘分割； document.cookie = ‘key:info;key:info’; // 赋值多个属性使用 ' ; '分割； 3、设置cookie超时； expires //属性设置cookie过期时间；放在cookie设置最后如下； 以下设置cookie在365天后超时； var date = new Date(); date.setTime(date.getTime() 365*24*3600*1000); document.cookie = ‘key:info;key:info;expires =’ date.toGMTString(); 4、删除cookie； 删除cookie只需要设置cookie超时，过期就行了； var date = new Date(); date.setTime(date.getTime() - 10000); // 当前时间往前减一点，就过期了； document.cookie = objName "=a; expires=" date.toGMTString(); // 设置时间过期； 5、cookie使用实例 博主右上角的天气预报有个城市设置里面就用到了，cookie保存用户上次设置的城市；作为一个实例给出js操作cookie增删改查；代码如下： // 获取所有cookie function getAllCookie(){ var allstr = document.cookie; return allstr; }

// 获取指定cookie
function getOneCookie(objName){
var arrStr = document.cookie.split(“;”);
for(var i = 0;i < arrStr.length;i ){
var temp = arrStr[i].split(“=”);
if(temp[0] == objName){
return unescape(temp[1]);
}
}
}

// 添加cookie
function addCookie(objName,objValue,objTime){
var infostr = objName ‘=’ escape(objValue);
if(objTime){
infostr = ‘;expires =’ objTime.toGMTString();
}else{
var date = new Date();
date.setTime(date.getTime() 365243600*1000);
infostr = ‘;expires =’ date.toGMTString();
}
document.cookie = infostr; //添加
}

// 删除cookie
function delCookie(objName){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = objName “=a; expires=” date.toGMTString();
}
使用字符串变量来调用js函数，不错的应用；先让我们来看看什么是字符串变量调用吧；
1、什么是字符串调用JS函数
已知一个js函数名为 helloc 。当我们传入 ‘helloc’字符串就能调用函数了，多好；具体代码如下；

2、应用场景 那么什么样的情况下会用到呢，比如我在后台想控制前台调用的js函数的时候就可以使用了。后台一会儿想调用这个js函数，一会儿操作反馈需要调另外一个操作函数。那么，我们只需要ajax请求后获取后台的字符串等参数，直接使用上面的命令执行就行了；主要使用window这个集合；马上拷贝试一下吧 $(document).ready(function() { //catch the right-click context menu $(document).bind("contextmenu",function(e) { //warning prompt - optional alert("No right-clicking!");

    //delete the default context menu
    return false;
});

});

 离焦事件进行表单验证

1. 获取页面的登陆名，以登录名为条件，查询用户列表，返回List

2. 定义一个标识message，用来传递返回页面的参数，如果message1，说明登陆名为空。此时不能保存。
   如果message2，用户名在数据库中已存在记录(list.size()>0),此时不能执行save。
   如果message==3，用户名在数据库中不存在(list.size()==0),此时执行save。

   /*校验登录名是否出现重复/
   function checkUser(o){
   //alert(o.value);//dom的写法
   //alert($(o).val());//jquery的写法
   var logonName = $(o).val();
   //以登录名作为查询条件，查询该登录名是否在数据库表中存在记录 $.post(“elecUserAction_checkUser.do”,{“logonName”:logonName},function(data){
   //如果栈顶是模型驱动的对象，取值的时候应该使用data.message的方式
   //如果栈顶是模型驱动的对象的某个属性，取值的时候应该使用data即可
   if(data1){
   $(“#check”).html(“登录名不能为空”);
   $(o)[0].focus();
   $(“#BT_Submit”).attr(“disabled”,“none”);
   }
   else if(data2){
   $(“#check”).html(“登录名已经存在”);
   $(o)[0].focus();
   $(“#BT_Submit”).attr(“disabled”,“none”);
   }
   else{
   $(“#check”).html(“登录名可以使用”);
   $(“#BT_Submit”).attr(“disabled”,“”);
   }
   });
   }
   相应的jsp页面：

登  录  名： *

用户姓名： *

 mousedown(fn)
在每一个匹配元素的mousedown事件中绑定一个处理函数。
mousedown事件在鼠标在元素上点击后会触发
Binds a function to the mousedown event of each matched element.
The mousedown event fires when the pointing device button is pressed over an element.定义和用法
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数。返回值
jQuery参数
fn(Function) : 在每一个匹配元素的mousedown事件中绑定的处理函数。
实例:
当按下鼠标按钮时，隐藏或显示元素：
$(“button”).mousedown(function(){ $(“p”).slideToggle();});
将函数绑定到 mousedown 事件
语法
$(selector).mousedown(function)
实例展示：
$(‘.filter li a’).mousedown(function(){
//当鼠标点击事件发生时，发生点击的a标签还没有class属性，故而为undefined。
var cln = $(this).attr(“class”);
if(cln == undefined){

		$(this).attr("class",'');
		cln = $(this).attr("class");
	};
	//点击高级搜索cln.indexOf("btn80x22"):获取字符串出现的角标，从0开始，当字符串以整体出现时，以第一个字母角标为准。
	if(cln.indexOf("btn80x22") == 0){			
		return;
	}
	var type = $(this).parent().is("p");		
	var obj;
	if(type){
		//obj是一个a标签的数组对象
		obj = $(this).parent().find('a');
	}else{
		obj = $(this).parent().parent().find('a');
	}
	//移除所有a标签的class的属性值
	obj.removeClass('here');
	//给当前点击a标签设置class属性
	$(this).addClass('here');
	
	$('.filter li a').each(function(){
		//每一个a连接,取得每一个a连接的Jquery对象。
		var aObj = $(this);			
		var clazz = aObj.attr("class");			
		if(clazz=="here")
			{
			alert(aObj.html());
			}			
	});
});

HTML代码展示：

• 您已选择：
• 活动类型：
• 价格：

  不限1-499 500-999 1000-1999 2000-2999 3000-3999 4000-4999 5000以上

•  

JAVASCRIPT在事件中调用函数时用return返回值实际上是对window.event.returnvalue进行设置。 而该值决定了当前操作是否继续。 当返回的是true时，将继续操作。 当返回是false时，将中断操作。window.event.returnValue = false, 此种方式只适用于IE浏览器. 而直接执行时（不用return）。将不会对window.event.returnvalue进行设置 所以会默认地继续执行操作. 下面我们通过对 onClick='return Edit_onclick()'与 onClick='Edit_onclick()' 间的区别来进行详细说明： 当在 Open 中 如果函数 Edit_onclick() 返回 true, 那么 页面就会打开 ab.htm 否返回 false, 那么页面不会跳转到 ab.htm, 只会执行你的 Edit_onclick() 函数里的内容。 而 Open 不管 Edit_onclick() 返回什么值, 都会在执行完 Edit_onclick 后打开页面 ab.htm 。 在js中，我们也经常会使用到return，比如return true，return false； 比如 百度一下，你就知道 点击一下，发现跳转到百度页面了，那么我们稍作修改， 百度一下，你就知道 这样就不跳转了，或者我们修改为如下：

$(“div.post a”).click(function() {
var href = $(this).attr(“href”);
$(this).next().load(href);
return false;
});
测试如下：
Click here to load page1
Click here to load page2
点击链接就能加载页面内容到当前页，一切都OK。现在我们想要加一个新功能，例如论坛帖子的浏览，只有当前点击的帖子内容才会显示，其他帖子都隐藏。为此我们需要为div.post加一个click()事件处理：
$(“div.post”).click(function(){
$(“div.post .content”).hide(); // hide all content
KaTeX parse error: Expected 'EOF', got '}' at position 57: … show this one }̲); 添加完这段代码后，我们发…(“div.post a”).click(function() { return false; });，由于return false执行了event.stopPropagation()，因此事件不能冒泡到上一级DOM，即$(“div.post”).click()不会被事件触发。要达成我们的任务，应该把return false替换为event.preventDefault()：
$(“div.post a”).click(function(e) {
var href = $(this).attr(“href”);
$(this).next().load(href);
e.preventDefault();
});
测试修改后的代码：
Click here to load page1
Click here to load page2
如果把return false和live/delegate事件混用，情况就更糟糕了：
$(“a”).click(function(){
// do something
return false;
});

$(“a”).live(“click”, function(){
// this won’t fire
});
如果确实需要阻止事件冒泡，也应该显式地调用：
$(“div.post”).click(function(){
// do something
});
KaTeX parse error: Expected '}', got 'EOF' at end of input: …/ 但阻止事件冒泡，即不会执行(“div.post”).click()
e.stopPropagation();
});
event.stopPropagation()用于阻止事件冒泡，jQuery中还有另一个函数：event.stopImmediatePropagation()，它用于阻止一个事件的继续执行，即使当前对象上还绑定了其他处理函数：
$(“div a”).click(function(){
// do something
});

$(“div a”).click(function(e){
// stop immediate propagation
e.stopImmediatePropagation();
});

$(“div a”).click(function(){
// never fires
});

$(“div a”).click(function(){
// never fires
});
最后结论是：理解return false，尽量避免使用它，请用event.preventDefault()替代return false。
 function beforeSubmit() {
$(“.fare”).each(function(){
…
return false;
}

 alert("a"); 
 return true; 

}

经测试，each循环中的return false仅仅是结束了循环操作，并没有跳出beforeSubmit方法，后面的alert(“a”)和return true还是会执行，所以验证实际没起到效果，在实际的过程中应注意避免
(32 bit) needs as least Internet Explorer 5
 JQuery向后台传递数组：
var arr = []
arr.push(“aaa”)
arr.push(“bbb”);
arr.push(“ccc”);
$.ajax({
traditional: true
url:”a.html”,
data:{“arr”:arr},
type:”post
});

在后台接收：request.getParameter(“arr”);
使用场合：批量删除：

使用Jquery属性选择器：
Function deleteAll()
{
Var selectUsers = new Aarray();
KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){ If((this).atrr(“checked”))
selectUsers.push($(this).val())
})
$.ajax({
Type:”post”,
url:”elecUserAction_delete.do”,
data：({“selectUsers”,selectUsers}),
traditional:true
});
}

 js 里面字符串(""0) 为true
var str=“”;
alert(str0); //这句话返回来为true！
原因：
0 是逻辑的 false
1 是逻辑的 true
空字符串是逻辑的 false
null 是逻辑的 false
NaN 是逻辑的 false
因此可以得出结论
false==false 肯定是true的！
 在JS中将JSON的字符串解析成JSON数据格式，一般有两种方式：

1.一种为使用eval()函数。

2. 使用Function对象来进行返回解析。

使用eval函数来解析，并且使用jquery的each方法来遍历

用jquery解析JSON数据的方法,作为jquery异步请求的传输对象，jquery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式，对于利用JSONObject等插件封装的JSON对象，与此亦是大同小异，这里不再做说明。
这里首先给出JSON字符串集，字符串集如下：

代码如下:
复制代码 代码如下:

var data="
{
root:
[
{name:‘1’,value:‘0’},
{name:‘6101’,value:‘北京市’},
{name:‘6102’,value:‘天津市’},
{name:‘6103’,value:‘上海市’},
{name:‘6104’,value:‘重庆市’},
{name:‘6105’,value:‘渭南市’},
{name:‘6106’,value:‘延安市’},
{name:‘6107’,value:‘汉中市’},
{name:‘6108’,value:‘榆林市’},
{name:‘6109’,value:‘安康市’},
{name:‘6110’,value:‘商洛市’}
]
}";

这里以jquery异步获取的数据类型——json对象和字符串为依据，分别介绍两种方式获取到的结果处理方式。

1.对于服务器返回的JSON字符串，如果jquery异步请求没做类型说明，或者以字符串方式接受，那么需要做一次对象化处理，方式不是太麻烦，就是将该字符串放于eval()中执行一次。这种方式也适合以普通javascipt方式获取json对象，以下举例说明：

var dataObj=eval(“(” data “)”);//转换为json对象
为什么要 eval这里要添加 “(“(” data “)”);//”呢？

原因在于：eval本身的问题。 由于json是以”{}”的方式来开始以及结束的，在JS中，它会被当成一个语句块来处理，所以必须强制性的将它转换成一种表达式。

加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。举一个例子，例如对象字面量{}，如若不加外层的括号，那么eval会将大括号识别为JavaScript代码块的开始和结束标记，那么{}将会被认为是执行了一句空语句。所以下面两个执行结果是不同的：
复制代码 代码如下:

alert(eval(“{}”); // return undefined
alert(eval(“({})”);// return object[Object]

对于这种写法，在JS中，可以到处看到。

如: (function()) {}(); 做闭包操作时等。

复制代码 代码如下:

alert(dataObj.root.length);//输出root的子对象数量
$.each(dataObj.root,fucntion(idx,item){
if(idx==0){
return true;
}
//输出每个root子对象的名称和值
alert(“name:” item.name “,value:” item.value);
})

注：对于一般的js生成json对象，只需要将$.each()方法替换为for语句即可，其他不变。

2.对于服务器返回的JSON字符串，如果jquery异步请求将type（一般为这个配置属性）设为“json”，或者利用$.getJSON()方法获得服务器返回，那么就不需要eval（）方法了，因为这时候得到的结果已经是json对象了，只需直接调用该对象即可，这里以$.getJSON方法为例说明数据处理方法：
复制代码 代码如下:

$.getJSON(“http://www.phpzixue.cn/”,{param:“gaoyusi”},function(data){
//此处返回的data已经是json对象
//以下其他操作同第一种情况
$.each(data.root,function(idx,item){
if(idx==0){
return true;//同countinue，返回false同break
}
alert(“name:” item.name “,value:” item.value);
});
});

这里特别需要注意的是方式1中的eval()方法是动态执行其中字符串（可能是js脚本）的，这样很容易会造成系统的安全问题。所以可以采用一些规避了eval()的第三方客户端脚本库，比如JSON in JavaScript就提供了一个不超过3k的脚本库。

第二种解析方式就是使用Function对象来完成，它的典型应用就是在JQUERY中的AJAX方法下的success等对于返回数据data的解析
复制代码 代码如下:

var json=‘{“name”:“CJ”,“age”:18}’;
data =(new Function(“”,"return " json))();

此时的data就是一个会解析成一个 json对象了.

这篇好文章是转载于：学新通技术网