TZ_09_常用jQuery操作

1.实现对chexkbox进行批量删除

checkbox属性
<td><input name="ids" type="checkbox" value="${product.id }"></td>
 
<script>
//删除操作
        $("#del").click(function() {
            if(confirm("确定删除吗")){
                 var cks=document.getElementsByName("ids");
                    var str="";
                    //拼接所有的图书id
                    for(var i=0;i<cks.length;i++){
                        if(cks[i].checked){
                            str+=str+cks[i].value+",";
                        }
                    }
                    //去掉字符串末尾的‘,’
                    str=str.substring(0, str.length-1);
                 location.href="deleteProdect?strId="+str;
            }
        });
</script>

2.拿到下拉列表框中的值当作页数返回后台

         <div class="form-group form-inline">
                       每页 <select class="form-control" onchange="changePageSize()" id="changePageSize">
                           <option>2</option>
                           <option>4</option>
                           <option>6</option>
                           <option>8</option>
                           <option>10</option>
                    </select> 条
         </div>

function changePageSize() {
            //获取下拉框的值
            var pageSize = $("#changePageSize").val();
 
            //向服务器发送请求，改变没页显示条数
            location.href = "${pageContext.request.contextPath}/Orders/findAllOrders?page=1&size="
                    + pageSize;
        }

3.checkbox的一系列操作

　　1>checkbox全选和全不选

 $(function () {
            $("#chkAll").click(function () {
                if ($("#chkAll").prop('checked')) {
                    $("input[name='checkbox']").prop("checked", "true");
                } else {
                    $("input[name='checkbox']").removeAttr("checked");
                }
            });
        })
}

　2>checkbox选中的个数

var len = $("input[name='checkbox']:checked").length;

4.选中text文本框时 登陆的错误信息消失

$("#username").click(function() {
           $(".div1 span:last-child").css("display","none");
    });

5.下拉文本框的数据的回显

 $("#select").find("option[value='${club.type}']").attr("selected", true);

6.正则表达式的使用（字段中不能存在空格）

function isNull(data, span) {
            var reg = RegExp("^[^\\s]+$");
            var value = document.getElementById(data).value
            if (!reg.test(value)) {
                document.getElementById(span).innerText = "请不要输入空格"
                document.getElementById(span).style.color = "red"
            } else {
                document.getElementById(span).innerText = ""
            }
 
        }

7.转换当前页面的时间格式

<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
　　　　　　　　<div class="col-sm-10">
                <input type="date" class="form-control" disabled=true
                       value="<fmt:formatDate value="${club.createdate}" pattern="yyyy-MM-dd"></fmt:formatDate>">
             </div>

8.将Ajax中的json数据添加到下拉列表框中(向select中追加<option></option>)

　　　　<select class="inp001" id="sProject" name="sProject" >
                            <option value="">-请选择-</option>
                   </select>

 function change() {
            var type = $("#budget").val();
            $.ajax({
                type: "Get",
                url: "${pageContext.request.contextPath}/item/ajaxType/" + type,
                dataType: "json",
                success: function (data) {
                    //清空下拉列表框
                    $("#fProject").empty();
                    $.each(data, function (index, item) {
                        //追加新的子选项
                        $("#fProject").append("<option value=" + item.id + " >" + item.name + "</option>");
                    })
                }
            })
        };

9.点击一个超链接（<a></a>a标签）复制URL到剪切板