这次给大家带来jquery如何控制动态的页面元素，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 = <p id=\"friend" + friend_id + "\" class=\"case-item\" onclick=\"" + game_type + "(this)\"><p class=\"ih-item circle effect1\"><a href=\"#\"><img class=\"img_wrong\" src=\"image/wrong.png\" style=\"float: right; width: 15px; height: 15px;display:none\" /><p class=\"spinner\"></p><p class=\"img\"><h3 id=\"" + friend_id + "\"> + name + </h3></p><p class=\"info\"><p class=\"info-back\"><h3 class=\"info-word\"> + info_word + </h3></p></p></a></p></p>;
//向数据库添加，通过结果来确定界面显示
$.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对页面元素的属性控制
最后想说的是，真正有个需求驱动你的时候，你会实践很多，学到很多。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
jackson解析json串时大小写自动转换的方法
ajax请求后台数据成功后无反映应该如何处理
jquery easyui选项卡面板的tabs使用
以上就是jquery如何控制动态的页面元素的详细内容。