js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

时间：2023-03-08 15:46:12

js中对arry数组的各种操作小结

　　最近工作比较轻松，于是就花时间从头到尾的对js进行了详细的学习和复习，在看书的过程中，发现自己平时在做项目的过程中有很多地方想得不过全面，写的不够合理，所以说啊，为了在以后的工作中写出最优化的代码，我们必须要不断的充电，不断的提高自己的技能。

　　废话不多说，现在我将最近看的有关arry的一些心德和使用分享出来，希望能够给大家带来小小的一点帮助。谢谢！

　　可以这样说Arry应该是我们在平时写js代码中，使用频率最高的，在平时的项目中，很多数据都是可以通过arry来存储、操作等任务。

　　在js中有关Arry数组与我们平时接触的语言也会有着相当大的区别。js中的arry中所存放的数据比较灵活，可以再通过一arry中存放不同类型的数据，同时arry中的数组成都也是动态改变的，arry的长度会根据数组中的数据进行实时的动态改变。

　　1、Arry的定义方式也有两种方式

　　方式1、

　　　　var arr1=new Array();

　　　　var arr2=new Array(10);

　　　　var arr3=new Array("dkjsl","7",787);    其实new关键字是可以省略的

　　方式2、

　       var arr1=[];

　　　  var arr2=[45,45,78,45];

　　2、检测验证数组

　　　　在平时项目开发中，我们往往会遇到，判断一个对象是否为数组（函数的参数传递中），那么如果判断一个对象是否为数组呢，有以下两种方式

　　

　　方式1、

　　　if(value instanseof Array){

}

　　方式2、

　　　if(Array.isArray(value)){

}//该方法只使用与高版本的浏览器：IE9+、Firefox4+/Chrome

　　3、将数组转换为字符串

value.toString(); value.valueOf();------返回的字符串是将数组中的值用‘,‘连接起来

　　value.jion('-');----返回的字符串可以用户自定义连接的方式

　　4、数组模拟栈和队列操作

　　　　栈操作的方式：先进后出原则----通过重数组尾部添加数据项，然后在从数组的尾部获取尾部数据项

　　　　　　push();----就是在数组的尾部添加数据项，该方法的参数个数可以自定义

　　　　　　pop();---该方法就是获取数组的最尾部的一个数据项，该函数无需传递任何参数

　　　　队列操作的方式：先进先出原则---通过从数组的头部插入数据和获取数据项来模拟实现

　　　　　　　shift();---获取数组的头部一项的数据信息

　　　　　　　unshift();--与shift完全相反，就是向数组的头部插入数据项信息

　　5、数组的排序操作

　　　　js中提供的数组排序的函数有两个：reverse()----直接倒序排列

　　　　　　　　　　　　　　　　　　　　sort（）-----顺序排列数组的项（是按照字符串排序方式）

　　　　只利用js提供的两种排序方式完全不能满足平时项目的要求，为此我们可以采用扩张方式来实现对数组的倒序和顺序方式排序；

　　　　function compareUp(value1.valu2){  //升序

　　　　　　return value1-valu2;

　　　　}

　　

　　　　function compareDown(value1.valu2){//降序

　　　　　　return -value1+valu2;

　　　　}

　　　　value.sort(compareUp/compareDown);

　　　　6、其他操作方法

　　　　　　组合：就是在一个或者多个数组或者数据项组合到一个数组中   value.concat()

　　　　　　拆分获取：就是通过拆分获取数组中指定的数据项---value.slice(startPlth,length)--当参数为负数时，会通过数组的长度与参数求和得到新的参数

　　　　　　删除插入法：删除和插入都是用同一个方法来实现--splice（），通过用户传入的参数来实现删除和插入

　　　　　　　　　参数1：删除插入的开始位置

　　　　　　　　　参数2：删除的数据个数

　　　　　　　　　参数3---n：要插入的数据项

　　　　　　　  　　当用户要实现删除操作时，只需传入参数1和参数2即可

　　　　　　　　　  当用户需要实现插入操作时，只需要将参数2设置为0即可

　　　　　　位置方法：就是查找元素在数组中的位置--index()--从头部开始搜索   lastindex（）---从尾部开始搜索    返回搜索到元素第一次出现的位置

瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据

瀑布流加载显示数据，在当下已经用的很普遍，尤其是我们在做网上商城时，在产品列表页面已经被普遍使用。

对于实现瀑布流布局的解决方案主要有以下两种方式：

1、对每一条显示数据使用绝对定位+浮动的方式，这样也会有一个问题----必须要知道每一条信息的具体高宽度

2、采用列布局，将每一条数据依次放置到每一列

其实两者的实现原理都是大同小异，现在我将针对第二种解决方案，用一个具体的事例来说明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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>
    <title></title>
    <style type="text/css">
    body,ul,li{margin:0;margin:0;}
    ul{list-style:none;}
    .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
    /*瀑布流*/
    /*.wallList{width:860px;}*/
    .wallList li{float:left;display:inline;margin-right:16px;}
    .wallList li a{background:#eee;border:1px solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
    .wallList li a:hover{border-color:#f60;}
    .wallList li .name{display:block;text-align:center;padding:8px 0;}
    .loadTips{text-align:center;padding:15px 0;}
    </style>
</head>
<body>
    <div class="wallList" id="wallList">
        <ul class="clearfix">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <p class="loadTips" id="loadTips">
            19880902 <span>正在加载......</span></p>
    </div>
</body>
</html>
<script src="jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
    // 数据格式
    var testJson = {
        "status": 1,
        "data": [
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片1" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片2" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片3" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片4" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片5" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x260/eee/fff", "width": 240, "height": 260, "name": "图片6" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片7" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片8" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x265/B5E61D/fff", "width": 240, "height": 265, "name": "图片9" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片10" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x310/B5E61D/fff", "width": 240, "height": 310, "name": "图片11" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片12" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x150/B5E61D/fff", "width": 240, "height": 150, "name": "图片13" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x165/B5E61D/fff", "width": 240, "height": 165, "name": "图片14" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x100/B5E61D/fff", "width": 240, "height": 100, "name": "图片15" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片16" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x225/B5E61D/fff", "width": 240, "height": 225, "name": "图片17" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片18" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片19" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片20" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片21" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片22" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片23" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片24" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片25" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片26" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片27" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片28" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片29" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/B5E61D/fff", "width": 240, "height": 210, "name": "图片30" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x300/B5E61D/fff", "width": 240, "height": 300, "name": "图片31" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/333/fff", "width": 240, "height": 210, "name": "图片32" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x190/f60/fff", "width": 240, "height": 190, "name": "图片33" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x230/B5E61D/fff", "width": 240, "height": 230, "name": "图片34" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x280/B5E61D/fff", "width": 240, "height": 280, "name": "图片35" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x210/eee/fff", "width": 240, "height": 210, "name": "图片36" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x180/000/fff", "width": 240, "height": 180, "name": "图片37" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x240/B5E61D/fff", "width": 240, "height": 240, "name": "图片38" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x195/B5E61D/fff", "width": 240, "height": 195, "name": "图片39" },
            { "href": "http:xxxxxxx", "src": "http://dummyimage.com/240x245/259/fff", "width": 240, "height": 245, "name": "图片40" }
        ]
    }
    var wallPic = function () {
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
            oTop = 0, //滚动判断的值
            row = 5, //列数
            page = 1, //ajax请求的页码值
            url = 'xxxx', //ajax请求地址
            on_off = true; //插入结构的开关，防止ajax错误性多次加载数据
        return {
            fillData: function (callback) {
                var _that = this;
                on_off = false;
                /* ajax
                --------------------*/
                // $.get(url,{ page:page,count:30 },function(json){
                //     if(json.status==1){
                //         _that.appendHTML(json.data);
                //         on_off = true;
                //         page++;
                //     }else{
                //         _that.loadedTips();
                //     }
                // },'json');
                /* 模拟测试-设置定时器模拟ajax请求数据
                -----------------------*/
                setTimeout(function () {
                    // 模拟终止
                    if (page == 5) {
                        _that.loadedTips();
                        return;
                    }
                    _that.appendHTML(testJson.data);
                    on_off = true;
                    page++;
                }, 400);
            },
            appendHTML: function (data) {
                var len = data.length,
                    n = 0;
                for (; n < len; n++) {
                    /*每次都将数据加载到高度最小的LI中---最终实现所有li高度都大致相当*/
                    var minHeight = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height(), $li.eq(3).height(), $li.eq(4).height()]);
                    for (var j = 0; j < 5; j++) {
                        if (minHeight == $li.eq(j).height()) {
                            $li[j].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + page * n + data[n].name + '</span></a>';
                            break;
                        }
                    }
                    /*依次均与的将数据分布到每一列中---将会出现有的li高度会很大
                    var k = 0;
                    n > (row - 1) ? k = n % row : k = n;
                    $li[k].innerHTML += '<a href="' + data[n].href + '" target="_blank"><img src="' + data[n].src + '" width="' + data[n].width + '" height="' + data[n].height + '" alt="' + data[n].name + '" /><span class="name">' + data[n].name + '</span></a>';
                    */
                }
                this.getOTop();
            },
            getOTop: function () {
                oTop = Math.min.apply(null, [$li.eq(0).height(), $li.eq(1).height(), $li.eq(2).height()]) + $target.offset().top;
            },
            loadedTips: function () {  //数据加载完毕
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(function () {
                    $('#loadTips').css({ 'visibility': 'hidden' });
                }, 200);
                // 解绑事件
                $(window).unbind('scroll', $.proxy(this.scrollEvent, this));
            },
            scrollEvent: function () {//鼠标滚轮事件
                if ($(document).scrollTop() + $(window).height() > oTop && on_off) {
                    this.fillData();
                }
            },
            init: function () {//开始执行事件
                this.fillData();
                $(window).bind('scroll', $.proxy(this.scrollEvent, this));
            }
        }
    } ();
    wallPic.init();
</script>

　　

web前端url传递值 js加密解密

一：Js的Url中传递中文参数乱码问题，重点：encodeURI编码，decodeURI解码：

1.传参页面
Javascript代码：

js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
<script type=”text/javascript”>// <![CDATA[
function send(){
var url = "test01.html";
var userName = $("#userName").html();
window.open(encodeURI(url + "?userName=" + userName)); }
// ]]>
</script>
js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

2. 接收参数页面：test02.html

<script>
var urlinfo = window.location.href;//獲取url
var userName = urlinfo.split(“?”)[1].split(“=”)[1];//拆分url得到”=”後面的參數
$(“#userName”).html(decodeURI(userName));
</script>

注意：在编码时要两次编码

<script type="text/javascript">
    window.location.href = "Index.aspx?value=" + encodeURIComponent(encodeURIComponent("中文编码"));
</script>

二：如何获取Url“？”后，“=”的参数值：

A.首先用window.location.href获取到全部url值。
B.用split截取“?”后的全部
C.split(“?”)后面的[1]内数字，默认从0开始计算

三：Js中escape，unescape，encodeURI，encodeURIComponent区别：

1.传递参数时候使用，encodeURIComponent否则url中很容易被”#”，”？”，”&”等敏感符号隔断。
2.url跳转时候使用，编码用encodeURI，解码用decodeURI。
3.escape() 只是为0-255以外 ASCII字符 做转换工作，转换成的 %u**** 这样的码，如果要用更多的字符如 UTF-8字符库 就一定要用 encodeURIComponent() 或 encodeURI() 转换才可以成 %nn%nn 这的码才可以,其它情况下escape，encodeURI，encodeURIComponent编码结果相同,所以为了全球的统一化进程，在用 encodeURIComponent() 或 encodeURI() 代替 escape() 使用吧！

HTML中让表单input等文本框为只读不可编辑的方法

有时候，我们希望表单中的文本框是只读的，让用户不能修改其中的信息，如使<input type="text" name="input1" value="中国"> 的内容，"中国"两个字不可以修改。实现的方式归纳一下，有如下几种。

方法1: onfocus=this.blur() 
<input type="text" name="input1" value="中国" onfocus=this.blur()>

方法2:readonly 
<input type="text" name="input1" value="中国" readonly>

<input type="text" name="input1" value="中国" readonly="true">

方法3: disabled 
<input type="text" name="input1" value="中国" disabled>

<input type="text" name="input1" value="中国" disabled="disabled">

js监听用户的键盘敲击事件，兼容各大主流浏览器

js监听用户的键盘敲击事件，兼容各大主流浏览器

js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
    <script type="text/javascript">
        document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 27) { // 按 Esc
                //要做的事情
                alert(1);
            }
            if (e && e.keyCode == 113) { // 按 F2
                //要做的事情
                alert(2);
            }
            if (e && e.keyCode == 13) { // enter 键
                //要做的事情
                alert(3);
            }
        };
    </script>
js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

HTML特殊字符

HTML 原始码 显示结果 描述
&lt; < 小於号或显示标记
&gt; > 大於号或显示标记
&amp; & 可用於显示其它特殊字符
&quot; " 引号
&reg; ® 己注册
&copy; © 版权
&trade; ™ 商标
&ensp;   半方大的空白
&emsp;   全方大的空白
&nbsp;   不断行的空白