本文实例讲述了jQuery实现动态控制页面元素的方法。分享给大家供大家参考，具体如下：
背景
最近做了一个小系统，其中需要在页面对用户的好友进行增删改查。本来没有那么复杂，用表格形式就可以相对容易的实现。
但是考虑到用户的体验度，首先添加尽量不想用输入，就采用将所有用户分类显示，然后点击即可添加。
添加的用户同时在界面显示，显示出用户当前的好友。同时点击已经添加好的好友可进行下一部的业务操作。
当然，删除的操作是仿照手机端那样，右上角有一个红色的“x”，点击该好友即可删除。
最后界面还能退出删除的模式，恢复正常的模式。
功能说明
1. 添加用户：在列表中点击即添加用户，同时添加onclick事件
2. 删除用户：点击该好友即可删除
3. 进入删除模式：将界面改为删除模式，切换onclick事件
4. 恢复正常模式：将界面改为正常模式，切换onclick事件
图片展示
代码
//添加用户为自己常用好友
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',
