前言
本文是学习jQuery中的一些实践，是jQuery入门的实操案例。更多语法可参考w3school的jQuery参考手册
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
一、代码部分
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><link href="css/style.css" rel="stylesheet" type="text/css" /><script src="/jquery/2.0.0/jquery.min.js"></script></head><script>$(document).ready(function(){// A.把h2标题元素背景设为#bbffaa$("#myHead h2").css("background","#bbffaa");// B.将ID为“myUL”的ul下的奇数行列表项的背景色改为红色$("#myUL li:nth-child(2n+1)").css("background","red");// C.为ID为“footerUL”的列表ul下的下级li表项增加“.footerLi“样式$("#footerUL li").addClass("footerLi");// D.改变第二个P的字体大小，变为20px，蓝色，斜体$("p:nth-child(2)").css({"font-size":"20px","color":"blue","font-style":"italic"});// E.（过于鸡肋，注释掉）所有的元素，鼠标经过时背景为#FF0，离开后变回白色// $("*").mouseenter(function() {//$(this).css("background", "#FF0");// });// $("*").mouseleave(function() {//$(this).css("background", "white");// });// F.为按钮”gogo”添加点击事件，当点击时，ID为” myBody”的div，收起来；再次点击，这个div在次出现$("#gogo").click(function(){$("#myBody").toggle();});// G. 页面计算的实现$("#cal").click(function(){var a = parseInt($("#d1").val());var b = parseInt($("#d2").val());if($("#op option:selected").text()==="+"){var c = a + b}else if($("#op option:selected").text()==="-"){var c = a - b}else if($("#op option:selected").text()==="*"){var c = a * b}else if($("#op option:selected").text()==="/"){var c = a / b}$("#d3").val(c);$("#d1").val("");$("#d2").val("");});});</script><body><div id="myHead"><h2 align="center">jQuery</h2><p>jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</p><p>jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。</p></div><div id="myBody"><h2>语言特点</h2><ul id="myUL"><li>快速获取文档元素</li><li>提供漂亮的页面动态效果</li><li>创建AJAX无刷新网页</li><li>提供对JavaScript语言的增强</li><li>增强的事件处理</li><li>更改网页内容</li></ul></div><p><input name="go" type="button" value="GO" id="gogo"/></p><p><input name="d1" type="text" id="d1" width="50"/> <select name="op" id="op"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select><input name="d2" type="text" id="d2" width="50"/> = <input name="d3" type="text" id="d3" width="50"/></p><p><input type="button" value="计算" id="cal" /> </p><div id="myFooter"><ul id="footerUL"><li>帮助</li><li>关于我们</li><li>联系我们</li></ul></div></body></html>
二、在操作C中添加的css样式代码
style.css
@charset "utf-8";.footerLi{float:left; width:80px; text-align:center; list-style:none;}
