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