初识jQuery

最新推荐文章于 2019-06-12 16:44:09 发布

原创最新推荐文章于 2019-06-12 16:44:09 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

初识jQuery

什么是jQuery：它是一个轻量级的javascript类库
就一个类“jQuery”，简写“$”

jQuery优点：总是面向集合，多行操作集于一行
怎么导入jquery库

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

插件机制简介
往jquery类库里面去扩展方法，这类方法就是jquery插件
json的三种格式

第一种

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

第二种

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

第三种：

//json混合模式的字符串体现形式
		var a = {id:3,hobby:['a','c']};
		console.log(a);
		
		var jsonObj2 = {
				sid:'s001',
				sname:'zs',
				hobby:['a','c']
		}

$.extend是怎么用的

//$.extend是用来扩充jQuery类属性及方法的
		var json = {};
		//用后面的对象扩充第一个对象
		//$.extend(json,jsonObj);
		//讲解子覆盖的问题，之前已经扩充的属性值会被后面的对象所覆盖，
		//如果后面对象有新的属性，会据需扩充
		$.extend(json,jsonObj,jsonObj2);
		console.log(json);
	
		$.extend({
			hello:function(){
				alert('我来了');
			}
		});
		//调用hello方法
		$.hello();
		
		//$.fn.extend是用来扩充jquery实例的属性或者方法所用
		$.extend({
			a:function(){
				alert('我来了aaa');
			}
		});
		$('yellow').a();
		alert('yellow');
	})
</script>
</head>
<body>
	<span id="yellow">aa</span>
	
</body>
</html>

然后实例化出来

var defaults = {//默认的属性
		head :'fen',
		out :'yellow',
		over :'red',
	}
	
$.fn.extend({
	bgColor:function(option) {
		$.extend(defaults,option)//参数有值就替换
		//给默认值
		//this指的是当前元素
		$("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);
		});
	}

然后css文件

.head {
	background: #ff66ff;
}

.out {
	background: #ffff66;
}

.over {
	background: #ff3333;
}

.blue {
	background: #9999ff;
}

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

jsp界面直接调用

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

这样子就显得代码没有那么的臃肿

ajax的简单使用
后台的json的三种格式

package com.wt.jQuery;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.wt.entrty.Student;

/**
 *  后天json的三种格式的体现形式
 * @author MRCHENIKE
 *
 */
public class Demo1 {
	
	public static void main(String[] args) throws JsonProcessingException {
		//json对象
		Student stu = new Student("a1", "aa");
		ObjectMapper sm = new ObjectMapper();
		System.out.println(sm.writeValueAsString(stu));
		
		//json数组
		Student stu2 = new Student("a2", "ab");
		List<Student> ls = new ArrayList<>();
		ls.add(stu);
		ls.add(stu2);
		System.out.println(sm.writeValueAsString(ls));
		
		//json混合模式
		Map<String, Object> map = new HashMap<>();
		map.put("total", 2);
		System.out.println(sm.writeValueAsString(map));

		
	}
}

jackson
Jackson是一个简单基于Java应用库，Jackson可以轻松的将Java对象转换成json对象
和xml文档，同样也可以将json、xml转换成Java对象
核心代码：
ObjectMapper mapper = new ObjectMapper();
mapper.writeValueAsString(obj);

int count = md.getColumnCount();
map.put(md.getColumnName(i), rs.getObject(i));