前台开发JQ超级实用代码

springboot前台文件结构 

将id放在隐藏元素中

引入js文件

 

//点击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,'>')

 

图片名称进行校验： 

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();
   }
  })