【JS】知识笔记

一、JS文件位置

多个.JS文件最好合并到一个文件中，减少加载页面时发送的请求数量。
某个单独页面需要的js，最好放在HTML文档的最后，</body>之前，这样能使浏览器更快地加载页面。先加载完界面，再执行脚本，不至于先执行复杂脚本带来的页面显示不全。
侵入式与非侵入式JavaScript

　　侵入式JavaScript

jQuery出现以前，在同一个文件中混杂JavaScript代码和HTML标记是非常流行的做法。将JavaScript代码作为某个特性的值放入HTML元素中是很常见的，如以下代码：

<div onclick="javascript:alert('click');">Testing, testing</div>

　　非侵入式JavaScript

jQuery改变了这种情况，因为jQuery提供了查找元素和捕获单击事件更好的方法。现在可以从HTML特性中移除JavaScript代码了。事实上，可以将javascript代码与HTML完全分离。

即使查看视图渲染的HTML标记，也看不到任何的javascript代码，脚本留下的唯一的痕迹是一个或多个引用javascript文件的<script>标签。

二、JS判断是否为空

方法一

var keyVal= $("#key").val();  

if(keyVal==undefined || keyVal=="" || keyVal==null){  

     alert("隐藏域的值为空");  

}

此方法效率不高，不建议。

方法二

var keyVal= $("#key").val();  

if(keyVal.length==0){  

     alert("隐藏域的值为空");  

}

此方法效率高。

三、JS中的text()，html() ，val()的区别

　　text()和html()都可以用于元素文本的存取，但是html()不仅可以用于元素文本的存取，还可以用于元素节点的存取。

　　val()不同于text()和html()，val()用于input节点内容的存取。

1. text()

var text = $("div").text(); //div元素

console.log(text);

console:text

2. html()

var str = $("div").html();

console.log(str);

console：<p>text</p> //取到了元素节点

3. val()

var str = $("input").val(); //只用于input元素

console.log(str);

console:text

四、JS中获得Webconfig的配置信息

var timer= (<%=System.Web.Configuration.WebConfigurationManager.AppSettings["homeTimer"]%>);

setTimeout('myrefresh()', timer); //指定x秒刷新一次

五、JS中把任意数字转为二进制数

二进制输出：toString函数

var m=3;

m.toString(2);

结果 "11"

NumberObject.toString(radix)

Radix：规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。

六、JS中生成GUID

function  newGuid()
{
    var guid = "";
    for (var i = 1; i <= 32; i++){
      var n = Math.floor(Math.random()*16.0).toString(16);
      guid +=   n;
      if((i==8)||(i==12)||(i==16)||(i==20))
        guid += "-";  //可不要
    }
    return guid;    
}

七、JS中判断是否为数字

　　完整方法，采用正则：

var r=/^[1-9][0-9]+$/gi;
document.writeln(r.test("011"));//false
document.writeln(r.test("11"));//true

　　按照特定需求来定正则:

若输入的首位可以是0，则 var r=/^[0-9]+$/gi;

若输入的可以为空，则 var r=/^[0-9]*$/gi;

若输入的可以为负数，则var r = /^(-)?([0-9]*)$/i;

若输入的可以含小数点【实际上js中Number是可以为小数的】，则var r = /^(-)?([0-9]*)(.)?([0-9]{2})$/i; 两位小数

参考：jquery里判断是否为数字的各种方法及每种方法的优缺点

注意，上面的正则存在：相同的正则多次调用test()返回的值却不同的问题

举例：

var reg = /^1[345678][0-9]{9}$/g;
console.log(reg.test(15328044636));
console.log(reg.test(15328044636));

会发现控制台打印的数据却是：

true

false

问题原因：这是因为正则reg的g属性，设置的全局匹配。RegExp有一个lastIndex属性，来保存索引开始位置。

　　上面的问题，第一次调用的lastIndex值为0，到了第二次调用，值变成了11。

解决方案

第一种方案是将g去掉，关闭全局匹配。
第二种就是在每次匹配之前将lastIndex的值设置为0。

var reg = /^1[345678][0-9]{9}$/g;
console.log(reg.lastIndex, reg.test(15328044636));
reg.lastIndex = 0;
console.log(reg.lastIndex, reg.test(15328044636));

//打印的值
0 true
0 true

View Code

八、JS中转义字符

　　最近遇到调接口返回的字符串中含 & ，到界面显示确成了 & 。

转义字符：

参考：【转义字符】HTML 字符实体< &gt: &等

默认情况下中文，空格，‘&’等字符都会被浏览器自动转义一次。

自定义转换方法：

/**
 * @function escapeHTML 转义html脚本 < > & " '
 * @param a -
 *            字符串
 */
escapeHTML: function(a){
    a = "" + a;
    return a.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");;
},
/**
 * @function unescapeHTML 还原html脚本 < > & " '
 * @param a -
 *            字符串
 */
unescapeHTML: function(a){
    a = "" + a;
    return a.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
},

View Code

1，escapeHTML将< > & " '转成字符实体
使用场景：
（1）用户在页面中录入（比如输入框） <script>alert(2);</script>， js将该内容提交给后端保存
（2）显示时，后端将字符串返回前端；js接收到之后：
a, 使用escapeHTML，将字符串转为 <script>alert(2);</script>此时，浏览器将能正确解析，因为浏览器接收到实体字符后，转成对应的尖括号等。
b, 不使用escapeHTML，浏览器一看到<，便认为是html标签的开始，直接把刚才的字符串当脚本执行了，这就是xss漏洞。

2，unescapeHTML将字符实体转成< > & " '
使用场景：
后端将已经转义后的内容显示到页面；比如<script>alert(2);</script>
js收到后：
a，前端进行unescapeHTML，则可以直接dom操作，将标签显示到页面。
b，前端没有unescapeHTML，则原样输出<script>alert(2);</script>，但此时并没有执行。

九、JS中url的应用

　　1、打开新窗体【另开窗口】：window.open(url, '_blank');

　　2、刷选当前窗口：window.location.reload();

　 3、刷新当前顶层窗口：window.top.location.reload(); 【eg：使用了artDialog 弹出窗口，在窗口上进行操作时，想操作原窗口，需要用window.top】

十、JS中数组去除空值

　　有时定义一个数组：var array=[ ]; 然后赋值array=" "; 此时判断其长度length=1。需要将空字符串删掉

/**
 * 扩展Array方法, 去除数组中空白数据
 */
Array.prototype.notempty = function() {
    var arr = [];
    this.map(function(val, index) {
        //过滤规则为，不为空串、不为null、不为undefined，也可自行修改
        if (val !== "" && val != undefined) {
            arr.push(val);
        }
    });
    return arr;
}

View Code

//调用方法
var a = [1, 2, undefined, 4, "", 5, null, 7, 0, 8];
var b = a.notempty();
//输出b [1, 2, 4, 5, 7, 0, 8]

十一、JS中缓存数据Cookie

　　1、读取cookie：var x = document.cookie;

　　2、设置cookie：document.cookie="username=John Doe";

　　3、删除cookie：类似设置，document.cookie="username="; 或者设置一个过期的时间

//设置某个key的cookie值
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}

//获取某个特定key的cookie值
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

View Code

更多参考：JavaScript Cookie

十二、JS中数据序列化与反序列化

需要引入 jquery.json.js

 $(function () {
            var data = {
                orderID: "ModelOrderID",
                pnr: "hello"
            };
            var jsonStr = $.toJSON(data);  //把数组转换成json字符串
            console.log(jsonStr);
            var json = $.parseJSON(jsonStr);   //将json字符串反序列化为json对象
            console.log(json);

        })

View Code

分部输出：

{"orderID":"ModelOrderID","pnr":"hello"}

和

十三、JS中过滤函数$.grep()

$.grep() 函数使用指定的函数过滤数组中的元素，并返回过滤后的数组。

提示：源数组不会受到影响，过滤结果只反映在返回的结果数组中。

$.grep( array, function [, invert ] )

参数	描述
array	Array类型将被过滤的数组。
function	Function类型指定的过滤函数。grep()方法为function提供了两个参数：其一为当前迭代的数组元素，其二是当前迭代元素在数组中的索引。
invert	可选。 Boolean类型默认值为false，指定是否反转过滤结果。如果参数invert为true，则结果数组将包含function返回false的所有元素。

以下示例:

var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    });
console.log(arr);//[1,2]

var arr =$.grep( [0,1,2], function(n,i){
        return n > 0;
    },true);//返回n<=0的元素
console.log(arr);//[0]

View Code

十四、JS中遍历$().each()和$.each()

　　在jquery中，遍历对象和数组，经常会用到$().each和$.each()，两个方法。

1、$().each 在dom处理上面用的较多。

如果页面有多个input标签类型为checkbox，对于这时用$().each来处理多个checkbook，例如：

$(“input[name=’ch’]”).each(function(i){
if($(this).attr(‘checked’)==true)
{
//一些操作代码
}

View Code

回调函数是可以传递参数，i就为遍历的索引。

2、遍历一个数组通常用$.each()来处理

例如：

$.each([{name:"limeng",email:"xfjylimeng"},{name:"hehe",email:"xfjylimeng"}],function(i,n)
{
alert("索引:"+i+"对应值为："+n.name);
});
//参数i为遍历索引值，n为当前的遍历对象.

var arr1 = [ "one", "two", "three", "four", "five" ];
$.each(arr1, function(){
alert(this);
});
//输出：one   two  three  four   five

var arr2 = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
$.each(arr2, function(i, item){
alert(item[0]);
});
//输出：1   4   7

var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(obj, function(key, val) {
alert(obj[key]);
});
//输出：1   2  3  4  5

View Code

十五、JS中的元素设置锚点

　　锚点其实就是可以让页面定位到某个位置上的点。在高度较高的页面中经常见到。

有以下几种方式：

1、a标签href=#XX和id来绑定锚点

在html 4.0以前，只有使用 <a> 标签的 name 属性才能创建片段标识符。id 属性的出现建议用id，因为 id 标识符几乎可以用在所有的标签中。

eg：<a href="#a01"></a>

<p id="a01">练习</p>
<p>练习</p>

不好，页面会有刷新感

2、 scrollIntoView()

参考：https://blog.csdn.net/qq_38047742/article/details/82621666

Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内

锚点定位是一个再熟悉不过的操作了，通常会用a标签href=#XX去实现，不过这样做，有一个问题，就是页面会有刷新感，而且地址栏会有变化，F5刷新，则#XXX还是显示在地址栏里，这样如果要进一步进行有关地址栏url的操作，就不得不再做些判断，所以寻找一些新的方法。

如果要求不是很高，scrollIntoView()这个方法就可以取代传统锚点定位，它是利用滚动原理，来将相应的元素滚动到可是区域内。

首先需要说明的是，这个方法并没有写入标准，但是大多数主流浏览器已经支持或部分支持其功能了，所以可以放心使用，当然如果有朝一日标准出来了，那就按标准来吧。

scrollIntoView实现简单的锚点定位

将指定元素定位到浏览器顶部，底部，中间

element.scrollIntoView(); // 等同于element.scrollIntoView(true)

element.scrollIntoView(alignToTop); // Boolean型参数

element.scrollIntoView(scrollIntoViewOptions); // Object型参数

　　scrollIntoViewOptions参数可选

如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: "start", inline: "nearest"}。这是这个参数的默认值。

如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: "end", inline: "nearest"}。

3、 jquery animate实现锚点慢慢平滑滚动效果

参考： https://www.cnblogs.com/firstdream/p/7424692.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js平滑滚动到顶部、底部、指定地方</title> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script> 
<style> 
.box{ height:200px; width:100%; background:#ccc; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003}; 
</style> 
</head> 
<body> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box"></div> 
<div class="box bottom"></div> 
<div class="location"> 
<p class="scroll_top">返回顶部</p> 
<p class="scroll_a">产品介绍</p> 
<p class="scroll_bottom">滑到底部</p> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(
    function($){ 
        $('.scroll_top').click(
            function(){
                $('html,body').animate({scrollTop: '0px'}, 800);
            }); 
            $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);
    }); 
$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);}); }); 
</script> 
</body> 
</html>

View Code

4、 浏览器兼容性问题

若写成：

$("body ").animate({

scrollTop: $('#id-hotel-policy').offset().top - intMinusTopBig

}, 8, function () {

// Animation complete.

});

则在高版本的chrome浏览器【67版】和firefox浏览器中都不可用。需要改为

$("body,html").animate({

scrollTop: $('#id-hotel-policy').offset().top - intMinusTopBig

}, 8, function () {

// Animation complete.

});

参考：关于页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题

发送到

十六、JS中下拉框的change事件

　　HTML：

 <div>
        <select id="selectID">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
    </div>

View Code

　　JS：

 $(function () {
            $('#selectID').trigger('change'); //移入時 觸發select的change事件，即下面的事件

            //绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
            $("#selectID").change(function () { SelectChange(); });
        });

        function SelectChange() {
            //获取下拉框选中项的text属性值
            var selectText = $("#selectID").find("option:selected").text();
            alert(selectText);
            //获取下拉框选中项的value属性值
            var selectValue = $("#selectID").val();
            alert(selectValue);
            //获取下拉框选中项的index属性值
            var selectIndex = $("#selectID").get(0).selectedIndex;
            alert(selectIndex);
            ////获取下拉框最大的index属性值
            var selectMaxIndex = $("#selectID option:last").attr("index");
            alert(selectMaxIndex);
        }

View Code

十七、JS中多张图片切换(不循环)

思路：

1.先获取图片的id

2.定义一个存放多个图片的数组，并给它一个初始编号 num=0;

3.当点击图片时，先让num自增，然后判断num的值是否和数组的长度相等，如果相等，就让num回到0；

4.最后就把arr[num]赋给oImg的src属性，就能读取到图片的路径了。

//初始化的時候加載參數
    var oImg = $('.left-part').children('img');
    var arr = ['https://dimg04.c-ctrip.com/images/fd/hotel/g4/M09/4B/1C/CggYHlX364OAB964AADVhVE_jjU887_C_800_525_Q70.jpg', 'https://dimg04.c-ctrip.com/images/2002070000002qls70D99_C_800_525_Q70.jpg', 'https://dimg04.c-ctrip.com/images/200g0i00000099f6p39DB_C_800_525_Q70.jpg'];
    var num = 3;
    var index = 0;
    $('#picIndex').text(index+1);
    $('#picNum').text(num);
    oImg.attr('src', arr[index]);
    $('.next-btn').click(function () {
        if (index >= arr.length-1) {
            return false;
        }
        index++;
        $('#picIndex').text(index+1);
        oImg.attr('src', arr[index]);
    });
    $('.pre-btn').click(function () {
        if (index <= 0) {
            return false;
        }
        index--;
        $('#picIndex').text(index + 1);
        oImg.attr('src', arr[index]);
    });

View Code

十八、JS中判断是否含有某class样式

if ($(”#div”).attr("class").indexOf("glyphicon-circle-arrow-up") > -1) {

}

1、my97日期控件

日期控件使用

<div class="el-input el-input--small">
<span style="45%;display:inline-block;"> @Html.TextBoxFor(m => m.Request.ArrivalDateStart, new { style = "90px", onfocus = "WdatePicker({skin:'wingon',doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'%y/%M/%d',onpicked:function(){Request_ArrivalDateEnd.focus();}})" }) </span>
—<span style="45%;display:inline-block;"> @Html.TextBoxFor(m => m.Request.ArrivalDateEnd, new { style = "90px", onfocus = "WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd',minDate:'#F{$dp.$D(\'Request_ArrivalDateStart\',{d:0})}',skin:'wingon'})" })</span>
</div>

View Code

注：引入js <script type="text/javascript" src="@Url.Content("~/Scripts/FRMy97DatePicker/WdatePicker.js")"></script>

开始时间的 onpicked 可要可不要

Request_ArrivalDateStart 是开始时间控件的id，

参考：http://www.my97.net/demo/index.htm