工作上的一些js内容

淩亂°似流年 2022-03-10 13:48 201阅读 0赞

//修改input的placeholder内容
    document.getElementById("J_wkitTextarea").setAttribute("placeholder","您的聊天次数不够")
    
    //禁用input
    document.getElementById("J_wkitTextarea").disabled="true"
    //取消的话disabled=“”空 取消禁用input
    document.getElementById("J_wkitTextarea").value;获取input的内容
    //Jq移除disabled属性 
    $(“xxx”).removeAttr('disabled');
    //jq添加disabled属性 
    $(“xxx”).attr('disabled'，‘disabled’);
    
    //js设置自定义属性 必须要有id才能设置
    var testEle = document.getElementById("test")
    testEle.setAttribute("test","aaa"); // 设置自定义属性 
    //jq设置自定义属性
    $("xxx").attr('value',1)
    
    //jq判断该元素是否包含一个确定的类（class）
    $('div').is('.className');  //返回的是true或者false，注意 className前面的点必须要有
    $('div').hasClass('redColor');	//返回的是true或者false className前面的点不需要，但是低版本的jq就需要
    
    //js改变某个元素下的class属性，例如display:none改为diaplay:block
    document.getElementById("id").style.display="block";
    
    //删除标签下的所有内容 
    document.getElementById("ok").innerHTML = "";
    
    //jq查询classname 然后进行修改class
    $("div").find(“.className”).addClass(“”)		
    
    //可以用当前的元素下寻找该元素的孩子下的孩子寻找有class为‘’的进行操作（增加或删除class）
    $(this).children().find(".className").removeClass("class");	//该元素的子元素下查找
    $(this).parent().parent().children().find(".className").addClass("class");//该元素的父元素的父元素下的子元素
    
    //js页面刷新
    window.location.reload()		
    
    //jq用模板字符串拼接循环的数据
    For（var i=0;i<data.length;i++）{ //循环出数据
    var Li=document.createElement('li');  //需要循环的元素
    var ul=document.getElementById("myfollowmembers"); 	//父元素
    Li.className='class';	//给该元素添加class
    Li.innerHTML=`<div> ${ data[i]}</div>`;
    Ul.appendChild(Li);
    }
    
    //Jq楼层事件（滚动到指定位置）
    Function(){ 
    Var tp=$(“#xx”).offset();//得到id这个位置的坐标，用offset（）
    $(“body,html”).animate({ 
    	scrollTop:tp.top;	//让body的scrollTop等于id的top，就实现了滚动
    	},1000)	//滚动的时间
    }
    
    //页面自动刷新： 20秒刷新一次 设置meta标签
    <meta http-equiv="refresh" content="20">
    
    //Js复选框全选、反选与单个选择
    //全选与反选
    $("#check_all").click(function(){ 
        var $seleAll=$(this);
        var rs=$seleAll.prop("checked");
        $(".selectedItem").prop("checked",rs);  //给selectedItem赋予checked属性为true还是false
    });  
    //单选
    $(".selectedItem").click(function(){ 
        var selectCount=0;
        var  selectedItem=$(".selectedItem").length;    //获取到该复选框的length
        for(var i=1;i<=selectedItem;i++){    //遍历出tbody下的所有复选框是否有被选中
           var sfx=$("tbody tr:nth-child("+i+") .selectedItem").prop("checked");
           if(sfx==true){   //如果有被选中，则++
              selectCount++;
           }
         }
         if(selectCount==selectedItem){   //全部被选中
            $("#check_all").prop("checked",true);
         }else if (selectCount>0&&selectCount!=selectedItem){     //没有全部被选中
            $("#check_all").prop("checked",false);
         }
    });
    
    //H5页面点击使用qq这个功能（就是要联系该qq）更改123456789，填写成想要的qq号，需要添加好友
    <a href="http://wpa.qq.com/msgrd?v=3&uin=123456789&site=qq&menu=yes" target="_blank"></a>	
    //强制打开临时会话
    <a href="tencent://message/?Menu=yes&uin=这里是QQ号& Service=300&sigT=45a1e5847943b64c6ff3990f8a9e644d2b31356cb0b4ac6b24663a3c8dd0f8aa12a595b1714f9d45"></a>
    
    
    
    //Js的鼠标移入(mouseover)（mouseenter）移出(mouseout)（mouseleave）事件 
    //主要还是使用mouseenter和mouseleave，mouseover和mouseout在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言
    //mouseenter和mouseleave只在父元素触发，当鼠标穿过一个元素时，只会触发一次。
    var v111 = document.getElementById('div111'); v111.onmouseout = function () { }
    //jq的鼠标移入(mouseover)（mouseenter）移出(mouseout)（mouseleave）事件 
    $(“”).mouseout(function(){ })
    //在标签中使用
    <div onmouseout="fun()"></div>
    
    //后端循环出一堆数据（按顺序的），然后前端要做点击随机抽取几个数据显示出来
    var cnxh=$(".cnxhleng>div").length;	//后端循环出来数据的个数 然后要每个循环出来的数据给隐藏掉（display: none;最好给个class，方便操作）
    $(".spanxz").click(()=>{ 
            var arrs=[];
            if(cnxh<=3){     //判断猜你喜欢的数据是否有超过3个
                $(".nodata").removeClass("divnone");
                setTimeout(()=>{ 
                    $(".nodata").addClass("divnone");
                },2000);
            }else{ 
                $(".cnxhleng>div").addClass("divnone"); //如果猜你喜欢的数据超过3个，那么先把所有的都给隐藏了
                function fn1(){      //闭包
                    for(let i=1;i>0;i++){    //进行循环
                        var suj=Math.ceil(Math.random()*cnxh);  //随机数，上取整，取1-18的证书
                        arrs.push(suj); //把该整数添加到数组中
                        var arr=[...new Set(arrs)]; //去掉重复的操作
                        if(arr.length==3){   //如果这个新数组的个数等于3个，那么就打断循环
                            break;
                        }
                    }
                    function fn2(){ 
                        for(let i=0;i<3;i++){ 
                            $(".cnxhleng>div:nth-child("+arr[i]+")").removeClass("divnone");    //遍历出每一个数组，然后显示出内容
                        }
                    }
                    fn2();
                }
                fn1();
            }
        })
    
    //js设置rem（自适应，在手机端或者pc端），640为设计稿的尺寸，clientWidth为当前设备的宽度
    document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 + 'px'
    
    Number.isInteger（）//判断是不是整数
    Number.isFiniet（）//判断是不是数字
    Math.trunc（数字）//保留整数部分，去掉小数点后面的数字
    typeof(a)	//得到a的返回值，字符串、数字、浮点数等
    isNaN(a);	//是数字则返回false，不够严谨，在为空的情况下也是返回false
    var reg=/^[0-9]+.?[0-9]*$/;reg.test(num)//正则判断是不是数字，返回值为true或false
    
    // 一个快速留言框，右侧有快速留言的内容，判断不重复
    let va=$(this).html();	//获取到要快速留言的内容
    let s = document.getElementById("leaveContent").value;	//获取到textarea框里的内容
    if (s.indexOf(va) == -1) document.getElementById("leaveContent").value += va + "\n";	//判断，点击的留言内容是否在textarea里出现过，没有就添加到里面
    
    let hei= window.screen.height;//获取移动设备的高
    let wid=window.screen.width;//获取移动设备的宽
    
    //js修改、添加css
    let obj=document.getElementById('div');
    div.style.cssText="height:123px";
    
    //jq修改、添加css
    $(".className").css("height","123px");
    
    //js jq获取元素到顶部的距离
    $("p").offset().top;
    
    //楼层事件，头部为固定定位
    function jump(em){ 	//em为定位id使用，aboutLink为每个楼层通用的部分id值，例如楼层1的id为aboutLink0,2层为aboutLink1
            $("html,body").animate({  scrollTop: $("#aboutLink" + em).offset().top - 85 }, 1000);	//85为固定定位块的高度
            window.location.hash = '#aboutLink' + em;
        }
    
    arr.reverse()	//用于颠倒数组中元素的顺序
    
    /*html5shiv.min.js：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问*/
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    /*respond.min.js：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询*/
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    
    /*监听浏览器窗口变化 原链接[https://blog.csdn.net/qq_35989226/article/details/80417746](https://blog.csdn.net/qq_35989226/article/details/80417746)*/
    //js 方法一
    window.onresize = function() { 
        ...
    }
    //js 方法二
    window.addEventListener('resize', function() { 
        ...
    })
    //jq
    $(window).resize(function() { 
       ...
    })
    
    //手机号码隐藏中间4个数字
    let newPhone=phone.substr(0, 3) + '****' + phone.substr(7);
    //js提取字符串中的数字
    var str = 'Rect(194,1099 - 1080,1250)';
    var arr = str.match(/\d+(.\d+)?/g); 
    console.log(arr)//['194,1099','1080,1250']

用js在textarea中实现换行用KaTeX parse error: Expected 'EOF', got '\#' at position 1: \#̲10;或者\#13;只能用在$(“textarea”).html()中。用”\\n”最实用

遮罩层 用css制作 position:fixed;宽高设为100%，背景色用rgba 加透明度

移动端滑动事件$().on(‘touchmove’,function()\{\})，在function里进行判断，上拉到距离顶部多少像素时，进行数据加载

元素中添加onclick的时候，要在后面添加this，不然用 ( t h i s ) 绑 定 的 是 w i n d o w ， o n c l i c k = f u n （ t h i s ） 点 击 的 时 候 用 (this)绑定的是window，οnclick=fun（this）点击的时候用 (this)绑定的是window，onclick=fun（this）点击的时候用(this)才会获取到点击的对象 function fun(e)\{$(e)xxxxxx\}

//删除该元素  
$(".class").remove();  
//删除该元素下的元素  
$(".class div").remove();

移动页面弹出遮罩层，让页面禁止滚动（div+css+js） 一个简单的思路  
简单的来说，就是点击出现遮罩层后，把body的高度设置为移动设备的高度，然后超出隐藏(overflow: hidden)，这样body的内容就不会发生滚动，就不会影响遮罩层里的滚动；关闭遮罩层就去掉隐藏属性。

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**