模拟选项卡点击样式切换
$(this).addClass("active").siblings().removeClass("active");
jQuery获取Select选中项的Text和Value
| 为Select添加事件，当选择其中一项时触发 | $("#select_id").change(function(){//code...}); |
| 获取Select选中项的Text |
$("#select_id option:selected").text(); $("#select_id").find("option:selected").text(); |
| 获取Select选中项的Value | $("#select_id").val(); |
| 获取Select对应Value的Text | $("#select_id option[value="+val+"]").text() |
| 获取Select选择的索引值 | $("#select_id ").get(0).selectedIndex; |
| 获取Select最大的索引值 | $("#select_id option:last").attr("index"); |
jQuery设置Select选中项的 Text和Value
| 设置Select索引值为1的项选中 | $("#select_id ").get(0).selectedIndex=1; |
| 设置Select的Value值为4的项选中 |
$("#userStatus").prop("value","4"); $("#prodBrandSelect").val("4").trigger("change"); |
| 设置Select的Text值为jQuery的项选中 | $("#select_id option[text='jQuery']").attr("selected", true); |
| 根据后台传入的值，设置下拉框选中状态 | $("#userStatus").prop("value",data.userStatus); |
| 注意：之前$(".selector").find("option[text='pxx']").attr("selected",true);这种写法是错误的，input支持这种获取属性值的写法："input[text='pxx']"，select中需要"option:contains('pxx')"这样获取。 | |
jQuery添加/删除Select的Option项
| 手动触发下拉框选中项的点击事件 | $('#select_id').trigger('click') 或者也可以指定选中值：$("#select_id").val("4").trigger("change"); |
| 为Select追加一个Option(下拉项) | $("#select_id").append("<option value='Value'>Text</option>"); |
| 为Select插入一个Option(第一个位置) | $("#select_id").prepend("<option value='0'>请选择</option>"); |
| 删除Select中索引值最大Option(最后一个) | $("#select_id option:last").remove(); |
| 删除Select中索引值为0的Option(第一个) | $("#select_id option[index='0']").remove(); |
| 删除Select中Value='3'的Option | $("#sel option[value='3']").remove(); |
| 删除Select中Text='4'的Option | $("#select_id option[text='4']").remove(); |
| 删除Select中除第一个以外的Option | $('#select_id').find("option:not(:first)").remove(); |
| 清空下拉框 | $("#sel").empty(); |
控制表单元素
| 清空文本框，文本区域 | $("#text").attr("value",''"); |
| 填充文本框，文本区域 | $("#txt").attr("value",'asdc'); |
| 多选框checkbox不打勾 |
$("#chk1").prop("checked",false); |
| 多选框checkbox打勾 | $("#chk2").prop("checked",true); |
| 判断是否已经打勾 | if ($("#chk").is(":checked")); |
| 设置第一个radio单选框为预选中 | $('input[name=gender]:first').prop('checked',true); |
| 设置value=2的radio单选框为预选中 | $("input:radio").prop("checked",'2'); |
| 设置radio单选框的第二个下标为预选中 | $('input[name=items]').get(1).checked = true; |
| 根据后台传入的值，设置单选按钮的选中状态 | $("input[name=gender][value='"+data.gender+"']").prop("checked", "checked"); |
获取表单元素
| 文本框 | $("#txt").attr("value")； |
| 获取节点下的input | $("#divId").find("input"); |
| 多选框 checkbox |
$('input:checkbox[name=yyYx]:checked').val(); 只返回最后一次选中的多选框的value，如果没有选中的则返回undefined |
| 过滤掉含有disabled属性的checkbox | $('body').find('input[type="checkbox"]:not(:disabled)')； |
| 单选组radio | $('input:radio[name=items][checked]').val(); 如果没有选中的则返回undefined |
| 下拉框select | $('#sel').val(); |
| textarea文本域 | jQuery的.val()方法是专门用来获取表单元素值的，而textarea也属于表单元素所以可以直接用.val()方法获取。 不过要注意，由于textarea是个双标记因此.text()或.html()方法也可以获取到其中的信息，但建议不要这样获取，因为.val()是专用于获取值的方法，比.text()或.html()更可靠。 |
select的级联操作，即第二个select的值随着第一个select选中的值变化
$(".selector1").change(function(){
// 先清空第二个
$(".selector2").empty();
// 实际的应用中，这里的option一般都是用循环生成多个了
var option = $("<option>").val(1).text("pxx");
$(".selector2").append(option);
});
通过下拉框控制表格Table行隐藏和显示
<select id="states" name="process" onchange="setSearchForm(this.value);">
<option value="0" selected="">全部状态</option>
<option value="2">待处理</option>
<option value="1">已处理</option>
</select>
function setSearchForm(value){
$('table tbody tr').show();
if(value=="0"){
$('table tbody tr').show();
}else if(value=="2"){
$('table tbody tr').hide();
$('#fankui tbody tr td:nth-child(4):contains("待处理")').parent('tr').show();
}else if(value=="1"){
$('table tbody tr').hide();
$('#fankui tbody tr td:nth-child(4):contains("已处理")').parent('tr').show();
}
}
Table表格操作
| 隐藏 / 删除一行 | $("#table tbody tr:eq(3)").hide() / remove(); |
| 删除所有行 | $("#tableList tbody").find("tr").remove(); |
| 隐藏一列 | $("#table tr").each(function(){$("td:eq(3)",this).hide()}) |
| 隐藏单元格 | $("#table tr td:nth-child(3)").hide() |
| 得到某个单元格的值 | $("#table7 tr:eq(1) td:nth-child(1)").html(); |
| 设置某个单元格的值 | $("#table7 tr:eq(1) td:nth-child(1)").html("value"); |
| 插入一行 | $("<tr>···</tr>").insertAfter($("#table tr:eq(1)")); |
获取当前行的指定列
$("table tr").click(function() {
var s = $(this).find("td:nth-child(3)").text(); //当前行第3列的值，从1开始
});
将后台返回的数据渲染进Table表格并将每行数据存储进data中
/** * 回显数据 */ function fnShowTableData(data){ $.each(data,function(i,obj){ var html = ''; html += '<tr id="my_tr_'+obj.unitId+'">'; // 序号 html += '<td>'+(i+1)+'</td>'; // 名称 html += '<td>'+nullToUnderline(obj.unitName)+'</td>'; // 金额 html += '<td>'+toDecimal(obj.unitMoney)+'</td>'; // 操作列HTMl var optHtml = fnGetOptHtml(obj); html += '<td>'+optHtml+'</td>'; html += '</tr>'; $("#t_body").append(html); /*存储本行数据*/ $("#my_tr_"+obj.unitId).data("data", obj); }); /*结算按钮*/ $(".click_editor").click(fnEditorBtn); } /** * 操作列HTMl * @param state * @returns {String} */ function fnGetOptHtml(obj){ var html=""; html+='<a id="'+obj.unitId+'" class="opera_btn click_editor">结算</a>'; return html; } /** * 结算按钮 */ var fnEditorBtn = function(){ var id = $(this).attr("id"); var obj = $(id).data("data"); layer_full("结算", basePath+"/expensesPayBindRecord/update_expenses_pay_bind_record_page?balanceMonth="+balanceMonth+"&toBeSettle="+obj.toBeSettle+"&unitId="+obj.unitId); }
点击实现复选框的全选和全不选
var checked = $("#check_all").prop("checked"); if (checked) { //如果是选中状态 $("input[name='items']").prop("checked",false); } else { $("input[name='items']").prop("checked",true); } })
当单击表格行时,切换复选框为选中状态
var checked = $("#ck_" + obj.dealerId).prop("checked"); if (checked) { $("#ck_" + obj.dealerId).prop("checked",false); } else { $("#ck_" + obj.dealerId).prop("checked",true); } <!-- 如果手动全选，则全选按钮也自动选中 --> var len = $("input[type='checkbox'][id^='ck_']:checked").length; if (len == ALL_DATA.length) { $("#check_all").prop("checked",true); } else { $("#check_all").prop("checked",false); }
用多选框批量删除表数据
1. 前端页面
$("#btnDel").on('click',function(){
var count = 0; //计数复选框个数
var checkedList = new Array(); //存储勾选的复选框
$("input[name='items']").each(function(){
if($(this).is(":checked")){
id = $(this).parent().next().text();
count++;
checkedList.push(id); //将获取到的复选框对应的行记录id添加到数组
}
});
if(count==0){
alert("请选择要删除的记录")
}else{
$.ajax({
type:'post',
url:'deletePerson.do',
data:{
"delitems":checkedList.toString()
},
success:function(){
window.location.reload();
},
error:function () {
alert("删除失败！");
}
});
}
})
2. 后端代码
@PostMapping("deletePerson.do")
public void deletePerson(HttpServletRequest request) {
String items = request.getParameter("delitems");
String[] strs = items.split(",");将获得的行id存到一个数组
for(int i=0;i<strs.length;i++) {
int id = Integer.parseInt(strs[i]);
personService.deletePersonById(id);
}
}
遍历table下的checkbox判断是否被选中
$('#btn').on('click', function(){
var count = 0;
$("input[name='items']").each(function(){
if($(this).is(":checked")){
count++;
}
});
alert(count); //输出被选中的复选框的个数
})
实现字数输入统计，以提醒字数输入限制
<textarea class="wnbs_compen_cancel_textarea" id="remark" placeholder="请输入反馈内容,100字以内" maxlength="100" rows="5"></textarea> <span class="font_length"><span id="font_length">0</span>/100</span> /*多加了个propertychange事件为了兼容IE9以下的浏览器*/ $(".wnbs_compen_cancel_textarea").on("keyup input propertychange",function(){ var font_length = $(this).val().length; $("#font_length").html(font_length); })
监听输入框输入完毕触发
<!-- 当input失去焦点并且它的value值发生变化时触发 --> <input type="text" onchange="playAddress()" value="" placeholder="此处粘贴地址" />
限制 input 输入框只能输入纯数字
联系方式:<input type="text" name="" οninput="value=value.replace(/[^\d]/g,'')">
使用 oninput 事件，可以在输入的时候实时监控输入内容，如果输入字母，会自动删除字母。
但是在实际开发中可能会遇到oninput事件不被支持的情况，导致该事件无法触发。
下面提供备选方案：
<input type="text" name="" onkeyup="value=value.replace(/[^\d]/g,'')" onblur="value=value.replace(/[^\d]/g,'')">
使用 onkeyup 事件，有 bug ，那就是在中文输入法状态下，输入汉字之后直接回车，会直接输入字母。所以再添加个onblur事件作为补充，在输入框失去焦点时再检查一下。
DIV 上移下移功能
/** 上移 */ $(document).on('click','.upBtn',function(){ // 获取需要上移的节点 var html = $(this).parents(".creat_pipeline_steps_new"); // 复制该节点用来后面的挪动 var obj = html.clone(); // 如果没有已经置顶就把复制的节点放到上一个节点的前面 if(html.prev(".creat_pipeline_steps_new").length>0){ html.prev().before(obj); html.remove(); } }); /** 下移 */ $(document).on('click','.downBtn',function(){ var html = $(this).parents(".creat_pipeline_steps_new"); var obj = html.clone(); if(html.next(".creat_pipeline_steps_new").length>0){ html.next().after(obj); html.remove(); } });
模拟淘宝星级评价功能
<div class="wnbs_evaluate_dafen_con"> <span class="wnbs_evaluate_product_tit">服务质量</span> <div id="serviceQuality" class="wnbs_evaluate_product_icon_body"> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> </div> <span id="serviceQualityText" class="wnbs_evaluate_product_text"></span> </div> <div class="wnbs_evaluate_dafen_con"> <span class="wnbs_evaluate_product_tit">服务质量</span> <div id="serviceAttitude" class="wnbs_evaluate_product_icon_body"> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> </div> <span id="serviceAttitudeText" class="wnbs_evaluate_product_text"></span> </div> <div class="wnbs_evaluate_dafen_con"> <span class="wnbs_evaluate_product_tit">服务质量</span> <div id="serviceSpeed" class="wnbs_evaluate_product_icon_body"> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> <i class="wnbs_evaluate_product_icon"></i> </div> <span id="serviceSpeedText" class="wnbs_evaluate_product_text"></span> </div>
function rating(thiss){ var starsCount = $(thiss).prevAll().length; //选中的星星数量 var parentId = $(thiss).parent().attr("id"); //评价项 var evaluate = $(thiss).parent().next(); //评价等级对应文本内容 $(thiss).siblings().removeClass("active"); $("#"+parentId+" i").each(function(index,element){ if(index <= starsCount){ $(element).addClass("active"); /*将选中的星星数量存到starsCount属性中*/ $("#"+parentId).attr("starsCount",starsCount+1); } $(evaluate).text(EVA_ARR[starsCount]); }); } if(!$("#serviceQuality i").hasClass("active")){ mui.toast("请对服务质量做出评价"); return false; } if(!$("#serviceAttitude i").hasClass("active")){ mui.toast("请对服务态度做出评价"); return false; } if(!$("#serviceSpeed i").hasClass("active")){ mui.toast("请对服务速度做出评价"); return false; } obj.serviceQuality = $("#serviceQuality").attr("starsCount"); obj.serviceAttitude = $("#serviceAttitude").attr("starsCount"); obj.serviceSpeed = $("#serviceSpeed").attr("starsCount");
将重复性的DOM节点制作成模板
说明：有时候页面会用到这样一种列表展示，DOM节点都一样，只有数据不一样而已，一遍一遍的添加节点会显得代码冗余，将这一步提取出来，封装成一个模板。每次添加节点时直接添加现成的模板，然后利用replace方法将 @data@ 替换成真实数据就行了。
方式一（通常用于回显）：
<div id="template" hidden="hidden"> <div class="wnbs_orderWgt_list"> <div>@type@</div> <div>@createTime@</div> <div>@remark@</div> </div> </div>
function fnShowList(list){ if(list !=null && list.length >0){ $.each(list,function(i,obj){ var example = $("#template").html(); example = example.replace("@type@",obj.type); example = example.replace("@createTime@",obj.createTime); example = example.replace("@remark@",obj.remark); $("#view").append(example); }); }else{ var html = '<div ><img src="../../images/order/no_order.png" class="wnbs_noOrder_img" />暂无信息</div>'; $("#view").append(html); } }
方式二（通常用于添加）：
利用 @myIndex@ 添加序号，来区分DOM
<div id="template_div" style="display: none;"> <span class="font-size-14 float-left"> 台账<span class="myIndex">@myIndex@</span> </span> <table id="@ledger_template@" index="@myIndex@"> <tr> <td class="text"><span>*</span>联系方式：</td> <td> <input type="text" id="link_time@myIndex@" placeholder="请输入联系方式" /> </td> <td id="money_text">收入金额：</td> <td > <input type="text" id="money@myIndex@" placeholder="请输入收入金额"/> </td> <td class="text">备注：</td> <td> <input type="text" id="remark@myIndex@"placeholder="请输入备注200字以内" /> </td> </tr> </table> </div>
var INDEX = 1; function fnAddDom(){ var htmlInfo=$("#template_div").html(); var index = INDEX++; htmlInfo = htmlInfo.replace(/@myIndex@/g, index); $("#content_div").append(htmlInfo); }
输入框获取焦点并且光标定位到文字末尾
var val = $(this).next().val(); //存储input文本框的内容 $(that).val("").focus().val(val); //先清空input内容，然后获取焦点，最后赋值
按ESC键关闭弹出层
$(document).keydown(function (event) { if (event.keyCode == 27) { /*添加（关闭弹出层）*/ $(".common_dialoge_wrapper").hide(); } });
点击空白区域隐藏弹出框
$(document).click(function(e){ // 目标区域，点击某个弹出的区域 var pop = $('#popup'); if(!pop.is(e.target) && pop.has(e.target).length === 0) { /*关闭所有浮层*/ $("#popup").find(".common_select").each(function(index,object){ $(object).hide(); }); } });
校验数组是否有重复的数据（ES5）
var flag = true; var s = array.join(",")+","; for(var i=0;i<array.length;i++) { if(s.replace(array[i]+",","").indexOf(array[i]+",")>-1) { mui.toast("不允许重复：" + array[i]); flag = false; break; } } return flag;
校验数组是否有重复的数据（ES6）
let arr = [1,2,3,4,5]; if(new Set(arr).size !== arr.length){ alert(存在相同的元素); }
