jQuery笔记（六）-----测试页面
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="<%=request.getContextPath() %>/jQuery/jquery-1.8.3.js"></script>
<script language="javascript">
var myJSON =
{
"name":"奥沙利文",
"add":"吉林省长春市九台",
"ta":{"name":"太神奇了", "sex":"男", "telephone":"13009017663"},
"array":["first","second","third"],
"objectArray":[
{"id":"01", "name":"张一", "sex":"女"},
{"id":"02", "name":"张二", "sex":"男"},
{"id":"03", "name":"张三", "sex":"女"},
{"test":"数据", "c":"测试", "s":"中心"}
]
};
$(document).ready(function(){
$("#id_test").click(function(){
$("#id_name").text(myJSON.name);
$("#id_add").text(myJSON.add);
$("#id_obj").text(myJSON.ta.name+"||"+myJSON.ta.sex+"||"+myJSON.ta.telephone);
$("#id_arr").text(myJSON.array[0]+"||"+myJSON.array[1]);
$("#id_arrObj").text(myJSON.objectArray[0].id+"||"+myJSON.objectArray[3].c+"||"+myJSON.objectArray[2].sex);
});
jQuery("#btn1").click(function(){
$("#test").load( "./file/demoTest.txt #p1", //当前目录下文件demo_test.txt
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
//var jq = $.noConflict();
$("#btn2").click(function(){
var $text = $("#who");
var text = $text.get(0); //转换为DOM对象，或用 $text[0] 效果相同。
alert("DOM对象返回内容："+
text.innerHTML+"@@@"+"jQuery对象返回内容："+$text.html()+
"@@@"+"jQuery对象返回内容："+$text.text());
text.innerHTML = "你是奥沙利文！";
$("#who_jQuery").html("<span>jQuery对象赋值</span>");
});
});
</script>
<body>
<form action="">
姓名：<span id="id_name"></span><br>
住址：<span id="id_add"></span><br>
对象：<span id="id_obj"></span><br>
数组：<span id="id_arr"></span><br>
对象数组：<span id="id_arrObj"></span><br>
<input type="button" name="name_test" id="id_test" value="操作JSON对象"></input>
<p>=======================================</p><br>
<h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
<button id="btn1" type="button">获得外部的内容</button>
<p>=======================================</p><br>
<h2 id="who"><span>我是谁？</span></h2>
<h2 id="who_jQuery"></h2>
<button id="btn2" type="button">jQuery对象和DOM对象的转换</button>
</form>
</body>
</html>
