java版云笔记(三)

简介: 登录与注册写好了下来就是主页,今天写的是主页加载时笔记本列表的显示,ajax是固定的就不重点说了。主要说一下jQuery.data() 函数和jQuery.on() 函数。 注:这个项目的sql文件,需求文档,需要的html文件,jar包都可以去下载,下载地址为:http://download.

登录与注册写好了下来就是主页,今天写的是主页加载时笔记本列表的显示,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()方法,让当前触发的事件停止冒泡。

相关文章
|
19天前
|
存储 缓存 Java
【Java】《2小时搞定多线程》个人笔记
【Java】《2小时搞定多线程》个人笔记
96 0
|
23天前
|
XML JSON Java
java项目中使用protobuf扫盲笔记
最近公司 Java 项目中有用到 protobuf,查了些资料还是一脸迷茫。
33 1
|
1月前
|
机器学习/深度学习 安全 Java
硬核!阿里2023版Spring全家桶进阶笔记流出,堪称Java跳槽神器
最近小伙伴在我后台留言是这样的: 现在就这光景,不比以前,会个CRUD就有人要,即使大部分公司依然只需要做CRUD的事情......现在去面试,只会CRUD还要被吐槽: 面试造火箭,工作拧螺丝,就是现在互联网最真实的写照。很多程序员都是死磕八股文,以应对面试。这种情况无可厚非,但其实最重要的还是技术基础和深度学习。真正能用上的能有多少,不是看现在,还有未来!所以,以技术立命,我们能做的也就只有不断提升自己,去适应市场环境,提高自身技术水平!但这可不是一件简单的事情,虽然也可以自学,但站在巨人的肩膀上学习才是能让程序员事半功倍的最优道路。
硬核!阿里2023版Spring全家桶进阶笔记流出,堪称Java跳槽神器
|
1月前
|
Dubbo Java 应用服务中间件
已跪,Java全能笔记爆火,分布式/开源框架/微服务/性能调优全有
程序员,立之根本还是技术,一个程序员的好坏,虽然不能完全用技术强弱来判断,但是技术水平一定是基础,技术差的程序员只能CRUD,技术不深的程序员也成不了架构师。程序员对于技术的掌握,除了从了解-熟悉-熟练-精通的过程以外,还应该从基础出发,到进阶,到源码,到实战。所以,程序员想要成功,首先要成就自己。
|
1月前
|
存储 架构师 Java
限量!Alibaba首发“Java成长笔记”,差距不止一点点
关于技术人如何成长的问题,一直以来都备受关注,因为程序员职业发展很快,即使是相同起点的人,经过几年的工作或学习,会迅速拉开极大的差距,所以技术人保持学习,提升自己,才能够扛得住不断上赶的后浪,也不至于被“拍死”在沙滩上。
|
1月前
|
Java 程序员 数据库连接
阿里巴巴大神发布的Java零基础笔记,实战教程多到手软,跪了
现值金九银十之际,是面试高峰季,很多学校开始校招,也是跳槽转行的最佳时机。根据数据显示,程序员是金九银十里最热门的行业,也是需求量最大的行业,但是程序员是个门槛低,但金字塔顶峰比较高的行业,意味着你的付出要比别人多才能拔尖。
|
1月前
|
消息中间件 Java 关系型数据库
又一里程碑!阿里首推Java技术成长笔记,业内评级“钻石级”
根据数据表明,阿里巴巴已经连续3年获评最受欢迎的中国互联网公司,实际上阿里巴巴无论在科技创新力还是社会创造价值这几个方面,都是具有一定代表里的。在行业内,很多互联网企业也将阿里作为自己的标杆,越来越多的“打工人”也希望能够进到阿里工作。
|
1月前
|
NoSQL Java 程序员
阿里开发人员献礼“Java架构成长笔记”,深入内核,拒绝蒙圈
提起阿里,行外人联想到的关键词无非是“交易”、“淘宝”、“支付宝”,但对于程序员来说,阿里庞大的技术体系才是最吸引人的。实际上阿里作为国内一线互联网公司的头把交椅,内部的技术体系和发展都是备受关注的,对于程序员来说,能够进到阿里工作,就是对自己的技术水平进行一个提升和学习。
阿里开发人员献礼“Java架构成长笔记”,深入内核,拒绝蒙圈
|
1月前
|
消息中间件 架构师 Java
Java架构速成笔记:七大专题,1425页考点,挑战P8岗
我们都知道,在程序员的职业生涯中,有多个发展方向,不过就数据表明,近年来选择架构师方向的开发人员也越来越多。
|
2月前
|
Java
疯狂Java讲义_第一章笔记(Java语言发展简史)
疯狂Java讲义_第一章笔记(Java语言发展简史)
29 0

相关产品

  • 云迁移中心