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>
时间: 2024-10-14 15:02:54

javascript基础06的相关文章

JavaScript基础06——字符串

字符串的创建: 字符串的创建: var str = "hello world"; //常量,基本类型创建 var str2 = new String("hello world"); //构造函数创建 字符串的属性: str.length //字符串的长度 字符串常见API: 1. String.prototype.charAt() charAt方法返回指定位置的字符,参数是从0开始编号的位置. var str = "hello,world"; c

JavaScript基础06——Math对象和日期对象

内置对象-Math: Math对象用于执行 数学任务,Math 不像 Date 和 String 那样是对象的类,因此没有构造函数Math().无需创建,直接把Math当成对象使用,就可以调用其所有的方法和属性. Math对象的静态属性: Math.E:常数e. Math.LN2:2 的自然对数. Math.LN10:10 的自然对数. Math.LOG2E:以 2 为底的e的对数. Math.LOG10E:以 10 为底的e的对数. Math.PI:常数π. Math.SQRT1_2:0.5

JavaScript基础系列目录(2014.06.01~2014.06.08)

下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%20%E6%80%BB%E7%BB%93/ 1. Javascript基础---语法(待完成) 2. JavaScript基础---数据类型(待完成) 3. JavaScript基础---Array数组(待完成) 4. JavaScript基础---正则表达式(待完成) 5. Jav

javascript基础学习(八)

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采

Javascript基础篇小结

Javascript基础篇小结 字数9973 阅读3975 评论7 喜欢28 转载请声明出处 博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript操作DOM的本质是=获取+触发+改变 目的:就是用来操作内存中的DOM节点 修改D

JavaScript基础--内部类(九)

js的内部类javascript 中本身提供一些,可以直接使用的类,这种类就是内部类,主要有:ObjectArrayMathBooleanStringRegExpDateNumber 1.内部类分类从使用的方式看:分为动态类和静态类(1) 动态类 使用 var对象 = new 动态类() 对象属性|方法 var newdate = new Date(); //显示当前日期 window.alert(newdate.toLocaleString()); (2) 静态类 使用 类名.属性|方法比如:

JavaScript 基础学习1-day14

JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator

JavaScript基础入门07

目录 JavaScript 基础入门06 BOM window对象 Navigator对象 Screen 对象 Location对象 History 对象 JavaScript 基础入门06 BOM 当js的运行环境为浏览器时,学习js应该将其分成三个部分:ECMAScript核心语法.BOM.DOM. BOM我们可以将其称之为浏览器对象模型,主要描述了与浏览器进行交互的方法和接口. IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM(浏览器对象模型),可

javascript入门书籍推荐《javascript基础教程》

前段时间看javascript高级教程的时候,发现很多基础的javascript概念,自己不懂. 网上搜了一下,看到大家对<javascript基础教程(第8版)>评价不错,买了一本. 作者: (美)Tom Negrino Dori Smith 译者: 陈剑瓯 柳靖 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 翻开看了后,受益匪浅,决定将这本书推荐给javascript的入门童鞋. 这本书的读者,要有一定的HTML基础,因为javascript基本都是对Dom的操作,所以,有一定的HT