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更简单的实现某些功能。用的多了，这个特色体会的越明显。