java版云笔记（三）

登录与注册写好了下来就是主页，今天写的是主页加载时笔记本列表的显示，ajax是固定的就不重点说了。主要说一下jQuery.data() 函数和jQuery.on() 函数。

注：这个项目的sql文件，需求文档，需要的html文件，jar包都可以去下载，下载地址为：http://download.csdn.net/download/liveor_die/9985846

笔记列表显示

发送Ajax请求

• 发送事件：笔记本li元素的单击
• 请求参数：笔记本ID
• 请求地址：/note/loadnotes.do

服务器端处理

/note/loadnotes.do

-->LoadNotesController.execute

-->NoteService.loadBookNotes

-->NoteDao.findByBookId

-->cn_note(查询)

-->返回JSON结果

cn_user(用户)

cn_notebook(笔记本,cn_user_id)

cn_note(笔记,cn_notebook_id,cn_user_id)

Ajax回调处理

• 成功：解析服务器返回的JSON结果,提取
  
  　　　笔记信息,生成笔记li元素列表
• 失败：提示加载笔记列表失败

$(function(){

//发送Ajax请求-->服务器端处理-->回调处理

//给li绑定单击(可以给未来元素绑定on)

父元素.on("事件类型",子元素,fn处理);

})

加载用户笔记本列表

function loadUserBooks(){
//获取Cookie中的userId值
	var userId = getCookie("userId");
	if(userId==null){//未找到
		window.location.href="log_in.html";
	}else{//登录过使用userId做其他操作
		//1.发送Ajax请求加载笔记本列表
		$.ajax({
			url:path+"/book/loadbooks.do",
			type:"post",
			data:{"userId":userId},
			dataType:"json",
			success:function(result){
				if(result.status==0){
					//获取返回的笔记本集合
					var books = result.data;
					//循环集合
					for(var i=0;i<books.length;i++){
						//获取笔记本ID
						var bookId = books[i].cn_notebook_id;
						//获取笔记本名称
						var bookName = books[i].cn_notebook_name;
						//创建一个笔记本列表项<li>元素
						var sli = "";
						sli+='<li class="online">';
						sli+='  <a>';
						sli+='    <i class="fa fa-book" title="online" rel="tooltip-bottom">';
						sli+='    </i>';
						sli+=	bookName;
						sli+='  </a>';
					    sli+='</li>';
					   var $li = $(sli);//将sli字符串转成jQuery对象li元素
					   $li.data("bookId",bookId);//将值与jQuery对象元素绑定
						//将li元素添加到笔记本ul列表区
					   $("#book_ul").append($li);
					}
				}
			},
			error:function(){
				alert("加载笔记本列表失败");
			}
		});
	}
};

其中的jQuery.data() 函数用法

jQuery.data() 函数

data()函数用于在当前jQuery对象所匹配的所有元素上存取数据。

通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将不复存在。

该函数属于jQuery对象(实例)。如果需要移除通过data()函数存放的数据，请使用removeData()函数。

语法

• jQueryObject.data( [ key [, value ] ])

以指定的键名key存取数据。如果指定了value参数，则表示以键名key存放值为value的数据；如果没有指定value参数，则表示读取之前以键名key存放的数据；如果没有指定任何参数，则以对象形式返回之前存储的所有数据。

• jQueryObject.data( object )

以对象形式同时传入任意多个key-value形式的数据，对象的每个属性就是键名key，属性值就是value。

注意：data()函数的所有"存储数据"操作针对当前jQuery对象所匹配的每一个元素；所有"读取数据"操作只针对第一个匹配的元素。

参数	描述
key	可选/String类型指定的键名字符串。
value	可选/任意类型需要存储的任意类型的数据。
object	Object类型指定的对象，用于封装多个键值对，同时存储多项数据。

返回值

data()函数的返回值是任意类型，返回值的类型取决于当前data()函数执行的是"存储数据"操作还是"读取数据"操作。

如果data()函数执行的是"存储数据"操作，则返回当前jQuery对象本身；如果是"读取数据"操作，则返回读取到的数据。

如果当前jQuery对象匹配多个元素，读取数据时，data()函数只以其中第一个匹配的元素为准。

如果执行data(key)函数(仅传入一个参数key)时找不到相应的数据，则返回undefined。如果执行data()函数(不带任何参数)时找不到相应的数据，则返回一个空的对象(没有任何属性)。

主处理

//主处理
        $(function(){
            //加载用户笔记本列表
            loadUserBooks();
            //点击笔记本li加载笔记列表(动态绑定)
            $("#book_ul").on("click","li",loadBookNotes);
        });
    </script>

jQuery.on() 函数详解

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外，你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。

on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。

• 该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

• 要删除通过on()绑定的事件，请使用off()函数。如果要附加一个事件，只执行一次，然后删除自己，请使用one()函数。

• 该函数属于jQuery对象(实例)。

语法

用法一：

• jQueryObject.on( events [, selector ] [, data ], handler )
  
  用法二：

• jQueryObject.on( eventsMap [, selector ] [, data ] )

参数

参数	描述
events	String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。
eventsMap	Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。
selector	可选/String类型一个jQuery选择器，用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略，则表示当前元素自身绑定事件(实际触发者也可能是后代元素，只要事件流能到达当前元素即可)。
data	可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。
handler Function类型指定的事件处理函数。

　　关于参数events中可选的命名空间，请参考最下面的示例代码。

　　关于参数selector，你可以简单地理解为：如果该参数等于null或被省略，则为当前匹配元素绑定事件；否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

　　参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略，则this指向当前匹配元素(也就是该元素)。

　　on()还会为handler传入一个参数：表示当前事件的Event对象。

　　参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。

　　如果事件处理函数handler仅仅只为返回false值，可以直接将handler设为false。

返回值

　　on()函数的返回值为jQuery类型，返回当前jQuery对象本身。

　　如果传递了selector参数，那么on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数，而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件，而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制，当后代元素selector触发事件时，该事件会在事件冒泡中传递给其所有的祖辈元素，当事件流传递到当前匹配元素时，jQuery会判断是哪个后代元素触发了事件，如果该元素符合选择器selector，jQuery就会捕获该事件，从而执行绑定的事件处理函数。

　　通俗易懂地说，如果我们希望给页面上所有的

标签绑定click事件处理函数，我们可以在每个P标签上直接分别绑定click事件处理函数。例如：

// 为所有P元素分别绑定click事件处理函数handler
$("p").on("click", handler);

　　我们也可以在这些P标签的任意一个公共祖辈元素上绑定事件委托机制，利用DOM的事件冒泡机制来统一委托处理。当我们触发了某个元素的click事件，JS会依次通知该元素及其"父辈"元素、"爷爷辈"元素……直到最顶部的document对象为止，如果这些元素上绑定了click事件处理函数就会依次执行。

// 在body元素上绑定click事件处理函数handler，如果这个click事件是由其后代的P元素触发的，就执行handler
$(document.body).on("click", "p", handler);

　　在这里的示例中，事件委托机制就是，我们不为每个P元素直接绑定click事件处理函数，而是委托给其某个公共的祖辈元素(此处示例中为document.body)，"告诉"他：如果接收到了click事件触发通知，并且这个click事件是由我们这些P元素其中之一触发的，就执行祖辈元素上委托绑定的事件处理函数。

　　注意："focus"、"blur"等部分事件不支持冒泡，使用事件委托机制将无效。不过，他们一般也有对应的支持冒泡的事件。例如与"focus"对应的"focusin"，与"blur"对应的"focusout"。此外，我们也可以使用event.stopPropagation()方法，让当前触发的事件停止冒泡。