筑基JQuery

发两句牢骚：JQuery远没有想象中的那么好玩，起码没有EJB好玩，很是让偶失望。。

发两句牢骚：所以关于JQuery的那点事儿，也就没力气再写其它的文章了。。

---

对于JQuery开发Ajax应用，以及与Struts2集成等，请参考我早期发表的以下三篇文章

使用JQuery在Struts2中进行异步请求 、、What is JSON and Its usage 、、What is GSON and Its usage

---

下面演示了JQuery的基本写法

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript">
	//$(document)可以将DOM对象转换成JQuery对象，好似类型转换一样
	//也可以也成$().ready(function(){...})或者$(function(){...})的形式，三者是等效的
	//ready()方法的作用：当页面中的DOM元素加载完毕后，执行参数中的函数
	//ready()方法和window.onload有些相像，但又不太一样
	//onload本身是window对象的一个属性，它可以关联很多的函数，但最后只会执行最后一个关联的函数
	//ready()就不同了，无论存在几个ready()方法，它们都会按照，从上往下的顺序，一一执行
	//onload的执行时机：页面加载完毕，并设定好各个DOM元素间的关联【加载外部文件等】关系后 ，才执行
	//ready()的执行时机：页面加载完毕，即使各个DOM元素之间的关联关系并未设定好，该函数就已经执行了
	$(document).ready(function(){
		alert("我要学习JQuery");
	});
	$().ready(function(){
		alert("我要使用JQuery开发Ajax应用");
	});
	
	function hello(){
		alert("这是hello()方法");
	}
	function world(){
		alert("这是world()方法");
	}
	window.onload = hello;
	window.onload = world;
	
	$(function(){
		//click()是JQuery当中提供的一个方法，相当于为所有<div>元素添加onclick属性
		$("#hiddenText").click(function(){
			//使用$("div")获取页面中的所有的<div>元素，并将其转换成JQuery对象
			$("div").hide();
		});
	});
	$(function(){
		$("#showText").click(function(){
			//JQuery中的很多方法都同时具有两个功能：读属性值和写属性值
			//比如$("#hello").css("color")就是读取id=hello的元素的名为color的CSS属性
			//如果页面中不存在id=hello的元素，那么JQuery将忽略掉该对象，而不会报错
			//但传统的DOM方式document.getElementById("hello").style.backgroundColor="red"就会报错
			$("div").show().css("backgroundColor", "orange"); //方法链的编程风格
		});
	});
</script>

<input type="button" value="隐藏下方的文字" id="hiddenText" />
<input type="button" value="显示下方的文字" id="showText" />
<div>欢迎访问我的博客：http://blog.csdn.net/jadyer<br/></div>
<div>欢迎访问我的博客：http://blog.csdn.net/jadyer<br/></div>
<div>欢迎访问我的博客：http://blog.csdn.net/jadyer<br/></div>

下面演示了JQuery对象与DOM对象之间的转换

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript">
	$(document).ready(function(){
		var pp11 = document.getElementsByTagName("p")[0];
		
		//将DOM对象转换成JQuery对象
		var $pp11 = $(pp11); //命名规则：写成$pp11通常表示JQuery对象，写成pp11则表示DOM对象
		
		alert("通过DOM对象获得的文本内容：" + pp11.innerHTML);
		alert("通过JQuery对象获得的文本内容：" + $pp11.html());
		
		//通过JQuery的方式获得页面中id = pp22的元素，这时得到的是一个类似于数组的JQuery对象
		//所以页面中存在两个相同id的元素时，则JQuery都能获取，而document.getElementById()只能获取第一个元素
		var $pp22 = $("#pp22"); //不要忘记#号。若没有#号，则表示它是一个元素的标签名，而非id
		
		var pp22 = $pp22[0]; //将JQuery对象转换成DOM对象。或者使用var pp22=pp22_jquery.get(0)亦可
		
		//对于JQuery中的某一个对象，它的html()方法返回的是该标签中的所有内容，而text()仅返回标签中的文本
		//所以JQuery中的text()方法就相当于DOM中的innerText属性，而html()方法就相当于DOM里的innerHTML属性
		//也就是说，JQuery是将DOM中的属性，转换为方法，来使用的
		alert("通过DOM对象获得的文本内容：" + pp22.innerText); //貌似Firefox中不支持innerText属性
		alert("通过JQuery对象获得的文本内容：" + $pp22.text());
	});
</script>

<p id="pp11"><b>汪藏海</b></p>
<p id="pp22"><b>铁面生</b></p>

下面模拟了输入用户名时的背景提示文字的效果

<script type="text/javascript" src="jquery-1.4.4.js"></script>

<script type="text/javascript">
	$(function(){
		//当鼠标点击或者使用TAB键导航时，将触发focus事件
		$('#username').focus(function(){
			//$(this)得到当前对象，即('#username')文本框。而val()可以得到该对象的值
			var $value = $(this).val();
			if($value == '请输入用户名'){
				$(this).val(''); //使用val('')即可清空当前对象的值
			}
		});
		
		//当元素失去焦点时，将触发blur事件。可以是鼠标行为或者TAB键离开
		$('#username').blur(function(){
			var $value = $(this).val();
			if($value == ''){
				//this.defaultValue表示：页面初始化后，文本框刚被加载时，文本框的值
				//这里this没有写成$(this)形式，因为defaultValue本身就是一个DOM对象
				$(this).val(this.defaultValue);
			}
		});
	});
</script>

<input type="text" value="请输入用户名" id="username" />