【前端开发总结】表单操作系列

蔚落 2022-09-11 03:20 168阅读 0赞

### 文章目录 ###

*   *  （一）常用操作整理
     *   *  （1）Select标签操作
         *   *  1. 基础操作
             *  2. 添加/删除Select的Option项
         *  （2）多选框checkbox
         *   *  1. 常用操作
         *  （3）文本框text
         *   *  1. 常用操作
         *  （4）表达控件属性操作
         *  （5）隐藏input的三种方法和区别
         *  （6）Jquery获取form表单中的数据
     *  （二）动态组件和标签
     *   *  （1）动态调整标签组件位置样式
         *   *  1. jQuery语法——移动节点，改变节点顺序
             *  2. 【案例】移动节点
     *  （三）实践整理
     *   *  （1）多表单合并提交

## （一）常用操作整理 ##

### （1）Select标签操作 ###

#### 1. 基础操作 ####

$("#select_id").change(function(){ //code...}); //为Select添加事件，当选择其中一项时触发
     var checkText=$("#select_id").find("option:selected").text();  //获取Select选择的Text,页面展示的值
     var checkValue=$("#select_id").val();  //获取Select选择的Value
     var checkIndex=$("#select_id ").get(0).selectedIndex;  //获取Select选择的索引值
     var maxIndex=$("#select_id option:last").attr("index");  //获取Select最大的索引值

#### 2. 添加/删除Select的Option项 ####

//为Select追加一个Option(下拉项)，需要搭配$("#select_id").empty()
    $("#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
    $("#select_id option[value='3']").remove(); 
    
     //删除Select中Text='4'的Option
    $("#select_id option[text='4']").remove(); 
    
    //更新select列表
    首先需要：$("#sel").empty()；
    然后添加：$("#select_id").append("<option value='Value'>Text</option>");

### （2）多选框checkbox ###

#### 1. 常用操作 ####

【1】设值特定的checkbox不勾选
     $("#chk1").attr("checked",'');
    $("input['tupe=checkbox']").removeAttr("checked");移除多选框的选中
    
    【2】设值特定的checkbox勾选状态
    $("#chk2").attr("checked",true);
    
    【3】判断是否选中
    if($("#chk1").attr('checked')==undefined) 
    
    $("input[type='checkbox']").is(':checked') 返回true或false
    $("#id]").attr("checked")  JQ1.6之后返回checked或者是undefined  （1.6之钱返回true或者是false）

if ($("#XXX").prop("checked")==true){ 
           $("#XXX").prop("checked",false)
        return  false;
    }

【4】全选中状态设置
    $("input[type='checkbox']").attr("checked",true);

### （3）文本框text ###

#### 1. 常用操作 ####

【1】清空内容
    $("#txt").attr("value",'');
    
    【2】填充内容
    $("#txt").attr("value",'11');

### （4）表达控件属性操作 ###

【1】按钮禁用
    
    $("#buttonid").attr("disabled", "disabled");

### （5）隐藏input的三种方法和区别 ###

一、<input type="hidden" />
    二、<input type="text" style="display:none" />
    以上两种方法可以实现不留痕迹的隐藏。
    三、<input type="text" style="visibility: hidden;" />
    第三种方法可以实现占位隐藏（会留下空白而不显示）

### （6）Jquery获取form表单中的数据 ###

<form>
    <input name="username" type="text"/>
                    <input name="password" type="password"/>
                    <input id="subbtn" type="button" value="submit">
                </form>
                 $("#subbtn").click(function(){ 
                        var data = { };
    
    	            var t = $('form').serializeArray();
    	            $.each(t, function() { 
    	                 data [this.name] = this.value;
    	            });
    	            alert(JSON.stringify(data ));
                });

## （二）动态组件和标签 ##

### （1）动态调整标签组件位置样式 ###

#### 1. jQuery语法——移动节点，改变节点顺序 ####

在jQuery中，我们可以使用after()和before()方法来实现移动HTML的元素节点，改变节点的顺序。

一、基础页面  
基础页面中是一个ul列表，我们以改变其中的红色

*  标签为例，演示如何使用jQuery改变元素节点的顺序。基础页面如下：  
    HTML代码：
 *      <button class="move-up">上移</button>
        <button class="move-down">下移</button>
        
        <ul class="box">
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li>我是一个普通的li标签</li>
            <li class="move">我是会动的li标签</li>
        </ul>
    
        button{ 
            width: 100px;
            height: 30px;
            display: inline-block;
            border-radius: 10px;
            border: none;
            background-color: #0d3349;
            color: #fff;
        }
        .move{ 
            color: red;
            font-weight: bolder;
        }
    
    二、向上移动元素节点
    
        $(function(){ 
            $('.move-up').click(function(){ 
                var cur_li = $('.move');
                var prev_li = cur_li.prev();     // 获取当前节点的上一个节点
                // 把当前节点插入到上一个节点之前，如果不存在上一个节点，说明已经到达顶部
                if(prev_li.length != 0){ 
                    prev_li.before(cur_li);
                }
                else { 
                    alert("元素已经到顶部!");
                }
            });
            
        });
    
    三、向下移动元素节点
    
        $(function(){ 
            $('.move-down').click(function(){ 
                var cur_li = $('.move');
                var next_li = cur_li.next();     // 获取当前节点的下一个节点
                // 把当前节点插入到下一个节点之后，如果不存在下一个节点，说明已经到达底部
                if(next_li.length != 0){ 
                    next_li.after(cur_li);
                }
                else { 
                    alert("元素节点已经到底部!");
                }
            });
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWldaaGFuZ1l1_size_12_color_FFFFFF_t_70_g_se_x_16]  
    四、将元素移动到顶部/底部  
    其实，将元素移动到顶部和底部是非常简单的。  
    移动到顶部：只需要获取当前ul中的第一个li标签，然后将该元素插入第一个标签之前即可完成。  
    移动到底部：获取当前ul中的最后一个li标签，然后将钙元素插入到最后一个标签之后即可完成。  
    示例代码：
    
        $(function () { 
            // 移动到顶部
            $('.go-up').click(function () { 
                var cur_li = $('.move');
                var first_li = $('.box li').eq(0);
                first_li.before(cur_li);
            });
            
            // 移动到底部
            $('.go-down').click(function () { 
                var cur_li = $('.move');
                var last_li = $('.box li').last();
                last_li.after(cur_li);
            });
        });
    
    ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWldaaGFuZ1l1_size_11_color_FFFFFF_t_70_g_se_x_16]
    
    #### 2. 【案例】移动节点 ####
    
    需求：根据用户的标签将用户存在的标签高亮并且放在前面的位置，无关的标签放在后面
    
    【1】增加一个公共的class属性dc\_show，给每一个标签，这个只有在高亮的时候才有这个class  
    ![在这里插入图片描述][02f4eb615c734865850e9fd5f50b93c4.png]  
    【2】操作父级元素li，让所有的dc\_show都放在首位，这样就可以做到这样的效果了
    
        $(function () { 
        		// 移动到顶部
        			var cur_li = $('.dc_show');
        		    let parentNode = cur_li.parent();
        			var first_li = $('.box li').eq(0);
        			first_li.before(parentNode);
        	});
    
    ## （三）实践整理 ##
    
    ### （1）多表单合并提交 ###
    
    可以使用$(’\#form1, \#form2’).serialize();方式传递多个表单
    
    参考代码：
    
        $('#form1').submit(function() { 
            var action = $(this).attr('action');
            if (!EntryCheck()) return false;
            $.ajax({ 
                url  : action,
                type : 'POST',
                data : $('#form1, #form2').serialize(),
                success : function() { 
                    window.location.replace(action);
                }
            });
            return false;
        });
    
    【未完待更新完善…】

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWldaaGFuZ1l1_size_12_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9f429fc16922453f9510b8457e35d158.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAWldaaGFuZ1l1_size_11_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/828332d3735245558a5d543a11248749.png
[02f4eb615c734865850e9fd5f50b93c4.png]: /images/20220828/f2d4fac36695474d840760634bf032ea.png