前端JS、JQuery、CSS常用操作
徐英锐
定期整理，定期更新，大家有什么想要查询的，欢迎留言。
一、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();
}
}
类似资料：