筑基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"); //不要忘记#号。若没有#号，则表示它是一个元素的标签名，而非idvar 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" />