精华内容
下载资源
问答
  • javascript的常用对象有哪些

    千次阅读 2019-03-14 00:15:28
    Windows对象即浏览器窗口对象,是所有对象的顶级对象,其使用频繁,在JavaScript中调用其方法和属性时可以省略名称。 Window 对象属性 属性 描述 closed 返回窗口是否已被关闭。 defaultStatus 设置或返回...

    欢迎大家关注我的公众号【老周聊架构】,Java后端主流技术栈的原理、源码分析、架构以及各种互联网高并发、高性能、高可用的解决方案。

    1、Windows对象

    Windows对象即浏览器窗口对象,是所有对象的顶级对象,其使用频繁,在JavaScript中调用其方法和属性时可以省略名称。

    Window 对象属性

    属性 描述
    closed 返回窗口是否已被关闭。
    defaultStatus 设置或返回窗口状态栏中的默认文本。
    document 对 Document 对象的只读引用。
    history 对 History 对象的只读引用。
    innerheight 返回窗口的文档显示区的高度。
    innerwidth 返回窗口的文档显示区的宽度。
    length 设置或返回窗口中的框架数量。
    location 用于窗口或框架的 Location 对象。
    name 设置或返回窗口的名称。
    Navigator 对 Navigator 对象的只读引用。
    opener 返回对创建此窗口的窗口的引用。
    outerheight 返回窗口的外部高度。
    pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。
    pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
    parent 返回父窗口。
    Screen 对 Screen 对象的只读引用。
    self 返回对当前窗口的引用。等价于 Window 属性。
    status 设置窗口状态栏的文本。
    top 返回最顶层的先辈窗口。
    window window 属性等价于 self 属性,它包含了对窗口自身的引用。
    screenLeft/screenTop/screenX/screenY 只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop,而 Firefox 和 Safari 支持 screenX 和 screenY。

    Window 对象方法

    方法 描述
    alert() 显示带有一段消息和一个确认按钮的警告框。
    blur() 把键盘焦点从顶层窗口移开。
    clearInterval() 取消由 setInterval() 设置的 timeout。
    clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
    close() 关闭浏览器窗口。
    confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
    createPopup() 创建一个 pop-up 窗口。
    focus() 把键盘焦点给予一个窗口。
    moveBy() 可相对窗口的当前坐标把它移动指定的像素。
    moveTo() 把窗口的左上角移动到一个指定的坐标。
    open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
    print() 打印当前窗口的内容。
    prompt() 显示可提示用户输入的对话框。
    resizeBy() 按照指定的像素调整窗口的大小。
    resizeTo() 把窗口的大小调整到指定的宽度和高度。
    scrollBy() 按照指定的像素值来滚动内容。
    scrollTo() 把内容滚动到指定的坐标。
    setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式。
    setTimeout() 在指定的毫秒数后调用函数或计算表达式。

    (1)open()方法

    open方法用于打开一个新的浏览器窗口,并在该窗口装载制定URL地址的网页。open方法的语法格式如下:

    windowsVar=windows.open(url,windowname[,location]);

    windowsVar是当前打开窗口的句柄,open执行失败时返回空值。
    url是目标窗口的URL。
    windowname是新窗口的名称。
    loaction是对窗口属性的设置,可选参数如下:

    参数 描述
    width 窗口的宽度
    height 窗口的高度
    top 窗口顶部距屏幕顶部的像素数
    left 窗口左端距屏幕左端的像素数
    scrollbars 是否显示滚动条,值为yes或者no
    resizable 设定窗口大小是否固定,值为yes或者no
    toolbar 浏览器工具栏,值为yes或者no
    menubar 菜单栏,值为yes或者no
    location 定位区,也叫地址栏,值为yes或者no

    (2)close方法

    close方法能够直接关闭当前页面。

    2、String对象

    String对象是动态对象,需要创建对象实例后才能引用其中的方法和属性,Js中,用单引号和双引号括起来的字符串当做一个字符串对象的实例,可以直接在某字符串的后面加上“.”来引用String对象的属性和方法。

    String 对象属性

    String对象最常用的属性是length,用于返回String对象的长度,他的返回值是一个只读整数,代表字符串中的字符数,一个汉字按一个字符计算。

    String 对象方法

    方法 描述
    anchor(name) 为字符串对象中的内容两边加上HTML中的标记对
    big() 用大号字体显示字符串。
    blink() 显示闪动字符串。
    bold() 用大号字体显示字符串。
    charAt() 返回在指定位置的字符。
    charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
    concat() 连接字符串。
    fixed() 以打字机文本显示字符串。
    fontcolor() 使用指定的颜色来显示字符串。
    fontsize() 使用指定的尺寸来显示字符串。
    fromCharCode() 从字符编码创建一个字符串。
    indexOf() 检索字符串。
    italics() 使用斜体显示字符串。
    lastIndexOf() 从后向前搜索字符串。
    link() 将字符串显示为链接。
    localeCompare() 用本地特定的顺序来比较两个字符串。
    match() 找到一个或多个正则表达式的匹配。
    replace() 替换与正则表达式匹配的子串。
    search() 检索与正则表达式相匹配的值。
    slice() 提取字符串的片断,并在新的字符串中返回被提取的部分。
    small() 使用小字号来显示字符串。
    split() 把字符串分割为字符串数组。
    strike() 使用删除线来显示字符串。
    sub() 把字符串显示为下标。
    substr() 从起始索引号提取字符串中指定数目的字符。
    substring() 提取字符串中两个指定的索引号之间的字符。
    sup() 把字符串显示为上标。
    toLocaleLowerCase() 把字符串转换为小写。
    toLocaleUpperCase() 把字符串转换为大写。
    toLowerCase() 把字符串转换为小写。
    toUpperCase() 把字符串转换为大写。
    toSource() 代表对象的源代码。
    toString() 返回字符串。
    valueOf() 返回某个字符串对象的原始值。

    (1)indexOf()方法

    该方法用于返回String对象中第一次出现子字符串的位置,没有找到则返回-1,语法如下:

    string.indexOf(subString[,startIndex]);

    subString是要查找的字符串。

    startIndex是指出从什么地方查找,若省略,则从开头开始查找。

    (2)substr()方法

    该方法用于返回制定字符串的一个子串,格式如下:

    string.substr(start,[,length])

    start指定子字符串的开始下标。

    length指定子字符串的长度,若省略,则一直到字符串结尾。

    (3)replace()方法

    该方法用于替换一个与正则表达式匹配的子串,语法格式如下:

    string.replace(regExp,substring)

    regExp,一个正则表达式,若设置了g,那么将替换所有匹配的子串,否则只替换第一个匹配的子串。

    substring,用于指定替换文本或生成替换文本的函数。

    (4)split()方法

    该方法用于将字符串分割为字符串数组,格式如下:

    string.split(delimiter,limit)

    delimiter是字符串或正则表达式,用于指定分隔符。

    limit指定返回数组的最大长度,没有设置则没有限制。

    3、Date对象

    Date对象具有动态性,必须创造一个实例。使用new date()创建一个实例。

    Date 对象方法

    方法 描述
    Date() 返回当日的日期和时间。
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
    getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
    getMonth() 从 Date 对象返回月份 (0 ~ 11)。
    getFullYear() 从 Date 对象以四位数字返回年份。
    getYear() 请使用 getFullYear() 方法代替。
    getHours() 返回 Date 对象的小时 (0 ~ 23)。
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
    getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
    getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
    getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
    getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
    getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
    getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
    getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
    getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
    getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
    getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
    getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
    parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。
    setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。
    setMonth() 设置 Date 对象中月份 (0 ~ 11)。
    setFullYear() 设置 Date 对象中的年份(四位数字)。
    setYear() 请使用 setFullYear() 方法代替。
    setHours() 设置 Date 对象中的小时 (0 ~ 23)。
    setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。
    setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。
    setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。
    setTime() 以毫秒设置 Date 对象。
    setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
    setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。
    setUTCFullYear() 根据世界时设置 Date 对象中的年份(四位数字)。
    setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。
    setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
    setUTCSeconds() 根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
    setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
    toSource() 返回该对象的源代码。
    toString() 把 Date 对象转换为字符串。
    toTimeString() 把 Date 对象的时间部分转换为字符串。
    toDateString() 把 Date 对象的日期部分转换为字符串。
    toUTCString() 根据世界时,把 Date 对象转换为字符串。
    toLocaleString() 根据本地时间格式,把 Date 对象转换为字符串。
    toLocaleTimeString() 根据本地时间格式,把 Date 对象的时间部分转换为字符串。
    toLocaleDateString() 根据本地时间格式,把 Date 对象的日期部分转换为字符串。
    UTC() 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
    valueOf() 返回 Date 对象的原始值。
    展开全文
  • 一)window对象 ...4、Window对象有哪些常用方法?  1)对话框  2)窗口的打开与关闭  3)周期性定时器  4)一次性定时器  5)动态时钟 二)Document对象与DOM 1、什么是Document对象?什么是DO

    一)window对象

    1、什么是DHTML?

          1)DHTML是指操作HTML以创造各种动态视觉效果,是一种浏览器端的动态网页技术。
          2)DHTML的功能:
                ①动态改变页面元素。
                ②事件响应机制制作动态折叠的树形结构和菜单。
                ③与用户进行交互等。
          3)DHTML对象模型包括浏览器对象模型和DOM对象模型。

    2、DHTML对象模型

    将整个窗口均实现了对象化,结构如下:


    3、什么是Window对象?它有哪些常用属性?常用子对象?

    window对象表示浏览器打开的窗口,也是父对象。

          1)常用属性

                ①name:窗口名称。
                ②opener:打开当前窗口的window对象(引用)。
                ③status:窗口底部状态栏信息。

          2)常用子对象

                ①document:代表给定浏览器窗口中的HTML文档。
                ②history:包含了用户浏览过的URL信息。
                ③location:包含关于当前URL的信息。
                ④navigator:包含Web浏览器的信息。
                ⑤screen:包含关于客户屏幕和渲染能力的信息。
                ⑥event:代表事件状态。

    4、Window对象有哪些常用方法?

         1)对话框类

    1>alert(str):提示对话框,显示str字符串的内容。

    例如:window.alert("aa"); //window.可省

    2>confirm(str):确认对话框,像是str字符串的内容,按“确定”返回true,其他操作返回false。

    3>prompt(str,value):输入对话框,采用文本框输入信息,str为提示信息,value为初始值,按“确定”返回输入值,其他操作返回undefine,value可省。

    <span style="font-size:18px;">function testConfirm() {
    		var r = window.confirm("Are you really....");
    		alert(r);
    		window.prompt("请输入ID:");//因为不能控制它,所以很少用 	
    	}</span>

         2)窗口的打开与关闭

    1>window.open(url):重复打开。
    2>window.open(url,name):采取命名方式,避免重复打开。
    3>window.open(url,name,comfig):config设置新窗口外观如高和宽。
    4>window.close():关闭窗口。

    function testNewWindow(){
    	     var config="toolbar=no,location=no,width=300,height=200";
    	     window.open("http://www.baidu.com","a",config);		  
                  }

         3)周期性定时器

    1>setInterval(exp,time):周期性触发代码exp,返回已经启动的定时器。exp:执行语句,time:时间周期,单位为毫秒。
    2>clearInterval(tObj):停止启动的定时器。tObj:启动的定时器对象。

         4)一次性定时器

    1>setTimeout(exp,time):一次性触发代码exp,返回已经启动的定时器。exp:执行语句,time:时间周期,单位为毫秒。
    2>clearTimeout(tObj):停止启动的定时器。tObj:启动的定时器对象。

         5)动态时钟

    <html>
    <head>
    <title>dClock.html</title>
    <script type="text/javascript">
    	function showTime() {//显式时间
    		var t = new Date();//将当前时间显式在一个文本框中
    		document.getElementById("txtTime").value = t.toLocaleTimeString();
    	}
    	var timer;//设置全局变量
    	function startClock() {//启动时钟
    		timer = window.setInterval(showTime, 1000);//有返回值的。			
    	}
    	function stopClock() {//停止时钟
    		window.clearInterval(timer);
    	}
    	var timer1;//设置全局变量
    	function wait() {//5秒后弹出一个Hello
    		timer1 = window.setTimeout("alert('Hello');", 5000);//可以执行合法的文本表达式
    	}
    </script>
    </head>
    <body>
    	这是动态时钟的测试<br>
    	<input type="button" value="显式时间" οnclick="showTime();" />
    	<input type="button" value="启动时钟" οnclick="startClock();" />
    	<input type="button" value="停止时钟" οnclick="stopClock();" />
    	<input type="button" value="5s后弹出一个Hello" οnclick="wait();" />
    </body>
    </html>
           注意事项:showTime没有括号,代表每隔一定时间让浏览器去找showTime对象并启动一次;showTime()则为立即启动方法。

    二)Document对象与DOM

    1、什么是Document对象?什么是DOM?

          1)Document对象:每个载入浏览器的HTML文档都会成为Document对象。
                ①通过使用Document对象,可以从脚本中对HTML页面中的所有元素进行访问(操作文档中的任何内容,都过Document)。
                ②Document对象是window对象的一部分,可通过window.document方式对其进行访问。
          2)DOM:Document Object Model,文档对象模型,HTML文档中的所有节点组成了一个文档树(或节点树)。
                ①树起始于文档节点,Document对象是一颗文档树的根。
                ②HTML文档中的每个元素、属性、文本等都代表这树中的一个节点。

    2、Document中查找节点的方式有哪几类?

           1)根据元素ID查找节点

    1>方法:document.getElementById(idValue)
    2>忽略文档的结构,通过指定的ID来返回元素节点。
    3>可以查找整个HTML文档中的任何HTML元素。
     注意事项:如果ID值错误,则返回null。

           2)根据层次查找节点

    1>遵循文档的层次结构,查找单个节点:parentNode、firstChild、lastChild
    2>遵循文档的层次结构,查找多个节点:
                childNodes:以s结尾的都是数组,则有length属性。
    3)案例
          eg:根据层次查找节点

    <html>
    <head>
    <title>selectIDl.html</title>
    <script type="text/javascript">
    	var sObj = document.getElementById("sell");
    	alert(sObj.childNodes.length);//7?为何是7?!
    	var s1 = sObj.firstChild;
    	alert(s1.innerHTML);//undefined?这又为何为未定义?
    </script>
    </head>
    <body>
    	<select id="sell">
    		<option>a</option>
    		<option>b</option>
    		<option>c</option>
    	</select>
    	<!-- 注意按此格式 -->
    </body>
    </html>
    
    解释:childNodes会找到sell下的所有子节点,除了真正的子节点外,还有空格这种特殊节点,所以长度为7。只有不空格,都写一行结果才为3,如:
    <select id="sell"><option>a</option>
    <option>b</option>
    <option>c</option>
    </select>

    同理,第一个子节点为空格,firstChild的内容当然也就是undefined了。

           3)根据标签名称查找节点

    1>getElementsByTagName("namestr"):在某个节点的所有后代里查找某种类型的元素(根据指定的标签名),并返回所有的元素(返回一个节点列表)。
          ①忽略文档的结构,查找整个HTML文档中的所有元素。
          ②如果标签名错误,则返回长度为0的节点列表。
                 注意事项:单词Elements结尾有s,所以为数组。
    2>length属性:返回的是一个节点列表,是个数组,因此可用length属性获取元素个数。使用[index]可定位具体的元素。例如:

    <body>
    	<span>文本</span>
    	<h1>
    		一周畅销<span>榜</span>
    	</h1>
    </body>
    var spans=document.getElementsByTagName("span"); 
    alert(spans.length);//2
    alert(spans[1].innerHTML);//榜

    3、读取或者修改节点信息有什么规则限制?

    主要有三个规则限制:

          规则一:将HTML标签对象化,操作前先明确被对象化的标签都有什么属性。
    如:aObj代表一个<a href="">元素</a>,有aObj.href属性,但没有aObj.value和aObj.src
          规则二:innerHTML:设置或获取位于对象起始和结束标签内的内容。
    如:aObj.innerHTML可修改<a href="">元素</a>标签中的“元素”两字
           注意事项:<input />单标签无法用innerHTML修改内容。
          规则三:nodeName:得到某个元素节点和属性节点(即可得到标签或属性名称)及其类型位置。xxx.nodeName:当未知节点类型时,使用该属性获得节点的名称,全大写方式。
    如:if(xxx.nodeName == "IMG") xxx.src = "http://...";
          注意—节点属性:getAttribute()方法:根据属性名称获取属性的值。
    将HTML标签、属性、CSS样式都对象化。

    4、如何查找并修改节点?实例演示

          1)修改节点样式

    1>style属性:语法:node.style.color; node.style.fontSize
           注意事项:CSS样式中属性名内有“-”的,这里省略,并把后面单词首字母大写!
    2>className属性:语法:var Obj=document.getElementById("p1");
          如:Obj.className="样式类名称";//可用于设置不同的样式。

          2)查找并修改节点

    1>使用getElectmentById()方法找到节点元素;

    2> 修改元素内容

    3>修改样式:style属性或者className属性

    4>修改属性:html属性

          3)经典案例:

    案例1:表单验证

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
    <head>
    <title>validateForm.html</title>
    <script type="text/javascript">
    	function validName() {//验证用户名
    		var name = document.getElementById("txtName").value;//得到录入的用户名
    		var r = /^[a-z]{3,5}$/;//验证
    		if (r.test(name))//根据验证结果显示不同的样式
    			document.getElementById("nameInfo").className = "success";
    		else
    			document.getElementById("nameInfo").className = "fail";
    		return r.test(name);//添加返回										
    	}
    	function validAge() {//验证年龄
    		var age = document.getElementById("txtAge").value;//得到录入的年龄
    		var r = /^[0-9]{2}$/;//验证
    		if (r.test(age))//根据验证结果显示不同的样式
    			document.getElementById("ageInfo").className = "success";
    		else
    			document.getElementById("ageInfo").className = "fail";
    		return r.test(age);//添加返回											
    	}
    	function validDatas() {//验证所有数据,验证name和age,return true和false
    		var r1 = validName();
    		var r2 = validAge();
    		return r1 && r2
    	}
    </script>
    </head>
    <body>
    	This is my HTML page.
    	<br>
    	<form>
    		Name:<input type="text" id="txtName" οnblur="validName();" />
    		      <span id="nameInfo">3-5个小写字母</span> <br /> 
    			
    		Age:<input type="text" id="txtAge" οnblur="validAge();" /> 
    			 <span id="ageInfo">2位数字</span><br />
    		<input type="submit" value="保存" οnclick="return validDatas();" />
    	</form>
    </body>
    </html></span>

           注意事项:οnclick="return validDatas();返回值为true则提交表单,否则取消提交,即为return false时取消某事件。

    案例2:读取或者修改节点信息

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
    <head>
    <title>testDoc.html</title>
    <script type="text/javascript">
    function testDocument(){ var imgObj
    	= document.getElementById("img1"); 
    	imgObj.src = "ok.png";//修改图片
    	//修改段落:字体颜色,背景色,字体大小,段落文本
    	 var pObj = document.getElementById("p1");
    	pObj.style.color = "red";//注:pObj.style = "color:red";不够对象化
    	pObj.style.backgroundColor = "silver"; //注:pObj.style.background-color不认识减号,去掉减号,下个单词首字母大即可。
    	pObj.style.fontSize = "25";//单位由浏览器的默认值决定
    	pObj.innerHTML = "new text"; //修改某元素的样式:样式复杂时用
    	document.getElementById("h2").className = "style1";
    	//复杂样式先定义一个样式类
    }
    </script>
    <style type="text/css">
     h2.style1{ border-top:1px solid red;
    	        border-right:2px solid blue;
    	       } 
    h2.style1{}//(定义在内部样式或外部样式都可以),再用className操作,不能用class,被系统用了。
    //正常情况是标签中直接写class="style1",但为了实现动态效果而使用className进行操作。
    </style>
    </head>
    <body>
    	这是一个读取以及修改节点的测试哦!<br>
    	<input type="button" value="读取或修改节点信息" οnclick="testDocument();" />
    	<h2 id="h2">h2文本</h2>
    	<p id="p1">段落文本</p>
    	<img id="img1" src="delete.png" />	
    </body>
    </html></span>

    案例3:购物车

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
      <head>
        <title>buy.html</title>
    	<script type="text/javascript">
    	function add(btnObj){//增加购物的数量
       		var tdObj = btnObj.parentNode;//得到当前按钮所在的td
    		for(var i=0;i<tdObj.childNodes.length;i++){//得到td的所有子元素,找到那个文本框
    			var childNode = tdObj.childNodes[i];
    			if(childNode.nodeName == "INPUT" && childNode.type == "text"){
    			var oldData = parseInt(childNode.value);//得到旧数据,操作,并显示
    			oldData++;	childNode.value = oldData;
    			}
    		}
    	    calTotal();												
    	 }
    	function sub(btnObj){//减少购物的数量,代码与增加一样,仅仅将oldDate--即可!	
    	 }
    	function calTotal(){//计算小计和总计
    		var tableObj = document.getElementById("shoppingCart");//得到表格的所有行
    		var rows = tableObj.getElementsByTagName("tr");
    		var total = 0;	
    		for(var i=1;i<rows.length;i++){//循环从第二行开始
    			var curRow = rows[i];
    			//得到第一格中的价格
    			var price = curRow.getElementsByTagName("td")[0].innerHTML;
    				//得到第二格中的第二个input的value
    			var q = curRow.getElementsByTagName("td")[1].getElementsByTagName("input")[1].value;
    			var sum = parseFloat(price) * parseFloat(q);//算完,写入第三格
    			curRow.getElementsByTagName("td")[2].innerHTML = sum.toFixed(2);
    			total += sum;//总计		
    		}
    		document.getElementById("spanTotal").innerHTML = total.toFixed(2);//显示	
    	 }	
    	</script>
      </head> 
      <body>
             购物车付款验证! <br>
        <form>	<table border="1" id="shoppingCart">
    	<tr>		<td>价格</td><td>数量</td><td>小计</td>	</tr>
    	<tr>		<td>10.00</td>
    			<td><input type="button" value="-" οnclick="sub(this);" />
    				<input type="text" value="1" />
    				<input type="button" value="+" οnclick="add(this);" /></td>
    			<td>10.00</td>		</tr>
    	<tr>		<td>20.00</td>
    			<td><input type="button" value="-" οnclick="sub(this);" />
    				<input type="text" value="1" />
    				<input type="button" value="+" οnclick="add(this);" /></td>
    			<td>20.00</td>		</tr>		</table>		
    	总计:<span id="spanTotal">00.00</span>						</form>
      <!--总计不能写到表格中,与前几行格式不一致,取得的数为null或未定义,无法计算-->  
      </body>
    </html></span>


    5、如何用Document增加新节点?删除节点?

    1)步骤:
          第一步:创建一个新元素,document.createElement("elementName");

    比如:元素名可为a/input/option等;返回新创建的节点。
          第二步:为新元素设置相关的数据

    比如:var newNode=document.createElement("input");
    newNode.type="text";

    newNode.value="mary";

     newNode.style.color="red";
          第三步:把新节点加入树上(新元素加入文档),作为树上某个节点的子节点存在。
    xxx.appendChild(newNode);//追加
    xxx.insertBefore(newNode,oldNode);//新节点放在旧节点之前
    2)案例
    eg:添加新节点

    <!DOCTYPE html>
    <html>
    <head>
    <title>addNode.html</title>
    <script type="text/javascript">
    	function addNewNode() {
    			var formObj = document.getElementById("form1");
    			var obj = document.createElement("input");//为form添加一个文本框
    				obj.value = "mary";
    				formObj.appendChild(obj);
    			var aObj = document.createElement("a");//form最后添加一个超级连接
    				aObj.href = "http://tts6.tarena.com.cn";
    				aObj.innerHTML = "cilck me";
    				formObj.appendChild(aObj);
    			var btnObj = document.createElement("input");//在原有按钮的前面加入一个按钮
    				btnObj.type = "button";
    				btnObj.value = "new button";
    				btnObj.onclick = function() {
    					alert("hello");
    				};//function方法
    		formObj.insertBefore(btnObj, formObj.firstChild);//由于第一个子节点为空白,所以此处oldNode可用firstChild去定位(放在空白前)。							
    	}
    </script>
    </head>
    <body>
    	它会不断产生新节点的哦!<br>
    	<form id="form1">
    		<input type="button" value="新节点" οnclick="addNewNode();" />
    	</form>
    </body>
    </html>


    (为什么我的截图老被系统吃掉啊,无语!)

    6、如何用Document删除节点?

          1)语法:parentNode.removeChild(childNode);
           注意事项:一定是从父节点删除子节点,不能直接删除子节点。
          2)经典案例

    案例1:

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
    <head>
    <title>deleteNode1.html</title>
    <script type="text/javascript">
    	function deleteNode() {
    		var delNode = document.getElementById("a1");
    		delNode.parentNode.removeChild(delNode);
    	}
    </script>
    </head>
    <body>
    	节点是可以删除的哦<br>
    	<input id="btn1" type="button" value="删除节点" οnclick="deleteNode();" />
    	<a id="a1" href="#">link1</a>
    </body>
    </html></span>

    案例2:联动菜单

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
    <head>
    <title>deleteNode.html</title>
    <script type="text/javascript">
    	//以下为JS代码:声明一个数组类型的全局变量用于存储所有的城市数据 
    	var array = new Array();
    	array[0] = [ "请选择" ];
    	array[1] = [ "海淀", "朝阳", "西城", "东城" ];
    	array[2] = [ "石家庄", "邢台", "保定" ];
    	function showCities() {//根据省显示城市
    		//得到第一个选择框的选中的选项的索引
    		var i = document.getElementById("sel1").selectedIndex;
    		//先删除选择框中原有的元素
    		var sellObj = document.getElementById("sel2");
    		//	for(var j=0;j<sellObj.childNodes.length;j++){
    		//		sellObj.removeChild(sellObj.childNodes[j]);	
    		//	}注意事项:这样操作是删不干净的!
    		while (sellObj.childNodes.length > 0) {
    			sellObj.removeChild(sellObj.firstChild);
    		}
    		var cities = array[i];//根据索引找到城市数据
    		//循环城市数据,创建option元素,文本写入
    		for ( var index = 0; index < cities.length; index++) {
    			var newNode = document.createElement("option");
    			newNode.innerHTML = cities[index];
    			document.getElementById("sel2").appendChild(newNode);
    		}
    	}
    </script>
    </head>
    <body>
    	联动菜单的测试<br>
    	<select id="sel1" οnchange="showCities();">
    		<option>请选择</option>
    		<option>北京</option>
    		<option>河北</option>
    	</select>
    	<select id="sel2">
    		<option>请选择</option>
    	</select>
    </body>
    </html></span>

    结果有没有被吞掉啊?系统大神!



    展开全文
  • javascript常用对象梳理

    2012-06-23 21:29:38
    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back ...
  • 那么我们在开发中,常用的全局对象有哪些呢?__filename的使用__filename 表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径,且和命令行参数所指定的文件名不一定相同。 如果在模块

    这里写图片描述

    在学习JavaScript 中,我们知道 window 是全局对象, 而 Node.js 中的全局对象是 global,所有全局变量(除了 global 本身以外)都是 global 对象的属性。

    那么我们在开发中,常用的全局对象有哪些呢?

    __filename的使用

    __filename 表示当前正在执行的脚本的文件名。它将输出文件所在位置的绝对路径,且和命令行参数所指定的文件名不一定相同。 如果在模块中,返回的值是模块文件的路径。

    // 输出全局变量 __filename 的值
    console.log( __filename );

    __dirname的使用

    __dirname 表示当前执行脚本所在的目录, 使用也很简单,因为都是全局的, 不需要引入。

    console.log( __dirname );

    其实还有一些,比如setTimeout(cb, ms) , clearTimeout, setInterval等等,我们很多在javascript中都用过,所以不做过多解释了。

    展开全文
  • JavaScript操作BOM对象

    2018-04-09 21:44:00
    1.window对象常用方法有哪些?并举例说明其用法 alert()  open()  close()  prompt()  setTimeOut()  setInterval()  2.访问页面中带有ID的元素使用什么方法?  getElementById()  ...

    1.window对象常用的方法有哪些?并举例说明其用法
      alert() 

      open()

       close()

       prompt()

       setTimeOut()

       setInterval()  

    2.访问页面中带有ID的元素使用什么方法?

      getElementById() 

      getElemntsByName()

       getElementsByTagName()

    3.定时函数有几种

      setTimeOut() setInterval()

    4.如何在页面上实现前进、后退?
      forward()  back   go()

    5.window对象的方法

      1>history对象的 方法
        forward()  (加载History对象列表中的后一个URL)
        back()   (加载History对象列表中的前一个URL)
        go()    (加载History对象列表中的具体某个URL)

      2>location对象

      host  (设置或者返回主机名和当前URL的端口号)

      hostname   (设置或返回当前URL的主机名)

      href   (设置或返回完整的URL)

      3>location方法

      reload()  (重新加载当前文档)

      replace  (用新的文档替换当前文档)

    6.document对象 

    属性:referrer:返回的是上一个页面的URL

    方法:
     document.getElementById();  (返回对拥有指定ID的第一个对象的引用)

     document.getElementsByName(); 数组  (返回带有指定名称的对象集合)

     document.getElementsByTagName(); 数组  (返回带有指定标签的对象的集合)

    7.Date对象

    8.Math对象

    9.定时函数

      1>setTimeout()

        setTimeout()用于在指定的毫秒后调用函数或计算表达式

      2>setInterval()

        setInterval()可按照指定的周期(以毫秒计)来调用函数或计算表达式

      3>clearTimeout()和clearInterval()

        clearTimeout()函数用来清除由setTimeout()函数设置的定时器

        clearInterval()函数用来清除由setInterval()函数设置的定时器

     

    转载于:https://www.cnblogs.com/fkx1/p/8763176.html

    展开全文
  • 前端面试题汇总3

    2016-09-20 11:15:57
    21、js的基础对象有哪些window和document的常用方法和属性列出来。 基础对象:Number、String、Boolean window: 方法:setInterval、setTimeout、clearInterval、clearTimeout、alert、confirm、open 属性:...
  • 入门学习Linux常用必会60个命令实例详解doc/txt

    千次下载 热门讨论 2011-06-09 00:08:45
    在使用mount这个指令时,至少要先知道下列三种信息:要加载对象的文件系统类型、要加载对象的设备名称及要将设备加载到哪个目录下。 (1)Linux可以识别的文件系统 ◆ Windows 95/98常用的FAT 32文件系统:vfat ;...
  • 1 标签定义声音,比如音乐或其他音频流。...3 audio不单单是个标签 他也是window下的一个对象对象就有属性和方法,作为对象有哪些常用方法对象属性: currentTime 获取当前播放时间 durat...
  • wait是Object类的方法,对此对象调用wait方法导致本线程放弃对象锁,进入等待此对象的等待锁定池,只有针对此对象发出notify方法(或notifyAll)后本线程才进入对象锁定池准备获得对象锁进入运行状态。 17、...
  • javaScript之全局函数

    2018-10-25 08:26:46
    每个全局函数都自己的用法,和自己的特点,那么哪些常用的,哪些是不常用的,该如何用好这些方法呢,下面开始我们的分享: parseFloat(),parseInt() eval() isNaN() escape(),unescape() alert(),confirm(...
  • 前端面试宝典V3.0.docx

    2021-03-27 13:31:48
    7、 JavaScript 内置的常用对象有哪些?并列举该对象常用方法?(必会) 82 8、 === 和 ==的区别?(必会) 87 9、 null,undefined 的区别(必会) 88 10、JavaScript 中什么情况下会返回 undefined 值?(必会...
  • java 面试题 总结

    2009-09-16 08:45:34
    1、面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面。抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节。抽象包括...
  • 这也意味着所有的全局变量或者方法都是window对象的属性或方法。当一个函数在被调用的时候都会创建自己的执行环境,而这个函数中所写的代码就开始进入这个函数的执行环境,于是由变量对象构建起了一个...
  • asp.net面试题

    2011-05-27 17:56:26
    6.ADO.net中常用对象有哪些?分别描述一下。 答:connection command sqladapter dataset datatable dataview等等.写不完了. 7.如何理解委托? 答:据说相当于函数指针,定义了委托就可以在不调用原方法名称的情况...
  • 四.AJAX 有哪些优秀开源框架 五.AJAX会有怎样的未来 AJAX是什么 •历史1998 2009 2005 Outlook Web Access 的组件XMLHTTP Internet Explorer 4支持 Google讨论组、Google地图、Google搜索建议、Gmail 大量的开源...
  • “受之以鱼,不若授之以渔”,本教程并不会向你推荐《瑞星杀毒软件》精美界面的具体实现,而只是向你推荐一些常用的美化方法。 2 美化界面之基础篇 美化界面需要先熟悉Windows下的绘图操作,并明白Windows的幕后...
  • 所以,你还要考虑使用哪种序列化协议,比较常用 hession2、kyro、protostuff。 动态代理 : 另外,动态代理也是需要的。因为 RPC 的主要目的就是让我们调用远程方法像调用本地方法一样简单,使用动态代理可以...
  • 使用Arouter注意事项有哪些?如何让代码变得更加容易让人维护? 直接看我这篇博客:https://juejin.im/post/5c46e6fb6fb9a049a5713bcc 4.6 存在待解决问题 动态的管理组件,所以给每个组件添加几个生命周期...
  • 计算机网络复习题

    2014-12-29 19:01:35
    3. 常用的信道复用技术有哪些? 1).FDM: Frequency Division Multiplexing 频分复用(1分) 2).TDM:Time Division Multiplexing 时分复用、STDM: Statistic TDM统计时分复用(2分) 3).WDM: Wavelength Division ...
  • JS-Valid 识别表单中的哪些表单控件(如:input、select等)需要验证是通过 prop 属性来进行的。此外,JS-Valid 还需通过 prop 属性值在 rules 中查找用户设定的验证规则。所以,在使用时必须为要进行表单验证的表单...
  • log4Net详解(共2讲)

    2011-08-16 22:03:25
    他在Ext 3.x中又有哪些不俗的表现? 5、易于扩展是Ext的最大特色之一,如何才能将它的这一功能发挥到极致? 6、在应用Web化的大潮中,单页面应用越来越受到追捧,如何使用Ext快速而简单地开发单页面应用? 7、Web...
  • 7.添加资源两种方法。一种是直接添加系统提供的资源文件,然后选择所需图 标。另一种是自己写资源文件。我们主要介绍第一种。新建Qt Resources file, 将它命名为menu。其他默认。 8.添加完后如下图。可以看到添加...

空空如也

空空如也

1 2
收藏数 32
精华内容 12
关键字:

window对象有哪些常用方法