精华内容
下载资源
问答
  • window对象子对象

    千次阅读 2019-03-19 22:42:11
    window对象(属性和方法) 特点: window是浏览器宿主对象,与js无关,支持所有浏览器,表示浏览器窗口 所有js的全局对象、全局函数、全局变量都是window对象的成员 注:以下所有属性都可以不需要window前缀,...

    window对象(有属性和方法)

    特点

              window是浏览器宿主对象,与js无关,支持所有浏览器,表示浏览器窗口

              所有js的全局对象、全局函数、全局变量都是window对象的成员

    注:以下所有属性都可以不需要window前缀,子对象更加详细的属性和方法见另一篇博客:

    window对象的子对象(属性的一种)

    1、window.document

    window.ducument.getElementById("id");        //等价于 document.getElementById("id");
    window.ducument.getElementsByTagName("div"); 
    window.document.getElementsByClassName("class");
    window.document.getElementsByName("name");
    window.document.createElement("div");
    window.document.createAttribute("class");
    

    2、window.screen

    window.screen.availWidth;    // 返回浏览器可用宽度 像素为单位 1366
    window.screen.availHeight;   // 728  
    window.screen.availTop;      // 0
    window.screen.availLeft;     // 0

    3、window.location

    window.location.hostname; // 返回 web 主机的域名
    window.location.pathname; // 返回当前页面的路径和文件名
    window.location.port;     // 返回 web 主机的端口 (80 或 443)
    window.location.protocol; // 返回所使用的 web 协议(http:// 或 https://)
    window.location.href;     // 返回当前页面的url地址
    window.location.host;     // 返回当前页面url的主机ip

    4、window.history

    window.history.back();       // 与在浏览器点击后退按钮相同
    window.history.forward();    // 与在浏览器中点击按钮向前相同
    

    5、window.navigator

    window.navigator.appCodeName; //浏览器代码名
    window.navigator.appName;     //浏览器步伐名
    window.navigator.language;    //浏览器当前语言
    window.navigator.platform;    //操作体系类型win32
    window.navigator.plugins;
    window.navigator.appVersion;     //浏览器版本(包括 体系版本)
    window.navigator.userAgent;      //用户代理头的字符串表示
    window.navigator.onLine;         //用户否在线
    window.navigator.cookieEnabled;  //浏览器是否撑持cookie
    window.navigator.mimeTypes;

     

    展开全文
  • BOM对象有哪些,列举window对象

    千次阅读 2019-06-22 10:44:28
    BOM对象有哪些,列举window对象? 1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性; 2、document对象,文档对象; 3、location对象,浏览器当前URL信息; 4、navigator对象,浏览器本身...

    BOM对象有哪些,列举window对象?

    1、window对象 ,是JS的最顶层对象,其他的BOM对象都是window对象的属性;

    2、document对象,文档对象;

    3、location对象,浏览器当前URL信息;

    4、navigator对象,浏览器本身信息;

    5、screen对象,客户端屏幕信息;

    6、history对象,浏览器访问历史信息;

    https://www.cnblogs.com/wade1220/p/7182677.html?utm_source=itdadao&utm_medium=referral

    展开全文
  • Window对象

    千次阅读 2016-06-06 08:13:57
    window对象

    window对象是客户端JavaScript程序的全局对象,包含多数的属性和方法。

    计时器

    Window对象包含2个方法可以进行计时操作:

    • setTimeout()用来注册在指定的时间后单次调用的函数,返回一个值,这个值可以传递给clearTimeout()用于取消函数的执行。
    • setInterval()用来注册在指定时间后重复调用的函数,返回一个值,这个值可以传递给clearInterval()用于取消后续函数的调用。

    如果以0毫秒的超时时间来调用setTimeout(),那么指定的函数不会立即执行。相反,会把指定函数放到队列中,等到前面处理等待状态的事件处理程序全部执行完成后,再调用它。

    浏览器定位 location

    window对象的location属性引用的是Location对象,它表示该窗口中当前显示的文档的URL。
    Document对象的Location属性也引用到Location对象:

    window.location === document.location // 总是返回true

    解析URL

    Location对象包含一些属性:protocol, host, hostname, port, pathname和search,分别表示URL的各个部分。hash属性返回URL中的”片段标识符”(#top)部分,search属性返回的是问号之后的URL,这部分通常是某种类型的查询字符串。
    比如,提取URL的搜索字符串中的参数:

    function urlArgs() {
        var args  = {};
        // 查找到查询串,并去掉'?'
        var query = location.search.substring(1);
        var pairs = query.split("&");
        for(var i=0; i < pairs.length; i++) {
            var pos = pairs[i].indexOf('=');
            if(pos == -1) continue;
            var name  = pairs[i].substring(0, pos);
            var value = pairs[i].substring(pos + 1);
            value = decodeURIComponent(value);
            args[name] = value;
        }
    
        return args;
    }

    载入新的文档

    • Location对象的assign()方法可以使窗口载入并显示你指定的URL中的文档。
    • replace()方法也类似,但是它在载入新文档之前会从浏览器历史中把当前文档删除。所有如果检测到用户浏览器不支持某些特性来显示功能齐全的版本,可以用location.replace()来载入静态的HTML版本,防止”后退”按钮把浏览器带回到原始文档。
    • 可以直接给location进行赋值实现页面的跳转:
    location = "http://www.example.com";    // location直接赋值实现跳转

    如果将片段标识赋值给location,则不会让浏览器载入新文档,只会使它滚动到文档的某个位置。

    location = "#top";  // 跳转到文档的顶部

    同时,location的分解属性是可写的,对它们重新赋值也会改变URL的位置。

    location.search = "?page=" + (pagenum + 1); // 载入下一个页面

    浏览历史

    Window对象的history属性引用的是该窗口的History对象,History对象是用来把窗口的浏览历史用文档和文档状态列表的形式表示。

    • History对象的length属性表示浏览历史列表中的元素数量,但出于安全考虑,脚本不能访问已保存的URL。
    • History对象的back()和forward()方法与浏览器的”后退”和”前进”按钮一样。
    • History对象还包含一个go()方法,可以在历史列表中向前或向后跳过任意多个页。
    history.go(-2); // 后退2个历史记录,相当于单击"后退"按钮2

    注:如果窗口包含多个子窗口(比如<iframe>元素),子窗口的浏览历史会按时间顺序穿插在主窗口的历史中。这意味着主窗口调用history.back()可能会导致其中一个子窗口往回跳转到前一个显示的文档,但主窗口保持不变。

    Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象。
    以下4个属性用于提供关于运行中的浏览器的版本信息:

    属性 含义
    appName web浏览器的全称。在IE中为”Microsoft Internet Explorer”,在Firefox中为”Netscape”,为了兼容现存的浏览器嗅探代码,其他浏览器通常也取值为”Netscape”。
    appVersion 此属性通常以数字开始,并跟着浏览器厂商和版本信息的详细字符串。appVersion字符串没有标准的格式,所以没有办法直接用它来判断浏览器的类型。
    userAgent 浏览器在它的USER-AGENT HTTP头部中发送的字符串。这个属性通常包含appVersion中的所有信息,并且也可能包含其他的细节。和appVersion一样,它也没有标准格式。但由于这个属性包含绝大部分信息,因此浏览器嗅探代码通常用它来嗅探。
    platform 在其上运行浏览器的操作系统(并且可能是硬件)的字符串。
    onLine 表示浏览器当前是否连接网络。
    geolocation 用于确定用户位置信息的接口。
    javaEnabled() 一个非标准的方法,当浏览器可以运行java小程序时返回true。
    cookieEnable() 非标准的方法,如果浏览器可以保存永久的cookie时,返回true。

    比如,使用navigator.userAgent来进行浏览器嗅探:

    // 
    // "webkit":  Safari或Chrome
    // "opera":   Opera
    // "mozilla": FireFox或者其他基于gecko内核的浏览器
    // "msie":    IE
    //
    var browser = (function() {
        var s = navigator.userAgent.toLowerCase();
        var match = /(webkit)[ \/]([\w.]+)/.exec(s) ||
                    /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s) ||
                    /(msie)([\w.]+)/.exec(s) ||
                    !/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) ||
                    [];
    
        return { name: match[1] || "", version: match[2] || "" };
    }());

    Screen对象

    Window对象的screen属性引用的是Screen对象,它提供有关窗口显示的大小和可用的颜色信息。

    • 属性width和height指定的是以像素为单位的窗口大小。
    • 属性availWidth和availHeight指定的是实际可用的显示大小,排除了像桌面任务栏占用的空间。
    • 属性colorDepth指定的是显示的BPP(bits-per-pixel)值。
      可以使用Screen对象来确定web应用是否运行在一个小屏幕的设备上(比如上网本),然后选择更小的字体和图片等。

    对话框

    Window对象提供了4个方法来向用户显示对话框,3个简单方法:alert()、confirm()、prompt()。1个复杂方法:showModalDialog()。

    • 方法ocnfirm()和prompt()都会产生阻塞,也就是说,在用户关掉对话框前,它们不会返回。
    • alert()方法也会产生阻塞,但并不总是这样。
    • showModalDialog()显示一个”模态对话框”(显示出来就可点选位于其下面的对话框),第1个参数指定对话框HTML内容的URL,第2个参数是一个任意值(数组和对象均可),这个值在对话框里的脚本可以通过window.dialogArguments属性的值访问。第3个参数是一个非标准的列表,包含name=value对,可以配置对话框的尺寸或其他属性。
    var p = showModalDialog("multiprompt.html", 
                            ["Enter 3D point coordinates", "x", "y", "z"],
                            "dialogwidth:400; dialogheight:300; resizable:yes");

    错误处理

    Window对象的onerror属性是一个事件处理程序,当未捕获的异常传播到调用栈上时就会调用它。
    onerror处理程序是早期的JavaScript的遗物,那里语言核心不包含try/catch异常处理语句,现在很少使用它,使用try/catch即可。

    作为Window对象属性的文档元素

    • 如果在HTML文档中用id属性来为元素命名,Window对象会赋予一个属性,它的名字是id属性的值,而它们的值指向表示文档元素的HTMLElement对象,可以通过GetElementById()来获取。但是,如果Window对象已经具有此名字的属性时,这就不会发生,比如,id是”history”、”location”等。
    • id元素在文档中必须是唯一的,但是name属性不一定唯一,如果HTML元素有多于一个相同的name属性(或者一个元素有name属性,而另一个元素有相同值的id属性),则该名称的隐式全局变量会引用一个类数组对象,这个类数组对象的元素是所有命名的元素。
    • 有name或id属性的<iframe>元素是个特殊的例子,为它们创建的变量不会引用表示自身的Element对象,而是引用表示<iframe>元素创建的嵌套窗体的window对象。

    多窗口和窗体

    如果浏览器窗口包含多个标签页,则每一个标签页都是独立的Window对象上下文,而且相互之间互不干扰。由<iframe>所创建的嵌套浏览上下文是用它自己的Window对象所表示。
    和相互独立的标签页不同,嵌套的浏览上下文之间并不是相互独立的。在一个窗体中运行的JavaScript程序总是可以看到它的祖先和子孙窗体,尽管脚本查看这些窗体的文档受到同源策略的限制。

    打开窗口

    使用Window对象的open()方法可以打开一个新的浏览器窗口(或标签页,这通常和浏览器配置有关)。

    • open()的第一个参数是要在新窗口中显示的文档URL。
    • open()的第二个参数是新打开的窗口的名字。如果指定的是一个已经存在的窗口的名字,则会直接使用已存在的窗口。如果省略此参数,会使用指定的名字”_blank”打开一个新的、未命名的窗口。
    • open()的第三个参数是可选的,一个以逗号分隔的列表,包含大小和各种属性,此参数是非标准的,HTML5规范也主张浏览器应该忽略它。
    • open()的第四个参数只在第二个参数命名是一个存在的窗口时才有用。它是一个布尔值,声明了由第一个参数指定的URL是否应该替换掉窗口浏览历史的当前条目(true),默认是不替换。
    • open()的返回值是新创建窗口的Window对象。
    var w = window.open("smallwin.html", "smallwin",
                        "width=400, height=350, status=yes, resizable=yes");
    • 在新创建的窗口中,opener属性引用的是打开它的脚本的Window对象。
    w.open.opener === w;    // true,对于任意窗口w

    关闭窗口

    就像方法open()打开一个新窗口一样,方法close()将关闭一个窗口。

    • 在表示窗体而不是窗口或标签页上的Window对象上执行close()方法不能关闭一个窗体,相反,只能从包含它的文档中删除iframe
    • 即使用一个窗口关闭了,代表它的Window对象仍然存在。但是它的closed属性为true、它的document会是null、它的方法通常也不会再工作。

    窗体之间的关系

    • 任何窗口和窗体都可以引用为window或self。
    • 窗体可以用parent属性引用包含它的窗口或窗体的Window对象。如果一个窗口是顶级窗口或标签,而不是窗体,那么其parent属性引用是这个窗口本身。
    • 无论窗体被嵌套了几层,它的top属性引用的都是包含它的顶级窗口。
    • <iframe>元素有contentWidow属性,引用该窗体的Window对象,同样,可以进行反向操作–从表示窗体的Window对象来获取该窗体的<iframe>元素,使用Window对象的frameElement属性。窗体中的Window对象的frameElement属性不是null,但顶级窗口的Window对象的frameElement属性是null
    • 每个Window对象都有一个frames属性,它引用自身包含的窗口或窗体,frames属性引用的是类数组对象,frames[0]引用窗口的第一个子窗体,依次类推。

    交互窗口中的JavaScript

    每个窗口和窗体都有它自身的执行上下文,以Window作为全局对象。

    • 当用构造函数定义一个类,这个类只在一个单独的窗口定义。如果要在另一个窗口中使用,则需要显式的引用。
    • 和用户定义的类不同,内置的类(String,Date,RegExp…)都会在所有的窗口中自动预定义。但要注意,每个窗口都有构造函数的一个独立副本和构造函数对应原型对象的一个独立副本。这意味着instanceof操作符不能跨窗口使用。例如,当用instanceof来比较窗体B的一个字符串和窗体A的String()构造函数时,结果会是false。
    展开全文
  • 一)HTML  DOM ... 2、常用HTML DOM对象有哪些?Select对象与Option对象  1)Select对象  2)Option对象  3)Table对象  4)TableRow对象  5)TableCell对象 二)Window其他子对象(DHTML模型) 1、scre

    一)HTML  DOM

    1、什么是HTML  DOM?

           1)HTML DOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法(对DOM操作进行了封装,实现代码的简化)。
           2)HTML标签对象化:将网页中的每个元素都看作一个对象。
           3)常用HTML DOM对象字母图

           4)如何解决浏览器兼容性问题:首先代码要符合W3C标准,然后了解各浏览器特殊的地方。
           5)多种对象中,重要了解Select对象和Table对象。

    2、常用HTML DOM对象有哪些?Select对象与Option对象

           1)Select对象

    1>Select对象代表HTML表单中的一个下拉列表,<select>标签即表示一个Select对象。
    2>常用属性:options(选项数组)、selectedIndex(索引从0开始)、size
    3>常用方法:add(option)、remove(index)
    4>事件:onchange

    <span style="font-size:18px;">	<select οnchange="alert(this.selectedIndex);">	
    		<option value="1">a</option>
    		<option value="2">b</option>
    	</select></span>

            2)Option对象

    1>Option对象代表HTML表单中下拉列表中的一个选项,<option>标签表示一个Option对象
    2>创建对象:var obj=new Option(text,value);
    3>常用属性:index、text、value、selected

    <span style="font-size:18px;"><html>
    <head>
    <title>deleteNode1.html</title>
    <script type="text/javascript">
    	//(结合上例修改οnchange="selFunc();" id="s1")
    	function selFunc() {
    		var selObj = document.getElementById("s1");
    		var value = selObj.options[selObj.selectedIndex].value;
    		alert(value);
    		var option = new Option("c", "3");
    		selObj.add(option);
    	}
    </script>
    </head>
    <body>
    	这是一个下拉可选测试<br>
    	<select οnchange="alert(this.selectedIndex);">	
    		<option value="1">a</option>
    		<option value="2">b</option>
    	</select>
    </body>
    </html></span>
           经典案例:联动菜单(修改上一篇的案例)

    <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>

            3)Table对象

    <span style="font-size:18px;">1>Table对象代表一个HTML表格,<table>标签表示一个Table对象。
    2>常用属性:rows(返回所有行数组)、cells(返回所有单元格数组)
    3>常用方法:①table.insertRow(index):返回TableRow对象(插入新行)。
    <span style="font-size:18px;">       </span><span style="font-size:18px;">   </span> ②table.deleteRow(index):删除TableRow对象(删除行)。</span>

            4)TableRow对象

    1>TableRow对象代表一个HTML表格行,<tr>标签表示一个TableRow对象
    2>常用属性:cells、innerHTML、rowIndex
    3>常用方法:①row.insertCell(index):返回TableCell对象(插入单元格)。
                           ②row.deleteCell(index):删除TableCell对象(删除单元格)。

            5)TableCell对象

    1>TableCell对象代表一个HTML表格单元格,<td>标签表示一个TableCell对象。
    2>常用属性:cellIndex、innerHTML、colSpan、rowSpan
    3>案例:产品列表

    <span style="font-size:18px;"><!DOCTYPE html>
    <html>
    <head>
    <title>productTable.html</title>
    <script type="text/javascript">
    	function modiTable() {//增加行
    		var table = document.getElementById("t1");//得到表格对象
    		var row = table.insertRow(table.rows.length);//创建新行
    		var cell1 = row.insertCell(0);//为行创建产品名称单元格
    		cell1.innerHTML = document.getElementById("txtID").value;
    		var cell2 = row.insertCell(1);//为行创建价格单元格
    		cell2.innerHTML = document.getElementById("txtName").value;
    		var buttonCell = row.insertCell(2);//为行创建操作按钮的单元格
    		var button = document.createElement("input");
    		button.type = "button";
    		button.value = "删除";
    		button.onclick = function() {
    			delFunc(this);
    		};
    		buttonCell.appendChild(button);
    	}
    	function delFunc(btnObj) {//删除按钮的单击事件
    		var isDel = confirm("真的要删除吗?");
    		if (!isDel)
    			return;
    		//找到当前行的 ID
    		var rowObj = btnObj.parentNode.parentNode;
    		var id = rowObj.getElementsByTagName("td")[0].innerHTML;
    		//循环行,根据id定位需要删除的行,并删除
    		var table = document.getElementById("t1");
    		for ( var i = 1; i < table.rows.length; i++) {
    			if (table.rows[i].cells[0].innerHTML == id) {
    				table.deleteRow(i);
    				break;
    			}
    		}
    		alert("删除 ID 为 " + id + " 的数据。");//提示							
    	}
    </script>
    </head>
    <body>
    	产品列表测试<br> 
    	ID号:<input type="text" id="txtID" /><br />
    	 名称:<input type="text" id="txtName" /><br />
    	<input type="button" value="增加" οnclick="modiTable();" />
    	<table id="t1" border="1">
    		<tr>
    			<td>产品ID</td>
    			<td>产品名称</td>
    			<td></td>
    		</tr>
    	</table>
    </body>
    </html></span>


    二)Window其他子对象(DHTML模型)

    1、screen对象

           1)包含有关客户端显示屏幕的信息(封装了屏幕相关的信息,供读取)。
           2)常用属性:width/height、availWidth/availHeight
    例如:var n = screen.width//ok!

               screen.width = 1000;//error! 只能读不能写

    2、history对象

           1)包含用户在浏览器窗口中访问过的URL(封装了历史访问记录)。
           2)length属性:浏览器历史列表中的URL数量。
           3)方法:①history.back():单击后退按钮。
                  ②history.forward():单击向前按钮。
                  ③history.go(n):单击n次后退按钮。

    3、location对象

           1)包含有关当前URL的信息(地址栏),常用于获取和改变当前浏览的网址。
           2)href属性:当前窗口正在浏览的网页地址。
           3)方法:①location.href="url":在当前页面打开,保留历史访问记录。
                             ②location.replace("url"):在当前页面打开url,不保留历史访问记录。
                             ③location.reload():重新载入当前网址,等同于按刷新。
     注意事项:
            location.href="url"也等同于location["href"],但很少这么用。
            location="url"好像也可以。

    4、navigator对象

           包含浏览器软件的相关信息,常用于获取客户端和操作系统信息。

    eg:遍历navigator对象的所有属性

    function testNavigator(){
         var s="";	 
         for(var p in navigator){//p代表对象中的每一个属性
    			s +=p +":"+navigator[p]+"\n" 	
    		}	  	
    	alert(s);	
    }
    5、事件模型

           1)事件:指DHTML对象在状态改变、鼠标操作或键盘操作时触发的动作。
           2)事件的类别:
                  ①鼠标事件:onclick/ondblclick/onmouseover/onmouseout ……
                  ②键盘事件:onkeydown/onkeyup ……
                  ③状态改变事件:onblur/onfocus/onchange/onload(body里)/onsubmit(form里) ……
           3)如何定义事件:
                  ①<标签里 onXXX="代码">:静态,写在html代码中
                  ②obj.onclick = function(){}:动态,在JavaScript代码中定义
           4)事件可以被取消:onXXX = "return false;"
    例如:ID:<input id="txtID" type="text" />
                      <input type="submit" value="Delete" οnclick="return deleteFunc();" />
    案例:删除某ID

    <html>
    <head>
    <title>rollEvent.html</title>
    <script type="text/javascript">
    	function deleteFunc(){
    	 		var data=document.getElementById("txtID").value;
                var spanObj=document.getElementById("info");
    	        if(isNaN(data)){ 
    		          info.innerHTML="请录入数值";
    	             return false;	
    			} else
    			 return confirm("真的要删除吗?");	
    	}
    	</script>
    </head>
    <body>
    	This is my HTML page.
    	<br> ID:
    	<input id="txtID" type="text" />
    	<input type="submit" value="Delete" οnclick="return deleteFunc();" />
    	<span id="info"></span>
    </body>
    </html>
    
           5)事件的处理机制(冒泡机制)

           事件冒泡机制:当处于DHTML对象模型底部的对象事件发生时,会依次激活上面对象定义的同类事件处理(即当有层次关系,且定义了相同事件时,会发生)。
    例如:现象:单击按钮,则会弹出“1”、“2”、“3”。
                           单击段落,则会弹出“2”、“3”
                           单击div,则会弹出“3”

    	<div style="width:100px;height:100px;border:1px solid red;"
    		οnclick="alert('3');">
    		<p οnclick="alert('2');">
    			p text <input type="button" value="1" οnclick="alert('1');" />
    		</p>
    	<div>

    注意事项:使用event对象可以禁止事件冒泡,也可详见jQuery笔记。

    6、event对象

           1)任何事件触发后将会产生一个event对象。
           2)event对象记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息(获得event对象后,可以获得相关信息)。
           3)常用属性:clientX/clientY/cancelBubble=true(取消冒泡) ……
           4)使用event对象
                  ①如何获得event对象
    A. IE/Chrome等浏览器:直接使用event关键字。
    B. Firefox浏览器:在事件定义中,使用event关键字将事件对象作为参数传入方法。
            注意事项:在Firefox里直接在JavaScript中使用event,则不行!不认识!即只能在html页面获得event对象!其他浏览器既可以在JavaScript中获得,也可以在html页面中获得。
                   如何获得事件源
    A. IE/Chrome等浏览器:event.srcElement
    B. Firefox浏览器:event.target
            注意事项:两种获得事件源对象的方式最新的Chrome浏览器都支持。

    <!DOCTYPE html>
    <html>
    <head>
    <title>rollEvent.html</title>
    <script type="text/javascript">
      //IE/Chrome等浏览器
         function func(){    alert(event.clientX+":"+event.clientY);
    	                  alert(event.srcElement.nodeName);//DIV(大写的)  
    	}
         //Firefox浏览器
         function func(e){    alert(e.clientX+":"+e.clientY);
    	                   alert(e.target.nodeName);//DIV(大写的)	
    	  }	
    	</script>
    </head>
    <body>
    <div οnclick="func();"> div text</div>
          <div οnclick="func(event);"> div text</div>
         <!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
    </body>
    </html>

    5)考虑各浏览器的兼容性

    <span style="font-size:18px;">	<div οnclick="func(event);">div text</div>
        <!--注意把event传入方法中!这样也可以在JavaScript中写复杂代码了!-->
        //如下操作可兼容各浏览器
        function func(e){	
        		alert(e.clientX+":"+e.clientY);
    	        var obj=e.srcElement || e.target;
    	        alert(obj.nodeName);//DIV(大写的)	
    	</span><span style="font-size:18px;">}</span>

    6)案例

    eg:简单计算器(简化版)

    <!DOCTYPE html>
    <html>
    <head>
    <title>cal.html</title>
    <script type="text/javascript">
    	function cal(e) {
    		var obj = e.target || e.srcElement;//获得被单击的对象
    		//判断只有单击的是button
    		if (obj.nodeName == "INPUT" && obj.type == "button") {
    			if (obj.value == "=") {//=按钮进行eval;其他按钮做拼接操作
    				var s = document.getElementById("txtNumber").value;
    				var data = eval(s);
    				document.getElementById("txtNumber").value = data;
    			} else {
    				document.getElementById("txtNumber").value += obj.value;
    			}
    		}
    	}
    </script>
    </head>
    <body>
    	简易计算器测试<br>
    	<div style="border:1px solid red;" οnclick="cal(event);">
    		<input type="button" value="1" /> <input type="button" value="2" />
    		<input type="button" value="3" /> <input type="button" value="4" />
    		<input type="button" value="+" /> <input type="button" value="-" />
    		<input type="button" value="=" /> <input type="text" id="txtNumber" />
    	</div>
    </body>
    </html>
    

    三)面向对象基础

    1、什么是JS对象、属性、方法?

           对象:对象是一种特殊的数据类型,由属性和方法封装而成;

           属性:属性是指与对象有关的值:对象名.属性名;

           方法:方法指的是对象可以执行的行为货可以完成的功能:对象名.方法名()

    2、定义JS对象有哪几种方式?

    主要有三种方式:

           1)创建对象的实例;

           2)创建对象的模版;

           3)使用JSON(相当于Java中的Map)。

           4)经典案例

    案例1:创建通用对象(使用Object创建对象以实现简单的封装,但不方便重用!)

    <html>
    <head>
    <title>testObject.html</title>
    <script type="text/javascript">
    	function TestObject() { //创建对象,封装数据和行为
    		var s = new Object();
    		s.name = "mary";
    		s.age = 18;
    		s.sing = function() {
    			alert("hello");
    		};
    		//匿名方法,赋进去一个function,所以sing是个方法
    		alert(s.name);
    		alert(s.age);
    		s.sing();
    	}
    </script>
    </head>
    <body>
    	This is my HTML page.
    	<br>
    	<input type="button" value="使用Object创建对象" οnclick="testObject();" />
    </body>
    </html>
           注意事项: .后写啥属性名都行,因为JavaScript是松散类型语言
    案例2:创建对象模板

    可重用的封装;定义构造函数,以创建自定义的对象。
    语法:function ObjName(参数1,参数2,…){}

    <!DOCTYPE html>
    <html>
    <head>
    <title>demo.html</title>
    <script type="text/javascript">
    	function Student(n1, a1) {//定义一个对象的模版:Student
    		this.name = n1;//用了this关键字,就认为Student是一个类,而不是方法
    		this.age = a1;
    		this.introduceSelf = function() {
    			alert("i am " + this.name + ", i am " + this.age + " year old");
    		}
    	}
    	function testOwnObject() {//测试自定义的Student对象
    		var p1 = new Student("mary", 18);
    		var p2 = new Student("join", 20);
    		alert(p1.name);
    		alert(p2.age);
    		p1.introduceSelf();
    		p2.introduceSelf();
    	}
    </script>
    </head>
    <body>
    	<h3>测试创建对象模板<br></h3>
    	<input type="button" value="自定义对象" οnclick="testOwnObject();" />
    </body>
    </html>
    




    展开全文
  • JS中document对象 && window对象

    万次阅读 多人点赞 2018-05-14 19:04:34
    所有的全局函数和对象都属于Window对象的属性和方法。区别: 1、window 指窗体。Window 对象表示浏览器中打开的窗口。 document指页面。document是window的一个子对象、一个对象属性。 2、用户不能改变 document....
  • 获取窗口的window对象

    千次阅读 2018-03-25 14:32:22
    iframe窗口名在Chrome控制台显示情况 iframe没有设置id和name属性值,chrome控制台显示iframe名则是截取url地址最后一个斜杠后面的部分(猜测) iframe设置了id值但没有设name属性值,chrome控制台...获取窗口...
  • window对象用法

    千次阅读 2017-12-22 09:22:06
    window对象用法:1. open方法语法格式:window.open(URL,窗口名称,窗口风格)功能:打开一个新的窗口,并在窗口中装载指定URL地址的网页。说明: open方法用于打开一个新的浏览器窗口,并在新窗口中装入一个指定的URL...
  • window对象

    千次阅读 2011-07-14 17:46:22
    window属性1、获得当前窗口的对象window.frameElementvar frameObj = window.frameElement;获得当前窗口的名字:frameObj.name// 同样: 获得当前window的名字: window.name 发现就是fr
  • BOM核心对象window常用方法与子对象

    千次阅读 2017-12-04 13:14:13
    前言 BOM:浏览器对象模型,主要处理浏览器窗口和框架
  • 一文搞定JS中window对象

    千次阅读 2020-06-25 14:16:41
    1.window对象简介 2.窗口操作 3.对话框 4.... 5.location对象 6.navagator对象 7.document对象 1.window对象简介 ...window对象子对象分很多种: 子对象 说明 document 文档对象用于操作页面元素.
  • window对象 window对象是BOM的核心,代表浏览器窗口的一个实例。在浏览器中,window对象既是JavaScript访问...通过window对象可以访问浏览器窗口,同时与浏览器相关的其他客户端对象都是window的子对象,通过win...
  • Javascript之window对象

    千次阅读 2017-12-07 09:35:38
     window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数。 1、全局的window对象  JavaScript中的任何一个全局函数或变量都是window的属性。 script t
  • 转发:https://blog.csdn.net/jarniyy/article/details/62424919var iframe=document.getElementById("xxx");//父窗口获取iframe窗口对象...//iframe窗口的window对象var iframed=iframew.document;//...
  • Window 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 ...
  • js的window对象与属性的使用

    万次阅读 2018-11-23 06:11:36
     浏览器对象:window对象。  Window 对象会在 &lt;body&gt; 或 &lt;frameset&gt; 每次出现时被自动创建。 2. window对象 window对象是BOM中所有对象的核心。BOM Browser Object Model 3.window...
  • HTML中的window对象和document对象详解

    千次阅读 2016-04-07 20:15:49
    Window -- 代表浏览器中一个打开的窗口: 对象属性  window //窗口自身  window.self //引用本窗户window=window.self  window.name //为窗口命名  window.defaultStatus //设定窗户状态栏信息  window...
  • javascript之window对象

    千次阅读 2014-12-10 08:51:50
    :指定打开的窗口为当前窗口的一个窗口,并随着父窗口的关闭而关闭,选项的值及含义与 toolbar 相同; hotkeys :在没有菜单栏的新窗口中设置安全退出的热键,选项的值及含义与 toolbar 相同; ...
  • 浅谈window对象和document对象

    千次阅读 2017-03-13 17:39:47
    1、window:代表浏览器中一个打开的窗口。 (1)对象属性 ① window.self 引用本窗口window==window.self ② window.name 为窗口名字 ③ window.defaultStatus 窗户状态栏信息 ④ window.location URL地址...
  • javascript中的window对象

    2018-08-20 16:53:42
    其他对象都是该对象的子对象。js不仅可以运行在浏览器中,也可以运行在nodejs中,nodejs也是运行js的一个环境。 在全局下定义的属性和方法都自动挂载在window对象下。 onload() onunload() setTimeout() ...
  • js中WINDOW对象中的location成员对象

    千次阅读 2017-09-27 18:30:51
    js中DOM, DOCUMENT, BOM, WINDOW ...js中WINDOW对象中的navigator成员对象 navigator`对象:包含大量有关Web浏览器的信息,在检测浏览器及操作系统上非常有用 window.navigator.appCodeName //浏览器代码名 window.
  • window对象属性

    千次阅读 2006-06-20 10:45:00
    window对象属性熟练window对象的open、close、alert、confirm、prompt、setTimeout、clearTimeout、setInterval、clearInterval、moveBy、resizeBy、scrollBy方法的使用 掌握window对象的moveTo、resizeTo、scrollTo...
  • 浏览器对象模型BOM之window对象

    千次阅读 2016-11-27 13:56:20
    1.BOM的概述  browser object modal :... 浏览器对象:window对象。  Window 对象会在 或 每次出现时被自动创建。 2. window的属性  innerHeight:   innerWidth: IE不支持 通用写法:document.body.clientWidth
  • javascript中window对象及属性

    千次阅读 2015-08-27 15:24:27
    window对象有以下方法: open、close、alert、confirm、prompt、setTimeout、clearTimeout、setInterval、clearInterval、moveBy、moveTo、resizeBy、resizeTo、scrollBy、scrollTo、find、back、forward、home、...
  • JavaScript Window窗口对象

    千次阅读 2020-01-18 11:49:05
    文章目录一、Window对象概述1、Window对象属性2、Window对象方法3、如何使用二、对话框1、警告对话框2、确认对话框3、提示对话框三、打开与关闭窗口1、打开窗口2、关闭窗口(1)关闭当前窗口(2)关闭窗口四、控制...
  • JS-Window对象

    千次阅读 2010-04-17 09:26:00
    js-window对象的方法和属性资料 Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否打开的网页,当遇到BODY、FRAMESET或FRAME元素时,都会自动建立window对象的实例。另外,该...
  • Window 对象 Window 对象表示浏览器中打开的窗口。如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。   手中的一个项目包含...
  • 【JavaScript】window对象_event事件对象

    千次阅读 2015-03-08 01:11:06
    1.event对象属性 event对象可以获取和设置当前事件的有关信息,比如, 获取发生事件的事件源对象,像键盘按下时使用的是哪 个按键,鼠标事件发生时的鼠标位置,以及按下的鼠标 按键是哪个。 主要属性: altKey属性...
  • 详解HTML中的window对象和document对象

    万次阅读 多人点赞 2014-11-18 11:03:58
    Window -- 代表浏览器中一个打开的窗口: 对象属性  window //窗口自身  window.self //引用本窗户window=window.self  window.name //为窗口命名  window.defaultStatus //设定窗户状态栏信息  window....
  • JS中document对象和window对象的区别

    万次阅读 2015-07-15 16:41:14
    简单来说,document是window的一个对象属性。 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 169,524
精华内容 67,809
关键字:

window对象的子对象有哪些