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