JQuery 的施用(1) _Web前端

JQuery 的使用(1)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JQuery-study</title>
<script type="text/javascript" src="js/PCASClass.js" charset="gb2312"></script>
<script type="text/javascript" src="js/jquery-1.4.1.js"></script>
<!-- 注意DIV 的伪类 -->
<style type="text/css">
<!--
.firstCss {
	color: #FFFFFF;
	background-color: #000000;
}
.secondCss {
	color: #3366FF;
	background-color: #FF99FF;
}
div:hover {
	background-color: #FFF;
}
div {
	background-color: #CCC;
}
-->
</style>
<script type="text/javascript">
var timeNum = 3000;
$(document).ready(function(){
		funShow();
		funClick();
		funJson();
		funJson2();
		if($.browser.msie){//判断浏览器
			alert("this IE");
		}else if($.browser.mozilla){
			alert("this FireFox");
		}else if($.browser.opera){
			alert("this opera");
		}
		setTimeout("funRemove()",2*timeNum);//定时器
	}
);
//事件
function funClick(){
	$("#pTag3").attr({"class":"secondCss","align":"left"});//设置属性
	$("#pTag3").bind("click", function() {//添加onclick 事件
  		$("#secondCss").attr("align","center");//添加属性
  		$("#pTag3").toggleClass("secondCss");//如果存在添加,反之删除
  		$("#pTag3").toggleClass("firstCss");
	});
	$("#textTag2").bind('click', function(event) {
  		$(".secondCss").css("color","#FFFFFF");//添加属性
  		alert(event.currentTarget.value);
	});
}
//显示
function funShow(){
	$("#pTag1").text("<a href='g.cn'>游戏开始1</a>");//这里设置文本内容
	$("#pTag1").hide(timeNum);//隐藏
	$("#pTag2").html("<a href='g.cn'>游戏开始2</a>");//设置HTML内容
	$("#pTag2").fadeOut(timeNum);//淡出
	$("#textTag1").val("<a href='g.cn'>游戏开始3</a>");//设置value
	$("#textTag1").slideUp(timeNum,callbackShow);//上滑,完成后回调callbackShow方法
}
//回调方法
function callbackShow(){
	$("p:eq(0)").show();//第1个p,
	$("p:hidden").show();//所有隐藏
	$("input").show();
}
//删除节点
function funRemove(){
	alert("删除 <p>  id=pTag1");
	$("#pTag1").remove();//删除元素
}
//JSON
function funJson(){
	var jsonDate = {"list":[{"userId":"001","userName":"good1"},{"userId":"002","userName":"good2"},{"userId":"003","userName":"good3"}],"message":"操作成功"};//手动构建Json数据
	var html = "";
	for(var i = 0,j = jsonDate.list.length;i < j;i ++){
		html += "<p>&nbsp;&nbsp;userId="+ jsonDate.list[i].userId +"&nbsp;&nbsp;userName="+jsonDate.list[i].userName+"</p>";
	}
	html += "<p>&nbsp;&nbsp;MESSAGE:"+jsonDate.message+"</p>"
	$("#divTag1").append(html);//目标追加HTML
}
//JSON
function funJson2(){
	var jsonDate = "{'message':'funJson2操作成功'}";
	jsonDate = eval("("+jsonDate+")");//手动把String 解析为JSON 数据注意eval("("+jsonDate+")")
	var html = "<p>&nbsp;&nbsp;DIV2&middot;MESSAGE="+jsonDate.message+"</p>";
	$("#divTag2").replaceWith(html);//替换该HTML
}
</script>
</head>
<body>
<p id="pTag1"></p>
<p id="pTag2"></p>
<input type="text" id="textTag1" disabled="disable"/>
<hr>
<input type="text" id="textTag2" class="secondCss" value="点击这里"/>
<p id="pTag3" title="123"> 点击这里(两次) </p>
<hr>
<div id="divTag1"> DIV&nbsp;divTag1:<br>
</div>
<hr>
<div id="divTag2"> DIV&nbsp;divTag2:<br>
this&nbsp;DIV&nbsp;Tag
</div>
<hr>
省
<select name="Province" id="Province">
</select>
市
<select name="City" id="City">
</select>
区
<select name="Area" id="Area">
</select>
<script type="text/javascript">
    		new PCAS("Province","City","Area");//详细参见 PCASClass.js
</script>
</body>
</html>