关于jQuery及插件和ajax

• jQuery
  • jQuery插件
    • ajax

1. 什么是jQuery
它是一个轻量级的javascript类库

注1：就一个类“jQuery”，简写“$”

2. jQuery优点
2.1 总是面向集合
2.2 多行操作集于一行

在用jquery的时候先导包，在写引用代码
加入全路径名，无论怎么改变文件路径，都不会出错

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.min.js"></script>

3、程序入口

$ (function)、$(document).ready(function)与window.onload的区别？

$ (function)、$(document).ready(function)他们是等价的，那个在前面哪个就先执行
什么时候执行：jsp的dom树结构加载完毕即刻调用方法
window.onload最后执行
jsp的dom树结构加载完毕,css、js等静态资源加载完毕后执行。

4. jQuery两种工厂方法 还有很多工厂方法，有兴趣的可以去api官网了解一下
4.1 jQuery(exp[,context])
exp：选择器
context：上下文，环境/容器，documemt

  注1：选择器，css选择器
  标签选择器      

  $("a").click(function){
  		alert("哈哈");
  })；
  
  ID选择器    # 代表了ID选择器
   $("#a3").click(function){
  		alert("哈哈");
  })；
  类选择器     **.**代表了类选择器 	$(".a1").click(function){
  		alert("哈哈");
  })；
  
  包含选择器：E1 E2  E1包含了E2
 $("E1  E2").click(function){
  		alert("哈哈");
  })；
  组合选择器：E1,E2,E3 	$(".a1").click(function){
  		alert("哈哈");
  })；

  自定义选择器：:表示选中了的标签a和span
  $("a,span").click(function){
  		alert("哈哈");
  })；
  
  在div标签内部寻找a标签，然后找到的标签添加事件
  $("a","div").click(function){
  		alert("哈哈");
  })；

4.2 jQuery(element) （demo3.jsp）
element：js对象，表示一个html元素对象
js对象与jquery对象的相互转换

  jQuery对象转js对象
    	jQuery对象
		var $ aa=$ ("#aa");
		alert($aa.val());
		转js对象
		//var bb= $ aa..get(0);//集合
		var bb=$ aa[0];//数组
	   alert(bb.value);

js对象转jQueryh象
		 js对象
		 var cc=document.getElementById("h2");
		 alert(cc.value);
		 转jQuery对象
	      var $ cc=$(cc);
		 alert(cc.val());

6. this指针的作用 （demo4.jsp）
   6.1 事件源（获取当前按钮的按钮值）
   $(function(){
   $(":input").click(function(){
   //凡是在里出现的this都是事件源
   aleret(this.value);

   })

6.2 当前元素（点击按钮，获取所有a标签的值）

   $(function(){
   		$("a").each(function(index){
            	     //指的是当前元素
   			      alert(index+","+ $ (this).html());
   		})
   })

1. 插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
2. json的三种格式
2.1 对象 json对象的字符串体现形式

    $(function(){
       			var jsonObj={
       				 {sid:'s01',sname:'zs'}；
       			}
       			console.log(jsonObj);
       			
       });

2.2 列表/数组 json数组的字符串体现形式
var jsonArray=[1,3,4,5];
console.log(jsonArray);

2.3 混合模式 json 混合模式 的字符串体现形式

var jsons={id:3,hobby:['a','b','c']}
	  console.log(jsons);     

$.extend是用来扩充jquery类属性或者方法所用
扩充jquery类属性

	var jsonObj={};
	用后面的对象扩充一个对象
	//扩充值覆盖的问题，
	之前已经扩充的属性值会被后面的对象所覆盖，
	如果后面对象有新的属性，
	会继续扩充。
	$.exend(jsonObj2,jsonObj1，jsonObj3);
	console.log(jsonObj2);
	 c 
	$.extend({
		hello:function(){
				alert("哈哈");	
		  }
       });
     $.hello();

$.extend是用来扩充jquery类方法所用

	
		$.extend({
			sayHello:function(){
					alert("666");	
			  }
        });		

	   $("#yellow").sayHello();
	   alert("yellow");

首先我们把所需的文件写好。

来写一个公用的css文件，方便我们去调试任何一个界面的样式，只需要引入它即可

@charset "UTF-8";
.fen {
	background: #ff66ff;
}

.yello {
	background: #ffff66;
}

.red {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

.green {
	background: #bbff99;
}
.hui {
	background: #d6d6c2;
}

再写一个js文件:

$(function(){
	var defaults={
			head :'fen',
			out :'yellow',
			over:'red'
	}
	$.fn.extend({
		bgColor:function(option){
			$.extend(defaults,option);
			//使用return 的原因是让改实例方法支持链编程,好比stringbuffer
			//这里的this指的是插件本身，可以看成一个jquery实例
			return this.each(function(){
		//给默认值
	   //this 指当前元素
				
		$("tr:eq(0)",this).addClass(defaults.head);
		$(" tr:gt(0)",this).addClass(defaults.out);
		
		//添加动态效果
		$("tr:gt(0)",this).hover(function(){
			$(this).removeClass().addClass(defaults.over);
		},function(){
			$(this).removeClass().addClass(defaults.out);
		});
	});
		}
});
})

然后我们在所需用到的jsp界面里来进行引入，为了不然代码显得臃肿我们把引入的文件也放在了一个公用的common文件里。

我们来运行jsp界面看效果如下图:


这个插件就方面我们以后开发，自己想怎么调样式就怎么调，只需要写自己所需的样式就行，简化了我们的代码。

最后我们来介绍一下ajax运用：
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象

  Map<String,String> stu = new hashMap<>();
	stu.add("aa","jason");
	stu.add("bb","艰苦奋斗");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););

这个时候我们要去下载其相关的jar包

Map<String,String> stu = new hashMap<>();
stu.add(“aa”,“jason”);
stu.add(“bb”,“艰苦奋斗”);
ObjectMapper mapper = new ObjectMapper();//转为json的形式
System.out.print( mapper.writeValueAsString(obj)?;

当然也可以将json对象转为java对象,在 用$.ajax的时候可以转为java对象

var stu = $.pareJSON(str);//将转过了的转为java对象