前臺開發JQ超級實用代碼

springboot前臺文件結構 

將id放在隱藏元素中

<input id="hiddenId" th:value="${id}" hidden="hidden"/>

引入js文件

<script src="/js/common.js"></script>

 

//點擊body觸發一個事件
$("body").on("click", function () {
    $(".selected-authorize-list").hide();
})

 

//以.將字符串1.1.1分幾部分
var first_position = version.indexOf(".");
var version_1 = version.substr(0, first_position);
var second_position = version.indexOf(".", first_position + 1);
var version_2 = version.substr(first_position + 1, second_position - first_position - 1);
var version_3 = version.substr(second_position + 1, version.length);

 

radio的選中 
$("#radio_1").attr("checked", true);
或者：
$("#radio_mysql").prop("checked", true);

 

獲取選中的radio的ID

var appEnv = $(".radio-normal:checked").attr("id");

獲取該下拉菜單是否選中

var appSize2 = $("#appSize-2").is(":checked");

給圖片賦值

$("#upload-icon-pc").attr('src', 'file/find/' + data.logo.id);

下拉菜單的選中

$("#appSize-1").prop("selected", true);

獲取下拉菜單的選中的option 的value

var type = $("#tool-category option:selected").val();

 

JSON的解析和toString

var images = "{\"id\":12345}";
images = JSON.parse(images);
images  = JSON.stringify(images);

 

輸入框獲取焦點事件
$("#vendorName").focus();

 

字符串去掉頭部尾部的空格
appDescription.trim()

從第一個字符開始查找字符串的位置；找不到返回-1
logoId.indexOf("png", 0) 

//正則驗證字符串
var reg = /^(?![0-9]+$)[A-Za-z][A-Za-z0-9]{0,}$/;
if (!reg.test(appNameEn)) {
    $(".app-Name-En").text("英文名稱只能包含字母和數字，且必須以字母開頭");
    //$("#appNameEn").val("");
    $("#appNameEn").focus();
    return false;
}

//第二種正則
var reg = /^(?![0-9]+$)[A-Za-z][A-Za-z_0-9]{0,}$/;
if (!reg.test(attrName)) {
    showMessageTip(false, "字段ID只能包含數字字母下劃線，且必須以字母開頭");
    $(".property-id").focus();
    return false;
}

 

@requestBody接收參數的時候，用這個ajax

$.ajax({
    url: "app/info/manufacture",
    contentType: 'application/json; charset=UTF-8',
    data: JSON.stringify(appInfoContainer),
    dataType: 'json',
    type: 'post',
    success: function (data) {
        if (data.success) {
            location.href = "/toStep2?type=" + app_type_link + "&id=" + data.data;
        } else {
            showMessageTip(false, data.message);
        }
    }
});

ajax不能return true 或者是return false

上傳完一張圖片，將上傳按鈕重置，否則無法上傳一樣的圖片了

$("#upload-case-pic").val("");

獲取圖片的SRC屬性  

$("#upload-icon-pc").attr("src")

//清除之前加載的數據
var elem = $("#field-table");
elem.children().remove();

$("#fieldConfigModal").modal();//顯示模態框

$("#fieldConfigModal").modal('hide');//隱藏模態框

if (!length || length > 10000 || isNaN(length)) {
    showMessageTip(false, "字段長度必須爲不超過10000的數字");
    $(".property-length").focus();
    return false;
}

點擊事件，找到同一行的其他內容

var authId = $(self).parent().parent().find("td").eq(0).text();

設置複選框選中

$("#checkbox_auth_1_update").attr("checked", 'true');

單擊事件

$(".removeEditAuth").on("click", function () {
    $oldNode.html(oldEl);
});

獲取複選框是否被選中

var authorizationType1 = $(self).parent().parent().find("#checkbox_auth_1_update").eq(0).is(":checked");
var authorizationType2 = $(self).parent().parent().find("#checkbox_auth_2_update").eq(0).is(":checked");

ajxa同步

async: false

名字爲radio-item-3的單選框中，獲取選中的那個radio的ID

var allowUnsubscribeFlag = $('input:radio[name="radio-item-3"]:checked').attr('id');

懸浮字

title='懸浮的內容' 

防止輸入框進行注入：對要顯示的信息進行如下操作

description.replace(/</g,'&lt;').replace(/>/g,'&gt;')

 

圖片名稱進行校驗： 

if (fileName) {
    var pattern = /.*[\u4e00-\u9fa5]+.*$/;
    if (pattern.test(fileName)) {
        showMessageTip(false, "示例圖文件名不能包含中文");
        $("#upload-case-pic").val("");
        return false;
    }
    var imagePattern = /^[1-9][0-9]{0,}_[^\u4e00-\u9fa5\s]+$/;
    if (!imagePattern.test(fileName)) {
        showMessageTip(false, "示例圖文件名未滿足格式：1_xx.jpg");
        $("#upload-case-pic").val("");
        return false;
    }
}

ajax設置超時時間：

$.ajax({
    url: "/developer-manage/login/validation",
    type: "post",
    timeout : 30000, //超時時間設置，單位毫秒
    dataType: "json",
    data: {"username":$.trim($("#phone").val()),"password":$("#password").val()},
    beforeSend:function(){
        //遮罩
    },
    success: function(data) {
        //遮罩
      if(data.success) {
        location.href="/developer-manage/home";
      }else{
        // showMessageTip(false,data.message);
        $("#password").parent().find(".tip-lg").text(data.message);
      }
    },
      error: function() {
          //遮罩
          showMessageTip(false,"登錄失敗");
      }
  });

toLowerCase()

 

設置圖片的src屬性

$(".img-already-url").attr('src', data.message);

獲取圖片的src屬性

var img = $(".img-already-url").attr('src');

div的展示與隱藏

$(".up-img").hide();
$(".img-already").show();

頁面的跳轉

location.href="/system/noticeManage";

 

//清除之前append的數據
var elem = $(".table-list");
elem.children().remove();

排除了undefinied的可能性

type = type || "";

清除數據並獲取焦點

$("#name").val("");
$("#name").focus();

 

nodeJs路由

var express=require("express");
var router=express.Router();
var config=require("../config/config");
var asyncHttpUtils=require("../functions/async-http-utils");
var XSS=require("node-xss").clean;
var auth=require("../functions/auth");

router.get("/getUnitList",auth.checkAuthentication,function(req,res){
    try {
        var url=config.service_host+"/ktUnit";
        asyncHttpUtils.getRequest(url,req.query,{},function(result){
            res.send(result);
        }).catch(function(result){
            res.send(result);
        })
    } catch (error) {
        res.status(401);
    }
})

router.get("/getAllUnit",auth.checkAuthentication,function(req,res){
    try {
        var url=config.service_host+"/ktUnit/all";
        asyncHttpUtils.getRequest(url,req.query,{},function(result){
            res.send(result);
        }).catch(function(result){
            res.send(result);
        })
    } catch (error) {
        res.status(401);
    }
})

router.post("/addUnit",auth.checkAuthentication,function(req,res){
    var url=config.service_host+"/ktUnit";
    asyncHttpUtils.postRequest(url,XSS(req.body),{},function(result){
        res.send(result);
    })
})

//刪除單位
router.delete("/deleteUnit",function(req,res){
    var url=config.service_host+"/ktUnit/"+req.body.id;
    asyncHttpUtils.deleteRequest(url,{},{'Content-Type':"application/json"},function(result){
        res.send(result);
    })
})

/**
 * 編輯單位
 */
router.put("/updateUnit",auth.checkAuthentication,function(req,res){
    try {
        var url=config.service_host+"/ktUnit/"+req.query.id;
        var param=XSS(req.body);
        asyncHttpUtils.putRequest(url,param,{},function(result){
            res.send(result);
        })
    }catch (error) {
    }
})

router.get("/getUnit",auth.checkAuthentication,function(req,res){
    try {
        var url=config.service_host+"/ktUnit/"+req.query.id;
        asyncHttpUtils.getRequest(url,req.query,{},function(result){
            res.send(result);
        }).catch(function(result){
            res.send(result);
        })
    } catch (error) {
        res.status(401);
    }
})

module.exports=router;

回車搜索功能 

$('#sousuo').bind('keypress', function (event) { 
   if (event.keyCode == "13") { 
    $("#btnSubmit").click();
   }
  })