jQuery实现动态控制页面元素的方法分析


Posted in jQuery onDecember 20, 2017

本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考,具体如下:

背景

最近做了一个小系统,其中需要在页面对用户的好友进行增删改查。本来没有那么复杂,用表格形式就可以相对容易的实现。

但是考虑到用户的体验度,首先添加尽量不想用输入,就采用将所有用户分类显示,然后点击即可添加。

添加的用户同时在界面显示,显示出用户当前的好友。同时点击已经添加好的好友可进行下一部的业务操作。

当然,删除的操作是仿照手机端那样,右上角有一个红色的“x”,点击该好友即可删除。

最后界面还能退出删除的模式,恢复正常的模式。

功能说明

1. 添加用户:在列表中点击即添加用户,同时添加onclick事件
2. 删除用户:点击该好友即可删除
3. 进入删除模式:将界面改为删除模式,切换onclick事件
4. 恢复正常模式:将界面改为正常模式,切换onclick事件

图片展示

jQuery实现动态控制页面元素的方法分析

代码

//添加用户为自己常用好友
function Add(e) {
  var friend_id = e.id;
  var name = $("#" + friend_id).html();
  //将要插入页面的好友html代码
  var content = "<div id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><div class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><div class=\"spinner\"></div><div class=\"img\"><h3 id=\"" + friend_id + "\">" + name + "</h3></div><div class=\"info\"><div class=\"info-back\"><h3 class=\"info-word\">" + info_word + "</h3></div></div></a></div></div>";
  //向数据库添加,通过结果来确定界面显示
  $.ajax({
   url: "userlist.aspx/AddFriend",
   data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
   type: 'Post',
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (result) {
    if (result.d == "true") {
     $(".case-content").append(content);//数据库添加成功,插入html代码
    }
    else {
     alert(result.d);
    }
   },
   error: function (err) {
    alert("未知错误");
   }
  });
}
//删除好友
function Delete(e) {
  var friend_id = e.id;
  $.ajax({
   url: "userlist.aspx/DeleteFriend",
   data: "{'username':'" + $('#username').text() + "','friend_id':'" + friend_id + "'}",
   type: 'Post',
   contentType: "application/json; charset=utf-8",
   dataType: "json",
   success: function (result) {
    if (result.d == true) {
     $("#" + friend_id).remove();//在界面移除好友
    }
    if (result.d == false) { alert("删除失败"); }
   },
   error: function (err) {
    alert("未知错误");
   }
  });
}
//重置好友-切换到删除模式
function ChangeToDelete() {
  $(".case-item").removeAttr("onclick");//删除onclick事件
  $(".case-item").attr("onclick", "Delete(this);");//添加新的onclick事件
  $(".img_wrong").css("display", "block");//使删除图标可见
  $(".info-word").html("删除");//改变提示文字
}
//关闭重置-切换到正常模式
function ChangeToNormal() {
  $(".case-item").removeAttr("onclick");//删除onclick事件
  $(".case-item").attr("onclick", "");//添加新的onclick事件
  $(".img_wrong").css("display", "none");//使删除图标不可见
  $(".info-word").html(info_back);//恢复提示文字
}

小结

这次练习学到的内容有两点:

1. Ajax和后台的交互;
2. JQuery对页面元素的属性控制

最后想说的是,真正有个需求驱动你的时候,你会实践很多,学到很多。

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
jQuery中extend函数简单用法示例
Oct 11 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现的点击显示隐藏下拉菜单功能完整示例
May 17 jQuery
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
jquery传参及获取方式(两种方式)
Feb 13 jQuery
jquery自定义显示消息数量
Dec 19 #jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 #jQuery
jquery中done和then的区别(详解)
Dec 19 #jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 #jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 #jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 #jQuery
利用JQUERY实现多个AJAX请求等待的实例
Dec 14 #jQuery
You might like
Codeigniter实现发送带附件的邮件
2015/03/19 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
2012/11/08 Javascript
js给dropdownlist添加选项的小例子
2013/03/04 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
轻松掌握JavaScript装饰者模式
2016/08/27 Javascript
angular.js指令中transclude选项及ng-transclude指令详解
2017/05/24 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
Mongoose实现虚拟字段查询的方法详解
2017/08/15 Javascript
详解使用nvm管理多版本node的方法
2017/08/30 Javascript
详解ES6 export default 和 import语句中的解构赋值
2019/05/28 Javascript
node+vue实现文件上传功能
2020/05/28 Javascript
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
Python使用qrcode二维码库生成二维码方法详解
2020/02/17 Python
基于plt.title无法显示中文的快速解决
2020/05/16 Python
Python函数调用追踪实现代码
2020/11/27 Python
档案接收函
2014/01/13 职场文书
超市重阳节活动方案
2014/02/10 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
开会通知
2015/04/20 职场文书
2016秋季校长开学典礼致辞
2015/11/26 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL
javascript canvas实现雨滴效果
2021/06/09 Javascript
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers