js 常用命令

编辑

JS判断相等或者不等于（==、===、!=、!==）运算符  js中return的作用及用法

 

offset和offsetLeft  offsetTop

对于同一个元素

 他们的值不一样，是因为他们的相对点不一样。

offsetTop的值就是当前元素相对于offsetParent元素的顶部的距离。而offsetParent 元素是指离该元素最近的那个定位元素，如果它的父元素都没有定位元素，所以这里offsetParent返回的元素是根元素html.

网上看到

var element = document.getElementById('rrrrrrrr');

element.style.left = '100px';

的方式设置偏移没有生效

使用$('#rrrrrrrr').offset({top:100,left:100})可以生效

 

<!-- $('#group_id').next().find('ul').prepend($('#group_id').next().find('.am-checked'))  //not change-->
<!-- $selected5.prepend($('#group_id').find('option:selected'))   //cause change-->

js 自定义confirm，可回调

window.confirm_need_click = function(str,callback,field='OK'){
        $('#alertFram').remove()
        $('#shield').remove()
        var shield = document.createElement("DIV");
        shield.id = "shield";
        shield.style.position = "absolute";
        shield.style.left = "50%";
        shield.style.top = "50%";
        shield.style.width = "600px";
        shield.style.height = "400px";
        shield.style.marginLeft = "-300px";
        shield.style.marginTop = "-150px";
        shield.style.zIndex = "1125";
        var alertFram = document.createElement("DIV");
        alertFram.id="alertFram";
        alertFram.style.position = "absolute";
        alertFram.style.width = "600px";
        alertFram.style.height = "400px";
        alertFram.style.left = "50%";
        alertFram.style.top = "50%";
        alertFram.style.marginLeft = "-300px";
        alertFram.style.marginTop = "-150px";
        alertFram.style.textAlign = "center";
        alertFram.style.lineHeight = "15px";
        alertFram.style.zIndex = "1130";
        strHtml = "<ul style=\"list-style:none;margin:0px;padding:0px;width:100%\">\n";
        strHtml += " <li style=\"background:#bf2126;text-align:left;padding-left:20px;font-size:14px;font-weight:bold;height:25px;line-height:25px;border:1px solid #F9CADE;color:white\"></li>\n";
        strHtml += " <li style=\"background:#ffffff;text-align:center;font-size:17px;height:100px;line-height:30px;border-left:1px solid #F9CADE;border-right:1px solid #F9CADE;color:#bf2126\">"+str+"</li>\n";
        strHtml += " <li style=\"background:#ffffff;text-align:center;height:40px;line-height:25px; border:1px solid #F9CADE;\"><input type=\"button\" value=\""+field+"\" id=\"confirm_id\" style=\"width:80px;height:30px;background:#bf2126;color:white;border:1px solid white;font-size:18px;line-height:20px;outline:none;margin-top:4px\"/><input type=\"button\" value=\"Cancel\" id=\"cancel_id\" style=\"width:80px;height:30px;background:#ffebef;color:#bf2126;border:1px solid white;font-size:18px;line-height:20px;outline:none;margin-top:4px; margin-left:10px\"/></li>\n";
        strHtml += "</ul>\n";
        alertFram.innerHTML = strHtml;
        document.body.appendChild(alertFram);
        document.body.appendChild(shield);
        
        <!-- document.body.appendChild(confirmBox) -->
          // 确认按钮点击事件
          console.log(shield)
          const confirmYesBtn = alertFram.querySelector('#confirm_id');
          console.log(confirmYesBtn)
          confirmYesBtn.addEventListener('click', () => {
            document.body.removeChild(alertFram)
            document.body.removeChild(shield)
            callback(true)
          })
          
          // 取消按钮点击事件
          const confirmNoBtn = alertFram.querySelector('#cancel_id');
          confirmNoBtn.addEventListener('click', () => {
            document.body.removeChild(alertFram)
            document.body.removeChild(shield)
            callback(false)
          })
    }

调用时

confirm_need_click("Note: Disused cases will be automatically removed from all test lists!",(result)=>{
      <!-- console.log(result) -->
　　　　if(!result){

　　　　　　return result
　　　　}

})

 

参考：https://blog.csdn.net/wandongle/article/details/137734920

下载文件后刷新页面

$('#status_server').modal({
        width:670,
        relatedTarget: this,
        onConfirm: function(e){
            var str1=location.href
            $('#status_server').modal('close');
            var export_reason=$('#tab_reason').val()
            if(!export_reason){
                return false;
            }
            
            $.ajaxSettings.async=false   //sync
            var str =("{:U('Admin/engagement/export_ppa',array('edid'=>'ed_id'))}".replace('ppaid',ppa_id));
            location.href=str
            
            sleep(800);
            location.href=str1
        },
        oncancel: function(e){
            window.location.reload();
        }                
    });

使用sleep的方式，实现了下载后并刷新

function sleep(time){
     var timeStamp = new Date().getTime();
     var endTime = timeStamp + time;
     while(true){
         if (new Date().getTime() > endTime){
          return;
         } 
     }
}

 

编辑完字段后，需要页面刷新来显示效果，刷新后有想要页面滚动轴保留在刷新前的位置。但自己刷新页面时，又想要回到开始位置

1.刷新后滚动轴不动

其中，page_top为1 刷新时页面滚动到最上边，其他情况下，滚动到page_top值对应的位置

在滚动轴生效的div上要加这个 id='content' onscroll="SetH(this)"

    var _h = 0;
    var page_top='{$page_top}'; //1:to top
    function SetH(o) {
            _h = $(o).scrollTop();
            <!-- console.log("h****************:",_h); -->
            SetCookie("a", _h)
    }
    window.onload = function () {
        if(!window.name){
           window.name = "reload"
        }
        else{
            if(page_top!=1){
                $("#content")[0].scrollTop=GetCookie("a")
                
                var url = document.URL   //获取当前页面的网址信息URL;
                var num = url.indexOf('/page_top');  //获取＃在的位置信息
                if (num){
                    URL = url.substring(0,num);  //截取网址信息
                    history.pushState(null,null,URL);  //将网址设置
                }
            }
        }
    }
    function SetCookie(sName, sValue) {
        document.cookie = sName + "=" + escape(sValue) + "; ";
    }
    function GetCookie(sName) {
        var aCookie = document.cookie.split("; ");
        for (var i = 0; i < aCookie.length; i++) {
            var aCrumb = aCookie[i].split("=");
            if (sName == aCrumb[0]){
                return unescape(aCrumb[1]);
            }
        }
        return 0;
    }

2.修改完值后，将page_top的值传到url上

这样赋值后，页面会刷新为指定的网址

location.href=str1.split('/page_top')[0]+'/page_top/'+_h

3.后台处理

if(isset($filter['page_top'])){
      $data['page_top']=$filter['page_top'];  ==>这个值会传到js中
}else{
     $data['page_top']='1'; #to top
}

4.在js中在将滚动轴滚动到指定位置后，将url中的page_top删除了，以防止手动刷新时不能回到最上边的情况

双击复制文本

function set_dbclickCopyText() {   //绑定
    $('.layui-table-cell').dblclick(function (e) {
        dbclickCopyText(this)
    })
}

function dbclickCopyText(obj){  //双击到粘贴板
    var copy_text=$(obj).text()
    if(copy_text){
        var copy_obj=document.createElement('input')
        document.body.appendChild(copy_obj)
        copy_obj.value=copy_text
        copy_obj.select()
        document.execCommand('copy')
        copy_obj.remove()
        alert('copy successfully')
    }
    
}

参考：https://hexingxing.cn/html-double-click-or-single-click-selection-to-copy-tag-content/

还有一个绑定的方式

// 绑定双击事件到p元素
document.getElementById('textToCopy').addEventListener('dblclick', function() {
  copyText('textToCopy');
});

 

 jquery中find()和filter()

find(expr|obj|ele)  返回值:jQuery 概述 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。 所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。 参数 expr String  用于查找的表达式 jQuery object object  一个用于匹配元素的jQuery对象 element DOMElement  一个DOM元素

filter(expr|obj|ele|fn) 概述 筛选出与指定表达式匹配的元素集合。 这个方法用于缩小匹配的范围。用逗号分隔多个表达式 参数 expr String  字符串值，包含供匹配当前元素集合的选择器表达式。 jQuery object object  现有的jQuery对象，以匹配当前的元素。 element Expression  一个用于匹配元素的DOM元素。 function(index) Function  一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

 https://www.php.cn/faq/374851.html

 

 

table设置am-table-hover 后，鼠标悬浮在该行时，背景颜色显示为#e9e9e9

如果该行有隐藏的白色图表，悬浮时能够看到，，这是需要设置如下样式：

tr:hover{
　　font[color="white"]{
　　color:#e9e9e9;
　　}
}

即可

 

无刷新更换页面url

window.history.pushState(state, title, url)

var url = document.URL   //获取当前页面的网址信息URL;
var num = url.indexOf('#');  //获取＃在的位置信息
if (num){
    URL = url.substring(0,num);  //截取网址信息
    history.pushState(null,null,URL);  //将网址设置
}

 

<style>
.gotop{
box-sizing: border-box;
display: inline-block;
width: 48px;
height: 48px;
font-size: 18px;
font-weight: 700;
line-height: 48px;
border-radius: 50%;
background-color: #eee;
color: #555555;
text-align: center;
padding-left: 0;
}
</style>
<div style="position: fixed;left: 90%;top: 90%;"><a href="#top" title="Back to top" class='gotop' id="go-top">Top</a>
</div>

 设置checkbox为只读(readOnly)的两种方式 

 

 

css 加粗

font-weight  值从100到900，最常用font-weight的值为bold

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用

1、在html对对象直接加粗可以用<b>或<strong>对其加粗
2、使用CSS加粗对象可以使用font-weight:bold即可实现加粗。

JS判断输入值是否为正整数等

使用test方法进行正则匹配

if (!(/(^[1-9]\d*$)/.test(num))) { 
　　　alert(‘输入的不是正整数’); 
　　　return false; 
}

附判断数字、浮点的正则表达：
”^\\d+$” //非负整数（正整数 + 0）
“^[0-9]*[1-9][0-9]*$” //正整数
“^((-\\d+)|(0+))$” //非正整数（负整数 + 0）
“^-[0-9]*[1-9][0-9]*$” //负整数
“^-?\\d+$” //整数
“^\\d+(\\.\\d+)?$” //非负浮点数（正浮点数 + 0）
“^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$” //正浮点数
“^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$” //非正浮点数（负浮点数 + 0）
“^(-?\\d+)(\\.\\d+)?$” //浮点数

/^[1-9][0-9]*([.][0-9]+)?$/ 非零开头的整数或小数
非零开头的整数或两位小数

/^[1-9][0-9]*([.][0-9]{1,2})?$/

/^[1-9][0-9]*([.][0-9]{2})?$/

 a:hover {text-decoration: underline;} 

 

下载excel时不想要刷新页面

function httpPost(URL, PARAMS, target="") {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.target = target;
//   temp.target = "_blank";
    temp.method = "post";
    temp.style.display = "none";

    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = PARAMS[x]['name'];
        opt.value = PARAMS[x]['value'];
        temp.appendChild(opt);
    }

    document.body.appendChild(temp);
    temp.submit();
    return temp;
}
    

function export_data(){
    if(!$("#s_product_id").val()){
        alert("Product can't be null!");
        return false;
    }
    url = "{:U('Admin/Ppa/export_excel/')}";
    conversion_data=$("#convart_data_form_id").serializeArray();
    httpPost(url, conversion_data, target="")
}

 

table中的select 下拉框显示不出来

 设置成默认值即可

 

js 计算7天后的日期

var weekly_start = new Date($('#end_time').val());
var weekly_end = new Date(weekly_start.getTime() + 7*24*60*60*1000);
$('#end_time').val($('#end_time').val()+' ~ '+formattedDate(weekly_end))

js 时间日期格式化 

 js 计算百分比

Number('0.5') 将数字字符串转为数字

parseInt('0.5') 转整数，返回0

day=day+Number(all_data.eq(i).val())

 

(4/5*100).toFixed(2)+'%'    ‘80.00%’

js input 设置超链接

<input style="width:100%;text-align:left; color:#bf2126; padding-left: 2px; background-color:#f8f8f8" type="button" onclick="open_release()" readonly="readonly" class="am-btn am-btn-default" value="9784">

效果如下：

 js 获取上传文件的文件名 input type=file

在浏览器端，JavaScript可以通过文件输入控件实现本地文件上传，但由于安全限制，无法直接获取本地文件的完整路径名。不过可以通过以下方式获取本地文件名：

通过文件输入控件获取文件对象

可以通过文件输入控件的 files 属性获取文件对象，文件对象中包含了文件名、大小等属性。示例代码如下：

<input type="file" id="fileInput">

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取第一个文件对象
const fileName = file.name; // 获取文件名
console.log(fileName);

在 JavaScript 中获取真实元素的宽度

要获得当前计算的实际尺寸，您有两种选择:

1. getComputedStyle(element,null).getPropertyValue("width")
2. element.getBoundingClientRect().width

第一个是一个以(px)为单位的 CSS 字符串，第二个是一个数字。

注意，getComputedStyle 是一个全局函数。旧的教程可能会告诉您使用 document.getDefaultView.getComputedStyle 等，这已不再是必需的。

亲试了第二种，非常好用，起先是使用$('#element').eq(0).outWidth()的方式获取宽度，但是明明宽度是99.5，获取出来的确实100，但使用上述的第二种，可以准确获取99.5

设置宽度的方式为 $('#element').css('width','500px')

https://www.coder.work/article/4137404

 

js with

个人的理解：with就是为了封装某个对象，减少某个对象的调用

比如：定义一个对象 var a={},a.name='张三';a.sex='女';

一般的调用方式 console.log(a.name); 或者 console.log(a.sex);

使用with之后的调用

with(a){　　

　　console.log(name);

　　console.log(sex);

}

 

js 校验16进制 和百分数

百分数相加

 

 

 

select 触发两次

 

 1. trigger会触发两次

2. data-am-validator会触发两次

 

页面上重新登录login

 

单行文本超出经常使用省略号，如何判断文本是否超出

<style type="text/css">  
#ellipsis{  
    width: 100px;  
    overflow: hidden;   /* 如果内容超出父级容器，超出部分将会被隐藏 */
    white-space: nowrap;   /* 禁止换行 */
    text-overflow: ellipsis;   /* 超出部分用省略号表示 */
}  
</style>  
<body>  
    <div id="ellipsis">今天是你的生日，我的祖国！！！</div>  
    <script>  
        var clientWidth = document.getElementById("ellipsis").clientWidth;  
        var scrollWidth = document.getElementById("ellipsis").scrollWidth;  
        if(clientWidth<scrollWidth){  
            alert("已省略……");  
        }  
    </script>  
</body>

overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：

• visible: 默认值。内容不会回修剪，可以呈现在元素框之外。
• hidden: 如果内容超出父级容器，超出部分将会被隐藏
• scroll: 无论是否超出容器，都会出现一个滚动条。
• auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。

white-space用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)

• normal：默认，空白会被浏览器忽略。
• nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
• pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
• pre-wrap：保留空白符序列，但是正常地进行换行。
• pre-line：合并空白符序列，但是保留换行符。

 

 

form action

一种   action="{:U('Admin/Ipxact/update_cids')}"

一种   action='/Ipxact/ipxact_task'，这种可能会有问题

Form中button按钮的onclick事件失灵

最近做项目时，发现button的onclick事件在没有form时是正常工作的。如果把button放到form中，类似：

<form action="xxx">

<button οnclick="yyy"></button>

</form>

在网上找了下资料后，终于解决了，记录如下：

button中的type 属性规定了按钮的类型。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。我用的是谷歌浏览器，默认也是“submit”，所以button的onclick事件会被form的action所取代。解决方法是指定button的type类型为button。类似如下：

<form action="xxx">

<button οnclick="yyy" type=“button”></button>

</form>

 

js 获取传参this的值

onkeyup="getCustomerInfo(this)" 

 

function getCustomerInfo(obj){
　　console.log(obj)
　　console.log(obj.value)
}

Js（DOM） 和Jq 对象的相互转换

只有Dom对象 才能使用Dom中的方法，JQuery对象才能使用 JQuery中的方法，两者不可以相互混用

 jq--->dom

JQuery提供 了两种方法来转换    [index]  和  get(index);

方法一

var $cr=$("#cr");  //jq对象
var cr = $cr[0];  //jq 转dom

方法二

var cr=$("#cr");  //jq对象
var cr=$cr.get(0); //jq转dom

dom-->jq

dom对象 转为jq比较简单，

var cr=document.getElementById("cr");  //dom对象
var $cr=$(cf);  //dom转jq

通过 以上的方法，可以在dom对象和jq对象中相互转换

 

js 删除指定元素

ps  变量名前不加var，设置的变量是全局变量，在哪里都可以用它的值

 

all_cids：

 想要删掉的的cid_name是500000A5

 

 js 移除required 

 

if($('#pullram').val()=='Yes'){
    $('#format_obf_div').hide();
    $('#format_pullram_div').show();
    $('#formal_obf').removeAttr('required')
    $('#formal_pullram').attr('required','required')
}else{
    $('#format_obf_div').show();
    $('#format_pullram_div').hide();
    $('#formal_obf').attr('required','required')
    $('#formal_pullram').removeAttr('required')
}

html  required属性

$('#source_type_div input[type=text],#source_type_div select,#released_pkg_div input[type=text],#released_pkg_div select').each(function() {
　　$(this).attr('required',true);
});

 

$('#source_type_div input[type=text],#source_type_div select,#released_pkg_div input[type=text],#released_pkg_div select').each(function() {
　　$(this).removeAttr('required');
});

 

 设置readonly

$('input').attr('readonly','readonly')
$('select').selected('disable')
$('button.am-selected-btn').attr('disabled','disabled')
$('select').next().attr('style','width: 100%;!-- $(':button:disabled i').addClass('opacity4') //Fade select -->
if('{$edit_owners}'){
$('#release_owner').selected('enable')
$('#fpga_owner').selected('enable')
$('#release_owner').next().attr('style','width: 100%;')
$('#fpga_owner').next().attr('style','width: 100%;')

<!-- $('#release_owner :button i').removeClass('opacity4') //background-color:#eeeeee -->
<!-- $('#fpga_owner :button i').removeClass('opacity4') -->

$('#release_owner').next().eq(0).find('button>i').removeClass('opacity4')
$('#fpga_owner').next().eq(0).find('button>i').removeClass('opacity4')