Dom 学習の概要と、examples_javascript スキルの使用方法の紹介-jsチュートリアル-php.cn

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

コードをコピー

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

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)

" ")" 値 = "ボタン" /& gt;
& lt; 入力タイプ = "ボタン" onClick = "Document.GetelementByid ('BTN1') > < 自動ポストバック。 .net (テキストボックスの入力後に移動される onblur メソッドの submit 呼び出しも同様です)-->
>
tion>
/option>

*JavaScript で正規表現クラスを作成するメソッド:
var regex = new RegExp("\d{5}") または var regex = /d{5}/
/ Expression/ is JavaScript 構文
で提供される正規表現は、正規表現の記述を簡略化するために特別に提供されており、// で記述される正規表現はエスケープ文字を気にする必要がありません。
*RegExp オブジェクトのメソッド:
** test(str) 文字列 str が正規表現に一致するかどうかを判断します。IsMatch
var regex = /. .test("a@b.com"));
alert(regex.test("ab.com"));
** exec(str) は検索と一致を実行します。一致する結果 (*)

** コンパイル実行速度を向上させるために式をコンパイルします。 ( * )
*String オブジェクトは、正規表現に関連するいくつかのメソッドを提供します。これらのメソッドは、呼び出しを簡素化するために RegExp クラスをラップするのと同等です: match(regexp)。これは、exec

の呼び出しと同等です。
var s = "aaa@163.com";
var regex = /(. )@(. )/;
var match = s.match(regex); $1 "、サーバー: " RegExp.$2);
ケース 1:

コードをコピー

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

正規表現

var regex = /(.)@(.) /;
アラート (正規表現 $ 1);アラート(RegExp.$2); ; /html>

18. ブラウザごとの違い

19. キーボードコード操作と金融ボックスのケース:

ケース 1:

金融関連システムの金額を含むテキストボックスには次の要件があります:

*金額テキストボックスを入力し、中国語以外の入力方法を使用しないでください。テキストボックスにフォーカスがある場合、テキストボックスは左揃えになります。テキストボックスは右揃えで表示され、入力メソッドを無効にします: style=" ime-mode:disabled"

* 不正な値を入力することは禁止されています。これらの値のみを入力できます (k == 9) || (k == 13) ||

(k==46)||(k==8) ||( k==189)||(k==109)||(k==190)||(k==110)|| (k>=48 &&

k<=57)|| (k> =96 && k<=105)||(k>=37 && k<=40) 。 onkeydown="return

numonKeyDown()" イベント応答関数とイベント応答関数によって呼び出される関数を区別するために onkeydown="numonKeyDown()" と記述しないでください。

* 貼り付けを無効にする (優れたテスター)、を使用してペーストボード内の値を取得し、各文字を走査してそれが正当な値であるかどうかを確認します。ただし、貼り付けは、すべてが正当な値である場合にのみ許可されます。不正な値があります貼り付けは禁止されています。 charAt、charCodeAt 千の位を追加するメソッド

* フォーカスがオンの場合は 1000 分の 1 なしで左揃え、フォーカスがオンになっていない場合は右揃え: this.style.textAlign='right'

コードをコピー

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

財務テキストボックスの設定

var k = window.event .keyCode;
return isValidNum(k);
}
//かどうかを判断しますk は有効です Ascii
function isValidNum(k) {
return ((k == 9) || (k == 13) || (k == 46) || (k == 8) || (k == 189) || (k == 110) || (k >= 48) ;= 96 && k }
//1000 分の 1 を追加します
関数 commafi(n) {
(d{3}) $)/g;
//var n1 = n.replace(/^(d )/((.d )?)$/,function(s,s1,s2){return s1 .replace(re,"$,") s2;});
re = /(d{1,3})(?=(d{3}) (?:$|D))/g;
n1 = n.replace(re, "$1,") var text = window.clipboardData.getData("Text");
for (var i = 0; i var asc = text.charCodeAt(i); //charAt→"3", charCodeAt() は ASCII コードを取得します
if (!isValidNum(asc)) { //不正な値が見つかった場合、コンテンツは貼り付けは不正であるとみなされます return false
return false;
}
9;}">
数字以外は入力できません:

入力メソッドを無効にする:

数字以外を入力して貼り付けることはできません:

1000 分の 1 の追加と削除:
onblur="this.value=commafy(this.value);this.style.textAlign= 'right';"
onfocus="this.style.textAlign='left'; this.value=this.value.replace(/,/g,'')" />

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

都道府県と都市の選択

daomul のブログへようこそ、またようこそ、ありがとうございます (県と市の選択)