javascript基础06

splice

var del_arr = del.splice(0,2); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

splice方法有添加、删除、替换的功能，它有三个参数，第一个是位置，第二个是删除多少个，第三个是添加的东西。

String 对象

String 对象用来处理文本。事实上任何一个字符串常量都是一个String对象,可以将其直接作为对象来使用。

获得字符串长度：length

提取字符串：

charAt() 这个是获取单个字符的。

substr() 从开始位置截取，第二个参数是截取长度

substring() 从开始位置截取，第二参数是结束位置，但不包括这个位置，它不能接受负数

slice() 与上面的一样，但可以接受负数

查找替换字符串：

indexOf() 获取指定字符串的首次出现的位置，第二个参数是获取位置的开始。

lastIndex() 获取指定的字符串最后出现的位置

replace() 替换局部字符串，第一个参数被替换，第二个为替换，在正则里也很有用

search() 查找到指定的字符串，并返回回来，在正则里也是这样

其他方法:

toLowerCase() 转成小写字母

oUpperCase() 转成大写字母

window对象

系统消息框 alert()

确认对话框 confirm()

输入对话框 prompt()

打开新窗口 window.open()

window.open("http://www.baidu.com","_blank","width=300, height=200");

定时器setInterva() , setTimeout()：

定时器可以说是js前端最常用的工具，几乎所有的逐渐变化的动态效果都会使用到定时器，

比如说图片滚动,渐隐渐现,拖拽等等.定时器分两种分别是settimeout和setinterval.

注意：

一、定时器在事件里或会出现多次执行这个定时器时，一定要清除定时器，不是定时器会叠加而出现定时器在加速的一样现象或怪异的

事情，这就是定时器叠加的问题，如果定时器叠加了，亡羊补牢是不行的，会发现怎么都清除不了了，所以一定要在定时器执行前清除一次，

因为清除定时器的方法就算没有东西可以给它清除，它也不会报错，因为这一点我们就不用怕清除空的变量会报错，所以大胆清除。

二、this与定时器，this在定时器里，它会指向window，这个问题，一定知道，不是以后会被这种问题弄的不敢使用this，this是上下文环境，

这个上下文环境就是所在的执行环境会受到哪个环境的影响，一般都是作用域的父级作用域，但总有些例外的如定时器，无论你在那里使用它

都是指向window，为什么呢？写着写着突然懂了。。。。。。

因为window.setInterval()。。。。懂了吗？它的上级执行环境是window啊啊啊啊啊啊啊。。。

如果不懂什么是执行环境，什么是作用域，请看javascript高级程序设计，里面有详细说明：第三版第四章4.2节

history对象

history对象是window对象的子对象，对应于浏览器的历史记录。

window.history.go(-1);

window.history.go(1);

history.back();

history.forward();

Location对象

Location对象也是window对象的子对象，通过它可以获取或设置浏览器的当前地址。

1.跳转到其它页面

window.location.href = "http://www.163.com";

location.href = "http://www.163.com";

2.重新载入页面（刷新)

 location.reload();

navigator对象

Navigator对象包含着有关web浏览器的信息，它也是window的属性，可以用

window.navigator

引用它，也可以用navigator引用

例：获取浏览器内部代号，名称，操作系统等信息

var info = navigator.userAgent;

alert(info);

ie8以下的版本判断：

/*ie版本获取开始*/

var DEFAULT_VERSION = "8.0";

var ua = navigator.userAgent.toLowerCase();

var isIE = ua.indexOf("msie")>-1;

var safariVersion;

if(isIE){

    safariVersion =  ua.match(/msie ([\d.]+)/)[1];

    if(safariVersion <= DEFAULT_VERSION ){

        alert(safariVersion);

    }

}

/*ie版本获取结束*/

版本获取到了就可以干很多事情了，如兼容方面的，我们可以换一套样式表来在ie8以下表现出兼容的版本的网页，这个就像media查询一样。

以下是自己做的一个思维导图，人懒不想写了。

选择器目前就那么多，如果要分细，还有表格专用的选择器，表单专业的选择器。

操作表格的方法：

tHead : 头部

tBodies : 正文

tFoot : 尾部

rows : 行

cells : 列

如 oTab.tBodies[0].rows[1].cells[1].innerHTML

这是首先获取到表格的table元素，然后使用上面的操作获取但所需要的元素。

表单操作：

form标签的里面的name值很重要，比id重要。

他可以直接获取name值,获取文档对象

obj.name

如

<form id="from">

<input type="text" name="text1" >

</form>

var oFrom=document.getElementById("from");

var oText=oFrom.text1;

注意前方高能：

在多方面的测试下，发现这些选择器大部分都不能动态获取的，就是在没有这个元素前去获取它，浏览器会报错的，而只有document.getElementsByTagName()可以

做到这一步，所以需要动态获取，还是标签选择器比较好。

下面为测试代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script>

    /*在我的测试下，只有document.getElementsTagName()动态获取*/

    window.onload=function(){

    var oTag1=document.getElementsByTagName("div");

    var oTag=document.querySelectorAll(".div");

    document.body.innerHTML="<div class='div'></div><div class='div'></div><div class='div'></div><div class='div'></div>";

    alert("querySelectorAll: "+oTag[1]);

    alert("TagName: "+oTag1[1]);

}

    </script>

</head>

<body>

</body>

</html>

每一日推：

今天来个文字搬运工

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>文字搬运工</title>

<style>

body{

    margin:0;

    padding:0;

    background:#EEE;

    font-size:14px;

    font-family:Arial, Helvetica, sans-serif;

}

ul{

    list-style:none;

    padding:0;

    margin:0;

}

#wrap{

    width:750px;

    margin:0 auto;

    border:10px solid #C6C6C6;

    background:#fff;

    padding:10px;

}

#wrap:after{

    content:"";

    display:block;

    clear:both;

}

#text{

    display:block;

    width:280px;

    height:400px;

    float:left;

    border:none;

    background:#FFC68C;

    padding:10px;

    outline:none;

    resize:none;

}

#btn{

    width:120px;

    height:400px;

    float:left;

    padding:15px;

    text-align:center;

}

#btn .btn0{

    width:100px;

    height:30px;

    text-align:center;

    outline:none;

    background:#ff7600;

    border:none;

    color:#CCC;

    cursor:pointer;

}

#btn .btn0:hover{

    background:#F95100;

}

#move{

    height:10px;

    width:100px;

    margin-left:15px;

    opacity:0;

    }

#move li{

    float:left;

    margin-left:3px;

    background:#ff7600;

    width:10px;

    height:10px;

}

#move li.active{

    background:#F30;

}

#contains{

    width:280px;

    height:400px;

    padding:10px;

    float:left;

    background:#A6A6FF;

    word-wrap:break-word;

}

</style>

<script>

window.onload=function(){

    var oText=document.getElementById("text");

    var oBtn=document.getElementById("btn");

    var oInp=oBtn.getElementsByTagName("input")[0];

    var oP=oBtn.getElementsByTagName("p")[0];

    var aSpan=oP.getElementsByTagName("span");

    var oUl=document.getElementById("move");

    var aLi=oUl.getElementsByTagName("li");

    var oContains=document.getElementById("contains");

    var num=1;

    oInp.offOn=true;

    oBtn.count=0;

    oBtn.num=0;

    for(var i=0;i<aLi.length;i++){

        aLi[i].index=i;

        }

    oInp.onclick=function(){

        if(oInp.offOn&&oText.value!=""){

        oUl.style.opacity=1;

        clearInterval(oBtn.timer);

        oBtn.timer=setInterval(act,100);

        oText.val=oText.value;

        aSpan[1].innerHTML=oText.val.length;

        oInp.offOn=!oInp.offOn;

        clearInterval(this.timer);

        this.timer=setInterval(function(){

             beginMove();

            },100);}

        }

    function act(){

        aLi[oBtn.count].className="";

        oBtn.count=aLi[oBtn.num].index;

        aLi[oBtn.num].className="active";

        oBtn.num++;

        oBtn.num%=aLi.length;

        }

    function beginMove(){

        if(num<=oText.val.length){

            var arr=oText.val.split("",num);

            var str=oText.val.substring(num);

            oText.value=str;

            aSpan[0].innerHTML=arr.length;

            oContains.innerHTML=arr.join("");

            num++;

            }else{

            num=1;

            clearInterval(oBtn.timer);

            clearInterval(oInp.timer);

            oUl.style.opacity=0;

            oInp.offOn=!oInp.offOn;

                }

        }

    }

</script>

</head>

<body>

<div id="wrap">

<textarea id="text"></textarea>

<div id="btn">

    <input type="button" class="btn0" value="把文字右移">

    <p><span>0</span>/<span>0</span></p>

    <ul id="move">

    <li class="active"></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    <li></li>

    </ul>

</div>

<div id="contains"></div>

</div>

</body>

</html>

javascript基础06的更多相关文章

JavaScript基础06——字符串
字符串的创建: 字符串的创建: var str = "hello world"; //常量,基本类型创建 var str2 = new String("hello wor ...
JavaScript基础06——Math对象和日期对象
内置对象-Math: Math对象用于执行数学任务,Math 不像 Date 和 String 那样是对象的类,因此没有构造函数Math().无需创建,直接把Math当成对象使用,就可以调用其所有 ...
JavaScript基础入门06
目录 JavaScript 基础入门06 Math 对象 Math对象的静态属性 Math对象的静态方法指定范围的随机数返回随机字符三角函数 Date对象基础知识日期对象具体API 构造函数 ...
JavaScript基础系列目录（2014.06.01~2014.06.08）
下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...
前端之JavaScript基础
前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...
javascript基础05
javascript基础05 1.变量的作用域变量既可以是全局,也可以是局部的. 全局变量:可以在脚本中的任何位置被引用,一旦你在某个脚本里声明了全局变量,你就可以在这个脚本的任何位置(包括函数内 ...
第三篇：web之前端之JavaScript基础
前端之JavaScript基础前端之JavaScript基础本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript ...
JavaScript基础（.....持续待更）
javascript热身一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...
JavaScript 基础学习1-day14
JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

随机推荐

sublime 插件
由于之前的代码可视化方案太复杂,分析时间太长,不实用,另一方面是而且工作以后业余时间大大减少,因此决定放弃原有路线,从工作中最迫切的需求着手,逐步构建一个实用的工具. 新的方法仍然依赖understa ...
BZOJ2748[HAOI2012]音量调节
Description 一个吉他手准备参加一场演出.他不喜欢在演出时始终使用同一个音量,所以他决定每一首歌之前他都要改变一次音量.在演出开始之前,他已经做好了一个列表,里面写着在每首歌开始之前他想要改 ...
fMRI: spatial smoothing
Source: Brain voyager support Theoretical Background Spatial smoothing means that data points are av ...
nodejs+express+mysql 增删改查
之前,一直使用的是nodejs+thinkjs来完成自己所需的项目需求,而对于nodejs中另外一中应用框架express却了解的少之又少,这两天就简单的了解了一下如何使用express来做一些数据库 ...
调用webapi 错误：使用 HTTP 谓词 POST 向虚拟目录发送了一个请求，而默认文档是不支持 GET 或 HEAD 以外的 HTTP 谓词的静态文件。的解决方案
第一次调用webapi出错如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// ...
Css--深入学习之切角
本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想带切角的矩形: 该图来源于(奇思妙想) Css代码: .not ...
公司VPN信息
公司VPN证书信息(请妥善留档本邮件) 管理管理员 <admin@pansoft.com> 2016/12/12 11:00 收件人: huhuan@pansoft.com × ...
jsp中的<%%>和<!%%>的区别
jsp 都是解析成.java文件` 具体代码请看如果你写 <%int a=1;%> 生成的代码是 public class xxx_jsp { public void doProcess ...
WCF服务器证书配置说明-没有能够进行密钥交换的私钥，或者进程可能没有访问私钥的权限
WCF服务器证书配置说明 1.创建证书: makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=XXX -sky exchange -pe 说明: -s ...
Linux 查找进程运行位置
1.通过ps或者top命令查看运行的进程的pid ps -aux|grep php-fpm #或者 top 2. 获取进程的pid后,然后使用命令ls -l /proc/${pid},这个命令可以列出 ...

javascript基础06

javascript基础06的更多相关文章

随机推荐

热门专题