jquery的运用

jquery的运用

jquery的导入

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

jquery的程序入口：

$(function(){
		alert("hello jquery1");
	})
	
	
	$(document).ready(function(){
		alert("hello jquery2");
	})
	
	window.onload = function(){
		alert("hello jquery3");
	}
	$(fn)和$(document).ready(fn)、window.onload有什么区别？
结论：$(fn)和$(document).ready(fn)是等价的，哪个代码在前面就哪个先执行，
			jsp的dom树结构加载完毕即可调用方法
	
		window.onload最后执行
			jsp的dom树加载完，css、js等静态资源加载完毕执行
	

jquery的简单选择器

标签选择器

$("button").click(function(){
					var sname = $("#sname").val();
					alert(sname);
				})

类选择器

$(".btna").click(function(){
					var sname = $("#sname").val();
					alert(sname);
				})

id选择器

$("#btna").click(function(){
					var sname = $("#sname").val();
					alert(sname);
				})

jquery与Js的转换

		//jquery对象转为js对象
		var $qu = $("#jj");
		var qu = $qu.get(0);//第一种
		var qu = $qu[0];//第二种
		alert(qu.value);

js转jquery

	//js对象转为jquery对象
		var qu = document.getElementById("#jj");
		$qu = $(qu);
		alert($qu.html());

jquery可以点html()等方法，，它是个类
js可以点出value等属性，，它的结构是元素[element]

jquery插件

json的体现形式主要说三种
第一：

	var jsonArray1=[1,3,4,5];
	console.log(jsonArray1)

第二：

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

第三：

//json对象的字符串体现形式
	var jsonOBj1 = {
		sid:'s001',
		sname:'zhangsan'
	};
	console.log(jsonOBj1);

extend实列

比如搞一个可以自动换class样式的方法，那不就很happy嘛。

var defaults = {//默认的属性
		head :'fen',
		out :'yellow',
		over :'red',
	}
	
$.fn.extend({
	bgColor:function(option) {
		$.extend(defaults,option)//参数有值就替换
		//给默认值
		$("table tr:eq(0)").addClass(defults.head);
		$("table tr:gt(0)").addClass(defults.out);
	
		//添加动态效果
		$("table tr:gt(0)").hover(function() {
			$(this).removeClass().addClass(defults.over);
		}, function() {
			$(this).removeClass().addClass(defults.out);
		});
	}

修改只需要修改传进来的参数就可以

$(function(){
	$("table").bgColor({
		head :'yellow',
		out :'blue',
		over :'red',
	})
	
})

ajax运用

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

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

  Map<String,String> stu = new hashMap<>();
	stu.add("aa","方法");
	stu.add("bb","等等");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););

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

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