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插件
Mar 29 jQuery
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery自动或手动图片切换效果
Oct 11 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
jQuery实现视频展示效果
May 30 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jQuery实现回到顶部效果
Oct 19 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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
一个php导出oracle库的php代码
2009/04/20 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
php定期拉取数据对比方法实例
2019/09/22 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
File文件控件,选中文件(图片,flash,视频)即立即预览显示
2009/04/09 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jQuery实现简单滚动动画效果
2016/04/07 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
详解XMLHttpRequest(一)同步请求和异步请求
2016/09/14 Javascript
react-navigation 如何判断用户是否登录跳转到登录页的方法
2017/12/01 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
vue 封装面包屑组件教程
2020/11/16 Javascript
Python中的yield浅析
2014/06/16 Python
Python中的元组介绍
2019/01/28 Python
详解Python 定时框架 Apscheduler原理及安装过程
2019/06/14 Python
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
深入了解Python enumerate和zip
2020/07/16 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
运动会致辞稿50字
2014/02/04 职场文书
入党推优材料
2014/06/02 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
运动会宣传稿100字
2015/07/23 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书