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实现瀑布流页面
Apr 11 jQuery
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
jquery实现倒计时小应用
Sep 19 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
JQuery获取元素尺寸、位置及页面滚动事件应用示例
May 14 jQuery
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php文件操作实例代码
2012/05/10 PHP
微信第三方登录(原生)demo【必看篇】
2017/05/26 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
某人初学javascript的时候写的学习笔记
2010/12/30 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
使用jquery prev()方法找到同级的前一个元素
2014/07/11 Javascript
javascript实现ecshop搜索框键盘上下键切换控制
2015/03/18 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
2016/11/22 Javascript
JS绘制微信小程序画布时钟
2016/12/24 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
Python的条件语句与运算符优先级详解
2015/10/13 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
Python 性能优化技巧总结
2016/11/01 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python操作qml对象过程详解
2019/09/26 Python
使用Python通过oBIX协议访问Niagara数据的示例
2020/12/04 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
Ado与Ado.net的相同与不同
2014/12/08 面试题
中专生求职自荐信范文
2013/12/22 职场文书
出国签证在职证明
2014/01/16 职场文书
网络营销策划方案
2014/06/04 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
基于python实现银行管理系统
2021/04/20 Python