首先我们要了解什么是 json ?
1) ：JSON是JavaScript Object Notation的简写，它是一种轻量级的数据交换格式 ，容易阅读和编写，它基于JavaScript的一个子集；
2) :JSON有三种数据形式
2.1: 对象 对象是一个无序的 名称 ： 值 “对 ” 集合
2.2: 数组 是用一对中括号括在一组，中间用英文模式下的逗号隔开的JavaScript的值
2.3：混合 混用对象与数组的组成的一个对象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/easy/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//json的三种格式之 :对象
var Object1={
sid:'s001',
sname:'五',
sex:'男',
age:'18',
hobby:'吃'
};
alert(Object1); //提示框弹出一个object
console.log(Object1); //在网页的Console台上可看到
//json的三种格式之: 数组
var ObjectArrayList =['I','don`t','love','you',];
alert(Object1); //提示框弹出一个object
console.log(ObjectArrayList); //在网页的Console台上可看到
//json的三种格式之: 混合格式
var ObjectHH ={sid:'s002',sname:'球',shobby:['s','h','a']};
alert(Object1); //提示框弹出一个object
console.log(ObjectHH); //在网页的Console台上可看到
二 $.extend与$.fn.extend的区别
1）：首先我们先把jQuery看成了一个类，那么jQuery.extend()就是扩展的jQuery这个类。
2）： jQuery.extend(object) 在jQuery这个类中添加类方法 。（添加静态方法）
3）： jQuery.extend（object1,object2,object3) 后面的对象扩充到前面一个对象,但是前面被扩充的属性会被后面扩充的覆盖,如果有新的属性，会继续扩充；
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/easy/jquery.min.js"></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
//json的三种格式之 :对象
var Object1={
sid:'s001',
sname:'五',
sex:'男',
age:'18',
hobby:'吃'
};
alert(Object1); //提示框弹出一个object
console.log(Object1); //在网页的Console台上可看到
//json的三种格式之: 数组
var ObjectArrayList =['I','don`t','love','you',];
alert(Object1); //提示框弹出一个object
console.log(ObjectArrayList); //在网页的Console台上可看到
//json的三种格式之: 混合格式
var ObjectHH ={sid:'s002',sname:'球',shobby:['s','h','a']};
alert(Object1); //提示框弹出一个object
console.log(ObjectHH); //在网页的Console台上可看到
//$.extend 用来扩充jQuery类属性以及方法
var object2 ={};
//后面的对象扩充到前面一个对象,但是前面被扩充的属性会被后面扩充的覆盖,如果有新的属性，会继续扩充
$.extend(object2,ObjectArrayList,ObjectHH);
console.log(object2);
$.extend({
eat:function(){
alert("你吃饭了么");
}
});
$.eat();
4): $.fn.extend (object)
4.1 : 就是为jQuery类添加“成员函数” jQuery类的实例可以使用这个“成员函数”。
首先写一个table.js
$(function(){
//默认颜色
var defaults = {
head:'red', //头部颜色
table:'yellow', //表格颜色
hover:'blue' //鼠标浮上去的颜色
}
$.fn.extend({
bgColor:function(options){//接收页面传过来的对象
//后面的参数扩充到前面的参数（会覆盖）
$.extend(defaults,options);
//
return this.each(function(){
//给默认颜色
$("tr:eq(0)",this).addClass(defaults.head);
$("tr:gt(0)",this).addClass(defaults.table);
//添加鼠标浮上去 换色
$("tr:gt(0)",this).hover(function(){
$(this).removeClass().addClass(defaults.hover);
},function(){
$(this).removeClass().addClass(defaults.table);
});
});
}
});
})jsp页面调用
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/common/head.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("table").bgColor({
head:'yellow',
table:'red',
hover:'blue'
});
})
</script>
</head>