JavaScript では、window は「窓」を意味し、ブラウザ ウィンドウを表す組み込みホスト オブジェクトです。すべてのブラウザがこのオブジェクトをサポートしています。すべての JavaScript グローバル オブジェクト、関数、変数は自動的に window オブジェクトのメンバーになります。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
JavaScript では、window は「窓」を意味し、組み込みのホスト オブジェクトです。
ウィンドウ オブジェクトは、BOM 内のすべてのオブジェクトの中心です。BOM 内のすべてのオブジェクトの親オブジェクトであるだけでなく、いくつかのウィンドウ コントロール関数も含まれています。
ホストオブジェクトとは、JSスクリプトを実行する環境が提供するオブジェクトであり、ブラウザが提供するオブジェクトです。すべての BOM と DOM はホスト オブジェクトです。
ウィンドウ オブジェクト
すべてのブラウザはウィンドウ オブジェクトをサポートしています。ブラウザウィンドウを表します。
すべての JavaScript グローバル オブジェクト、関数、および変数は、自動的に window オブジェクトのメンバーになります。
window.document.getElementById("header");
これと同じ:
document.getElementById("header");
1。 window object
JavaScript のグローバル関数または変数はすべて window のプロパティです。
<script type="text/javascript"> var name="撼地神牛"; document.write(window.name); </script>
2. Window オブジェクトと self オブジェクト
self オブジェクトは window オブジェクトとまったく同じで、通常、Self は現在の形式であることを確認するために使用されます。
<script type="text/javascript"> document.write(window == self); //必须相等,永远都相等 document.write(window.Top == window.self); //判断当前框架是否是主框架 </script>
Window、self、window.self は同等です。
3. window のサブオブジェクト
window のメイン オブジェクトには主に次のものが含まれます:
JavaScript 位置オブジェクト
<body> <input type="button" id="btn1" value="先设置窗体固定大小!" onclick="window.resizeTo(500,500);" /> <input type="button" id="btn2" value="再缩小10像素!" onclick="window.resizeBy(-10,-10);" /> <input type="button" id="btn2" value="上!" onclick="window.moveBy(0,-5);" /> <input type="button" id="btn2" value="下!" onclick="window.moveBy(0, 5);" /> <input type="button" id="btn2" value="左!" onclick="window.moveBy(-5, 0);" /> <input type="button" id="btn2" value="右!" onclick="window.moveBy(5, 0);" /> <input type="button" id="btn2" value="距离左上角左边100像素,顶部200像素" onclick="window.moveTo(100, 200);" /> </body>
<div style="height:150%; width:150%; background-color:#ddd"> <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollTo(100,100);" /> //相当于设置绝对位置 <input type="button" id="btn1" value="移动滚动条!" onclick="window.scrollBy(100,100);" /> //相当于累加 </div>
<div> <input type="button" value="获得焦点" onclick="document.getElementById('testInput').focus()" /> <input type="button" value="失去焦点" onclick="document.getElementById('testInput').blur()" /> <input type="text" value="text" id="testInput" onblur="alert('我已失去焦点')" /> </div>
JavaScript close() 関数: フォームを閉じる
url -- フォーム URL をロードします;
name -- 新しいフォームの名前 (HTML ターゲット属性 target の値でも可);
<a href="2.html" target="2">在新窗口打开连接</a> <a href="#" onclick="window.open('http://www.google.com','2');">在已建立连接的页面打开新地址</a>
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
方法一:<body onload="openwin()"> 浏览器读页面时弹出窗口; 方法二:<body onunload="openwin()"> 浏览器离开页面时弹出窗口;
タイプ | 説明 | |
---|---|---|
数値 | フォームの高さを設定します。100 未満にすることはできません。 | |
Number | 作成したフォームの左座標を記述します。 form (負の値は指定できません) Value | |
Boolean | フォームにアドレス バーが表示されるかどうか、デフォルト値は no | |
Boolean | フォームの端をドラッグしてサイズ変更できるかどうか、デフォルト値は no | ##scrollable |
フォームの内部がウィンドウの表示範囲を超える場合にドラッグを許可するかどうか。デフォルト値は no | toolbar | |
フォームにツールバーを表示するかどうか。デフォルト値は noです。 | top | |
作成されたフォームの上部座標。負の値は指定できません | status | |
フォームにステータス バーを表示するかどうか、デフォルト値 | ##width | |
作成されたフォームの幅は 100 未満にはできません | 特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格。 window.open函数新建立窗体后会返回新建窗体的window对象,通过此对象可以控制窗体(移动,改变大小,关闭)。 close函数: <input type="button" value="关闭已经打开的窗体!" onclick="window.close();" /> ログイン後にコピー self.close();配合上setTimeout()可以实现,打开的窗口定时关闭的效果。 对话框函数:
alert(); 不说。 confirm(str); confirm()消息对话框是排它的,也就是在用户点击对话框的按钮前,不能进行任何其它操作。 if(confirm("确定跳大?")) { alert("果断跳大"); }else{ alert("猥琐打钱"); } ログイン後にコピー 显示如下:
prompt(str1, str2); 函数有两个参数
var sResult=prompt("请在下面输入你的姓名", "撼地神牛");if(sResult!=null) { alert(sResult + "已经超越神的杀戮"); }else{ alert("无名氏已经超越神的杀戮"); } ログイン後にコピー 显示如下:
时间等待与间隔函数:
1、setTimeout()、clearTimeout() 在指定的时间后调用函数 语法:
setTimeout(function () { document.write("隔3秒后触发"); }, 3000) //在3秒后输出 setTimeout(fun1, 5000); //在5秒后输出 function fun1() { document.write("函数名的方式5秒后触发"); } ログイン後にコピー 2、setInterval()、clearInterval(value) 在间隔指定的事件后重复调用函数 语法:
var i = 0;var h = setInterval(function () { document.write("3秒输出一次<br/>"); i++; if (i >= 3) { clearInterval(h); document.write("停止输出"); } }, 3000); ログイン後にコピー 注意,javascript是单线程的,因此,这个定时函数实际上是通过插入执行队列的方式来实现。 如下面的代码: function fn() { setTimeout(function(){alert('can you see me?');},1000); while(true) {} } ログイン後にコピー alert();永远都不会执行,因为线程一直被死循环占用了。 window.location子对象 解析URL对象location location对象的属性有:href,protocal,host,hostname,port,pathname,search,hash document.write(location.href + "<br/>"); // http://localhost:4889/javascriptTest.html document.write(location.protocol + "<br/>"); // http: document.write(location.host + "<br/>"); // localhost:4889 document.write(location.hostname + "<br/>"); // localhost document.write(location.port + "<br/>"); // 4889 document.write(location.pathname + "<br/>"); // /javascriptTest.html document.write(location.search + "换行<br/>"); //http://localhost:4889/javascriptTest.html?id=1&name=张三 如果路径是这样,则输出 ?id=1&name=%E5%BC%A0%E4%B8%89 document.write(location.hash); //http: //localhost:4889/javascriptTest.html#kk=你好?id=1&name=张三 如果路径是这样,则输出 #kk=你好?id=1&name=张三 ログイン後にコピー 载入新文档 location.reload() 重新加载页面 location.replace() 本窗口载入新文档 location.assign() 本窗口载入新文档 location = "http://www.baidu.com" //跳转到指定网址 location = "search.html" //相对路径跳转 location = "#top" //跳转到页面顶部 浏览历史 History()对象的back()与forward() 与浏览器的“后退”,"前进"功能一样。 history.go(-2); 后退两个历史记录 浏览器和屏幕信息 navigator.appName Web浏览器全称 navigator.appVersion Web浏览器厂商和版本的详细字符串 navigator.userAgent 客户端绝大部分信息 navagator.platform 浏览器运行所在的操作系统 document.write(navigator.userAgent + "<br/>"); // Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 document.write(navigator.appName + "<br/>"); //Netscape document.write(navigator.appVersion + "<br/>"); //5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11 document.write(navigator.platform); //Win32 ログイン後にコピー 窗口的关系 parent == self 只有顶级窗口才返回true parent和top属性允许脚本引用它的窗体的祖先,通常窗体是通过 5、event事件对象 最有用的两个操作:阻止事件冒泡。有时return false;不管用,这个或许就管用了。 //IE: window.event.cancelBubble = true;//停止冒泡 window.event.returnValue = false;//阻止事件的默认行为 //Firefox: event.preventDefault();// 取消事件的默认行为 event.stopPropagation(); // 阻止事件的传播 ログイン後にコピー 【相关推荐:javascript学习教程】 以上がJavaScriptでウィンドウは何を意味しますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド
img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない
d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント
次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
関連トピック
詳細>
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
|