ホームページ >ウェブフロントエンド >jsチュートリアル >Dom 学習の概要と、examples_javascript スキルの使用方法の紹介

Dom 学習の概要と、examples_javascript スキルの使用方法の紹介

WBOY
WBOYオリジナル
2016-05-16 17:35:421236ブラウズ

1. 指定したアドレスに再度移動します: navigate("http://www.jb51.net");

2、

(1. *setInterval は指定されたコードを一定間隔で実行します。最初のパラメータはコードの文字列、2 番目のパラメータは間隔時間 (単位: ミリ秒)、戻り値はタイマーの識別子です。例:

setInterval("alert('hello')",5000);

*clearInterval は、setInterval のスケジュールされた実行をキャンセルします。これは、Timer の Enabled=False に相当します。 setInterval は複数のタイミングを設定できるため、clearInterval には、setInterval の戻り値であるクリアするタイマーの識別子を指定する必要があります。

var intervalld= setInterval("alert('hello')",5000);
clearInterval(intervalld);

(2. setTimeout もスケジュール実行ですが、setInterval のようなスケジュール実行ではありません。時間を設定してから一度だけ実行されます。clearTimeout もクリアタイミングです。
見分けるのは簡単です: 間隔はタイミング、タイムアウトはタイムアウトです。

var timeoutld=setTimeout("alert('hello')",2000);

(3. ケース: タイトル バーの回転ドアの効果を実現する、つまり、ブラウザのタイトル テキストが 500 ミリ秒ごとに右にスクロールする

コードをコピー コードは次のとおりです:
マーキー効果


/title & gt
& lt; スクリプト タイプ = "text/javascript" & gt; ;
関数 Scroll () {
var Title = document.tital (0); var last = title.substring(1, title.length); ;







3.

(1. onload: Web ページが読み込まれるときにトリガーされます。ブラウザはドキュメントをダウンロードし、同時に解析して実行します。JavaScript の実行時に特定の要素の操作が必要になる場合があります。この要素には、ロードされていない場合は、コードを本体の onload イベントに配置するか、要素自体がロードされるときに要素の onload イベントをトリガーすることができます。
(2. onunload: Web ページ。閉じた (または終了した) 後にトリガーされます。onbeforeunload: ウィンドウが終了したとき (前進、後退、終了など)、確認メッセージがポップアップ表示されます。 ) 例: ? ''>

4、

固有の属性に加えて、一般的な HTML 要素のイベントももちろんあります: onclick (クリック)、ondblclick (ダブルクリック)、onkeydown (キーが押された)、onkeyup (キーが放された)、onkeypress (ボタンをクリック) 、onmousedown (マウスが押された)、onmousemove (マウスが移動した)、onmouseout (マウスが要素範囲を離れる)、
onmouseover (マウスが要素範囲に移動する)、onmouseup (マウス ボタンが放される) など。

5. ウィンドウオブジェクトのプロパティ

(1. window.location.href="http://www.sina.com.cn"、新しいアドレスにリダイレクトします。navigate メソッドと同じ効果があります。window.location.reload() は、 page.
(2. window.event は、イベントが発生したときに情報を取得するために使用される非常に重要な属性です。イベントは window オブジェクトのイベントに限定されません。すべての要素のイベントは、event 属性を通じて関連情報を取得できます。
a. altKey 属性、ブート タイプは、イベントの発生時に Alt キーが押されたかどうかを示します。同様の属性には、ctrlKey とShiftKey があります。

コピー コード コードは次のとおりです。

Windows イベントの例







"
="クリック" onclick="if(window.event.ctrlKey){alert('Ctrl を押した')}else{alert('通常のクリック')}" /> : //www.baidu.com "クライト=" Alert ('アクセス禁止!'); Window.event.returnValue = false; px " >

;

gt;


b. clientX、clientY は、イベントが発生したときのクライアント領域 (ブラウザー ページ内) のマウスの座標です。screenX、screenY は、イベントが発生したときの画面上のマウスの座標です。イベント ソース (ボタン ボタン) の座標を基準としたマウスを基準にして発生します。
c、returnValue 属性、returnValue が false に設定されている場合、デフォルトのイベントの処理はキャンセルされます。
d、srcElement: イベント ソース オブジェクトを取得します。
e、KeyCode: 時刻が発生したときのキー値
f、button: 時刻が発生したときのマウス ボタン、1 は左ボタン、2 はマウスのボタンです。右ボタン、3は左ボタンの同時押しです。

6.clipboardData オブジェクト、ペーストボード上の操作。 clearData("Text") はペーストボードをクリアします。 getData("Text") はペーストボードの値を読み取り、戻り値はペーストボードの内容です。 setData("Text",val) はペーストボードの値を設定します。

(1. コピーする際、body の oncopy メソッドが起動されます。コピーを禁止するには、直接 false を返します。
( 2 、多くの要素には oncopy および onpaste イベント

もあります。

例 1: コピー禁止

例 3: テキスト ボックスへの貼り付けを無効にする

携帯電話番号を入力してください:

携帯電話番号をもう一度入力してください: :

例 4: コピー時に添付されるコンテンツ

ウェブサイト上の記事をコピーする場合、コピー作成者が記事の出典を追加しないことを防ぐために、コピーされたコンテンツの後に著作権ステートメントが自動的に追加されます。

関数modifyClipboard(){

ClipboardData.setData('Text',clipboardData.getData('Text') 'この記事はブログ パーク テクノロジー ゾーンからのものです。転載する場合は出典を明記してください。' location.href);

}

oncopy="setTimeout ('modifyClipboard()',100)"。


ユーザーは、コピー アクションが発生してから 0.1 秒後にペーストボードのコンテンツを変更します。 100ms は一般的な値であり、1000、10、50、20... と書き込むことができます。 oncopy ではペーストボード上で操作を直接実行することはできないため、0.1 秒後に実行されるようにタイマーを設定して、oncopy 実行コール スタックから削除します。

7. ページ送りとページ戻し: 履歴操作履歴

window.history.back() は後戻りし、window.history.forward() は前進します。 window.history.go(-1) を使用して前方に移動し、window.history.go(1) を使用して後方に移動することもできます。

例 1:

これは 2 ページです戻る


8. Document 属性 (最も複雑な属性) document は window オブジェクトの属性です。window オブジェクトのメンバーを使用するとウィンドウが省略できるため、通常は document を直接記述します。

(1. Write: コンテンツをドキュメントに書き込みます。writeln は write と似ていますが、最後に復帰が追加される点が異なります。(2.

(3. onclick やその他のイベントで書かれたコードはページのコンテンツをフラッシュし、ページの読み込み時に、書き込みは元のコンテンツと統合されます

(4.

ケース 1:


コードをコピー コードは次のとおりです:

getElementById



getElementById






< input type="text " id="textbox2" />






ケース 2:



コードをコピー
コードは次のとおりです:

getElementByName



getElementByName の例< / title> C# の foreach とは異なり、for (var r in radios) は各要素を走査しませんが、key<BR> for (var r in radios) {<BR>alert(r.value);< : 🎜> } を走査します。 <BR> }<BR> function btnClick2() {<BR> var inputs = document.getElementsByTagName("input");<BR> for (var i = 0; i <inputs.length; i ) {<BR> var input = inputs(i);<BR> lt ;body><BR> <input type="radio" name="gender" value="男性" />男性<BR> <input type="radio " name="gender" value="女性" / >女性<br> <input type="radio" name="gender" value="機密" />機密<br> <input type="button " value="click" onclick="btnClick() " /><br> " <br /><br> " <input type="text" />gt;<br><br> " <input type="text" /><br /><br> <input type="text" />gt;<br /><br> <input type="text" / ><br /><br> <input type ="text" /><br /><br> <input type="button" value="bytagname" onclick="btnClick2() " /><br> </body><br> </html><br><br><br>ケース 3: <br><br><br><br><br>コードをコピー<br><br><br> コードは次のとおりです:<br><div class="codebody" id="code77712"> <br>getElementByTagName <br> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <title>getElementByTagName









案例 4:
代码如下:

読み取りプロトコル待機タイマー


var leftTime = 10;
var TimeID;
functionscroll() {//alert(222);
var btn = document.getElementById("btnAgree");
//場合Web ページが非常に遅い。時間が設定されている可能性があります。サーバーの実行中にコントロールが読み込まれていません。
btn.disabled = "";
value = "契約書を読んで同意してください (残り時間は " leftTime " 秒です)";
leftTime--;
gt;

body>






ケース 5:




コードをコピー


コードは次のとおりです:

美容時計



daomul へようこそ ようこそ私のブログに感謝します






< ;/html>


16. フォーム form: Form オブジェクトはフォームの Dom オブジェクトです。

メソッド: submit() はフォームを送信しますが、onsubmit イベントはトリガーしません。 自動投稿を実装します。つまり、カーソルが送信ボタンを離れた後にのみ送信されるのではなく、フォーカスがコントロールを離れた直後にページが送信されます。onblur イベントがトリガーされ、フォームの submit メソッドが呼び出されます。オンブラー。送信をクリックすると、フォームの onsubmit イベントがトリガーされ、データに問題がある場合は false を返して送信をキャンセルできます。

ケース 1:




コードをコピー

コードは次のとおりです:

フォーム


フォーム

daomul のブログへようこそ、またようこそ、ありがとうございます (フォーム送信 4)






< label for="p1">シャワーを浴びる














案例 4:权制限选择
复制代码代码如下:

Permission selection



Welcome to daomul Blog, welcome back, thank you (permission selection)