前端小技巧(LTS)

摘要:总结一下前端常用的一些小技巧

避免重复点击

$('#demo').one() 可以给当前元素设置只点击一次

获取子元素下的子元素

$('.g-rec >div > div')

可以在爬虫的时候用,获取当前的cookie信息

document.cookie

当谷歌代码放进去就报错的时候:

{literal}来包裹这些代码

JS的各种定位可以参照

https://www.cnblogs.com/heroine/p/5852748.html

两个DIV的显示隐藏

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

CSS样式可以采用类似JQ的这样(长得像)

#top-menu > li:last-child a {color:red;}

Chrome的控制台出现问题(自动刷新等)可能是插件的问题取消Chrome的插件基本就可以解决

因为插件是会往里面加js代码的

JQ对select动态处理:

https://www.cnblogs.com/0xcafedaddy/p/7099903.html

Bootstrop有阴影:

box-shadow: none; (可以去掉该阴影)

样式

margin-top:30%;(可以使用百分号不直接使用px)

JQ执行失败:

检查是不是界面有js报错,造成下面的程序被打断
alert看看有没有反应(alert可以但是console.log不行说明是被打断了,因为alert和confirm是最先出来的)
看看试着把js放到window.onload中执行

JS通过class设置css

<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;');

UL和LI做的导航有时候个别页面被挤到下一行

<style>#top-menu>li{margin-left:-10px;}</style>

WP中可以在js里面直接写php

document.getElementsByTagName("h1")[0].innerHTML="<?php the_title(); ?>";

JS中的一些截取

var e=document.location.href;
var t=e.split("?")[1];
var product = t.split("-")[0]

判断是移动端还是PC端

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/";
}

处理%20 %22 %27这种的是应为url转义

urlencode urldecode

动态展示类

$('.e-shape').on('click',function(){
    $('.e-shape').removeClass('btn-primary');
    $(this).addClass('btn-primary');
});

一个ajax的无刷新分类

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

JS通过class修改html

document.getElementsByClassName('image-column')[1].innerHTML=eric_str;

给地址、Phone、Email增加链接

<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>

JS中对url进行decode

decodeURIComponent 方法

JS中对url进行encode

          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);   可解决

可以使用JQ的fading方法做一些简单的动画

fadeIn() 渐入
fadeOut()渐出
fadeToggle() 渐入&渐出
fadeTo() 变为给定的不透明度

利用滑动

slideDown()
slideUp()
slideToggle()

JQ自己做动画,了解一下

animate()

图片铺满

background-size: cover;

取消样式的属性(禁用属性)

            <style>
            a:before{content:initial!important;}
        </style>

表格增加title

<caption align="">处理员完成的任务数量</caption> 

event.target

     $(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

将字符串转为INT

parseInt

html中的类覆盖

一个东西里面有两个class  前面的会覆盖后面的class 
<div class="form-group col-md-4" class="bank_wire">   这里后面的class就不会执行

JQ判断两个时间的大小

         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('结束时间不能小于开始时间!');
             }
          }

JQ点击的时候获取指定的td里面的值

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

在js中input标签禁止输入的方法有:

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

获取html

$('.only_one').prop("outerHTML")

判断是否含有中文

            var file_name = ‘中文.jpg’;
            var reg = /[\u4e00-\u9fa5]/g;
            if(reg.test(file_name)){
                alert("有中文,请修改名字后重新上传");
                return;
            }

JS删除数组中特定值

            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');

屏蔽前端的js报错

    <script>
         function SlyarErrors() {
             return true;
         }
         window.onerror = SlyarErrors;
    </script>

禁用input记住历史

autocomplete="off"

JS下载文件并修改名字

<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";

JS获取Response Heaser

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

JS 读取网络资源(不下载)

        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))

JS 自动点击click

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

JQ的跨域

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+""的方式将至转换为字符串

JS 加减乘除

/**
         * 加法
         * @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);
            }
        }

TR 设置边框

border属性只对th 和td起作用,单独对tr设置不起作用,此时只需执行如下代码即可
 table{
      border-collapse: collapse;
   }
此时即可对tr设置边框( border-collapse 属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示。)

JS接收json字符串

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

JS获取GET参数

        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');

按钮加border,文案过长造成边框被折叠

采用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>

dateTimePicker显示月、日、年等

<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>

单选框js选中

                         if(radio_v == 1){
                             $("input[name='is_leader_up'][value=1]").attr("checked",true);
                         }else{
                             $("input[name='is_leader_up'][value='']").attr("checked",true);
                         }

table自动换行

style="word-break:break-all; word-wrap:break-all;" (谷歌火狐可以,但是IE不可以)
  <div style="word-break: break-all!important;">{{logDetail.batchNo}}</div> IE需要放到div中

子DIV与父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>

漂亮的弹窗Sweetalert2

http://mishengqiang.com/sweetalert2/

获取页面可用的宽高(缩放也适用)

$(docuemnt).width()
$(docuemnt).height()
document.body.clientWidth

ifram

让父级页面跳转
top.location.href =‘’

JS增加随机数处理缓存

页面不缓存
    <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什么的,这时候可以将标签拆分,从而解决这个问题)

JS步骤引导插件

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;
            }
        }
    },

JQ ajax上传附件

        $('.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("网络错误,请重试!!");
                }
            });
        });

多次弹窗造成出现padding-right (bootstrap 跟element兼容问题)

        body {
                    padding-right: 0px !important; 
            }
         *.modal-open {
            overflow-y: scroll;
            padding-right: 0 !important;
        }

js保留指定位数小数

  //保留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

IE下table被折叠不是100%

        .el-table__header{
    width: 100% !important;
}
.el-table__body{
    width: 100% !important;
}

IE下复制出现格式

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)
        }
    })
评论