给李书记点个赞吧
首页

第六天 javascript节点操作

HTML文档中的每个成分都是一个节点。

根据DOM,HTML文档中的每个成分都是一个节点。

1.整个文档是一个文档节点

2.每个HTML标签是一个元素节点

3.包含在HTML元素中的文本是文本节点

4.每一个HTML属性是一个属性节点

5.注释属于注释节点

节点的访问:( IE会忽略节点之间生成的空白文本节点(比如换行字符),而 Mozilla 不这么做.)

查找并访问节点

你可通过若干种方法来查找您希望操作的元素:

1.通过使用

getElementById(“id”)

getElementsByTagName(“tagname”)

getElementsByClassName(“classname”)

getElementsByName(“name”)

2.获取子节点(包括子元素节点与子文本节点)

obj.childNodes

3.获取第一个子节点(可能是子元素节点或子文本节点)

obj.firstChild

4.获取最后一个子节点: obj.lastChild

5.获取父节点: nodeobj.parentNode

6.获取子元素节点: obj.children

7.获取父元素节点: bj.parentElement;

//和obj.parentNode相同,获取同一个人,是单数

8.获取前一个兄弟元素: obj.previousSibling(包括元素节点与文本节点)

9.获取下一个兄弟元素: obj.nextSibling obj.previousSibling(包括元素节点与文本节点)

1.节点名称  obj.nodeName

nodeName 是只读的

元素节点的 nodeName 与标签名相同 div

属性节点的 nodeName 是属性的名称 元素节点对象的所有属性的集合obj.attributes

文本节点的 nodeName 永远是 #text  元素节点的文本内容

文档节点的 nodeName 永远是 #document 最大的,在html之上

2.节点值 obj.nodeValue

元素节点的 nodeValue 是 null

文本节点的 nodeValue 是 文本自身

属性节点的 nodeValue 是 属性的值

<div id=”box” name=”box1″ class=”box2″>    box1box2box3    </div>

<script>

alert(box.attributes[0].nodeValue); //获取元素的第一个属性节点的值,结果box2,从内侧算到外侧.

</script>

3.节点名称  obj.nodeType

nodeType 是只读的

nodeType 属性规定节点的类型 (某对象noType属性等于1代表该对象为元素对象,等于2代表该对象为属性对象,等于3代表该对象为文本对象)

获取节点:

1.获取元素节点

1).document.getElementById(“id”);

2).document.getElementsByName(“name”);

3).document.getElementsByTagName(“tagname”);

4).document.getElementsByClassName(“classname”);

2.获取属性节点

1).obj.attributes; //获取对象的所有的属性的集合 (兼容性不好,对空格等)

2).obj.getAttribute(“id”); //获取id属性节点的值

3).obj.getAttributeNode(“id”)  //获取id属性节点

3.获取文本节点

1).var obj=document.getElementById(“mydiv”);

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

if(obj.childNodes[i].nodeType==3){

document.write(obj.childNodes[i].nodeType,”<br>”);

}

}

//注意页面上的回车转行也算一个文本节点

4.获取子节点

1)obj.childNodes;  //获取子节点

5.获取第一个子节点

1)obj.firstChild;

6.获取最后一个子节点

1)obj.lastChild;

7.获取父节点

1)nodeobj.parentNode;

8.获取子元素节点

1)obj.children;  //获取元素中的子元素对象,不要文本

修改节点

1.修改元素节点

元素本身是需要修改的,比如修改a标签本身是没有意义的,而是修改它身上的属性和里面的文本节点

2.修改属性节点

obj.setAttribute(“name”,“myname”);

3.修改文本节点

1)textobj.nodeValue=“bbbbb”;

2)var obj=document.getElementById(“hid1”).childNodes[0];

var str=“linux”;

obj.insertData(3,str);   alert(obj.parentNode.childNodes.length);

删除节点

1.删除元素节点

parentNode.removeChild(x);

2.删除属性节点

obj.removeAttribute(“name”);

3.删除文本节点(文本节点属于子节点,与删除子节点方法相同)

parentNode.removeChild(x);

替换节点

1.替换元素节点

parentNode.replaceChild(newNode,oldNode);

2.替换文本节点

textobj.replaceData(offset,length,str);

创建节点(一个新创建的节点,只能被追加一次,多次追加只有最后一个起作用)

1.创建新的元素节点

document.createElement(“h1”); //一定是document文档的方法

2.创建新的属性节点

var obj = document.createAttribute(“age”);

h1obj.setAttributeNode(obj);

3.创建新的文本节点

textobj = document.createTextNode(‘aaaaaa’);

obj.appendChild(textobj);

添加节点

1.添加节点

obj.appendChild(textobj);

2.插入节点

var obj = document.getElementById(‘id’);

parentNode.insertBefore(newNode,obj);

3.创建新的文本节点

textobj = document.createTextNode(‘aaaaaa’);

obj.appendChild(textobj);

4.添加新属性

obj.addAttribute(“name”,”myname”);有些浏览器不支持

可以用obj.setAttribute(“property”,”value”);代替,该方法在属性已定义时为修改属性,在属性未定义时为添加属性

5.向文本节点添加文本

obj.insertData(0,”Hello”);

克隆节点

1.复制节点(克隆元素节点和文本节点)

obj.cloneNode();

//默认参数为true,将会克隆此节点包括子节点

//若参数为false,只会复制元素,不会复制里面的子节点

节点的其他操作

1.node操作

getAttribute(“id”)

setAttribute(“id”,”div1”)

removeAttribute(“id”)

2.获取元素标签

obj.innerHTML (常用)

obj.outerHTML (兼容问题)

obj.innerTEXT(兼容问题)

3.获取元素中的文本

obj.textContent

  • 评论:0条
  • 分类:javascript教程
  • 浏览:1156
  • 05月16日

    第五天:DOM(文档对象模型document object model)

    文档对象的常用属性

    document.forms form表单对象的数组

    document. images image对象的数组

    document. linkColor 设置或返回当前文档中未被访问过的超链接的颜色

    document.referrer 返回链接到当前文档的HTML文档的URL(跳转来源网址)

    document.URL 返回当前文档的URL

    document.vlinkColor 设置或返回当前文档中已经访问过的超链接的颜色

    document.all 文档中的所有元素的数组

    document.write 该方法可以在文档中添加数据

    document. writeln() 与write()方法相同,只是在write()方法后添加一个换行

    DOM的子对象

    图片对象

    属性

    height 整数,图片高度,单位为像素

    width 返回一个整数,图片的宽度,单位为像素

    特殊的其他对象不具备的事件:

    error 当图片加载失败时触发

    TABLE对象

    常用方法:

    deleteRow() 从表格删除一行

    insertRow() 在表格中插入一新行

    insertCell() 新行中插入新列

    如: <table border=”1″ cellspacing=”0″ id=”tb” width=”700″ id=”box”></table>

    <script>

    var newrow=box.insertRow(); //(插入一个新行)

    var newcell=newrow.insertCell; //(在行中插入一个表格)

    newcell.innerHTML=”test”;

    </script>

    键盘事件:

    键盘事件用的最多的是onkeyUP,

    onkeypress 按下时就触发了,与文档说明不符合,建议不用

    表单事件

    表单的提交可以用<input type=”submit” />按钮提交,也可以通过其他任意标签调用form表单的submit()方法进行提交,如下面的例子:

    <span id=”sub”>提交</span>

    <script>

    var sub = document.getElementById(“sub”);

    sub.onclick = function(){

    document.forms[0].submit(); //document.forms[0]代表document中的所有表

    单对象中的第一个表单对象

    </script>

    submit设置状态(以下两种写法都可以控制表单是否进行提交)

    1.<form action=”” method=”” onsubmit=”return func()”><input type=”submit”/></form>

    <script>

    var tim=new Date();

    function func(){

    if(tim.getTime()%2==0){return true;}

    else {return false;}

    }

    </script>

    上例中,当点击submit按钮提交时,会触发表单的onsubmit(),如果返回值为true则提交表单,否则则不提交

    2.document.forms[0].onsubmit=function(){return false;}该方法不会影响html代码结构

    3.取消submit按钮的提交效果

    <form action=”” method=”” ><input type=”submit” id=”tj”/></form>

    <script>

    var tim=new Date();

    tj.onclick=function (){

    if(tim.getTime()%2==0){return true;}

    else {return false;}

    </script>

    上例中,如果返回的值为false,则点击<input type=”submit” id=”tj” />不生效

    下拉列表框的属性select

    length 返回下拉列表框中的选项个数

    multiple 返回或设置下拉列表框中的选项是否允许多选

    options 返回一个数组,数组中的元素为下拉列表框中的选项

    selectedIndex 返回或设置下拉列表框中当前选中的选项在options[]数组中的下标

    remove(i) 该方法可以删除下拉列表框中的的选项,其中参数i为options[]数组的下标

    选项对象的属性option

    selected 返回或设置当前Option对象是否被选中

    事件对象(event)

    Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    解决event事件对象的兼容性问题

    <script>

    var box=document.getElementById(“box”);

    box.onclick=function(event){ //此处event为形参

    //处理兼容问题

    var ent=event||window.event; //event为形参,window.event为IE内置的event对象(event为兼容mozila,window.event为兼容IE)

    alert(ent);

    }

    </script>

     

    事件通常与函数结合使用,函数不会在事件发生前被执行!

    常用事件

    属性名 说明
    onabort 图像的加载被中断
    onblur 元素失去焦点
    onchange 元素的内容被改变
    onclick 当用户点击某个对象时调用的事件句柄
    ondblclick 当用户双击某个对象时调用的事件句柄
    onerror 在加载文档或图像时发生错误
    onfocus 元素获得焦点
    onkeydown 某个键盘按键被按下
    onkeypress 某个键盘按键被按下并松开
    onkeyup 某个键盘按键被松开
    onload 一张页面或一幅图像完成加载
    onmousedown 鼠标按钮被按下
    onmousemove 鼠标被移动
    onmouseout 鼠标从某元素移开
    onmouseup 鼠标按键被松开
    onreset 重置按钮被点击
    onresize 窗口或框架被重新调整大小
    onselect 文本被选中
    onsubmit 确认按钮被点击
    onunload 用户退出页面(现在可以用unbeforeunload代替)

    onerror的用法

    <img src=”abc.jpg” onerror=”this.src=’1.jpg'” />当找不到abc.jpg时,会自动将它的src改为1.jpg

    事件对象的属性

    鼠标/键盘属性

    属性名 说明
    altKey(了解) 返回事件被触发时,“ALT”是否被按下
    Button(了解) 返回当事件被触发时,哪个鼠标按钮被点击
    clientX(*) 返回当事件被触发时,鼠标指针的水平坐标
    clientY(*) 返回当事件被触发时,鼠标指针的垂直坐标
    ctrlKey(了解) 返回当事件被触发时,“CTRL”键是否被按下
    metaKey(了解) 返回当事件触发时,“meta”键是否被按下
    relatedTarget 返回与事件的目标节点相关的节点
    screenX 返回当某个事件被触发时,鼠标指针的水平坐标
    screenY 返回当某个事件被触发时,鼠标指针的垂直坐标
    shiftKey(了解) 返回当事件被触发时,“SHIFT”键是否被按下

    IE属性(了解)

    属性名  说明 
    cancleBubble 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为true
    fromElement 对于mouseover和mouseout事件,fromElement引用移出鼠标的元素
    keyCode 对于keypress事件,该属性声明了被敲击的键生成的Unicode字符码。对于keydown和keyup事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关
    offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的x坐标和y坐标
    returnValue 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为false,可以取消发生事件的源元素的默认动作。
    srcElement 对于生成事件的Window对象、Document对象或Element对象的引用。
    toElement 对于mouseover和mouseout事件,该属性引用移入鼠标的元素。
    x、y 事件发生的位置的x坐标和y坐标,它们相对于用CSS动态定位的最内层包容元素

    事件冒泡:

    产生事件冒泡的条件:

    1.有标签嵌套:如<div><p><a></a></p></div>

    2.标签上有相同的事件,如div,p,与a都有click事件,如果a标签中定义了click事件,则外层的p与div都会触发在a标签上定义的click事件,如果需要阻止事件冒泡,则可以在a标签的click事件中,修改cancelBubble属性,ent.cancelButtle=true;

  • 评论:0条
  • 分类:javascript教程
  • 浏览:904
  • 05月13日

    第四天:BOM(浏览器对象模型Brower Object Model)

    因为Window对象是默认的顶级对象,因此,所有代码中的“window.”都可以省略。

    1.在HTML元素属性中设置javascript对象事件

    <input type=“button” value=“按钮” onclick=“btclick()”>

    2.在JavaScript代码中设置对象事件

    <script>

    document.forms[0].elements[0].onclick=“alert(‘button’)”;

    </script>

    事件处理程序的返回值

    JavaScript中并不要求处理程序有返回值。如果事件处理程序没有返回值,浏览器就会以默认情况进行处理。但是,在很多情况下程序都要求事件处理程序要有一个返回值,通过该返回值来判断事件处理程序是否正确处理,或者通过该返回值来判断是否进行下一步操作。在这种情况下,事件处理程序返回值都为布尔值,如果为false则阻止浏览器的下一步操作,如果为true则进行默认的操作。

    <a href=”key1.html” id=”hrefa”>删除</a>

    <script>

    var hrefa=document.getElementById(“hrefa“);

    hrefa.onclick=function(){

    return confirm(“确定要删除吗”); //document.confirm(“string”)方法,返回布尔值

    }

    </script>

    上例中,当onclick事件方法中返回值为false时,点击id为hrefa的超链接,不会发生页面跳转

    定时函数setInterval()与setTimeOut()

    下面的例子的功能为,每30毫秒执行以下setInterval函数内的程序,算出0-999的和,计算完毕后,用clearInterval函数清除计时器

    var time=setInterval(

    var i;

    if(i=0;i<1000;i++){

    sum+=i;

    }else{

    clearInterval(time);

    },30);

    下面的例子的功能为,30毫秒后自动运行setTimeout函数内的程序,当运算完毕后,清除定时器

    var time=setTimeout(

    var i;

    for(i=0;i<1000;i++){

    sum+=i;

    }else{

    clearTimeout(time);

    },30);

    事件与this运算符

    由于事件通常会调用一个函数,因此在函数体中处理数据时,常常需要用到一些与对象相关的参数,此时就可以通过this运算符来传递参数,this运算符代表的是对象本身。

    <input type=‘button’ onclick=“myfun(this)” />

    <script>

    function myfun(obj){

    alert(obj);

    }

    </script>

    window对象的常用属性(window在javascript可以省略不写)

    window.document 对Document对象的引用

    window.history 对History对象的引用

    window. frames[] 一个数组,用于存放Window对象中的框架

    window.Math 对数学对象的引用

    window对象的常用方法

    alert() 弹出一个警告框

    confirm() 选对是或否的确认框,选是则返回true,选否则返回false

    prompt() 弹出一个可以输入文字的提示框,返回输入的值

    setInterval() 指定周期性执行的代码

    setTimeout() 指定在经过一段时间后执行代码

    clearInterval() 取消周期性执行的代码

    clearTimeout() 取消超时的操作

    window对象的事件:

    error 当执行JavaScript代码产生错误时激发的事件

    window对象的子对象

    Screen对象常用属性(height,width)

    Navigator对象常用属性(cookieEnabled 是否启用了cookies,)

    history历史对象 常用属性(length浏览器窗口的历史列表中的网页个数)

    history历史对象常用方法

    back()该方法可以返回到上一个访问过的URL

    forward()该方法可以前进到下一个访问过的URL

    go()该方法可以直接跳转到某一个已经访问过的URL。该方法中可以包含两种参数,一种参数是要访问的URL在历史列表中的相对位置;另一种参数为要访问的URL的子串

    location对象常用属性(

    search返回当前文档URL的参数部分,包括“?”

    href返回当前文档的完整的URL),通常我们用location.href=”www.baidu.com”;来做页面跳转

    location对象的常用方法(

    reload()该方法可以用来刷新文档  location.reload()

    replace()该方法可以用一个新的URL来取代当期的URL ———–用location.href属性可以替代

    )

  • 评论:0条
  • 分类:javascript教程
  • 浏览:1281
  • 05月12日

    第三天:javascript内置对象与数组

    for…in语句

    for(var i in window){

    document.write(i+”—-”+window[i]);

    }

     

    var arr=(1,2,3,4,5,6);

    var sum=0;

    for(var i in arr){

    sum+=arr[i];———————i为下标

    }

    alert(sum);//求出arr内元素的总和

    这种语句可以遍历对象中的所有属性或数组中的所有元素。 ————>不建议使用for..in语句遍历对象,会出现各种诡异事件

    with语句 (仅仅用于代码的省略,无任何意义,影响代码阅读,不建议使用)

    如果使用with语句,就可以简化对象属性调用的层次。

    document.write(‘test1’);

    document.write(‘test2’);

    document.write(‘test3’);

    可以使用with来简化:

    with(document){

    write(‘test1’);

    write(‘test2’);

    write(‘test3’);

    }

    JavaScript内置对象

    日期对象

    日期对象可以使用系统内置的构造函数来创建日期对象:

    new Date()

    new Date(str) //str表达日期的字符串,常用格式为“月 日 年 小时:分钟:秒”

    日期对象方法:

    getYear() //不用了,2位的年份

    getFullYear() //返回年份,4位数,建议使用

    getMonth() //返回月份,其值范围为0~11

    getDate() //返回日期对象中的一个月中的第几天

    getDay() //返回星期中的某一天,0~6

    getHours() //返回日期对象中的小时部分

    getMinutes() //返回日期对象中的分钟部分

    getSeconds() //返回日期对象中的秒钟部分

    getMilliseconds() //返回日期对象中的毫秒部分

    getTime() //得到毫秒时间戳

    getTimezoneOffset() //得到与0时区的分钟时差

    数学对象

    .数学对象的属性:(数学对象不需要创建,可以直接使用)

    Math.E: //自然对数的底数(e)

    Math.LN10: //loge10

    Math.LN2: //loge2

    Math.LOG10E: //log10e

    Math.LOG2E: //log2e

    Math.PI: //3.1415926

    Math.SQRT1_2: //2的平方根的倒数

    Math.SQRT2: //2的平方根

    Math.abs(): //绝对值

    Math.ceil(): //进一取整

    Math.floor(): //退一取整

    Math.max(num1,num2….): //取最大值

    Math.min(): //取最小值

    Math.pow(x,y): //返回x的y次幂

    Math.random(): //0.0~1.0之间的随机数

    Math.round(): //四舍五入

    Math.sqrt(): //平方根

    Math.random的常见使用方法:

    <button id=”btn” style=”margin:10px auto;display:block;padding:20px;font-size:20px”>开始</button>

    <script>

    var box=document.getElementById(“box”);

    var btn=document.getElementById(“btn”);

    var arr=[“悟空”,”沙僧”,”唐僧”,”小钻风”,”大钻风”,”八戒”,”精灵虫”,”奔波儿灞”,”霸波尔奔”];

    var time;

    var len=arr.length;//获取arr数组元素个数

    btn.onclick=function(){

    if(this.innerHTML==”开始”){

    this.innerHTML=”停止”;

    time=setInterval(function(){

    var index=Math.ceil(Math.random()*10000000)%len;

    len为数组长度

    Math.random()获取从0-1的随机小数,*10000000后,变成大于0的整数,再通过Math.ceil()将小数位去掉,与len取余,则随机获取到小于0-len的一个数值

    box.innerHTML=arr[index];

    },50);

    }else{

    clearInterval(time);

    this.innerHTML=”开始”;

    }

    }

    </script>

    字符串对象的方法

    indexOf(“abc”)  //返回子字符串abc在字符串中第一次出现的位置

    lastIndexOf(“abc”) //返回子字符串abc在字符串中最后一次出现位置

    match(regexp) //找到一个或多个正则表达式的匹配,如(str.match(/\d+/g))  —–g 代表匹配多个

    replace(表达式,替换的字符串) //把正则匹配上的字符串用第二个参数替换

    search(regexp)  ) //得到正则匹配上的子字符串中第一个字符的位置

    split()   //用正则匹配上的字符把字符串对象分隔成数组,如果传了第二个参数:数组的长度就为第二个参数的长度,后面的都舍去

    slice() //从字符串中截取从第一个参数开始到第二个参数结果的子字符串,(包含第一个参数位置的字符,不包含第二个参数位置的字符)

    substr(startindex,length) //从字符串中截取出一个子字符串,从第一个参数开始,截取第二个参数长度的子字符串

    substring(startindex,endindex) //与slice相同

    toLowerCase() //将字符串转换为小写

    toUpperCase() //将字符串转换为大写

    数组对象

    数组的创建

    new Array()

    new Array(size)

    new Array(element1,element2,element3….)

    上面的构造函数中,new Array(size)构造函数可以在定义数组的同时指定数组元素的个数。但是此时并没有为数组元素赋值,所有元素的值都为undefined。

    我们还可以直接定义数组

    var arr = [1,2,3,true,”str”];

    删除数组元素

    数组元素一旦被定义就不能被删除。使用delete运算符只能删除数组元素的值,使其恢复到未赋值的状态,即元素值为undefined,而不能删除一个数组元素,不能让数组中的元素减少一个。(PHP用unset会删除该元素)

    delete运算符可以用来删除变量、对象的属性、或数组中的元素。delete运算符返回的是布尔值类型。

    delete 对象名

    delete 变量名(var 声明的全局变量不能删除)

    delete 对象名.属性

    delete 数组[索引]

    数组的方法

    toString() //把数组中的值用逗号连接成字符串

    join() //把数组中的值用指定的字符连接成字符串(默认逗号)

    push() // push将数组参数当一个参数压入,而concat则先把数组元素拆成多个单独的元素压入, push改变原数组,而concat不改变原数组

    concat() //添加元素并生成新数组

    pop() //把数组的最后一个值弹出,会改变原数组,返回弹出的值

    unshift() //可以把新的值加入到数组的头部,返回的是新数组的长度,会改变原有数组

    pop() //删除并返回数组的最后一个元素

    shift() //删除并返回数组的第一个元素

    splice() //只有一个参数:相对于原数组,就是把以参数为下标开始到最后的值都删除,返回一个新数组,就是相对原数组被删除的部份

    于原数组,把以第一个参数为开始,第二个参数为长度的部份删除、返回一个新数组,就是删除的部份

    三个参数:把原数组中以第一个参数为开始,第三个参数为长度的部分替换成第三个参数.返回一个新数组。就是被替换的部份

    slice() //得到数组中以参数一为开始,参数二为结束(不包含)的新子数组

    reverse() //颠倒数组中的元素

    sort() //将数组元素排序

  • 评论:3 条
  • 分类:javascript教程
  • 浏览:1239
  • 05月11日

    第二天 javascript函数与javascript对象

    今天是javascript教程的第二课,李书记今天为大家讲解的是javascript函数和javascript对象,针对此总结如下:

    函数的定义方法一:通过function语句定义函数

    function 函数名 (参数1,参数2……)

    {

    <语句块>

    return 返回值

    }

    注意:在函数里,可以有0个或者多个参数。如果有多个参数,参数与参数之间要用逗号隔开。无论函数是否有参数,小括号必需。a.如果传递的参数个数小于函数定义的参数个数,JavaScript会自动将多余的参数值设为undefined; b.如果传递的参数个数大于函数定义的参数个数,那么多余传递的参数将会被忽略掉。

    方法二:通过Function方法构造函数

    var 函数名 = new Function(“参数1”,”参数2”,”参数3”……”函数体”);

    var sum= new Function(‘x”,”y”,”var z=x+y;return z;”);

    该构造方法可以有N个参数,但是最后一个一定是函数体字符串.Function的第一个字母一定要大写,而且每次调用该对象都会从新编译次函数,而另外两种方法不会,不推荐此方法

    方法三:在表达式中定义函数

    var 函数名 = function(参数1,参数2,…){函数体};

    如 var sum=function(a,b){

    return c=a+b;

    }

    Box.onclick=function (){

    alert(“asd”);

    }

    js中的递归

    var myFun = function ftemp(x){ //这里的ftemp是临时函数名,用于递归调用

    if(x<1)

    return 1;

    else

    document.write(x);return ftemp(x-1)};

    函数中的全局变量与局部变量

    <script>

    var num=10;

    function de(){

    alert(num);

    var num=20; //当此处没有该语句的时候,上面的alert语句参数num属于全局变量num=10;

    //一旦加上此句,那么,num将变为局部变量,因为用了var修饰,而var优先级又很高,相当于var num;这句话在函数体内第一句,而alert(num)下,放的则是num=20.

    }

    de();

    alert(num);

    </script>

    length方法(可用来检测函数参数的个数,数组的元素个数,字符串中字符个数)

    注意:通过arguments可以得到传递给函数的参数组合成的数组,然后通过arguments.length得到传递给函数的实参个数

    javascript中的系统函数

    1.编码函数escape()

    escape()函数的作用是将字符串中的非文字、数字的字符,如#,$,%,^,&,空格,括号等,转换成相应的ASCII值。主要用在字符串的处理上,用于保证这些特殊字符不会干扰到字符串的处理。

    2.解码函数unescape()

    unescape()函数的作用是将ASCII码的文字转换成一般文字。

    3.求值函数eval()————多用于json中

    eval()函数是使用得比较多的一个函数,该函数的作用是将字符串指定为对象或数组,。

    4.数值判断函数isNaN()

    在JS中,如果对非数字型变量进行数值运算,将会返回NaN,我们可以使用isNaN()函数来判断变量是否为数字型变量。

    5.整数转换函数parseInt() 

    在JS中,可以使用该函数将二进制、八进制和十六进制的数据转换成十进制数据。

    parseInt(数据,底数),如果底数不存在,则自动识别进制

    6.浮点转换函数parseFloat() 

    parseFloat()和parseInt()不同,该函数的作用是将字符串数据转换成浮点数据。

    对象的定义

    1.使用构造函数创建内置对象

    var myObject = new Object();

    myObject.name = “bobo”;

    myObject.age = 20;

    myObject.say = function(){}

    2.直接创建自定义对象 (该格式为json格式)

    var 对象名 = {属性名1:属性值,属性名2:属性值2,…….}

    ————————————————————————

    当javascript收到该格式的数据后,可以通过对象名.属性名“的方式取出对应的值

    3.使用自定义构造函数创建对象

    function pen(name,color,price){

    //对象的name属性

    this.name = name;

    //对象的color属性

    this.color = color;

    //对象的piece属性

    this.price = price;

    //对象的say方法

    this.say = function(){};

    }

    对象的使用:

    var pen = new pen(“铅笔”,”红色”,20);

    pen.say();

  • 评论:0条
  • 分类:javascript教程
  • 浏览:946
  • 05月10日

    第一天:javascript相关基础部分

    今天李书记讲为大家收集下javascript教程详细的课程总结,针对学习javascript的同学,此教程总结的非常详细,希望大家认真的看看,希望对大家有所帮助。

    如何使用js

    js可以通过外链方式导入,

    1. 在head头内导入<head><script src=”jquery.js”></script></head>   (注意<script>标签内不能放任何内容)
    2. 通过事件传入javascript代码

    <button onclick=”alert(‘don\’t click me ’)”>don’t click me</button>

    1. <a href=”javascript:alert(‘yes!!’)”>click me</a>

    2.定义js

    使用<script></script>标签:

    属性:

    charset(可选)字符集设置

    defer(可选执行顺序)值:defer

    language(已废除)

    src(可选)使用外部的js脚本文件

    type(必选)类型:值:text/javascript

    <script type=”text/javascript”>

    <!–

    javaScript语言

    //–>

    </script>

    看书

    看书

    基本语法:

    1.区分大小写

    关键字、变量、函数名和标识符——都区分大小写

    2.标识符

    a.第一个字符必须是一个字母、下划线或是一个美元符号$

    b.其他字符可以是字母、下划线、美元符号或是数字

    注意:不能把关键字、保留字、true、false和null用作标识符

    3.注释

    //…… 单行注释

    /*…*/ 多行注释

    4.语句

    JavaScript教程中的语句以一个分号结尾,如果省略分号,则由解析器确定语句的结尾,一般情况下,换行会被当做一个语句的结尾。

    5.关键字和保留字

    break  else   new var

    case  finally return   void

    catch  for switch  while

    abstract  enum  int short

    ……….

    6.变量

    JavaScript是无类型的(untyped),可以被赋予任何类型的值

    定义变量时要使用var操作符(注意var是一个关键字),后跟变量名称(一个标识符),如下所示:

    var message;

    也可以直接初始化变量或不使用var(但不推荐)

    var message=‘hi’; message=100;

    注意:JavaScript采用词法作用域。不在任何函数内声明的变量称为全局变量。在函数内部不使用var声明的变量为全局变量

    <script>

    Var a; //全局

    B=3; //全局

    Function ab(){

    Var a=3; //a变量将会被覆盖,并变成局部变量

    C=5; //没有用var 定义,则c是全局变量

    B=4; //没有用var重新定义b,则b只是值发生变化,仍是全局变量

    }

    </script>

    6.变量

    可以使用一条语句定义多个变量,只要像下面这样把每个变量用逗号分隔开即可:

    var message=“hi”,

    found=false,

    age=100;

    7.关于变量:

    目前的浏览器还不支持用const定义常量

    8.JS的数据类型

    1.原始数据类型

    a.字符串

    b.数值型

    c.布尔型

    2.特殊的原始值

    a.null(空)

    b.undefined(未定义)

    3.对象

    a.对象(属性集合)

    b.特殊对象——数组

    C.特殊对象——函数

    字符串型

    字符串型是JavaScript中用来表示文本的数据类型,是由Unicode字符、数字和标点符号组成的一个字符串序列。

    字符串通常是由单引号或是双引号括起来的。

    1.单引号和双引号均可解析转义字符

    2.单引号和双引号均不能解析变量

    3.变量与字符串、变量与变量要使用+来连接。

    4.单引号和双引号可以互相嵌套,如果单引号中要嵌套单引号,需要将单引号转义,同理,双引号相同。

    数值类型

    最基本的数值字面量格式是十进制整数:

    var num = 10;

    除了以十进制表示外,整数还可以通过八进制或十六进制的字面值来表示:

    var num = 070; //八进制数,以0开头

    var num = 0xA; //十六进制数,以0x开头

    注意:虽然数值可以用八进制或十六进制来表示,但在进行算术计算时,所有以八进制和十六进制表示的数值都将转换成十进制数值。

    1.浮点数值

    如果小数点后面没有跟任何数字(如1.),可以作为整数值来保存。

    如果浮点数值本身表示的就是一个整数(如1.0),该值会被转为整数。

    可以使用e来表示科学计数法。

    var num = 1.2e3; //等于1200

    浮点数值的最高精度是17位小数,但在进行算术计算时其精度远远不如整数。

    注意:永远不要测试某个特定的浮点数的值!

    例如:

    var a = 0.1;

    var b = 0.2;

    if(a+b == 0.3){

    alert(“输出了”);

    }

    这里是不会弹出的!

    2.数值范围

    和其它编程语言不同,JavaScript不区分整数值和浮点数值。所有数字均用浮点数值表示,采用IEEE754定义的64位浮点格式表示数字,最小值是5e-324;最大值为1.7976931348623157e+308,按JavaScript的数字格式,能表示的整形范围是从-9007199254740992  ~ 9007254740992(-2e-52~2e52)如果某次的计算结果超出这个范围,那么这个值将自动转换为Infinity(正无穷)和-Infinity(负无穷);Infinity不是能够参与计算的数值,可以使用isFinite()函数来判断这个数值是不是无穷的。

    注意:JavaScript中的实际操作(数组索引及位操作符)则是基于32位整数

    3.NaN

    NaN,即非数值(Not a Number)是一个特殊的数值,这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。

    例如:在其他语言中,任何数值除以0都会导致错误。但在JavaScript中,任何数值除以0会返回NaN,因此不会影响其他代码的运行。

    NaN的特点:

    1.任何涉及NaN的操作,结果都为NaN

    2.NaN与任何值都不相等,包括NaN本身。例如:下面的代码会返回false

    alert(NaN == NaN);

    可以使用isNaN()函数来判断某一个值是否是NaN类型。

    使用isNaN来判断下面的值,返回什么?

    NaN(true)  10(false)“10”(false) “blue”(true)  true(false)“true”(true)

    数值转换:

    我们可以使用三个函数Number()、parseInt()和parseFloat()将一个非数值转换为数值。

    Number ()函数的转换规则:

    1.如果是布尔值,true和false将分别转换为1和0

    2.如果是数字值,只是简单的传入和返回

    3.如果是null,返回0

    4.如果undefined,返回NaN

    5.如果是字符串,遵循下列规则:

    a.“11”会变成11,“011”会变成11

    b.“1.1”会变成1.1

    c.“0xf”会变成相同大小的十进制整数值

    1.  如果字符串是空的,则将其转换为0
    2.  如果字符串包含除上述格式之外的字符,则将其转换成NaN

    用Number转换以下内容,结果为

    Number(“true”) NaN  Number(true) 1

    Number(false) 0 Number(null) 0

    Number(undefined) NaN Number(c) NaN

    Number(“c”) NaN Number(0xf) 15

    Number(070) 56 Number(“0xf”)     15十六进制会转换

    Number(“070”) 70八进制不会转换Number(“15”) 15

    Number(“15a”) NaN Number(“”) 0

    Number()    0 Number(“070”) 70

    parseInt()的转换规则:

    1.忽略字符串前面的空格,直到找到第一个非空格字符

    2.如果第一个字符不是数字或者是负号,返回NaN

    3.空字符串,返回NaN

    4.如果第一个字符是数字,会继续解析第二个字符,直到解析完所有后续字符或遇到了一个非数字字符。

    5.如果字符串以0x开头且后面跟数字字符,就会将其转为10进制数。

      Number parseInt parseFloat
    null 0 NaN NaN
    undefined NaN NaN NaN
    NaN NaN NaN NaN
    “” 0 NaN NaN
    “true” NaN NaN NaN
    true 1 NaN NaN
    false 0 NaN NaN
    “false” NaN NaN NaN
    “0xf” 15 15 0
    0xf 15 15 15
    “070” 70 70 70
    070 56 56 56
    “-15a” NaN -15 -15
    3e3 NaN 3000 3000
    “3e3” NaN 3 3000

     

    parseInt()的转换规则:

    1.忽略字符串前面的空格,直到找到第一个非空格字符

    2.如果第一个字符不是数字或者是负号,返回NaN

    3.空字符串,返回NaN

    4.如果第一个字符是数字,会继续解析第二个字符,直到解析完所有后续字符或遇到了一个非数字字符。

    5.如果字符串以0x开头且后面跟数字字符,就会将其转为10进制数。

    parseInt(070) 56 parseInt(“070”) 70

    parseInt(0xf) 15 parseInt(“0xf”) 15

    parseInt(“-ab”) NaN parseInt(“-21ba”) -21

    parseInt(undefined) NaN parseInt(null) NaN

    parseInt(false) NaN parseInt(true) NaN

    parseInt(3e3) 3000 parseInt(“3e3”) 3

    parseFloat()的转换规则:

    parseFloat()也是从第一个字符开始解析每个字符,而且也是一直解析到字符串末尾,或者解析到遇见一个无效的浮点数字字符为止。规则如下:

    1.第一个小数点是有效的,第二个小数点无效

    2.始终忽略前面的0,不分进制数(看情况)3

    3.十六进制会被转换成0(只有字符串的)

    4.空字符串转换为NaN

    parseFloat(070) 56 parseFloat(“070”) 70

    parseFloat(0xf) 15 parseFloat(“0xf”) 0

    parseFloat(“-32ab”) -32 parseFloat(undefined) NaN

    parseFloat(null) NaN parseFloat(false) NaN

    parseFloat(true) NaN parseFloat(“3.12e7”)    312000

    parseFloat(“3.12e-7”) 3.12e-7

     

    Number与parseInt和ParseFloat的区别

    Number是逐串解析,所以不支持数字字母混合 parseInt和parseFloat都是逐字解析
    识别0x,不是别e Int识别16进制字符串,不识别e
    null为0 float不识别0x,识别e
    “”为0 所有非数字,都不进行类型转换,值为NaN
    false为0  
    true为1  

    3.布尔类型

    布尔类型的字面值只有两个,true和false,可以使用Boolean()函数将一个非布尔类型转换为布尔类型。

    注意:true和false是严格区分大小写的

    数据类型 转换为true 转换为false
    布尔型 true false
    字符串 任何非空字符串 “”(空字符串)
    数值 任何非零数字值 0和NaN
    对象 任何对象 null
    undefined   undefined

     

    特殊原始值

    1.null

    null是一个特殊的数据类型,其所代表的意思是“空”。需要注意,这个空并不代表是0或空字符串。null代表没有值,不是一个有效的数字、字符串、也不是数组、对象和函数,什么数据类型都不是。

    2.undefined

    undefined也是一个特殊的数据类型,只有定义了一个变量但没有为该变量赋值,使用了一个并未定义的变量、或者是使用了一个不存在的对象的属性时,JavaScript会返回undefined。

     

    对象类型

     

    1.对象

    对象其实就是一些数据的集合,这些数据可以是字符串型、数字型和布尔型,也可以是复合型。

    2.数组

    数组与对象一样,也是一些数据的集合,这些数据也可以是字符串型、数字型、布尔型、或者是复合型。与对象不同,数组中的数据并没有命名,不能通过名字来引用该数据。在数组中,为每个数据都编了一个号(从0开始),为数组的下标。

    3.函数

    函数是一段可执行的JavaScript代码,在JavaScript中,函数可以带有0个或多个参数,也可以返回一个值或不返回值。函数的行为特征和其它对象都不一样。使用了专用语法。

    数据类型的转换

    1.隐式类型转换

    所谓隐式类型转换,就是不需要程序员定义,JavaScript会自动将某一个类型的数据转换成另一个类型的数据。JavaScript隐式类型转换的规则:

    将类型转换到环境中应该使用的类型。

    例如:if(1){ //1会自动转换成true

    document.write(‘ok’);

    }

     

    可以隐式类型转换的情况:(number转化,boolean转化)

    1.数字类型:在字符串环境下可以隐式转换为“数字”,在布尔环境下,可以隐式转换为true(非0数字,0为false)

    2.非空字符串:在数字环境下,可以隐式转换为字符串中的数字或NaN;在布尔环境下,可以隐式转换为true。

    3.空字符串:在数字环境下可以隐式转换为0;在布尔环境下可以隐式转换为false;

    4.字符串”true“:在数字环境下可以隐式转换位1;布尔为true

    5.字符串“false”:数字环境为0,布尔位false

    6.null:在字符串环境下,转换为“null”;数字环境下,转换为0,布尔环境下,转为false

    7.NaN:在字符串环境下可以隐式转换为“NaN”;布尔环境下,转换为false

    8.undefined:字符串环境下,转换为“undefined”,数字环境下,转为NaN,布尔下,转为false

    9.true:字符串转为“true”,数字环境下转为1

    10.false:字符串转为“false”,数字环境下转为0

     

    2.显式类型转换

    在JavaScript中,可以使用Number()、Boolean()、String()函数来将数据类型转换成数字型、布尔型、字符串型

    1.数字类型转换成字符串型,可以将其与一个空字符串相连。

    var s = 123+””;

    2.字符串型转换成数字型,可以将其减0

    var s = “123”- 0;

    3.字符串型或数字型转换成布尔型,可以使用两次!运算符

    var s = “true”; if(!!s){}

    关于javascript的课程今天我们讲的是基础,后面李书记还为大家总结,下全部的javascript课程,希望大家喜欢,另外,希望大家多敲代码,多练习才是学习的根本。

  • 评论:0条
  • 分类:javascript教程
  • 浏览:874
  • 05月09日

    javascript到底是什么

    今天讲的是JavaScript是什么?JavaScript能干什么?JavaScript名称的由来?<script></script>标记常用的两个客户端输出方法等虽然基础但是大家可以看看。

    JavaScript是什么?

    JavaScript是一种小型的、轻量级的、面向对象的、跨平台的客户端脚本语言。JavaScript是嵌入到浏览器软件当中的去的,只要你的电脑有浏览器就可以执行JS程序了。JavaScript是一种面向对象的程序语言。在程序中,对象是由“属性”和“方法”构成。在现实中,男女朋友就是一个“对象”。“东西”就是“对象”。一个“物体”就是“对象”。

    程序员都不擅长人际交往

    程序员都不擅长人际交往

    “对象”有各种各样的特征(属性),如:身高、体重、年龄、姓名、学历等。“对象”有很多方法。“人”这个对象,可以干什么?或者“人的行为”。如:开飞机、打电脑、上网等。

    注意:JS中的对象只要会用就可以了,不需要我们自己去开发对象。

    跨平台:JS程序可以在多种平台下运行,如:windows、linux、mac、IOS等。

    客户端脚本程序:JS只能在客户端的浏览器来运行,不能在服务器端来运行。

    浏览器是一个翻译器,可以翻译三种代码:HTML代码、CSS代码、JavaScript代码。

    JavaScript能干什么?

    • 表单验证:是JS最基本的功能。
    • 动态HTML:可以实现一些动态的、重复的效果。
    • 交互式:人机交互,通过键盘或鼠标,与网页中的元素进行交互。

    JavaScript名称的由来?

    JavaScript最初叫“LiveScript”,是网景公司(Netscape)公司开发,为自己的浏览器Navigator2.0开的客户端语言。想借助Java的名气很快成长起来,因此改名为JavaScript。Java和JavaScript是两个公司的两个“东西”。

    <script></script>标记

    JS代码也是嵌入到HTML文档中去的。

    同一个网页中,可以有HTML代码、CSS代码、JavaScript代码。

    通过<script></script>来引入JS程序代码

    <script type=”text/javascript”>
    document.write(“欢迎访问李书记php博客”);
    </script>

    常用的两个客户端输出方法:document.write();/window.alert();

    document.write(str)

    • 描述:在网页的<body>标记,输出str的内容。
    • document意思“文档”,就是整个网页了。
    • document是一个文档对象,代表整个网页。
    • write()是document对象的一个输出方法。
    • “.”小数点:通过小数点(.)来调用对象的方法。
    • str:表示要输出的内容.
    • <script type=”text/javascript”>
      document.write(“欢迎访问李书记php博客”);
      document.write(“<h2>欢迎学习李书记javascript课程</h2>”);
      document.write(‘<p style=”color:red;”> 李书记javascript课程学习中</p>’);
      </script>

    window.alert(str)

    • 描述:在当前窗口中弹出一个警告对话框,str为对话框中显示的内容。
    • window代表当前浏览器窗口,window是一个窗口对象。
    • alert()方法:弹出一个对话框。
    • str:表示要输出的内容。
    • window.alert(“李书记javascript基础教程学习中”);

    JS中的注释

    • HTML的注释:<!—注释内容–>
    • CSS注释:/* 注释 */
    • JavaScript的注释:// 或 /*  多行注释 */
  • 评论:0条
  • 分类:javascript教程
  • 浏览:842
  • 04月11日

    Javascript来源介绍

    很多人学习javascript语言的时候不知道他到底怎么来的,他和其他的语言是否一样,具体是干嘛的,李书记php博客针对这些问题写了以下几点具有针对性的表现出javascript定义、背景、来源公司等相关的总结,希望对大家有所帮助!

            1: 定义

    基于事件和对象驱动,并具有安全性能的脚本语言。

     2: 出现背景

    上世纪90年代,在美国有出现,当时有上网的环境,并且有网站服务在运行。

    3:注册服务

    javascript来源介绍

    javascript来源介绍

    上图涉及的问题:

    ① 带宽非常浪费,往往由于一个项目部正确,其他项目被反复提交给服务器

    ② 用户体验不好,反复填写表单域信息,项目不正确,页面会刷新。

    ③ 用户等待时间比较长,带宽非常小,每次提交动作占用时间长。

    针对以上问题,网景公司发明了javascript语言,最初用于在客户端对表单域项目进行验证。

    4: 发明javascript语言的公司

    网景公司在1995年发布了javascript语言,起初名字为livescript,在发布的前夕该名字为javascript,与sun公司的java语言打一个擦边球,这个决定也使得网景后期得到许多商业回报。

    微软公司也有自己的脚本语言,名字为Jscript(是javascript的拷贝版本)。

    以上是李书记总结的相关javascript的一些基本信息,那么想学习javascript教程的同学也可以在李书记php博客里面学习哦!以后会更新更多的javascript学习方法和javascript教程,希望小伙伴们喜欢!

  • 评论:0条
  • 分类:javascript教程
  • 浏览:1103
  • 01月14日