03：2014javascript初级

最新推荐文章于 2024-08-27 13:38:21 发布

aogouqian7476

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量143

点赞数

文章标签： javascript json 前端 ViewUI

原文链接：http://www.cnblogs.com/windyet/articles/6664177.html

版权

把元素移除你的视线之外的方法

1.display:none; //显示为无，根本就没有。不占文档流

2.visibility:hidden; //隐藏

3.width:0; height:0; border:none;

4.透明度为零。 opacity:0;

5.通过定位，设置left或者top值

6.拿一个白色的div盖住

7.margin一个负值。

——以上这些都是做JS效果的原理。还有很多很多。

事件：鼠标、键盘、系统、表单、自定义事件（比如鼠标三击）

鼠标：onclick，onmouseover，onmouseout，nmousemove,onmouseup,onmousedown...

如何添加事件：元素.onmousemove

JavaScript调用函数：

直接调用：abc();

间接调用：oDiv.onclick = abc; 元素.事件 = 函数名 //记住，事件调用时函数后面不加()

最原始的写法示例：

JS的读操作：

JS的写操作：

上面的方法能够获得元素的很多属性，如id、class、value、src之类的，但是无法取到标签之间的文字，所以要得到标签之内的元素需要用到innerHTML，如下：

当然，也可以通过oP1.innerHTML = xxx进行赋值。如果你的赋值是input里面的内容，那么可以往input里面写入任何的内容，包括html代码，css样式。

以下这段代码实现了输入对话：

效果如下：

JS中操作属性的时候不允许出现横杆：比如：
oP1.style.font-size是不允许的，要写成：oP1.style.fontSize才可以。

oBtn3.onclick = function(){

oP1.className = 'red';
}
以上就是调用了写好的css样式，由于在JS中，class是不能直接使用的，所以只能写成className。

在JS中，所以得相对路径都别拿来做判断！！！
那么，都有哪些相对路径呢？比如：
//<img src="e:\图片\1.jpg" > 里面的src路径，比如oImg1.src，这个肯定是不能拿来做判断的。
//href='1.css' href='html/index.html'
//img src="http://www.miaov.com"
颜色值不要拿来做判断。
//color:red #fff rgb(255,255,0)
innerHTML值不要拿来做判断。！！！
以上！！！
当然，不能拿来做判断，但是是可以拿来取值的。

有很多的方法都是能巧妙的避开一些问题的，以下两个例子：

IE6、IE7、IE8 不支持js中点击修改type，比如把type=“button”改成type=“checkbox”，IE6、IE7、IE8是不行的，其他都可以。
当然，最好的办法（思路）就是点击button，然后隐藏起来，然后让checkbox显示出来。

例子二：假设有一个div要浮动，那么正常是这么写的：oDiv.style.float = "left";但是你会发现IE是不认的。所以css提供了以下的两句话，能解决这个问题，oDov.style.styleFloat = 'left';oDiv.style.cssFloat = 'left';
也就是IE（styleFloat），非IE(（cssFloat）

其实完全没有必要这么做，可以直接写css，然后在JS里面直接使用className调用css就可以了。
.left{float:left;}
.right{float:right;}

类似于这样的例子还是有很多的，比如判断条件，如果没有可用的，就创造一个。得根据实际需求的功能点就可以。

JS中[‘’]的应用，说明：
在js中，由于如果都采用.来进行，那么.之后的属性是无法更改的，所以这时候采用[‘’]就可以加入字符串，即变量了。
比如：oDiv.style.width = oVal.value，那么这时候，如果前端通过输入，想要修改width改成自定义的值，比如改成background，是不能的，所以这时候需要进入['']，如下：oDiv.style[oAttr.value]= oVal.value
这时候如果前端输入的是attr的值，就能获取得到了。

所以[ ]的使用，就是当你发现某个值可能会变的时候，会使用到。
当然，由于JS中所有的.都可以换成[ ]，所以如果你喜欢，不需要变化的地方也可以换成[ ]

JS中的数组：

定义数组：var arr = [' ',' ',' ',' '];
arr[2];数组的第三个值。
arr[arr.length-1];
arr.length：arr这个数组的长度，经常用来统计总数的。轮播图的原理就是：假设第一张：就是现实1/4，其实是：
oSpan.innerHTML = num+1 + '/' + arr.length
其中，num是自己定义的从零开始的数字。

arr.push:向数组的最后一位添加数据。

关于document.getElementByTagName(' ')：是拿来对于type相同的标签进行选择的。
比如你有两个input，如下：

<input type="button" value="顺序切换" />
那么你可以在JS中写 var aBtn = document.getElementsByTagName('input');
则aBtn[0] 对应的循环切换，aBtn[1]对应着顺序切换。

1-动态方法：ByTagName()

// 找#list的方法

var oUl = document.getElementById('list');

// 找.li方法

document.getElementsByTagName('li');

请注意以下的方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ByTagName</title>
    <script type="text/javascript">
        window.onload = function(){
// 找#list的方法（ById前面只能是document）
// var oUl = document.getElementById('list');
var oUl = document.getElementsByTagName('ul')[0];
// 如下，这时候aLi就是相当于一个数组。这时候需要对aLi进行操作的时候，是需要加[]的
var aLi = oUl.getElementsByTagName('li');
alert(aLi.length);
}
</script>
</head>
<body>
    <ul id="list">
        <li>你好啊</li>
        <li>我不好</li>
        <li>他很好</li>
    </ul>
</body>
</html>

————以上，在使用getElementByTagName的时候，相当于获得了一个数组，所以使用的时候都需要加后标。

获取<title>或者<body>也是可以的。对于整个页面只有一个的标签，可以直接document.标签，如下：

document.title = 123;

document.body.innerHTML = 'abc';
document.body.innerHTML = '<input type="button" name="" value="button"><br/><input type="button" name="" value="button"><br/><input type="button" name="" value="button">';

//循环

for(var i=1; i<3; i++;){
    alert(i);
}

为了解决性能的问题，我们先定义了一个字符串，然后把每一句都放到这个字符串里面，而不是每次直接去body里面找。

作用域：

1、JS的预解析：
所有的变量，在运行JS代码之前，都提前赋了一个值，就是未定义。
所有的函数，在正式运行代码之前，都是整个函数块。

请注意，此时若碰到变量跟函数重名，保留函数。函数一样，保留后者。

2、进行逐行解读（逐行，所以函数得看有没有执行哦）。

自上而下的解读，哪怕是分成了不同的script标签。

请注意：传参，则可以通过外面穿进去的值，改变函数内部的值。

函数内部直接调用外面的变量，可以内部改变外部的值。

函数会先去找里面是否有变量，里面若未定义变量/函数，则会顺着去找外面的变量，并且可以改变外面的变量。就是这么神奇。如果函数（局部）里面有变量，则里面与外面不相互影响，这时候预解析的时候，直接就是先来个underfine。

里面是可以改变外面的，但是外面的是不能改变里面的。那么不能找到或者直接调用，可以采用以下两个方案：
1、直接把外面的变量放到里面去，由于里面是没有定义这个变量的，所以这样通过里面改变了外面，那么相当于外面也取了里面的值了。

2、在函数内部调用外面的函数（上面的方法是调用外部的变量），然后通过传参的形式，也可以的。

请注意：函数（function）里面才是一个域，for什么的虽然有括号，但是不是一个作用域。也就是它是通透的，所以并没有里外之分。

注意：只有firefox不能对JavaScript预解析。所以，写代码的时候，尽量不要在把定义的变量放在for循环或者if语句中。

数据类型：
数字、字符串、布尔、函数、对象（对象obj，数组[],json{},null）、undefined
typeof：
判断数据类型。可以尝试使用alert(typeof);

var 变量名
function 函数名

var arr = [1,2,3,4];
alert(arr.length);
arr[2] = 234;
arr.push(5,6,7);//往arr后面加了5,6,7

对象身上都是可以添加自定义属性的，比如：
var obj = document;
obj.abc = 123;
obj.fun1 = function(){alert(1)};
obj.fun1();
————以上的例子就是往document这个对象身上加了abc和fun1的属性。

数组也是对象。

var json = {name:'miaov',age:5}

alert(json.name + '今年' + json.age + '岁了');

数据类型的转换（NaN表示无法转换）：
Number / parseInt / parseFloat / 隐式类型转换：+ - ++ -- % > < ! 之类的。

var a = '100';

alert(Number(a)+100);

var a = true;

alert(Number(a));

null、空数组转化成0，纯数字的单数组转出数字。除此外的非空数组转不了（应该是这样）。

paesrInt只能提取出最前面的一部分的数字。从碰到第一个字母开始就全干掉了
var a = ['100kkk222'];

alert(parseInt(a));
alert(parseFloat(a));

以下这张图片只是突然想记下来而已，实现的是鼠标移入换色，鼠标移开恢复回来，用%的使用方法：

方法二：用一个变量str = this.style.background;把当前的值存下来，移开的时候放回去就好了。

函数传参

最简单的例子：

fun()(2),则参数2传到了fun之下的子函数。

商品小计实战代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品价格计算</title>
    <style type="text/css">
        li{list-style: none;}
    </style>
<!-- 重用代码：
1、尽量保证HTML代码一致，可通过父级选取子元素
2、把核心主程序实现，用函数包起来
3、把每组不同的值找出来，通过传参实现。
-->
<script type="text/javascript">
    window.onload = function(){
        var oUl = document.getElementById('list');
        var aLi = document.getElementsByTagName('li');
        for (var i = 0; i < aLi.length; i++) {
            fn1(aLi[i]);
        }
        // alert(1);
        function fn1(oLi){
            var aBtn = oLi.getElementsByTagName('input');
            var oStrong = oLi.getElementsByTagName('strong')[0];
            var oEm = oLi.getElementsByTagName('em')[0];
            var oSpan = oLi.getElementsByTagName('span')[0];
            var n1 = Number(oStrong.innerHTML);    //这是一个字符串'0'
            var n2 = parseFloat(oEm.innerHTML);//这也是字符串。
            aBtn[1].onclick = function(){
                n1++;
                oStrong.innerHTML = n1;
                oSpan.innerHTML = n1*n2 + '元';
            }
            aBtn[0].onclick = function(){
                n1--;
                if (n1 < 0) {
                n1 = 0;
                }
                oStrong.innerHTML = n1;
                oSpan.innerHTML = n1*n2 + '元';
            }
        }
    }
</script>
</head>
<body>
    <ul id="list">
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>12.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>17.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>14.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>8.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>55.5元</em>
            小计：<span>0元</span>
        </li>
        <li>
            <input type="button" name="" value="-">
            <strong>0</strong>
            <input type="button" name="" value="+">
            单价：<em>534.5元</em>
            小计：<span>0元</span>
        </li>
    </ul>
    <p>商品合计共：0件，共：0元，最贵的商品单价是：0元。
    </p>
</body>
</html>

return的应用（哪里调用返回到哪里），实现显示输入任意数字的区间：

例子二：

<script type="text/javascript">
    fn3().onload = function(){
        document.body.innerHTML = 123;
    }
    function fn3(){
        return window;
    }
</script>

————你会发现，fn3()此时其实就是window，而fn3().onload就是window.onload

arguments的使用：当参数无法确定个数的时候，就可以用arguments

<script type="text/javascript">
    function fn1(){
        alert(arguments[0]);
    }
    fn1(1,2,3,4,5);
</script>

————上面的例子发现，函数其实是可以不定义形参的，但是也传进去了。

例2：实现不确定长度数字的和，代码如下：

<script type="text/javascript">
    function fn1(){
        var n=0;
        for (var i = 0; i < arguments.length; i++) {
            n += arguments[i];
        }
        return n;
    }
    alert(fn1(1,2,3,4,6));
</script>

getComputedStyle：可以获取浏览器经过一定运算的样式。 //IE6、7、8不兼容
currentStyle： //标准浏览器不兼容

比如：

function $(v){
    if (typeof v === 'function') {
        window.onload = v;
    }
    else if(typeof v === 'string'){
        return document.getElementById(v);
    }
    else if (typeof v === 'object') {
        return v;
    }
} 
$(function(){
    $('btn1').onclick = function(){
        alert(getStyle($('div1'),'marginRight'));
    }
})

三木运算符：x ？ a:b; 三木运算符经常被用在if;else上面。

JS是没有-的，所以css中的-都得转换成大写，比如background-color得写成backgroundColor

JS中不要获取复合样式，可以获取单一样式，但是单一样式不要拿来做判断。颜色/图片/路径什么的也不要拿来做判断。不要去获取未设置过的样式。

定时器：setInterval(函数,毫秒)
清除定时器：claerInterval(定时器)
setTimeout(函数,毫秒)
clearTimeout (定时器)

首先说明一下，我们通常调用函数有两个方法：

一个是直接调用fn1( )，另一个是通过事件调用obtn[0],onclick = fn1( ){ }，有了定时器之后，我们就有了第三种方法。

// setInterval(函数，毫秒) 重复执行，例子如下：

<script type="text/javascript">
// setInterval(函数，毫秒)，是重复执行的。
var i = 0;
var timer = null;
function fn1(){
    i++;
    document.title = i;
    if (i === 10) {
        clearInterval(timer);
    }
}
timer = setInterval(fn1,200);
</script>

——————以上的效果是：每200毫秒，document的title就会加1 ，然到10的时候，就停下了。

以下是换背景的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        div{width: 100px;height: 120px;background: red;}
    </style>
    <script type="text/javascript" src="miaov.js"></script>
    <script type="text/javascript">
// 可以直接写出window.onload = function(){}
$(function(){
    var aBtn = document.getElementsByTagName('input');
    var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
    var num = 1;
    var oBody = document.body;
    var timer = null;
    function fn1(){
        oBody.style.background = 'url(' + arrUrl[num] + ')';
        num++;
        num %= arrUrl.length;
    }
// 这个相当于你每次点击，都开了一个定时器。会出现BUG。为了避免这个问题，我们在每次点击之前，都得先清除一下定时器timer
aBtn[0].onclick = function(){
    clearInterval(timer);
    timer = setInterval(fn1,1000);
}
aBtn[1].onclick = function(){
    clearInterval(timer);
}
})
</script>
</head>
<body>
    <input id="btn1" type="button" name="" value="换背景吧">
    <input id="btn2" type="button" name="" value="停">
</body>
</html>

以下实现了：2秒后出现广告，3秒后再消失的效果。

<script type="text/javascript">
    $(function(){
        var miaov = document.getElementById('miaov');
        setTimeout(function(){
            miaov.style.display = 'inline-block';
            setTimeout(function(){
                miaov.style.display = 'none';
            },3000)
        },2000)
    })
</script>

例子：8秒后按钮才能再次进行点击，weui的方法：

$('#pay').click(function () {
    //设置按钮不能8秒后才能再点击
    var btn = $(this);
    $(btn).addClass('weui-btn_disabled');
    var timer = setTimeout(function(){
        $(btn).removeClass('weui-btn_disabled');
    }, 8000);
})

————修改disabled的方法：

$('#pay').click(function () {
    var btn = $(this);
    $(btn).attr("disabled", true).css('background-color','#888');
    var timer = setTimeout(function(){
        $(btn).attr("disabled", false).css('background-color','#a62d2a');
    }, 8000);
})

QQ的弹窗提示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    $(function(){
        var qq = $('qq');
        var title = $('title');
        var timer = null;
        qq.onmouseover = show;
        qq.onmouseout = hide;
        title.onmouseover = show;
        title.onmouseout = hide;
        function show(){
            clearInterval( timer );
            title.style.display = 'block';
        }
        function hide(){
            timer = setTimeout(function(){
                title.style.display = 'none';
            }, 200);
        }
    });
</script>
</head>
<body>
    <div id="qq"></div>
    <div id="title"></div>
</body>
</html>

js10：日期对象、网页时钟、倒计时

系统时间（当前电脑系统的，可能不准哦。）：

<script type="text/javascript">
    alert(new Date());
</script>

这时候就会弹出时间：如下：

JavaScript获取当前系统的年、月、日、时、分、秒如下：

//myTime是个obj的typeof。
var myTime = new Date();

//以下是number类型
var iYear = myTime.getFullYear();
var iMonth = myTime.getMonth()+1;
var iDate = myTime.getDate();
var iWeek = myTime.getDay(); //星期几
var iHours = myTime.getHours();
var iMin = myTime.getMinutes();
var iSec = myTime.getSeconds();

var getTime = myTime.getTime();　　//1970年1月1日到现在的毫秒数，时间戳经常用来测试性能。

例子：实现今天的年月日时分秒，星期。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    window.onload = function(){
        var oBody = document.body;
        setInterval(fnTime,1000);
        // 这个fnTime是为了解决刷新的时候，会延后1秒才出现。所以一上来就先执行一次。那为什么不直接把1000改小呢？是因为内必要，耗性能。
        fnTime();
        // 本函数是为了不断的去获取（刷新）时间的。
        function fnTime(){
        //myTime是个obj的typeof。定时器需要运行的是这个
        var myTime = new Date();
        
        //以下是number类型
        var iYear = myTime.getFullYear();
        var iMonth = myTime.getMonth()+1;
        var iDate = myTime.getDate();
        var iWeek = myTime.getDay(); //星期几
        var iHours = myTime.getHours();
        var iMin = myTime.getMinutes();
        var iSec = myTime.getSeconds();
        var str = '';
        if (iWeek === 0) iWeek = '星期天';
        if (iWeek === 1) iWeek = '星期一';
        if (iWeek === 2) iWeek = '星期二';
        if (iWeek === 3) iWeek = '星期三';
        if (iWeek === 4) iWeek = '星期四';
        if (iWeek === 5) iWeek = '星期五';
        if (iWeek === 6) iWeek = '星期六';
        str ='当前时间是：' + iYear + '年' + toTwo(iMonth) + '月' + toTwo(iDate) + '日，' + iWeek +'，'+ iHours + '时' + toTwo(iMin) + '分' + toTwo(iSec)  + '秒';
        oBody.innerHTML = str;    
        }    
    }
    // 以下函数是为了解决当时间出现一个数的时候，前面加个零。
    function toTwo(n){
        return n < 10 ? '0' + n : ''+n;
    }
    </script>
</head>
<body style="font-size: 30px;">
    
</body>
</html>

以下例子实现了图片的时钟：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var oBody = document.body;
            var oP = document.getElementById('time');
            var aImg = document.getElementsByTagName('img');
            setInterval(fnTime,1000);
            // 这个fnTime是为了解决刷新的时候，会延后1秒才出现。所以一上来就先执行一次。那为什么不直接把1000改小呢？是因为内必要，耗性能。
            fnTime();
            // 本函数是为了不断的去获取（刷新）时间的。
            function fnTime(){
            //myTime是个obj的typeof。定时器需要运行的是这个
            var myTime = new Date();
            
            //以下是number类型
            var iHours = myTime.getHours();
            var iMin = myTime.getMinutes();
            var iSec = myTime.getSeconds();
            var str = '';

            str = toTwo(iHours) + '0' + toTwo(iMin) + '0' + toTwo(iSec);
            // oP.innerHTML = str;
            for (var i = 0; i < aImg.length; i++) {
                if (i != 2 && i != 5) {
                    aImg[i].src = 'img/'+ str.charAt(i) +'.JPG';
                }
                else{
                    aImg[i].src = 'img/colon.JPG';
                }
            }
        }
    }
    // 以下函数是为了解决当时间出现一个数的时候，前面加个零。
    function toTwo(n){
        return n < 10 ? '0' + n : ''+n;
    }
    </script>
</head>
<body>
    <p id="time" style="font-size: 60px;"></p>
    <!-- 设置六张图片，对应6个时间。 -->
    <img src="" alt="">
    <img src="" alt="">
    <img src="img/colon.jpg" alt="">
    <img src="" alt="">
    <img src="" alt="">
    <img src="img/colon.jpg" alt="">
    <img src="" alt="">
    <img src="" alt="">
</body>
</html>

效果如下：

倒计时原理：

首先：

var nowTime = new Date();能够获取当前的时间

如果往Date里面设置参数，是可以设置未来的时间的。有两种方法，如下：

var setTime = new Date(2017,4,9,13,40,12);

var setTime = new Date(April,9,2017 13:40:12);

Math.floor(difTime/86400); //计算天数
Math.floor(difTime%86400/3600); //计算小时
Math.floor(difTime%86400%3600/60); //计算分钟
Math%60; //秒

以下例子能够计算当前时间和设定时间的秒数差值，以及显示相差的天数、小时、分组、秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        input{
            width: 300px;margin-top:20px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var aInp = document.getElementsByTagName('input');
            var nowTime = null;
            var setTime = null;
            var difTime = 0;
            var timer = null;
            aInp[2].onclick = function(){
                clearInterval(timer);
                setTime = new Date(aInp[0].value);
                setInterval(function(){
                    nowTime = new Date();
                    difTime = Math.floor((setTime - nowTime)/1000);
                    str = Math.floor(difTime/86400) + '天' + Math.floor(difTime%86400/3600) + '小时' + Math.floor(difTime%86400%3600/60) + '分钟' + difTime%60 + '秒';
                    if (difTime >= 0) {
                        aInp[1].value = str;
                    }else{
                        clearInterval();
                    }
                },1000);
            }
        }
    </script>
</head>
<body>
    设定时间：<input type="text" name="" value="April,9,2017 13:40:12" placeholder=""><br/>
    还剩：<input type="text" name="" value="" placeholder=""><br/>
    <input type="button" name="" value="开始倒计时吧！">
</body>
</html>

getTime方法的使用，以下例子实现：1970年1月1日到现在的时间。除以1000是因为都是以毫秒为单位，所以我们除以1000，向下取整。

var getTime = Math.floor(new Date().getTime()/1000);
        alert(Math.floor(getTime/86400) + '天' + Math.floor(getTime%86400/3600) + '小时' + Math.floor(getTime%86400%3600/60) + '分钟' + getTime%60 + '秒')

js11：字符串方法

var str = '妙味课堂';

alert(str.length);//4

alert(str.charAt(1));//味

0-9的编码值是：48-57 a-z的储存值：97-122 A-Z的储存值：65-90

alert(str.charCodeAt(1));//21619，说明味的编码是21619
alert(String.fromCharCode(22937,21619));//妙味

</script>

str.charAt(i)：找到字符串中的第i-1个字符。

str.charCodeAt(i)方法：找到字符串中的第i-1个字符在计算机中的存储编码值。

String.fromCharCode(22937,21619)：找到编码是22937和21619的字符是什么。

以下的判断实现了：检测是不是纯数字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串方法</title>
    <script type="text/javascript">
        window.onload = function(){
            var alnp = document.getElementsByTagName('input');
            alnp[1].onclick = function(){
                if (detecNum(alnp[0].value)) {
                    alert('恭喜，'+ alnp[0].value +'全是数字');
                }
                else{
                    alert('输入有误，\''+ alnp[0].value +'\'含非数字');
                }
            }
            function detecNum(str){
                var n = 0;
                for (var i = 0; i < str.length; i++) {
                    n = str.charCodeAt(i);
                    // 以下的判断是：如果ASCII码介于48-57之间，则没有任何的操作，一旦不在此区间，则马上返回false。所以并不是每一个if都有返回值。
                    if (n < 48 || n > 57){
                        return false;
                    }
                }
            return true;//循环完成，都是这个区间，则返回true
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" value="" placeholder="">
    <input type="button" name="" value="判断">
</body>
</html>

想要不断的往后加东西：

数组是：arr.push 字符串是：str1 += str;

加密的一种方法：例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jiami</title>
    <script type="text/javascript">
        window.onload = function(){
            var aInp = document.getElementsByTagName('input');
            var oDiv = document.getElementById('div1');
            aInp[1].onclick = function(){
                var str = aInp[0].value;
                var str1 = '';
                // alert(str.charCodeAt(str));
                for (var i = 0; i < str.length; i++) {
                    // 以下实现了输入内容的每个字符单独转化成存储编码-1000，再拼接起来。其实可以在前面加上String.formCharCode()，这样就能找到对应的编码减去1000的字了。
                    str1 += (str.charCodeAt(i)-10000)+'.';
                }
                oDiv.innerHTML = str1;
            }
        }
    </script>
</head>
<body>
    <input type="text" name="" value="" placeholder="请输入详情">
    <input type="button" name="" value="加密">
    <div id="div1">
        加密...
    </div>
</body>
</html>

str.indexOf('w',5)：从第6位开始，从str中往后找到w字符所在的角标位置。

str.lastIndexOf('w',5)：从str中从后往前，从倒数第5位，往前找w所在的位置。

例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexOf/lastIndexOf</title>
    <script type="text/javascript">
        window.onload = function(){
            var str = 'www.windyet.com';
            alert(str.indexOf('w',1));    //1
            alert(str.lastIndexOf('w'));    //4，即第5个字符
        }
    </script>
</head>
<body>
    
</body>
</html>

例子2：实现整个字符串中所有的查找字符的位置。如下（特别注意以下的for和while的等价的用法）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indexOf/lastIndexOf</title>
    <script type="text/javascript">
        window.onload = function(){
            var str = 'www.windyet.com';
            /*alert(str.indexOf('w',1));    //1
            alert(str.lastIndexOf('w'));    //4，即第5个字符*/
            var s = 'w';
            var i = 0;
            /*for (; str.indexOf(s,i) != -1; ) {
                alert(str.indexOf(s,i));
                i = str.indexOf(s,i) + s.length;
            }*/
            while(str.indexOf(s,i) != -1){
                alert(str.indexOf(s,i));
                i = str.indexOf(s,i) + s.length;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

//字符串的比较比的是第一个字符的ASCII码

alert('莫'>'杜');    //true
alert('10000' > '2') //false,因为1的ascii码小于2

字符串截取str.substring的使用：

// 截取从第3位到第6位（角标是2-5）的字符串出来。
var str = '妙味课堂是一支独具特色的IT培训团队';
alert(str.substring(2,5));    //课堂是

str.slice的使用：（substring中所有的负数都会当做0来处理，slice是直接退到尾部开始截取。）

var str = '妙味课堂是一支独具特色的IT培训团队';
alert(str.substring(-4,7));    //妙味课堂是一支
alert(str.slice(-4,-2));    //培训

以下是substring的应用，实现了点击展开和收缩的功能。相当于阅读全文这个功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        window.onload = function(){
            var oP = document.getElementsByTagName('p')[0];
            var oSpan = oP.getElementsByTagName('span')[0];
            var oA = oP.getElementsByTagName('a')[0];
            var str = oSpan.innerHTML;
            var onOff = true;
            oA.onclick = function(){
                if (onOff) {
                    oSpan.innerHTML = str.substring(0,18);
                    oA.innerHTML = '>>>展开';
                }else{
                    oSpan.innerHTML = str;
                    oA.innerHTML = '>>>收缩';
                }
                onOff = !onOff;
            }
        }
    </script>
</head>
<body>
    <p style="width: 300px;position: relative;left: 40%;top: 30px;">
        <span>排空驭气奔如电， 升天入地求之遍。上穷碧落下黄泉， 两处茫茫皆不见。忽闻海上有仙山， 山在虚无缥渺间。楼阁玲珑五云起， 其中绰约多仙子。中有一人字太真， 雪肤花貌参差是。金阙西厢叩玉扃， 转教小玉报双成。闻道汉家天子使， 九华帐里梦魂惊。揽衣推枕起徘徊， 珠箔银屏迤逦开。云鬓半偏新睡觉， 花冠不整下堂来。风吹仙袂飘飘举， 犹似霓裳羽衣舞。玉容寂寞泪阑干， 梨花一枝春带雨。含情凝睇谢君王， 一别音容两渺茫。昭阳殿里恩爱绝， 蓬莱宫中日月长。回头下望人寰处， 不见长安见尘雾。惟将旧物表深情， 钿合金钗寄将去。钗留一股合一扇， 钗擘黄金合分钿。但教心似金钿坚， 天上人间会相见。临别殷勤重寄词， 词中有誓两心知。七月七日长生殿， 夜半无人私语时。在天愿作比翼鸟， 在地愿为连理枝。天长地久有时尽， 此恨绵绵无绝期。
        </span>
        <a href="javascript:" title="">>>>收缩</a>
    </p>
</body>
</html>

str.toUpperCase()：转换大写

str.toLowerCase()：转换小写

举例：

var str = 'www.MIAOV.com';
alert(str.toUpperCase());    //WWW.MIAOV.COM
alert(str.toLowerCase());    //www.miaov.com

str.split('参数')：按照参数进行字符串分隔，

！！！请注意，使用了split之后，字符串被分割成了数组。所以分割后可以使用角标。

参数为单引号''，表示把每个字符都分割，如果没有加任何参数，就默认整个字符串分割为一个整体。

var str = 'www.MIAOV.com';
alert(str.split('.'));    //www,MIAOV,com
alert(str.split('.')[0]); //www
alert(str.split('')); //w,w,w,.,M,I,A,O,V,.,c,o,m

str.split('参数',参数2)：参数2是设置截取几段，为可选项。

以下为字符串分割的实际应用：实现输入文字，给每个文字背后加背景：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div { width:300px; height:200px; border:1px solid #333; background:#fff; padding:20px; line-height:40px; }
span { padding:5px 15px; font-family:微软雅黑; }
</style>
</head>
<body>
<div id="div1">
</div>
<input type="text" />
<input type="button" value="按钮" />
<script>
var oDiv = document.getElementById('div1');
var aInp = document.getElementsByTagName('input');
var arrColor = [ '#FFC', '#CC3', '#6FC', '#9C9' ];
aInp[1].onclick = function () {
    var str = aInp[0].value;                // '妙味课堂'
    var arr = str.split('');                            // [ '妙', '味', '课', '堂' ]
    
    for ( var i=0; i<arr.length; i++ ) {
        arr[i] = '<span style="background:' + arrColor[i%arrColor.length] + ';">' + arr[i] + '</span>';
    }
    // split分割之后是个数组，所以需要用join()转换成字符串。
    oDiv.innerHTML += arr.join('');
};
// 以下是解释join()的使用的，能够把数组转换成字符串。
var arr = [ 'aa', 'bb', 'cc' ];
// alert( typeof arr.join() );    'aa'+','+'bb'+','+'cc'
// alert( arr.join().length );
// alert( arr.join('') );
alert( arr.join('-') );
</script>
</body>
</html>

查找和替换的实例，字符串方法的使用例子：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p { border:10px solid #ccc; background:#FFC; width:400px; padding:20px; font-size:16px; font-family:微软雅黑; }
span { background:yellow; }
</style>
</head>
<body>
<input type="text" />
<input type="text" />
<input type="button" value="替换" />
<p>妙味课堂是一支独具特色的IT培训团队，妙味反对传统IT教育枯燥乏味的教学模式，妙味提供一种全新的快乐学习方法！<br />
2013年底，妙味课堂最新推出"远程培训"服务，受到很多朋友们的喜爱与追捧，我们必将更加努力的帮助远程学习的朋友实现技术提升……</p>
<script>
var aInp = document.getElementsByTagName('input');
var oP = document.getElementsByTagName('p')[0];
aInp[2].onclick = function () {
    var str = aInp[0].value;            // '妙味'
    var newStr = aInp[1].value;
    
    if (!str)return;
    
    oP.innerHTML = oP.innerHTML.split(str).join('<span>'+newStr+'</span>');
};
</script>
</body>
</html>

总结如下：

var str = '妙味课堂-WWW.miaov.com';

str.charAt(1); // '味'
str.charCodeAt(1);    // 21619
String.fromCharCode(22937, 21619);    // '妙味'

str.indexOf('m', 4);    // 9
str.lastIndexOf('o');    // 16

'1000' < '2'    // true
'1000' > 2    // true

str.substring(0, 4);    // '妙味课堂'
str.slice(-3);    // 'com'

str.toUpperCase();    // '妙味课堂-WWW.MIAOV.COM'
str.toLowerCase();    // '妙味课堂-www.miaov.com'

str.split('.', 2);    // [ '妙味课堂-WWW', 'miaov' ]

var arr = [ 'www', 'miaov', 'com' ];
arr.join('aaa');    // 'www.miaov.com'

JS12：数组方法：

基本的json格式例子：

<script type="text/javascript">
    var json = {
        'name':'linfeng',
        'age':'32',
    }
    alert(json.name);

var arrUrl = [ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ];
var arrText = [ '小宠物', '图片二', '图片三', '面具' ];
// 以上的两个数组内容等价于以下的json格式的存放
var imgDate = {
    'Url':[ 'img/1.png', 'img/2.png', 'img/3.png', 'img/4.png' ],
    'Text' : [ '小宠物', '图片二', '图片三', '面具' ],
}
alert(imgDate.Url[2]);　　//等价于alert(arrUrl[2]);
</script>

json在定义的时候，有两种，我们都采用第二种。

<script type="text/javascript">
    var json2 = {
    　　name:'miaov',    //这种方法安全性差一点
        　　'name':'miaov',    //我们都采用这种方法来定义
    }
    alert(json2['name']);     //与alert(json2.name);相同
    //可以修改里面的值，参考以下。 
    json2.name = 'miaowei';
    alert(json2.name); 
</script>

——————————以上这两种是一样的。

json里面可以包数组，数组里面也能包含json
1、json里面包含各种：var json = {abc:123,xyz:'nihoaao'};
2、数组里面包含json：var arr = [{name:'linfneg',age:123},{name:'ccz',age:122}];
综合的例子：

<script type="text/javascript">
    window.onload = function(){
        var json = {
            abc:123,
            xyz:['a','b','c','d','e']
        };
        var arr = [
        {name:'林烽',age:123},
        {name:'小明',age:122}
        ]
        alert(json.xyz[2]);
        alert(arr[1].name + '今年有' + arr[1].age + '岁');    
        //alert(arr[1]['name'] + '今年有' + arr[1]['age'] + '岁');
    }
</script>

for in的使用：数组的遍历（挨个儿读取出来）用的是for，而json用的是for in

例1：

<script type="text/javascript">
    window.onload = function(){
　　　　 var num = 0;
        var str="";
        for (var attr in window) {
            str += num + ':' + attr + '.' + window[attr] + '<br/>';
        }
        document.body.innerHTML = str;
    } 
</script>

例2：

<script type="text/javascript">
    var json2 = {
        'url':['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'],
        'text':['图片一','图片二','图片三','图片四']
    }
    // alert(json2['url'][1]);
    for(var attr in json2){
        for(var i = 0 ; i < json2[attr].length ; i++){
            alert(json2[attr][i]);
        }
    }
</script>

—————— json是没有长度（length）这个属性的。所以json是不能用for循环的，因为for循环是有i<xx.length的，

—————— 数组也是可以用for in循环的。

—————— json含数组，遍历：先用for in，后用for。嵌套访问。

—————— 数组含json，遍历：先用for，后用for in。嵌套访问。

数组：
定义方式一：var arr = ['2','3','4'];
定义方式一：var arr =new Array('2','3','4'); //请注意，这种如果里面写纯数字，则认为是数组长度。

清空数组的两种方法：
arr.length = 0:
arr = [];　　//效率高一点。

往后添加：push
arr.push('a');

往前添加：unshift
arr.unshift('a');

往后扔掉：pop

往前扔掉：shift

最后一个调换到最前：arr.unshift(arr.pop());

最前一个调换到最后：arr.push(arr.shift());

splice方法：删除，替换，添加。
实例：

<script type="text/javascript">
    window.onload = function(){
        var arr = ['1','2','3','4'];
        arr.splice(0,2);    //第0个开始删，删除两个。
        arr.splice(0,1,'3');//第0个开始删掉1个，并添加3进去。
        arr.splice(1,0,'8')//从第1个开始，删除0个，添加8
    } 
</script>

数组去重例子：

<script type="text/javascript">
    window.onload = function(){
        var arr = [1,2,2,2,2,3,3,4,5,6,7,8];
        for (var i = 0; i < arr.length; i++) {
            for (var j = i+1; j < arr.length; j++) {
                if (arr[i] == arr[j]) {
                    arr.splice(j,1);
                    j--;
                }
            }
        }
        alert(arr);
    }
</script>

排序：sort
sort方法在默认的情况下是按照字符串排序的，所以可能造成78小于8的，这时候处理方法如下：

<script type="text/javascript">
    var arr = [ 'c', 'd', 'a', 'e' ];
    // arr.sort();
    // alert( arr );
    var arr2 = [ 4,3,5,5,76,2,0,8 ];
    // arr2.sort();        ----本方法会出现78小于8
    // alert( arr2 );
    //这个方法能实现从小到大，改成b-a的话就能从大到小。不要问原理，想找到也可以在函数里面加上alert(a-b)就知道了。
    arr2.sort(function ( a, b ) {
        return a - b;
    });
    // alert( arr2 );
    var arrWidth = [ '345px', '23px', '10px', '1000px' ];
    arrWidth.sort(function ( a, b ) {
        return parseInt(a) - parseInt(b);
    });
    alert( arrWidth );
</script>

随机排列：sort
var arr2 = [ 4,3,5,5,76,2,0,8 ];

<script type="text/javascript">
    var arr = [ 1,2,3,4,5,6,7,8 ];
    arr.sort(function ( a, b ) {
        //首先讲一下为什么要-0.5，因为这个函数提供的是一个0-1之间的一个数字，大于0的情况下是从大到小排列的（交换），所以减去0.5后，就会有时候正数有时候负数，就会交换顺序了。 
        return Math.random() - 0.5;
    });
    alert( arr );
// alert( Math.random() );
</script>

Math.random(); //0-1之间的随机数，小数点之后是很长的。
Math.round(4.5); //四舍五入，所以结果是5
alert(Math.round(Math.random()*10)); //0-10之间的随机整数（Math.round是四舍五入的意思。）
alert(Math.round(Math.random()*5+5)); //5-10之间的随机整数
alert(Math.round(Math.random()*(y-x)+x)); //x-y之间的随机整数

concat的使用：连接数组

var arr1 = [1,2.3];

var arr2 = [2,3,4];

var arr3 = [4,5,6];

alert(arr1.concat(arr2,arr3));

reserve：颠倒
var arr1 = [1,2,3];

var arr2 = [2,3,4];

var arr3 = [4,5,6];

alert(arr2.reverse());

以下实现了字符串颠倒：

var str = 'abcdef';

// split把字符串变成了数组。reverse是颠倒数组，join是数组变成字符串

alert(str.split('').reverse().join(''));

要注意：函数加()，是用来直接运行并返回值得。在JavaScript运行的过程中，有很多时候会事件调用函数，或者设置定时器什么的，这个时候，是不能在函数的后面加上()的。

封装函数的方法很简单：找出不同的点，做传参或者做判断就可以了。
要注意：数字是可以传参的，符号是没办法传参的。那就很明确了，数字用传参，符号用判断语句

请注意以下：

if (endFn) {

endFn();

}
等价于 =》 endFn && endF();

转载于:https://www.cnblogs.com/windyet/articles/6664177.html

aogouqian7476

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
03：2014javascript初级

把元素移除你的视线之外的方法1.display:none; //显示为无，根本就没有。不占文档流2.visibility:hidden; //隐藏3.width:0; height:0; border:none;4.透明度为零。 opacity:0;5.通过定位，设置left或者top值6.拿一个白色的div盖住7.margin一个负值。...
复制链接

扫一扫