Rumah > hujung hadapan web > tutorial js > jQuery怎么动态操控页面元素

jQuery怎么动态操控页面元素

php中世界最好的语言
Lepaskan: 2018-04-19 14:06:48
asal
1711 orang telah melayarinya

这次给大家带来jQuery怎么动态操控页面元素,jQuery动态操控页面元素的注意事项有哪些,下面就是实战案例,一起来看一下。

背景

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

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

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

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

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

功能说明

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

代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

//添加用户为自己常用好友

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);//恢复提示文字

}

Salin selepas log masuk

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

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

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

jQuery操作列表兵动态向其添加新元素

jQuery给子元素添加赋值步奏详解

jQuery Magnify插件使用详解

Atas ialah kandungan terperinci jQuery怎么动态操控页面元素. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan