位置互换

1，去掉元素的某个类

$("#id").removeClass('类名');

2，为div增加一个div子元素

$("#div").append('<div></div>');

3，获取当前选中项的索引，譬如（ul中的li）

 1                     //删除
 2                     $(".close").click(function () {
 3                         var index = $(this).parent().parent().index() + 1;//li的当前索引
 4                         //$("#docDemoTabBrief .layui-tab-item")[index - 1].remove();//移除li对应的描述内容
 5                         //$("#docDemoTabBrief .layui-tab-item").splice(index - 1, 1);
 6                         ////js
 7                         //var removeObj = document.getElementById('reducedLine').getElementsByName('mlt24')[0];
 8                         //removeObj.parentNode.removeChild(removeObj);
 9 
10                         ////jquery
11                         //$('#reducedLine>div[name="mlt24"]').remove();
12                         $($("#docDemoTabBrief .layui-tab-item")[index - 1]).remove();
13                         $(this).parent().parent().remove();//移除当前li
14 
15                         return;
16                     });

4，交换ul下两个li的位置

 1                     //排序
 2                     //1，右移
 3                     $(".shiftRight").click(function () {
 4                         //借助两个变量
 5                         var $li = $(this).parent().parent();
 6                         var $liNext = $(this).parent().parent().next();
 7                         if (undefined != $liNext[0] && "LI" == $liNext[0].tagName) {
 8 
 9                             var $temobj1 = $("<li></li>");
10                             var $temobj2 = $("<li></li>");
11                             $temobj1.insertBefore($li);
12                             $temobj2.insertBefore($liNext);
13                             $li.insertAfter($temobj2);
14                             $liNext.insertAfter($temobj1);
15                             $temobj1.remove();
16                             $temobj2.remove();
17                         }
18                         else {
19                             return;
20                         }
21                     });
22                     //2，左移
23                     $(".shiftLeft").click(function () {
24                         var $li = $(this).parent().parent();
25                         var $liPrev = $(this).parent().parent().prev();
26                         //"LI" == $div3[0].tagName
27                         if (undefined != $liPrev[0] && "LI" == $liPrev[0].tagName) {
28 
29                             var $temobj1 = $("<li></li>");
30                             var $temobj2 = $("<li></li>");
31                             $temobj1.insertAfter($li);
32                             $temobj2.insertAfter($liPrev);
33                             $li.insertBefore($temobj2);
34                             $liPrev.insertBefore($temobj1);
35                             $temobj1.remove();
36                             $temobj2.remove();
37                         }
38                         else {
39                             return;
40                         }
41                     });

5，$.ajax()向服务器异步获取数据

 1  var param = "{Name:'" + $("#pName").text() + "',Id:'" + $("#hidID").val() + "',TeacherNo:'" + $("#pTeacherNo").text() + "'}";
 2         $.ajax({
 3             type: "POST",
 4             url: "/Teacher/Home/ModifyTeacherPersonalInfo",
 5             data: param,
 6             contentType: "application/json;charset=utf-8",
 7             success: function (msg) {
 8                 if (msg == "success") {
 9                     alert("修改成功！");
10                     window.location.reload();//刷新当前页面
11                 }
12             },
13             error: function (e) {
14                 alert("修改失败！");
15             }
16         });

6，LayUI中Table事件

当使用ajax异步获取数据渲染Table时，当需要监听CheckBox选中事件以及获取选中数据，选中的行数和是否全选时，table.render({})时，需要为id赋值（<table lay-filter="demo" id="resourceID"></table>，以上中加的id，

 getCheckData: function () { //获取选中数据
            var checkStatus = table.checkStatus('resourceTb')
            , data = checkStatus.data;
            layer.alert(JSON.stringify(data));
        }

以上代码中无效）：如下

 1 table.render({
 2         id: 'resourceTb',
 3         url: '/Teacher/ResourceCenter/GetCourseResource',
 4         elem: '#resourceTb', //指定原始表格元素选择器（推荐id选择器）
 5         height: 315,//容器高度
 6          410,
 7         where: param,
 8         cols: [[ //标题栏
 9           { checkbox: true, fixed: true },
10           { field: 'ID', title: 'ID',  49 },
11           //{ field: 'resourceID', title: '资源ID',  120 },
12           { field: 'Name', title: '资源名称',  309 }
13         ]], //设置表头
14         page: true, //开启分页
15         done: function (res, curr, count) {
16             //如果是异步请求数据方式，res即为你接口返回的信息。
17             //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
18             console.log(res);
19             //得到当前页码
20             console.log(curr);
21 
22             //得到数据总量
23             console.log(count);
24         }
25     });

7，动态添加元素，删除元素，交换位置

  1     //添加步骤
  2     $("#btnOperatingSteps").click(function () {
  3         layer.open({
  4             type: 1,
  5             title: '添加操作步骤',
  6             area: ['600px', '530px'],
  7             shade: 0,
  8             content: $('#operationStepsDiv'),
  9             btn: ["确定", "取消"],
 10             btnAlign: 'c',
 11             yes: function () {
 12                 var title = $("input[name='title']").val();
 13                 if (title == "") {
 14                     alert("标题不能为空");
 15                 }
 16                 else {
 17                     //操作步骤
 18                     var li = '<li class="layui-this">';
 19                     li += '<p class="pTitle">' + title + '</p>';
 20                     li += '<div class="btn">';
 21                     li += '<button type="button" class="layui-btn shiftLeft"></button>';
 22                     li += '<button type="button" class="layui-btn shiftRight"></button>';
 23                     li += '<button class="layui-btn close"></button>';
 24                     li += '</div>';
 25                     li += '<div class="arrow"></div>';
 26                     li += '</li>';
 27 
 28                     if ($("#stepsUL li").length > 0) {
 29                         $(li).insertBefore($("#stepsUL li")[0]);
 30                     }
 31                     else {
 32                         $("#stepsUL").append(li);
 33                     }
 34 
 35                     $("#docDemoTabBrief .layui-tab-content .layui-tab-item").removeClass('layui-show');
 36                     if ($(".layui-tab-content .layui-tab-item").length > 0) {
 37                         $('<div class="layui-tab-item layui-show">' + $("#txtAttentionContent").val() + '</div>').insertBefore($(".layui-tab-content .layui-tab-item")[0]);
 38                     }
 39                     else {
 40                         $(".layui-tab-content").append('<div class="layui-tab-item layui-show">' + $("#txtAttentionContent").val() + '</div>');
 41                     }
 42 
 43                     //删除
 44                     $(".close").click(function () {
 45                         var index = $(this).parent().parent().index() + 1;//li的当前索引
 46                         $($("#docDemoTabBrief .layui-tab-item")[index - 1]).remove();
 47                         $(this).parent().parent().remove();//移除当前li
 48 
 49                         return;
 50                     });
 51 
 52                     //排序
 53                     //1，右移
 54                     $(".shiftRight").click(function () {
 55                         //借助两个变量
 56                         //(1)，交换ul下的两个li
 57                         var $li = $(this).parent().parent();
 58                         var index = $li.index() + 1;//li的当前索引
 59                         var $liNext = $(this).parent().parent().next();
 60                         if (undefined != $liNext[0] && "LI" == $liNext[0].tagName) {
 61 
 62                             var $temobj1 = $("<li></li>");
 63                             var $temobj2 = $("<li></li>");
 64                             $temobj1.insertBefore($li);
 65                             $temobj2.insertBefore($liNext);
 66                             $li.insertAfter($temobj2);
 67                             $liNext.insertAfter($temobj1);
 68                             $temobj1.remove();
 69                             $temobj2.remove();
 70                         }
 71                         else {
 72                             return;
 73                         }
 74 
 75                         //(2)，交换两个div
 76                         var $div = $($("#docDemoTabBrief .layui-tab-item")[index - 1]);
 77                         var $divNext = $($div).next();
 78                         if (undefined != $divNext[0] && "DIV" == $divNext[0].tagName) {
 79 
 80                             var $temobj1 = $("<li></li>");
 81                             var $temobj2 = $("<li></li>");
 82                             $temobj1.insertBefore($div);
 83                             $temobj2.insertBefore($divNext);
 84                             $div.insertAfter($temobj2);
 85                             $divNext.insertAfter($temobj1);
 86                             $temobj1.remove();
 87                             $temobj2.remove();
 88                         }
 89                         else {
 90                             return;
 91                         }
 92                     });
 93                     //2，左移
 94                     $(".shiftLeft").click(function () {
 95                         var $li = $(this).parent().parent();
 96                         var index = $li.index() + 1;//li的当前索引
 97                         var $liPrev = $(this).parent().parent().prev();
 98                         //"LI" == $div3[0].tagName
 99                         if (undefined != $liPrev[0] && "LI" == $liPrev[0].tagName) {
100 
101                             var $temobj1 = $("<li></li>");
102                             var $temobj2 = $("<li></li>");
103                             $temobj1.insertAfter($li);
104                             $temobj2.insertAfter($liPrev);
105                             $li.insertBefore($temobj2);
106                             $liPrev.insertBefore($temobj1);
107                             $temobj1.remove();
108                             $temobj2.remove();
109                         }
110                         else {
111                             return;
112                         }
113 
114                         //交换两个div
115                         var $div = $($("#docDemoTabBrief .layui-tab-item")[index - 1]);
116                         var $divNext = $($div).prev();
117                         if (undefined != $divNext[0] && "DIV" == $divNext[0].tagName) {
118 
119                             var $temobj1 = $("<li></li>");
120                             var $temobj2 = $("<li></li>");
121                             $temobj1.insertAfter($div);
122                             $temobj2.insertAfter($divNext);
123                             $div.insertBefore($temobj2);
124                             $divNext.insertBefore($temobj1);
125                             $temobj1.remove();
126                             $temobj2.remove();
127                         }
128                         else {
129                             return;
130                         }
131                     });
132                 }
133                 layer.closeAll();
134             }
135         });
136     });

效果图如下，

8，JQuery判断数组中是否包含某个元素$.inArray("元素字符串"，数组名称);

var arry = [ "C#", "html", "css", "JavaScript" ]; 
var result= $.inArray("C#", arry);  //如果arry数组里面存在"C#" 这个字符串则返回该字符串的数组下标，否则返回(不包含在数组中) -1