常用整理资料:

简介: 常用整理资料:
class拼接
 var from = $(this).attr('data-from');
 $('.messageId'+from).show();
整理一:删除获取后台返回的html格式内容里面的  meta
方法1、
var Htmlstring = res.data.content;(获取字段)
Htmlstring = Htmlstring.replace(/<meta[^>]+>/g,"");(正则)
document.querySelector('.readMarin').innerHTML=Htmlstring;(已经移除)
方法2
$('.readMarin').find("meta[name='viewport']").remove();
$('.readMarin').find("meta[name='apple-mobile-web-app-capable']").remove();
$('.readMarin').find("meta[name='apple-mobile-web-app-status-bar-style']").remove();
$('.readMarin').find("meta[name='format-detection']").remove();
$('.readMarin').find("meta[http-equiv='pragma']").remove();
$('.readMarin').find("meta[http-equiv='content-type']").remove();
整理二、循环
方法1、循环数据
var str = '';
$.each(res.data, function(i, v){
  str += '<li data-id='+v.id+'>'+
'         <div class="name">'+v.name+'</div>'+
'         <div class="type">'+v.book+'</div>'+
'       </li>';
});
$('.Readings ul').html(''); 
$('.Readings ul').html(str); 
方法2、循环class
var str = '';
$(".tupian").each(function(){
  str += '<div class="swiper-slide">'+
'         <img src="'+ $(this).find('img').attr("src") +'" />'+
'         <span>'+ $(this).next().html() +'</span>'+
'       </div>';
});
$('.swiper-wrapper').html(''); // 先等空,在赋值
$('.swiper-wrapper').html(str);
整理三:滚动条
方法1、滚动条body在最顶部
document.scrollingElement.scrollTop = 0;
整理三:本地缓存
存电脑  本地
var password=$('.password-val').val();
window.localStorage.setItem("password0",password);  存
window.localStorage.removeItem("password0");               删
var types = window.localStorage.getItem("password0");   取     
window.localStorage.clear(); //清除所有缓存
整理四:提交文件
提交文件
<form id="uploadForm" enctype="multipart/form-data"> 
  <div class="uploadPanel">
    <input id="file" type="file" name="file" class="put">
    <span>上传新增员工名单</span>
  </div>
  </form>
$(".uploadRefer").click(function(){
  var token = window.localStorage.getItem("token");
  var formData = new FormData($('#uploadForm')[0]); 
  $.ajax({ 
    type: 'POST', 
    url: apiUrl + UPLOADSTAFF, //上传文件的请求路径必须是绝对路劲
    data: formData, 
    cache: false, 
    processData: false, 
    contentType: false, 
    headers: { 
      Authorization: token  //获取的缓存登录token  根据实际来
    },
  }).success(function (data) { 
    alert("成功提交"); 
  }).error(function () { 
    alert("上传失败"); 
  });
});
$("#file").change(function(){
  $(".uploadPanel span").html('已上传,请提交');
})
CSS
旋转:
transform: rotate(-45deg);
执行多少秒
transition: all 0.3s ease;
图片文字居中
vertical-align:middle;
图片居中
div--(div一定有宽高)
display: table-cell;
vertical-align: middle;
select文字居中
text-align: center;
text-align-last: center;
改变select箭头样式的方法:
select {
        /*Chrome和Firefox里面的边框是不一样的,所以复写了一下*/
        border: solid 1px #000;
        /*很关键:将默认的select选择框样式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在选择框的最右侧中间显示小箭头图片*/
        background: url("images/right-select.png") no-repeat scroll right 0.03rem transparent;
        background-size: 0.13rem 0.26rem;
        /*为下拉小箭头留出一点位置,避免被文字覆盖*/
        padding-right: 0.14rem;
}
div{
  pointer-events: none;  禁止点击
}
1、多行截取:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;/*截取4行*/
text-overflow: ellipsis;
overflow: hidden;
2、单行隐藏:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
3、数字、英文换行-:
word-wrap:break-word;
修改input-data 右侧图标大小
input[type="date"]::-webkit-calendar-picker-indicator {
   /* display: none; */
   width: 30px;
   height: 40px;
   /* background: red; */
   cursor: pointer;
   margin-top: 12px;
}
修改浏览器input默认背景色-给input添加阴影处理
webkit-box-shadow: 0 0 0 1000px white inset;
-moz--box-shadow: 0 0 0 1000px white inset;
box-shadow: 0 0 0 1000px white inset;
input:focus {  焦点
  box-shadow: 0px 0px 10px #8dc437;
}
@font-face {
 font-family: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}  
/*其中fontName替换为你的字体名称*/
h1{font-family: fontnameRegular}
@font-face {
  font-family:'HelveticaNeueLTPro-Ex';
  src: url(../font/HelveticaNeueLTPro-Ex.otf) format('truetype');
}--可用
清除ie自带小眼睛
input::-ms-clear{display:none;}/*IE删除文本框中的叉号*/
input::-ms-reveal{display:none;}?/*IE删除密码框中的小眼睛*/
IE浏览器数字显示为电话号码问题
<meta name="format-detection" content="telephone=no">
跳转
window.location.href="enter.html";
window.location.href="piano-details.html?id=" + idList
window.location.href="xxxxx.html?opt=" + opt +"&mpt="+mpt     可以用多参
window.open('../tax-planning/service.html');  新建一个窗口打开
循环第一个插入内容
var str = '<li><input class="form-control seach_name" placeholder="请输入搜索内容" style="margin-left: 0;" /><i class="glyphicon glyphicon-search"></i></li>';
$.each(res.data, function(i, v){
  str += '<li data = "'+v.name+'"><a>'+v.name+'</ a></li>';
});
$('.dropdown-menu').html(''); 
$('.dropdown-menu').html(str); 
点击事件--事件委托  on点击
$(".piano-list").on('click', '.piano-list-cen', function(){
  var idList = $(this).attr("data-id");
  window.location.href="piano-details.html?id=" + idList
});
点击select
$("select").on("change",function(){
    var option = $(this).val();
    if(option == 0){
      $(".intra-field").html('场内');
    }else{
      $(".intra-field").html('场外');
    }
});
$("select").change(function(){
    // var ss = $("select option:selected").val();
    var ss = $(this).val();
    alert(ss);
    var aa = ss;
    alert(aa);
});
$("#select").on("change",function(){
    var val =$(this).val();
    console.log(val,'===');
});
//获取当前url地址栏参数
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    // console.log(window.location.search)//?id=2
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
var id = GetQueryString('id');   //获取
========办公链接========
https://www.html.cn/tool/html2js/         html拼接成js字符串
包含  class    包含class
if($('.information .txt').is('.txtAdd')){
  setTimeout(function(){
    $(".information img").attr("src",'./images/news.png');
  },100); 
}
判断一个div显示隐藏
if($('#div').is(':hidden')){
      //如果隐藏时。。。
}else{
      //如果显示时。。。
}
空格   &nbsp;
去除所有空格
var un = $("#un").val();//获取文本
var unn = un.split(" ");//以空格来分割
var unns = "";//定义变量
for (var i = 0; i < unn.length; i++) {
    unns+=unn[i];//拼接没有空格的字符串
}
1、返回上一页,不刷新history.html
window.history.go(-1);
jQuery 设置指定秒数(5秒)后隐藏元素
方法一:使用 .delay() 方法
 $("#myElem").show().delay(5000).fadeOut();
方法二、使用 setTimeout() 方法:
setTimeout(function() { $("#myElem").hide(); }, 5000);
正则
oninput="value=value.replace(/[^\d]/g,'')"   只能输入数字
 onkeyup="this.value=this.value.replace(/[^\d\,]/g,'')"
正则_input输入框只能输入数字和英文逗号
onkeyup="value=value.replace(/[^\w\.\/]/ig,'')"
只能输入数字字母英文逗号
输入框input只能输入数字和小数点
<input type="" name="" id="figure" value="" placeholder="请输入" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" /><sapn>元</sapn>
onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}" onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
只能输入整数字
JS 正则表达式 判断密码必须含有大小写字母+数字
var aaa = $("#enter-password").val();
var reg = new RegExp(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/);
if(reg.test(aaa)){
  // alert(111)
  // return
}else{
  $("#error").html('设置6-12位字母、数字的组合 区分大小写');
  $('#enter-password').addClass("errorAutofocus");
  $('#phone-numbers').removeClass("errorAutofocus");
  $('#phone-number').removeClass("errorAutofocus");
  return
}
奇数  偶数
$(".interlaced-discoloration div:odd").css("backgroundColor","#2eadd6");
$(".interlaced-discoloration div:even").css("backgroundColor","#fff");
逗号分隔   组合
var ids = "";
var addIds =$(".addIds div");  
addIds.each(function() {  
  ids+=$(this).attr('data-id');  
  ids+=",";  
});
ids = ids.substr(0, ids.lastIndexOf(","));
console.log(ids);
return false
手机端获取屏幕高度给div
var winHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
// var winHeight = window.screen.availHeight;
document.getElementById("demo").style.height= winHeight - 100 +"px";
var div = document.getElementById('demo');
console.log(div.offsetHeight); 
//点击提交
$("#referBtn").click(function(){
  var images = [];  //上传转账凭证
  var imgs = document.getElementById("add").getElementsByTagName("img");
  for(var j=0;j<imgs.length;j++){
    var obj = {
      "src": imgs[j].src,
      "type": 0 //“0:任务转账凭证 1:完成证明 2:任务确认凭证”
    };
    // obj.url = imgs[j].src;
    images.push(obj);
  }
  console.log(images);
  var imagess = []; //上传转账凭证完成证明
  var imgss = document.getElementById("adds").getElementsByTagName("img");
  for(var js=0;js<imgss.length;js++){
    var objs = {
      "src": imgss[js].src,
      "type": 1 //“0:任务转账凭证 1:完成证明 2:任务确认凭证”
    };
    // obj.url = imgs[j].src;
    imagess.push(objs);
  }
  var arr3 = [];
  // 遍历arr1
  for (var z = 0; z < images.length; z++) {
    arr3.push(images[z]);
  }
  // 遍历arr2
  for (var p = 0; p < imagess.length; p++) {
    arr3.push(imagess[p]);
  }
  var imggg = JSON.stringify(arr3);
  // console.log(imggg);
  // return false;
  var dataLine = {
    taskId: id,
    json: imggg
  };
  var url_Line = apiUrl + ADDTRANSFER;    //灵活用工 线下转账并上传转账凭证
  sendAjax("POST", url_Line, dataLine, 'json',addTransfer); 
  function addTransfer(res){    //支付
    if(res.code == 1000){
      window.location.href="flexibile-staffing.html"
    }
  }
  // 
});
根据name  赋值
<a href="" class='register_pop_text' style="text-align: left;display: block" name="service_tels">客服电话:<span></span><img src="images/second_phase/mobile-icon3.png" alt="" class="mobile-icon"></a>
$("[name=service_tels]>span").text(userInfo.service_tel);
百度地图API
FADFKPkm3VAyRgEcz4rXbTEszqG9G7PZ
相关文章
|
6月前
|
Web App开发 存储 缓存
【整理九】
【整理九】
75 1
|
6月前
|
存储 缓存 前端开发
【整理五】
【整理五】
74 0
|
6月前
|
JavaScript 前端开发 API
【整理六】
【整理六】
79 0
|
6月前
|
JavaScript 前端开发 数据库
【整理八】
【整理八】
51 0
|
6月前
|
缓存 JavaScript 前端开发
【整理七】
【整理七】
55 0
|
6月前
|
JavaScript 前端开发 网络协议
【整理四】
【整理四】
67 0
|
缓存 前端开发 JavaScript
【整理三】
【整理三】
61 0
|
缓存 前端开发 JavaScript
【整理二】
【整理二】
121 0
|
JavaScript 前端开发 算法
【整理一】
【整理一】
74 0
专业课知识整理-外科
专业课知识整理-外科
62 0