筑基JQuery

完整版见https://jadyer.github.io/

发两句牢骚：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" />