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()方法,让当前触发的事件停止冒泡。
java版云笔记(三)的更多相关文章
- java版云笔记(九)之动态sql
SQL 首先,所谓SQL的动态和静态,是指SQL语句在何时被编译和执行,二者都是用在SQL嵌入式编程中的,这里所说的嵌入式是指将SQL语句嵌入在高级语言中,而不是针对于单片机的那种嵌入式编程. 静态S ...
- java版云笔记(七)之事务管理
事务管理 事务:程序为了保证业务处理的完整性,执行的一条或多条SQL语句. 事务管理:对事务中的SQL语句进行提交或者回滚. 事物管理对于企业应用来说是至关重要的,好使出现异常情况,它也可以保证数据的 ...
- java版云笔记(六)之AOP
今天主要是利用aop技术追加service的响应时间的计算和异常的日志记录. AOP AOP(Aspect Oriented Programming),即面向切面编程,可以说是OOP(Object O ...
- java版云笔记(二)
云笔记 基本的环境搭建好了,今天做些什么呢,第一是链接数据库(即搭建Spring-Batistas环境),第二是登录预注册. 注:这个项目的sql文件,需求文档,需要的html文件,jar包都可以去下 ...
- java版云笔记(一)
云笔记项目 这个项目的sql文件,需求文档,需要的html文件,jar包都可以去下载,下载地址为:http://download.csdn.net/download/liveor_die/998584 ...
- java版云笔记(八)之关联映射
Mybatis关联映射 通过数据库对象之间的关联关系,反映到到实体对象之间的引用. 加载多个表中的关联数据,封装到我们的实体对象中. 当业务对数据库进行关联查询. 关联 <association ...
- java版云笔记(五)
下来是创建笔记本,创建笔记,这个没什么难点和前面是一样的. 创建笔记本 首先点击"+"弹出添加笔记的对话框,然后点击确定按钮创建笔记本. //点击"+"弹出添加 ...
- java版云笔记(四)
页面的笔记本加载完成了,接下来就是点击笔记本显示将笔记显示,同时把笔记在右边的编辑器中,同时把编辑后的笔记更新. 注:这个项目的sql文件,需求文档,需要的html文件,jar包都可以去下载,下载地址 ...
- 0038 Java学习笔记-多线程-传统线程间通信、Condition、阻塞队列、《疯狂Java讲义 第三版》进程间通信示例代码存在的一个问题
调用同步锁的wait().notify().notifyAll()进行线程通信 看这个经典的存取款问题,要求两个线程存款,两个线程取款,账户里有余额的时候只能取款,没余额的时候只能存款,存取款金额相同 ...
随机推荐
- 洛谷 P3391 【模板】文艺平衡树(Splay)
题目背景 这是一道经典的Splay模板题——文艺平衡树. 题目描述 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1, ...
- [BZOJ1195]最短母串
1195: [HNOI2006]最短母串 Time Limit: 10 Sec Memory Limit: 32 MB Description 给定n个字符串(S1,S2,„,Sn),要求找到一个最 ...
- Qt Widgets、QML、Qt Quick的区别
Qt Widgets.QML.Qt Quick的区别 简述 看了之前关于 QML 的一些介绍,很多人难免会有一些疑惑: Q1:QML 和 Qt Quick 之间有什么区别? Q2:QtQuick 1. ...
- 【CodeChef-SPCLN】Cleaning the Space
https://odzkskevi.qnssl.com/7dfb262544887eff6fb35bfb444759d6?v=1502084197 做法是类似于最大割之类的东西,把每个碎片按照按钮拆点 ...
- 二次封装bootstrap-table及功能优化
/** * 设置bootstrat-table * @param params */ function setBootstrapTable (target, params) { // 默认设置表格内容 ...
- 用python的turtle画图
画5个红色的同心圆代码如下: import turtle turtle.pencolor("red") # 设置画笔的颜色 turtle.pensize() # 设置画笔的宽度 t ...
- C++内存分配与释放
C++内存分配与释放 1. new 运算符 与 operator new一条 new 表达式语句( new Type; )中的 new 是指 new 运算符.operator new 是定义在 #in ...
- [DeeplearningAI笔记]序列模型1.1-1.2序列模型及其数学符号定义
5.1循环序列模型 觉得有用的话,欢迎一起讨论相互学习~Follow Me 1.1什么是序列模型 在进行语音识别时,给定了一个输入音频片段X,并要求输出片段对应的文字记录Y,这个例子中的输入和输出都输 ...
- NOIP模拟6
期望得分:100+100+100=300 实际得分:0+100+90=190 T1 superman 二分给每条边加多少,判断是否存在负环 #include<queue> #include ...
- JSOI2008 小店购物
https://www.luogu.org/problem/show?pid=2792 题目背景 JSOI集训队的队员发现,在他们经常活动的集训地,有一个小店因为其丰富的经营优惠方案深受附近居民的青睐 ...