JQuery学习总结
JQuery是当前很流行的一个JavaScript框架，使用类似于CSS的选择器，可以方便HTML元素，拥有很好的可扩展性，拥有不少插件。JQuery可以快速找到文档中的html元素，并对其进行操作，如隐藏、显示、改变样式、添加内容等。能够方便的在页面上添加和移除html元素。这些功能虽然使用JavaScript也能实现，但是JQuery绝对使这些工作变得更加简单。【HTML负责页面内容、CSS负责页面样式、JS负责页面行为】 JQuery是一种全新的JavaScript库JQuery是一个快速而且简洁的JavaScript库。它使得以下几方面的工作更加简单： 1） 遍历的操作HTML文档 2） 事件处理 3） 动画 4） 快速Web开发中的Ajax互操作 JQuery特性： 。以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作。 。HTML元素选取、操作、事件函数、DOM遍历和修改 。JavaScript特效和动画 。JQuery与Ajax 。JQuery与Utilities JQuery实例小结： （1） 验证用户名JQuery实现 a) 可以通过$(document).ready(function(){})的方式来定义页面装载完成时，需要执行的方法 b) 可以在$()方法返回的jquery对象上执行各种Jquery的方法来获取数据，定义事件，执行操作 具体的代码实现：//DOM装载完成后运行 //获取文本框 var userNameNode = $("#userName"); //注册button单击事件 $("#verifyButton").click(function() { //获取文本框的内容 var userName = userNameNode.val(); //将这个内容发送给服务器端 if (userName == "") { alert("你什么都木有输入，提交什么?"); } else { $.get("UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){ //接收服务器端返回的数据，填充到div中 $("#result").html(response); }); } }); });
（2） 可以编辑的表格
a) Table中可以包含thead和tbody
b) $(function(){})是$(document).ready(function(){})的简化写
c) get方法可以获得JQuery对象中包含的某一个DOM节
d) $()方法的参数是一个DOM对象时，这个方法相当于把DOM对象转换成JQuery对象
具体代码实现$(function(){ }); $("tbody tr:even").css("background-color","#ECE9D8");
（3） 菜单效果
a) 插件的编写方法：$.fn.myplugin= function(){//mycode},方法中的this表示的是执行这个方法的jquery对象，注意方法应该在最后return this,以保证其他jquery方法可以级联操作。
b) jquery提供的事件操作在注册的时候是增量的，比如说有两段代码都$(window).scroll(function(){})，第二段的function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行。
具体代码实现
//页面中的DOM已经装载完成时，执行的代码 $(".main > a").click(function(){ //找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); ulNode.slideToggle(); changeIcon($(this)); }); $(".hmain").hover(function(){ $(this).children("ul").slideDown(); changeIcon($(this).children("a")); },function(){ $(this).children("ul").slideUp(); changeIcon($(this).children("a")); }); });
（4） 标签页效果
a) JQuery中的mouseover，mouseout方法对应标准javascript的onmouseover，onmouseout事件，可以处理鼠标进入和离开的事件
b) JQuery中的load方法十分强大，可以把一个指定的静态，动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中。
c) ajaxStart，ajaxStop对应ajax交互开始前和结束后的事件，给某一个节点注册了这两个事件后，当前页面的ajax交互开始前和结束后，就会执行指定的方法。
具体代码实现
$("#realcontent").load("allTab.html"); var liNode = $(this); timoutid = setTimeout(function () { //将原来显示的内容区域进行隐藏 $("div.contentin").removeClass("contentin"); //对有tabin的class定义的li清除tabin的class $("#tabfirst li.tabin").removeClass("tabin"); //当前标签所对应的内容区域显示出来 //$("div").eq(index).addClass("contentin"); $("div.contentfirst:eq(" + index + ")").addClass("contentin"); liNode.addClass("tabin"); }, 300); }).mouseout(function () { //鼠标移除清楚延迟 clearTimeout(timoutid); });
（5） 级联下拉框效果
a) $.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是Javascript的对象，采用名值对的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同。
b) JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1: value1, key2: [1,2,3]}或[1,2,{key2: value2}]。
具体代码实现（级联选择汽车类型的例子）
if (carnameValue != "") { if (!carnameSelect.data(carnameValue)) { $.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){ //接收服务器返回的汽车类型 if (data.length != 0) { //解析汽车类型的数据，填充到汽车类型的下拉框中 cartypeSelect.html(""); $("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect); for (var i = 0; i < data.length; i++) { $("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect); } //汽车类型的下拉框显示出 cartypeSelect.parent().show(); //第一个下拉框后面的指示图片显示出来 carnameSelect.next().show(); } else { //没有任何汽车类型的数据 cartypeSelect.parent().hide(); carnameSelect.next().hide(); } carnameSelect.data(carnameValue, data); }, "json"); }
学习小结：
一开始接触JQuery的时候，觉得和JavaScript如出一辙。根本就区分不开到底有什么区别。酝酿了好几天，通过从网上查阅各种JQuery相关资料，才渐渐搞明白原来JQuery是当前比较流行的JS库。使用JQuery可以比JavaScript更简单的实现某些功能。用的多了，这个特色体会的越明显。
