前端JS、JQuery、CSS常用操作_js style.border-优快云博客

本文链接：https://blog.youkuaiyun.com/IT_LittleBaby/article/details/113815238

本文介绍了JavaScript中对input、select标签的操作，包括边框样式修改、去除select重复数据和设置默认值的方法。此外，还涵盖了页面重定向、AJAX请求的实现。同时，讲解了日期比较、字符串判断和正则表达式的应用，以及使用jQuery实现元素的显示与隐藏。最后，提到了zTree树形插件的使用和配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定期整理，定期更新，大家有什么想要查询的，欢迎留言。

一、input 标签

以id进行操作
js:
    document.getElementById("txt").style.borderStyle="solid";//边框样式
    document.getElementById("txt").style.borderColor="#ff0000";//边框颜色
    document.getElementById("txt").style.borderWidth="1px";//边框宽度
jquery:
    $("#username").css("border-style","solid");//边框样式
    $("#username").css("border-color","rgb(218, 38, 38)");//边框样式
    $("#username").css("border-width","2px");//边框样式

二、select 标签

去除重复数据

入参为select标签id
function del(obj) {
    var items = document.getElementById(obj);
    var sobj = (function() {
        var _sobj = {};
        for (var i = 0; i < items.options.length; i++) {
            _sobj[items.options[i].text] = 1;
        }
        return _sobj;
    })();
    items.options.length = 0;
    var _cx = 0;
    for (var i in sobj) {
        items.options[_cx] = new Option(i, i);
        _cx += 1;
    }
}

设置默认值

<select id="sel" >
      <option value="aa" > 123</option>
      <option value="bb" > 321</option>
 </select>
 
第一种设置值：
$(function(){
    $("#sel").attr("aa","<%=123 %>")
});

第二种设置值得方式：是将select中的任何一个 option 来设为默认值
$(function(){
    $("#sel option[value='bb'] ").attr("selected",true)
});

三、发送请求

location.href

self.location.href;//当前页面打开URL页面
window.location.href;//当前页面打开URL页面
this.location.href;//当前页面打开URL页面
location.href;// 当前页面打开URL页面
parent.location.href;//在父页面打开新页面
top.location.href;//在顶层页面打开新页面

window.location.href='/query/shop/api/list.do?name='+name;

ajax

$.ajax({    
   type: 'POST',    
    dataType : 'json',
    data:{'nae':'test'},//传递的参数
    url: '/query/shop/api/list.do',//controller  
    success:function(data){ 
		// 成功
    },
    error:function(data){
        // 失败
    }
});

四、日期对比

判断日期跨度

// 判断时间段长度单位（天）
function checkTime(){
	var kprqq = $("#search_kprqq").val();
	var kprqz = $("#search_kprqz").val();
	if(kprqq!=null&&kprqz!=null){
        var s1 = new Date(kprqq.replace(/-/g, "/"));
        var s2 = new Date(kprqz.replace(/-/g, "/"));
        var days = s2.getTime() - s1.getTime();
        var time = parseInt(days / (1000 * 60 * 60 * 24));
        if(time>31){
            alert("选取时间段超过31天! 请重新选择!!!");
            return false;
        }
    }
    return true;
}

校验是否为空

function checkTime(){
     var begintime = document.getElementById('startTime').value;
     var endtime = document.getElementById('endTime').value;
     if(!endtime){
         return true;
     }

     var time1 = new Date(begintime).getTime();
     var time2 = new Date(endtime).getTime();
     if(begintime==''){
         alert("开始时间不能为空");
         return false;
     }
     if(endtime==''){
         alert("结束时间不能为空");
         return false;
     }
     if(time1 > time2){
         alert("开始时间不能大于结束时间");
         return false;
     }
}

五、字符串判别

1. indexOf("")  判断字符串出现的位置，当字符串中包含某字符串时，返回第一次出现位置的下标
                也可用于判断字符串中是否存在某字符串，若不存在则返回值=-1
2. replace(/被替换字符串/g, '要替换的字符串');    例如:replace(/,/g, '，');

六、正则表达式校验

需要校验的字符串 : test

1.校验ip地址
    var reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
    if(!reg.test(test)){
        alert("请输入正确ip地址!!!");
        return false;
    }

2.校验纯数字
    var reg_sz = /^[0-9]*$/; 
    if(!reg_sz.test(test)){
        alert("必须是正整数!!!");
        return false;
    }
    
3.校验纯大写字母
    var reg_zm = /^[A-Z]*$/;
    if (reg_zm.test(test)) { 
        alert("必须全部为大写字母!!!");
        return false;
    }
    
4.校验纯小写字母
    var reg_zm = /^[a-z]*$/;
    if (reg_zm.test(test)) { 
        alert("必须全部为大写字母!!!");
        return false;
    }
  
5.校验以大写字母开头
    var reg_zm = /^[A-Z]/;
    if (!reg_zm.test(test)) { 
        alert("必须全部为大写字母开头!!!");
        return false;
    }

6.校验含有大写字母
    var reg_zm2 = /[A-Z]/;
    if (!reg_zm.test(test)) { 
        alert("必须含有大写字母!!!");
        return false;
    }

七、toggle显示与隐藏

//toggle实现文字的显示与隐藏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js">
</script>
<script language="javascript">
$(document).ready(function(){
	$("#btn1").toggle(function(){
         $("p").hide("slow");
         },function(){
             $("p").show("slow");
     });  
});
</script>
</head>
<body>
<p style="background:#3F3">
    this is pi<br>
    this is pi<br>
    this is pi<br>
    this is pi<br>
    this is pi<br>
    this is pi<br>
</p>
<input type="button" value="显示/隐藏" id="btn1">
</body>
</html>

八、zTree树形插件使用

指导文档：[官方](http://www.treejs.cn/v3/api.php)

<注: 树形菜单 图片不显示问题
    需要将zTreeStyle文件夹 整体复制到项目中
>
<style type="text/css">
    div.content_wrap {width: 400px;}
    div.content_wrap div.left{float: left;}
    div.content_wrap div.right{float: right;width: 340px;}
    div.zTreeDemoBackground {text-align:left;}
    
    ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #fefefe;width:220px;height:360px;overflow-y:scroll;overflow-x:auto;}
    ul.log {border: 1px solid #617775;background: #f0f6e4;width:300px;height:170px;overflow: hidden;}
    ul.log.small {height:45px;}
    ul.log li {color: #666666;list-style: none;padding-left: 10px;}
    ul.log li.dark {background-color: #E3E3E3;}
    
    /* ruler */
    div.ruler {height:20px; width:220px; background-color:#f0f6e4;border: 1px solid #333; margin-bottom: 5px; cursor: pointer}
    div.ruler div.cursor {height:20px; width:30px; background-color:#3C6E31; color:white; text-align: right; padding-right: 5px; cursor: pointer}
</style>

<link href="<%=request.getContextPath()%>/staticmedia/styles/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<script src="<%=request.getContextPath()%>/staticmedia/scripts/jquery.ztree.core.js" type="text/javascript"></script>

var setting = {
    view: {
        dblClickExpand: false,//双击节点时，是否自动展开父节点的标识
        showIcon:true,//是否显示图标
        showLine: true,//是否显示节点之间的连线
        selectedMulti: false, //设置是否允许同时选中多个节点
        nameIsHTML: false,
    },
    data: {
        simpleData: {
            enable: true,
        }
    },
    callback: {
        onClick: onClick
    },
};

$(function(){
    $.ajax({    
        type: 'POST',    
        dataType : 'json',    
        url: root+'/fpkjcx/ajaxGetNodes.htm',  
        success:function(data){ 
            $.fn.zTree.init($("#treeZzjg"), setting, data);//初始化加载菜单
        },
    });   
    
});

function onClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("treeZzjg");
    var nodes = zTree.getSelectedNodes();
    var level = nodes[0].level;
    var name = nodes[0].name;
    if(level!=0){
        $("#search_zzjgName").val(name);
        hideMenu();
        getNsrsbh(name);
    }
}

function showMenu() {
    $("#menuContent").css({left:"127px", top:"30px",width:"230px"}).slideDown("fast");
    $("body").bind("mousedown", onBodyDown);
}

function hideMenu() {
    $("#menuContent").fadeOut("fast");
    $("body").bind("mousedown", onBodyDown);
}

function onBodyDown(event) {
    if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
        hideMenu();
    }
}