jquery的运用

前言

jquery 它是一个轻量级的javascript类库

那么实际上，它就是一个别人写好的一个类而已。

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

优点：

1. 总是面向集合
2. 多行操作集于一行

总而的去简单的运用jquery库

---

jquery库的引用

jquery的导入

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

下好jar包导入到自定位置，自己导入即可

jquery的程序入口

一般我们的js的入口就：

window.onload = function(){
				alert("hello1");
			}

jquery有其他的入口可以执行：

			$(function(){
				alert("hello2");
			})
			$(document).ready(function(){
				alert("hello3");
			})

我们先只讨论最新版本的jquery;
等jsp的dom树结构加载完后；
也就是说jquery的先执行，不过两个的差别在于，那个在前就先执行那个。

window就是最后执行。

---

jquery的简单选择器

id选择器

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

类选择器

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

标签选择器

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

比如给一个按钮添加一个点击事件，事件为：给它下拉框增加一个值

$(function(){
	$(":input[name='name1']").click(function(){
			$("#opt").append("<option value='1'>湖南省</option>")
		})
	})

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的体现形式

有多种，因为json是多个集合都可以转为json

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

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

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

extend的扩充

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

//$.extend是用来扩充jquery类属性或者方法
	var jsonObj2={};
	//已经扩充好的对象会被好矛盾的覆盖
	$.extend(jsonObj2,jsonOBj1);
	console.log(jsonObj2);

扩充方法

//扩充方法
	$.extend({
		hello:function(){
			alert("我来了");
		}
	})
	
	$.hello();

或者说增加多个方法：

$.fn.extend({
	bgColor:function(){
		alert("背景颜色");
	},
	
	qaColor:function(){
		alert("填充");
	}
	
})

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对象

当然是需要去下载一个包的

Map<String,String> stu = new hashMap<>();
	stu.add("男1","豆豆");
	stu.add("男2","豆");
	ObjectMapper mapper = new ObjectMapper();//转为json的形式
   System.out.print( mapper.writeValueAsString(obj););

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

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