jQuery常用操作整理

最新推荐文章于 2022-12-13 14:39:02 发布

Mephisto180502

最新推荐文章于 2022-12-13 14:39:02 发布

阅读量446

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/qq_33800083/article/details/81202428

版权

Web 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

模拟选项卡点击样式切换

$(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(存在相同的元素);
}

Mephisto180502

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录