摘要:总结一下前端常用的一些小技巧
$('#demo').one() 可以给当前元素设置只点击一次
$('.g-rec >div > div')
document.cookie
{literal}来包裹这些代码
https://www.cnblogs.com/heroine/p/5852748.html
$('#one_calculator').on('click',function(){
$('#one_calculator').attr("class","btn btn-primary");
$('#two_calculator').attr("class","btn btn-default");
$("#one_box_calculator").css({'display': 'block'});
$("#two_box_calculator").css({'display': 'none'});
});
$('#two_calculator').on('click',function(){
$('#one_calculator').attr("class","btn btn-default");
$('#two_calculator').attr("class","btn btn-primary");
$("#one_box_calculator").css({'display': 'none'});
$("#two_box_calculator").css({'display': 'block'});
});
#top-menu > li:last-child a {color:red;}
因为插件是会往里面加js代码的
https://www.cnblogs.com/0xcafedaddy/p/7099903.html
box-shadow: none; (可以去掉该阴影)
margin-top:30%;(可以使用百分号不直接使用px)
检查是不是界面有js报错,造成下面的程序被打断
alert看看有没有反应(alert可以但是console.log不行说明是被打断了,因为alert和confirm是最先出来的)
看看试着把js放到window.onload中执行
<script type='text/javascript'>var remove_img = document.getElementsByClassName("custom-header-image");remove_img[0].style.cssText="display:none!important";</script>
console.log('%cMake a little progress every day ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');
<style>#top-menu>li{margin-left:-10px;}</style>
document.getElementsByTagName("h1")[0].innerHTML="<?php the_title(); ?>";
var e=document.location.href;
var t=e.split("?")[1];
var product = t.split("-")[0]
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
if(window.screen.width>=768){
flag = true;
}
return flag;
----------
if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
window.location.href = "https://www.baidu.com/";
} else {
window.location.href = "http://news.baidu.com/";
}
urlencode urldecode
$('.e-shape').on('click',function(){
$('.e-shape').removeClass('btn-primary');
$(this).addClass('btn-primary');
});
function search_product(){
$('#table_show').css({'display': 'none'});
$('#search_result').empty();
$("#do_search").attr("disabled",true);
$('#do_search').text('Searching...');
var material = $('#db_material').val()
var shape = $('#db_shape').val()
var dimension = $('#dimension').val()
if("undefined"==typeof(dimension) || "" == (dimension)){
dimension = '';
}
if("undefined"==typeof(shape) || "" == (shape)){
shape = '';
}
$.post("https://www.usneodymiummagnets.com/wp-content/themes/woodex/eric-ajax.php", { "material": material,'shape':shape,'dimension':dimension },
function(data){
$("#do_search").attr("disabled",false);
$('#do_search').text('Search');
if(data.m){
var result_detail = data.v;
var table_detail = '';
$('#table_show').css({'display': 'block'});
$.each(result_detail,function(index,value){
table_detail += `<tr>`;
table_detail += `<td><a href="/`+ value.slug +`.html">`+ value.product_name +`</a></td>`
table_detail += `<td>`+value.material+`</td>`
table_detail += `<td>`+value.shape+`</td>`
table_detail += `<td>`+value.dimension+`</td>`
table_detail += `<td>`+value.grade+`</td>`
table_detail += `<td><a href="/inquiry.html?`+value.product_name+`-`+value.dimension+`-`+value.material+`">`+`Inquiry`+`</a></td>`
table_detail += `</tr>`;
});
$('#search_result').append(table_detail);
console.log(table_detail);
}else{
//inquiry
}
}, "json");
}
document.getElementsByClassName('image-column')[1].innerHTML=eric_str;
<a href="https://goo.gl/maps/jeDEibq2MhE2">23661 Birtcher Dr.<br>Lake Forest, CA 92630</a>
<a href="tel:(949) 407-8902">(949) 407-8902</a>
<a href="mailto:sales@stanfordmagnets.com">sales@stanfordmagnets.com</a>
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
decodeURIComponent 方法
function URLEncode (clearString) {
var output = '';
var x = 0;
clearString = clearString.toString();
var regex = /(^[a-zA-Z0-9-_.]*)/;
while (x < clearString.length) {
var match = regex.exec(clearString.substr(x));
if (match != null && match.length > 1 && match[1] != '') {
output += match[1];
x += match[1].length;
} else {
if (clearString.substr(x, 1) == ' ') {
//原文在此用 clearString[x] == ' ' 做判断, 但ie不支持把字符串当作数组来访问,
//修改后两种浏览器都可兼容
output += '+';
}
else {
var charCode = clearString.charCodeAt(x);
var hexVal = charCode.toString(16);
utput += '%' + ( hexVal.length < 2 ? '0' : '' ) + hexVal.toUpperCase();
}
x++;
}
}
return output;
}
利用php对url进行encode后有加号
$a = urlencode("http://www.baidu.com/?a=d 3");
$a = str_replace('+', '%20', $a); 可解决
fadeIn() 渐入
fadeOut()渐出
fadeToggle() 渐入&渐出
fadeTo() 变为给定的不透明度
slideDown()
slideUp()
slideToggle()
animate()
background-size: cover;
<style>
a:before{content:initial!important;}
</style>
<caption align="">处理员完成的任务数量</caption>
$(this).addClass('list-eric-click')
var target = $(event.target)
var category_id = target.attr('category-id')
$('#category').val(category_id)
document.lastModified
X-Powered-By: ThinkCMF
parseInt
一个东西里面有两个class 前面的会覆盖后面的class
<div class="form-group col-md-4" class="bank_wire"> 这里后面的class就不会执行
var start_time = $('#start_time').val()
var end_time = $('#end_time').val()
if(start_time != '' && end_time != ''){
var start = new Date(start_time.replace("-", "/").replace("-", "/"));
var end = new Date(end_time.replace("-", "/").replace("-", "/"));
if(end<start){
alert('结束时间不能小于开始时间!');
}
}
function test(obj)
{
var tr_obj = $(obj).parent().parent().children('td').eq(1).html()
console.log(tr_obj)
}
$(function(){
$("#btn").click(function() {
$("#test tr td:nth-child(2)").addClass('red');
});
$("#test tr").click(function() {
$(this).children('td').eq(1).addClass('red');
});
});
// var history_income_type = tdArr.eq(0).find('input').val();
1、readonly规定输入字段为只读可复制,但是,用户可以使用Tab键切换到该字段,可选择,可以接收焦点,还可以选中或拷贝其文本。
<input type="text" value="哈哈哈" readonly="readonly">
2、disabled 被禁用的 input 元素可复制,不能接收焦点,设置后文字的颜色会变成灰色。无法与 <input type="hidden"> 一起使用。
<input type="text" value="哈哈哈" disabled="disabled">
3、通过控制input的max length为0实现。
<input type="text" maxlength="0">
4、onfocus="this.blur();"onfocuse是聚焦的意思,当你把光标放在文本框上输入的时候,就是聚焦,但这里添加了"this.blur()",blur的作用就是去除聚焦,也就是你不能把光标放在这个文本框上,换句话说就是你不能输入文本了 。
<input type="text" value="哈哈哈" onfocus="this.blur();">
$('.only_one').prop("outerHTML")
var file_name = ‘中文.jpg’;
var reg = /[\u4e00-\u9fa5]/g;
if(reg.test(file_name)){
alert("有中文,请修改名字后重新上传");
return;
}
Array.prototype.indexOf = function(val) {
for (var i = 0; i < this.length; i++) {
if (this[i] == val) return i;
}
return -1;
};
Array.prototype.remove = function(val) {
var index = this.indexOf(val);
if (index > -1) {
this.splice(index, 1);
}
};
arr.remove('123');
<script>
function SlyarErrors() {
return true;
}
window.onerror = SlyarErrors;
</script>
autocomplete="off"
<a href="/images/myw3schoolimage.jpg" download="w3logo"> (本地管用,网络地址就不能重命名)
var a = document.createElement("a");
a.href = "https://sellercentral.amazon.com/seller-fulfilled-prime/seller-performance/download-defects/2019-03-21/2019-04-07?";
a.download ="test.csv";
$.ajax({
type: 'HEAD', // 获取头信息,type=HEAD即可
url : 'https://sellercentral.amazon.com/seller-fulfilled-prime/seller-performance/download-defects/2019-03-21/2019-04-07?',
//url:"http://device.qq.com/cgi-bin/device_cgi/remote_bind_get_Verify",
complete: function( xhr,data ){
// 获取相关Http Response header
var wpoInfo = {
// 服务器端时间
"date" : xhr.getResponseHeader('Date'),
// 如果开启了gzip,会返回这个东西
"contentEncoding" : xhr.getResponseHeader('Content-Encoding'),
// keep-alive ? close?
"connection" : xhr.getResponseHeader('Connection'),
// 响应长度
"contentLength" : xhr.getResponseHeader('content-length'),
// 服务器类型,apache?lighttpd?
"server" : xhr.getResponseHeader('Server'),
"vary" : xhr.getResponseHeader('Vary'),
"transferEncoding" : xhr.getResponseHeader('Transfer-Encoding'),
// text/html ? text/xml?
"contentType" : xhr.getResponseHeader('Content-Type'),
"cacheControl" : xhr.getResponseHeader('Cache-Control'),
// 生命周期?
"exprires" : xhr.getResponseHeader('Exprires'),
"lastModified" : xhr.getResponseHeader('Last-Modified')
};
console.log(xhr.getAllResponseHeaders());
}
});
fetch("https://sellercentral.amazon.com/seller-fulfilled-prime/seller-performance/download-defects/2019-03-21/2019-04-07")
.then(v => v.text())
.then(data => console.log(data))
var a = document.createElement("a");
a.href = "https://sellercentral.amazon.com/seller-fulfilled-prime/seller-performance/download-defects/2019-03-21/2019-04-07?";
a.download ="test.csv";
a.click();
Jsonp只能使用get方式的
test();
function test(){
$.ajax({
url: "http://oa.oceania-inc.com/email_api/SendGmailAtts.php",
type: "GET",
dataType: "jsonp", //指定服务器返回的数据类型
success: function (data) {
console.log(data);
var result = JSON.stringify(data); //json对象转成字符串
console.log(123);
console.log(result);
}
});
console.log('ok');
}
function getDay(day){
var today = new Date();
var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
today.setTime(targetday_milliseconds); //注意,这行是关键代码
var tYear = today.getFullYear();
var tMonth = today.getMonth();
var tDate = today.getDate();
tMonth = doHandleMonth(tMonth + 1);
tDate = doHandleMonth(tDate);
return tYear+"-"+tMonth+"-"+tDate;
}
let now = getDay(0);
let last30 = getDay(-30);
在getDate等方法获取的时间不是字符串,可以通过 str+""的方式将至转换为字符串
/**
* 加法
* @param arg1
* @param arg2
* @returns
*/
function accAdd(arg1,arg2){
var r1,r2,m;
try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0};
try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0};
m=Math.pow(10,Math.max(r1,r2));
return (arg1*m+arg2*m)/m;
}
/**
* 减法
* @param arg1
* @param arg2
* @returns
*/
function accSubtr(arg1,arg2){
var r1,r2,m,n;
try{r1=arg1.toString().split(".")[1].length;}catch(e){r1=0;}
try{r2=arg2.toString().split(".")[1].length;}catch(e){r2=0;}
m=Math.pow(10,Math.max(r1,r2));
//动态控制精度长度
n=(r1>=r2)?r1:r2;
return ((arg1*m-arg2*m)/m).toFixed(n);
}
/***
* 乘法,获取精确乘法的结果值
* @param arg1
* @param arg2
* @returns
*/
function accMul(arg1,arg2)
{
var m=0,s1=arg1.toString(),s2=arg2.toString();
try{m+=s1.split(".")[1].length}catch(e){};
try{m+=s2.split(".")[1].length}catch(e){};
return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);
}
/***
* 除法,获取精确乘法的结果值
* @param arg1
* @param arg2
* @returns
*/
function accDivCoupon(arg1,arg2){
var t1=0,t2=0,r1,r2;
try{t1=arg1.toString().split(".")[1].length;}catch(e){}
try{t2=arg2.toString().split(".")[1].length;}catch(e){}
with(Math){
r1=Number(arg1.toString().replace(".",""));
r2=Number(arg2.toString().replace(".",""));
return (r1/r2)*pow(10,t2-t1);
}
}
border属性只对th 和td起作用,单独对tr设置不起作用,此时只需执行如下代码即可
table{
border-collapse: collapse;
}
此时即可对tr设置边框( border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。)
js不可以处理json字符串,可以处理json对象,所以可以将之转为json对象
var obj = JSON.parse(re)
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
cursor: url("../image/mouse.jpg"), auto;
background: url('../image/background.jpg');
background-size: cover;
}
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var reg_rewrite = new RegExp("(^|/)" + name + "/([^/]*)(/|$)", "i");
var r = window.location.search.substr(1).match(reg);
var q = window.location.pathname.substr(1).match(reg_rewrite);
if(r != null){
return unescape(r[2]);
}else if(q != null){
return unescape(q[2]);
}else{
return null;
}
}
var productName=getQueryString('productName');
采用div,给div设置边框不给a设置边框,通过修改css让div宽度随着文案更改,同时给div增加hover属性
<style type="text/css">
.eric-div-a{border: 1px solid #8cc63e;padding: 15px 30px;width:auto; display:inline-block;font-size:25px!important;}
.eric-div-a:hover{color:grey;border: 1px solid grey;padding: 15px 30px;width:auto; display:inline-block;font-size:25px!important;cursor: pointer;}
</style>
<h2 class="" style="text-align:center;">
<div class="eric-div-a">
<a href="/brighta-solar-lighting-system.html" style="">BRIGHTA</a>
</div>
</h2>
<link rel="stylesheet" href="css/datetimepicker/bootstrap-datetimepicker.min.css">
<script src="js/datetimepicker/bootstrap-datetimepicker.js"></script>
<input type="text" class="form-control form_datetime_2" readonly style="background:#fff" placeholder="开始时间" id="begin_month_time"/>
//只显示年的
<script>
$(".form_datetime_2").
datetimepicker({
language:'ch',
format: 'yyyy',
autoclose: true,
todayBtn: true,
startView: 'decade',
minView:'decade',
maxView:'decade',
});
</script>
//只显示月的
<script>
$(".form_datetime_2").
datetimepicker({
language:'ch',
format: 'MM',
autoclose: true,
todayBtn: true,
todayHighlight: true,
startView: 'year',
minView:'year',
maxView:'year',
});
</script>
<script>
$(".form_datetime_2").
datetimepicker({
language:'ch',
format: 'dd',
autoclose: true,
todayBtn: true,
todayHighlight: true,
startView: 'month',
minView:'month',
maxView:'month',
});
</script>
if(radio_v == 1){
$("input[name='is_leader_up'][value=1]").attr("checked",true);
}else{
$("input[name='is_leader_up'][value='']").attr("checked",true);
}
style="word-break:break-all; word-wrap:break-all;" (谷歌火狐可以,但是IE不可以)
<div style="word-break: break-all!important;">{{logDetail.batchNo}}</div> IE需要放到div中
由于冒泡触发,需要禁用掉就可以了
onClick="event.cancelBubble = true"
return s.replace(/(^\s*)|(\s*$)/g, "");
onkeyup="(this.v=function(){this.value=this.value.replace(/[^0-9.]+/,'');}).call(this)" onblur="this.v();"
maxlength="4"
toPercent: function (point) {
if (point==0) {
return 0;
}
var str=Number(point*100).toFixed();
str+="%";
return str;
},
<td>{{toPercent(logDetail.QCRate)}}</td>
http://mishengqiang.com/sweetalert2/
$(docuemnt).width()
$(docuemnt).height()
document.body.clientWidth
让父级页面跳转
top.location.href =‘’
页面不缓存
<META HTTP-EQUIV="pragma"CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
JS增加随机数
<script type="text/javascript">
document.write('<script src="../../Scripts/QC/chartsData.js?v=' + Math.random() + '">');
document.write('</');
document.write('script>');
</script>
(写到一个里面会报错token什么的,这时候可以将标签拆分,从而解决这个问题)
http://www.jq22.com/yanshi1320
intro.js
mounted: function () {
//$("#ddd").datetimepicker();
//$("[date]").datetimepicker();
window.onresize=function(){
this.NowBodyWidth = document.body.clientWidth;
console.log('Now Width is' + this.NowBodyWidth);
if(this.NowBodyWidth <= 1400){
this.PageCopywriting = this.PageNormal;
}else{
this.PageCopywriting = this.PageNormal;
}
}
},
$('.oa_upload_files').on('click',function () {
var form = new FormData(document.getElementById("oa_files_input"));
$.ajax({
url:"__CONTROLLER__/uploadFiles",
type:"post",
data:form,
cache: false,
processData: false,
contentType: false,
success:function(data){
alert("操作成功!");
},
error:function(e){
alert("网络错误,请重试!!");
}
});
});
body {
padding-right: 0px !important;
}
*.modal-open {
overflow-y: scroll;
padding-right: 0 !important;
}
//保留4位小数
var number = 12.3321432;
number = String(number).replace(/^(.*\..{4}).*$/,"$1");
number = Number(number); // number = 12.3321
//保留2位小数
var reg = /^(.*\..{2}).*$/;
var number2 = 12.3;
number2 = String(number2).replace(reg ,"$1");
number2 = Number(number2); // number2 = 12.3 不足保留位数不补0
.el-table__header{
width: 100% !important;
}
.el-table__body{
width: 100% !important;
}
document.addEventListener('copy',function(e){
// clipboardData 对象是为通过编辑菜单、快捷菜单和快捷键执行的编辑操作所保留的,也就是你复制或者剪切内容
var clipboardData = e.clipboardData || window.clipboardData;
// 如果 未复制或者未剪切,直接 return
if(!clipboardData) return ;
// Selection 对象 表示用户选择的文本范围或光标的当前位置。
// 声明一个变量接收 -- 用户输入的剪切或者复制的文本转化为字符串
var text = window.getSelection().toString();
if(text){
// 如果文本存在,首先取消默认行为
e.preventDefault();
// 通过调用 clipboardData 对象的 setData(format,data) 方法,设置相关文本
// format 一个 DOMString 类型 表示要添加到 drag object 的拖动数据的类型
// data 一个 DOMString 表示要添加到 drag object 的数据
clipboardData.setData('text',text)
}
})