javascript基础07

1、节点

元素.childNodes : 属性

只读 属性 子节点列表集合

元素.childNodes 只包含子节点,不包含孙节点

DOM节点的类型有很多种,w3c标准有12种

标准下:包含了文本节点和元素节点,也会包含非法嵌套的子节点

非标准下:包含元素节点,ie7以下不会包含非法包含的嵌套的子节点

非标准就是IE7以下

常用文本节点、元素节点

空节点也是文本节点

判断节点的类型:
元素.nodeType : 只读 属性 当前元素节点的类型
返回值为1、2、3、4、5
1:元素节点
2:属性节点
3:文本节点

属性
元素.attributes 获取属性节点,属性的集合

元素.name 获取属性名
元素.value 获取属性值

这个推荐使用

元素.children : 只读 属性 子节点列表集合

这个标准下:只包含元素类型的节点
非标准:只包含元素节点类型的节点

非法嵌套ie7以下是不认识的,会把它放到别的标签下

        <ul>
        <a href=""><li></li></a>
        <a href=""><li></li></a>
    </ul>
    <!-- ul包住a就是非法嵌套 -->    

元素.firstChild : 只读 属性 第一个子节点

标准下:包含文本节点和元素节点
非标准:包含元素节点

元素.firstElementChild : 只读 属性 第一个子元素节点

标准下:包含元素节点
非标准:没有这个属性

这个兼容性问题 可以使用元素.children[0] 来代替,比较靠谱

如果只获取子元素节点,使用.children 属性就可以了

元素.nextSibling || 元素.nextElementSibling 下一个兄弟节点

元素.previousSibling || 元素.previousElementSibling 上一个兄弟节点

兼容问题:
这种属性获取节点也是有问题的,如最后的元素节点获取下一个文本节点。

父节点操作

通过子节点获取父节点
元素.parentNode : 只读 属性 当前节点的父级节点

父节点只有一个所以返回的只有一个节点

这个没有兼容问题

还有一个父节点获取
元素.offsetParent : 只读 属性 离当前元素最近的一个有定位属性的父节点

css的定位父级属性一样

如果当前元素没有定位属性,默认为body,如果有定位属性,然而父级没有定位属性,默认是Body但ie7以下是HTML

ie7以下,如果当前元素的某个父级触发了layout,那么offsetParent就会指向到这个被触发了layout特性的父级

DOM的兼容性问题还是很大的,尤其是非法的嵌套等;

所以语义化结构布局是很必要的。

offsetLeft[top] : 只读 属性 当前元素定位父级的距离(偏移值)

到定位父级的距离

ie7以下,如果自身没有定位,那么offsetLeft[Top]是到body的距离

如果有定位,那么offsetLeft[Top]是到有定位父级的距离

元素.offsetParent

没有定位父级:

ie7以下
自身没有定位
元素.offsetParent ->body
自身有定位
元素.offsetParent ->html

其他浏览器
元素.offsetParent ->body

有定位父级和自身定位 全部浏览器都没有区别

obj.width

obj.style.width 样式宽

obj.clientWidth 样式宽+padding 可视区宽

obj.offsetWidth 占位宽 样式宽+padding+border

ie7以下,因为body有个margin的默认值,所以清除默认后都距离没什么区别,HTML

不同浏览器margin的值不一样

封装某个元素到页面的距离:

//获取元素到文档边缘的距离

function getPos(obj){

    var obj0=obj;
    var pos={"left":0,"top":0};
    while(obj0){
        pos.left+=obj0.offsetLeft;
        pos.top+=obj0.offsetTop;
        if(obj0){
            obj0=obj0.offsetParent;
            }
        }
    return pos;
    }
// 直接调用就可以,把所要获取元素到文档边缘的距离的元素传进去即可
如:
var a=docuemnt.querySelector("div"),
b=getPos(a);

// 函数会返回一个距离的值

元素动态创建

innerHTML也可以实现动态创建,但每次创建都要历遍全部,如果信息量大,性能是不好的。

而docuement.createElement()是在创建新的标签,然后添加,是不会历遍全部,在添加,而是直接添加
进去,性能方面很好,就是麻烦了些。

添加的方法appendChild() 追加自子元素

父级.appendChild()

父级.insertBefore(新元素,被插入元素) 方法 在指定的元素前面插入一个新元素

父级.insertBefore(新元素,被插入元素)与父级.children[0]配合使用

非标准:ie下children在父级下没有子元素节点就会报错,所以需要判断

删除
父级.removeChild(要删除的元素) 删除元素

如可以在动态的创建元素时动态的加上点击事件

例子:

var oA=document.getElementById("a");
oA.innerHTML="删除";
oA.href="javascript:;" ;
oA.onclick=function(){
oUl.removeChild(this.parentNode);
}//这是一种事件的绑定

 

父级.replaceChild(新节点,被替换节点) 替换节点

appendChild 和 insertBefore , replaceChild() 可以操作动态创建节点和已经存在的节点

不过它们操作已经存在的节点是把原有的节点剪切到目的点

它们都是动态的,获取id是静态,getElementById();

Event-事件详解

焦点事件

焦点:能够是浏览器区分用户输入的对象,当一个元素有焦点的时候

那么就可以接受用户的输入。

我们可以通过一些方式给元素设置焦点

1.点击

2.tab

3.js

不是所有元素都能够接受焦点的,能够响应用户操作的元素才有焦点。

表单,a标签都可以获取焦点

焦点事件

onfocus : 当元素获取到焦点的时候触发

onblur : 当元素失去焦点的时候触发

obj.focus() 给指定元素设置焦点

obj.blur() 给指定元素取消焦点

obj.select() 选择指定元素的里面的文本内容

event : 事件对象,当一个事件发生的时候,和当前这个对象发生的这个事件有关的一些详细的信息

都会被临时保存到一个指定地方-event对象,供我们在需要的调用。 就像飞机-黑匣子

ie/chrome : event 是一个内置的全局对象

ff:事件对象是通过事件函数的第一个参数传入的

如果一个函数被事件调用的,那么这个函数定义的第一个参数就是事件对象

标准下:都可行

非标准下:不可行,但可以接受全局event

ie先给它null

事件对象必须在一个事件调用的函数里使用才有内容

事件函数:事件调用的函数

event存储了很多属性,可以使用 for in 遍历出来

clientX[Y] 鼠标相对页面的可视区的位置

事件对象event需要事件的支持,在其的函数里

鼠标移动事件onmousemove

触发频率不是像素,而是间隔时间,在一个指定时间内(很短),如果

鼠标的位置和上一次的位置发生了变化,那么就会触发一次

可视区,如果有滚动条,而你想实现物体随鼠标移动,那你就要加上滚动条

的看不到的距离,加上文档的距离向上的距离

如:

event.clientX是以可视区左上角为坐标原点

X=event.clientX+document.getElement.scrollLeft+"px";

事件流

事件冒泡:

当一个元素接受到事件的时候,会把他接受到的所有传播给的父级一直到顶层.

只与它的HTML结构有关

给**加事件,给元素加事件处理函数

事件函数绑定

告诉div1,如果他接受到了一个点击事件,那么他就去执行fn1

事件冒泡:可以使用子级获取点击,而父级给个点击事件处理函数,这样就

可以只有父级统一执行这个函数。就是事件委托

阻止冒泡: event.cancelBubble = true; //阻止当前事件处理函数的事件

冒泡:

其他说白了就是文档对象都有事件的存在,只是没有给予事件函数,所以获得

事件,但没有事件函数就执行不了,而事件冒泡,就是一层一层向上的触发

事件,如果有这个事件的事件处理函数的对象,就会执行这个函数。

如果和定时器一起用就会有时间概念,这个时候需要注意一个,出现的问题;

没时间概念时,有很多问题都是看不出来的,因为同时执行,效果看不出事件

冒泡的影响。

只有当前事件有阻止冒泡,那么它之下的子孙级元素都到这里就结束冒泡了

事件捕获:

ie下没有的(这个非标准下的),在绑定事件中,标准下是有的

事件绑定的第二种形式

给一个对象绑定一个事件处理函数的第一种形式

如:obj.onclick=fn1

如果再来一个一样的obj.onclick=fn2,这样会覆盖之前的

给一个对象的同一个事件绑定多个不同的函数

给一个元素绑定事件函数的第二种形式

非标准:执行顺序倒过来的;后添加的执行先。

非标准下是没有捕获所以只能使用以下的实现

ie:obj.attachEvent(事件名称,事件函数)

如:document.attachEvent("onclick",fn1);

特点:

1.没有捕获

2.事件名称有on

3.事件顺序是倒序

4.this指向window

标准下:

obj.addEventListener(事件名称,事件函数,是否捕获)

是否捕获:默认是false false:冒泡 true:捕获

如:document.addEventListener("click",fn1,false);

事件名称有点区别,上面的是有on的,这个是没有on

call函数下的一个方法,call方法第一个参数可以改变函数执行过程中内部this的指向

fn1()与fn1.call() 没什么区别,都是函数的调用

fn1(){
alert(this);
}

fn1.call(1); 它会弹出一个1

如果传入null,就不会改变this的指向

这个call方法在原型继承里使用比较多。

把其封装起来使用:

//事件的第二种形式,一个事件拥有多个函数
//evname 传入不带on的字符串
function bind(obj,evname,fn){
    if(obj.addEventListener){
        //第三个参数决定冒泡与捕获
        obj.addEventListener(evname,fn,false);
        }else{
            //obj.attachEvent的this指向是window,不是绑定对象,所以需要call方法改变指向
            obj.attachEvent("on"+evname,function(){
                fn.call(obj);
                });
            }
    }

事件捕获:

ie(非标准)没有事件捕获

obj.addEventListener("click",fn,false)

false,true 是冒泡和捕获,就是执行的顺序不一样,捕获是进来就是从父辈

级到目的对象文档,冒泡是从目标文档对象到document(父辈级)

false,true 控制是在事件进出时就执行还是冒泡时执行

false:冒泡 就是捕获后冒泡时执行有共同事件的文档对象

true:捕获 就是点击事件在捕获时执行有共同事件的文档对象

取消普通事件

简单的对事件重新赋值

如:document.focumentElement.onclick=null;

但绑定了多个后的取消方法:

ie:obj.attachEvent("onclick",fn1);

obj.detachEvent(事件名称,事件函数); //多个事件函数的取消,其中的

一个的方法;

标准下的:

obj.removeEventListener(事件,事件函数,是否捕获); 取消事件函数

但要说清楚是捕获,因为可以同时对一个事件,同一个事件函数,设置冒泡

与捕获方法,就是可以执行两次同一事件函数,且不会覆盖掉

键盘事件

onkeydown : 当键盘按下的时候触发的

如果按下不抬起,那么会连续触发,而在触发连续触发时有一个停顿的时间,

这是为了确认你是否连续触发,而在某些时候,你需要去除停顿,

这里你可以使用定时器的思路去修改。

使用alert()弹出的上次输入的值

onkeyup : 当键盘抬起的时候触发的

event.KeyCode : 数字类型,按键的值 键值

event.KeyCode只有一个值不能同时判断两个键盘值

event.ctrlKey / event.shiftKey / altKey 返回布尔值

当一个事件发生的时候,如果按下了ctrl,shift,alt就会返回true,否则false

不是所有元素都接受键盘事件的,能够响应用户输入的元素,才能接受键盘事件,就是能够获得焦点的元素

而document是可以接受的

document.onkeydown=function(){}

事件默认行为:

当一个事件发生的时候浏览器自己会默认做的事情怎么阻止?

1、当前这个行为是什么事件触发的,然后在事件的处理函数中使用

return false;

oncontextmenu : 右击菜单事件,当右击菜单(环境菜单)显示出来的时候触发

如果再网页上看到不同的菜单,就是先去除默认菜单,然后使用oncontextmenu事件

模拟出来的菜单

如:document.oncontextmenu=function(){
.......
.......
return false;
}

每日一推:

圆形进度条:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圆形进度条</title>
    <!-- 本例子兼容性不好,基于css3的属性的 -->
    <style>
    /* clip是背景截取,它是会截取背景后是真正不截取了,就算旋转,被截取的背景也不会出现了
        ,且截取到的背景出了截取范围,是会像overflow一样被隐藏掉。所以基于这个想法,做
        圆形进度条
        clip:rect(top,right,bottom,left);
        这里的clip需要自己体验,才能知道它的效果。
        为什么会有两个盒子呢?就是一个父盒子和子盒子。
        这是为了达到一个静态截取,而一个动态的旋转的,但这个这截取是为了获得半个圆。
        那么就可以实现进度条了,剩下的就是js的效果
     */

     /* 以下是进度条的样式 */
    .progress{
        width: 200px;
        height: 200px;
        margin: 0 auto;
        position: relative;
        background: #00aacc;
        border-radius: 50%;
    }
    .leftBox,.rightBox{
        position: absolute;
        left: 0;
        top: 0;
        width: 200px;
        height: 200px;
    }
    .leftBox{
        clip:rect(0,100px,auto,0);
    }
    .rightBox{
        clip:rect(0,auto,auto,100px);
    }
    .mask{
        position: absolute;
        width: 150px;
        height: 150px;
        top: 25px;
        left: 25px;
        background: #fff;
        z-index: 2;
        border-radius: 50%;
        text-align: center;
        line-height: 150px;
        font-size: 30px;
        color: #0cc;
    }
    .left,.right{
        position: absolute;
        top: 0;
        left: 0;
        width: 200px;
        height: 200px;
        background: #0cc;
        border-radius: 50%;
        background:#0cc;
    }
    .left{
        clip:rect(0,100px,auto,0);
        transform: rotate(0deg);
    }
    .right{
        clip: rect(0,auto,auto,100px);
        transform: rotate(0deg);
    }
    </style>
    <script type="text/javascript">
        window.onload=function(){
            var oLeft=document.querySelector(".progress .left"),
                oRight=document.querySelector(".progress .right"),
                oT=document.querySelector(".mask .text"),
                timer=null;
                num=0;
                num2=0;
                count=0;
                val=null;
                offOn=true;
                timer=setInterval(function(){
                    /*这里做的不理想,不应该这样传参数的*/
                    move({
                        percentage:oT,
                        left:oLeft,
                        right:oRight,
                    })
                },30);

                function move(json){
                    if(num<=180 && offOn){
                        json.right.style.transform="rotate("+num+"deg)";
                        num++;
                    }else{
                        offOn=false;
                        num2++;
                    }

                    if(num2<=180 && !offOn){
                        json.left.style.transform="rotate("+num2+"deg)";
                    }
                    if(num2>180){
                        clearInterval(timer);
                    }
                    count++;
                    val=Math.floor(count*100/360);
                    json.percentage.innerHTML=val;
                }
        }

    </script>
</head>
<body>
    <div class="progress">
    <!-- 上面说的父盒子和子盒子就是leftBox和left和下面那个 -->
        <div class="leftBox">
            <div class="left"></div>
        </div>
        <div class="rightBox">
            <div class="right"></div>
        </div>
        <div class="mask"><span class="text">0</span><span>%</span></div>
    </div>

</body>
</html>

倒计时的思路:

new Date()    当前系统的时间对象   就是本电脑的时间,前一秒与后一秒不一样

new Date()   数据类型object

它低下的对象:   数据类型Number
年   getFullYear();   

月    getMonth()+1;    有点特殊,它是从零开始的,要加一

日     getDate();       

星期    getDay();

小时    getHours();

分钟    getMinutes();

秒钟    getSeconds();

new Date(); 里面可以放值

数字形式:new Date(2013,4,1,9,16,12);
字符串形式:new Date(“june 10,2013 12:12:12”);

两时间相减是毫秒  除1000为秒
t相减后除以1000的值
天:Math.floor(t/86400);
时:Math.floor(t%86400/3600);
分:Math.floor(t%86400%3600/60);
秒:t%60

时间戳
getTime();
返回的是1970年1月1号0点0分0秒0毫秒到现在的毫秒数

一月:January 

二月:February

三月:March

四月:April

五月:May 

六月:June 

七月:July

八月:August 

九月:September 

十月:October 

十一月:November

十二月:December

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时特效</title>
    <script type="text/javascript">
        window.onload=function(){
        time();
        setInterval(time,1000);    

            function time(){
                var f_date=new Date("2016/9/9 12:00");
                var n_date=new Date();
                var aLi=document.querySelectorAll(‘ul li‘);
                var total=(f_date.getTime()-n_date.getTime())/1000,
                h=num(Math.floor(total%86400/3600)),
                i=num(Math.floor(total%86400%3600/60)),
                s=num(Math.floor(total%60));
                str=h+":"+i+":"+s,
                aImg=document.getElementsByTagName("img");
                arr=str.split("");
                setTimeout(function(){
                    aImg[2].src="./img/bg.jpg";
                    aImg[5].src="./img/bg.jpg";
                },500);
                for(var i=0;i<arr.length;i++){
                    if(arr[i]==":"){
                        aImg[i].src="./img/colon.jpg";
                    }else{
                        aImg[i].src="./img/"+arr[i]+".jpg";
                    }
                }
            }
        }

        function num(a){
            return a<10?"0"+a:""+a;
        }

    </script>
    <style>
    ul{
        width: 500px;
        padding: 0;
        margin: 0 auto;
        list-style: none;
        overflow: hidden;
    }
    ul li{
        float: left;
    }
    ul li img{
        width: 50px;
    }
    </style>
</head>
<body>
    <h1>距离下课时间还有:</h1>
    <ul>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
        <li><img src="" alt=""></li>
    </ul>
</body>
</html>

图片自备。这个做的不是很好。 总感觉还可以做的更好,更灵活。javascript是一门很灵活的语言,所以才容易出错,它松散型有时让人难以理解。

放大镜效果:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <!-- 做放大镜效果,首先是把布局写好,在基于布局编写js
        而js里的主要是事件和event的鼠标位置的获取后进行处理
        ,然后按两张图片的比例来确定一个图片的位置对应另一张图片
        的位置,实现放大镜的效果。
        如果懂原型,可以把它封装组件,那样就是对放大镜的效果地方调用
        它,不懂也可以封装,只是维护性差些
     -->
    <style>
        #div{
            width: 800px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }
        #div2{
            float: left;
            margin-right: 10px;
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid #eee;
        }
        #div3{
            width: 300px;
            height: 300px;
            position: relative;
        }
        #div3 .mark{
            position: absolute;
            top: 0;
            left: 0;
            width: 300px;
            height: 300px;
            z-index: 10000;
        }
        #div3 .smallbox{
            width: 50px;
            height: 50px;
            background: #eee;
            border: 1px solid #000;
            opacity: 0.3;
            filter: alpha(opacity=30);
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #div3 img{
            width: 300px;
            height: 300px;
        }
        #div4{
            width: 400px;
            height: 400px;
            position: relative;
            float: left;
            display: none;
            overflow: hidden;
        }
        #div4 img{
            width: 600px;
            height: 600px;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <script>
        window.onload=function(){
            var oDiv3=document.getElementById("div3");
            var oMark=getClass(oDiv3,"mark")[0];
            var oSmallbox=getClass(oDiv3,"smallbox")[0];
            var oImg=getClass(document,"big")[0];
            var oDiv4=document.getElementById("div4");
            oMark.onmousemove=function(ev){
                oDiv4.style.display="block";
                oSmallbox.style.display="block";
                ev=ev||event;
                var l=0;
                var t=0;
                var offX=ev.clientX-getPos(this).left-oSmallbox.offsetWidth/2;
                var offY=ev.clientY-getPos(this).top-oSmallbox.offsetHeight/2;
                if(offX<=0){offX=0}
                if(offX>=this.offsetWidth-oSmallbox.offsetWidth){
                    offX=this.offsetWidth-oSmallbox.offsetWidth;
                }
                if(offY<=0){offY=0}
                if(offY>=this.offsetHeight-oSmallbox.offsetHeight){
                    offY=this.offsetHeight-oSmallbox.offsetHeight;
                }
                oSmallbox.style.left=offX+"px";
                oSmallbox.style.top=offY+"px";

                l=offX/(this.offsetWidth-oSmallbox.offsetWidth);
                t=offY/(this.offsetHeight-oSmallbox.offsetHeight);

                oImg.style.left=-l*(oImg.offsetWidth-oDiv4.offsetWidth)+"px";
                oImg.style.top=-t*(oImg.offsetHeight-oDiv4.offsetHeight)+"px";
                document.title="x:"+l+",Y:"+t;
            }
            oMark.onmouseout=function(){
                oDiv4.style.display="none";
                oSmallbox.style.display="none";
            }
        }

        function getClass(obj,classname){
            var aTag=obj.getElementsByTagName("*");
            var arr=[];
            for(var i=0;i<aTag.length;i++){
                if(aTag[i].className==classname){
                    arr.push(aTag[i]);
                }
            }
            return arr;
        }

        function getPos(obj){
            var obj0=obj;
            var pos={
                "left":0,
                "top":0
            }
            while(obj0){
                pos.left+=obj0.offsetLeft;
                pos.top+=obj0.offsetTop;
                if(obj0){
                    obj0=obj0.offsetParent;
                }
            }
            return pos;
        }

    </script>
</head>
<body>
<!-- 这是左边的盒子 -->
    <div id="div">
        <div id="div2">
            <div id="div3">
                <span class="mark"></span>
                <span class="smallbox"></span>
                <img src="./4.jpg" alt="" />
            </div>
        </div>
        <!-- 这是右边的盒子,右边盒子是放大图片的 -->
        <div id="div4">
            <img src="./4.jpg" alt="" class="big" />
        </div>
    </div>
</body>
</html>

图片自备,修改Img标签里的路径即可。

时间: 2024-10-25 01:38:20

javascript基础07的相关文章

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.01 -- Javascript基础

Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和sun合作. Java+script   ===> javascript 1.2 W3c规范 ?结构标准        html ?表现标准   css ?行为标准      js 1.3 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协

一步步学习javascript基础篇(3):Object、Function等引用类型

我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂数据类型(即引用数据类型) Object类型 我们用的最多的引用类型就属object类型了,一般用来存储和传输数据是再好不过的.然,它的两种创建方式我们是否了解呢? 1.通过构造函数来创建 如: var obj = new Object(); 在js中的引用类型有个非常灵活的用法,可以动态的附加属性和赋值.

【javascript基础】6、new与构造函数

原文:[javascript基础]6.new与构造函数 前言 上篇说创建对象的时候提到了带返回值的构造函数,那里没有和大家说这个问题,今天就和大家一起学习构造函数和new操作符.我也是最近才稍微弄明白点这个构造函数,以前总是忽略一些问题,现在就是想到哪块不行,就研究下,查查资料,自己捣鼓捣鼓,希望大家也随手记一下自己突然想起的哪块不熟悉知识点. javascript中的类 JavaScript 是面向对象的语言,但是他的面向对象不是基于类的,是基于原型的.javascript中没有是类,任何所谓

前端之JavaScript基础

前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C-minus-minus(C-)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本

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入门书籍推荐《javascript基础教程》

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

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q