次のようにコードコードをコピーします。
<img src = "1_nder1000.jpg" id = "img2" onclick = "alert( 'onclick');
<script type = "text/javascript">
var img2 = document.getElementById( "IMG2");
アラート(img2.onmouseover);
//次の写真を出力します
</script>
IE出力:
Firefox:
次のようにコードコードをコピーします。
<img src = "1_nder1000.jpg" id = "img1" />
<script type = "text/javascript">
var img1 = document.getElementById( "IMG1");
img1.onmouseover =回転;
function rotate(){){
this.src = '1_yylklshmyt20090217.jpg';
}
var img1 = document.getElementById( "IMG1");
img1.onmouseover = onmouseover;
function onmouseover(event){
this.src = '1_yylklshmyt20090217.jpg';
}
//実際、document.getElementByID( "IMG1");
/* var img1 = {src: "1_nder1000.jpg" ,,
ID:「IMG1」、
alt: "" ,,
タイトル:「反転画像」
}*/
</script>
次のようにコードコードをコピーします。
<%@ページ言語= "c#" autoeeventwireup = "true" codebehind = "webform1.aspx.cs" ensulits = "webapplication1.webform1"%>
<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<Title>非タイトルページ</title>
<script type = "text/javascript">
//サイクルIMG画像のすべての属性、定義されていない多くの非特異的属性が表示されます
window.onload = repeat;
関数repeat(){){)
var img1 = document.getElementById( 'img1');
for(img1のvar i){
アラート(i+":"+img1 [i]);
}
}
</script>
</head>
<body>
<fund id = "form1" runat = "server">
<div>
<img src = "1_nder1000.jpg" id = "img1" />
</div>
</form>
</body>
</html>
スクリプトラベルとアクセスHTMLページ
スクリプトタグ
スクリプトタグは、いくつかの明白なスクリプトに埋め込まれたHTMLページで使用されます
<スクリプト>
//いくつかのスクリプトはここにあります
</script>スクリプトラベルには3つの特別な属性があります(もちろん、ID、クラスなどの属性もあり、HTMLページのほぼすべての要素にはクラス、ID属性を持つことができます))
<スクリプト言語= "javascript"> //言語属性は、ラベルで使用される言語を示します
// 3つの共通値javascript、jscript、vbscriptがあります
//いくつかのスクリプトはここにあります
</script>
// JScriptについてはIEのみを認識でき、他のブラウザはこのラベルの内容を無視します
// vbscriptの場合、Windows上のIEのみが認識され、実行されます
//ただし、言語属性は後にXHTMLの型属性に置き換えられました
<script type = "text/javascript"> //
//いくつかのスクリプトはここにあります
</script> javascriptには、JavascriptにYavascriptのみを使用します。 JavaScript
<スクリプト>
アラート( "Hello!");
</script>
//上記のコードはJavaScriptでJavaScriptで実行される方法で実行されます
// IEがある場合でも、宣言のないスクリプトブロックはvbscriptではなくJavaScriptとして実行されます
<スクリプト>
msgbox「こんにちは!」
</script>
// ie将来的には詳細に説明します。心配しないでください。HTMLページの特定の要素が特定の要素にあるときに実行されるJavaScriptコードを指定するために使用されます(もちろん、他のクライアントスクリプトでもあります。 ))
<img src = "../ images/stack_heap.jpg" onclick = "alert( 'you hurt me!"/>コードは、マウスクリックをクリックするとHTMLページに画像を表示します。 「You Hurt Me!」を示すポップアップウィンドウがあります。
オンクリック、マウスがクリックされたときに1回実行します
オンマウスオーバー、マウスが設定されているときに1回実行します
マウスアウトをオンにして、マウスが移動したときに1回実行します
OnmouseTown、マウスが押されたときに1回実行します
onmouseup、マウスが解放されたときに1回実行する(バウンス)
onMousedblclick、マウスがダブルクリックしたときに1回実行します
オンライン、オブジェクトがロードされたときに1回実行します
以前にインターネットで人気があることの効果は、実際にはlollverimagesの効果です
<img src = "../ images/ stack_heap.jpg"
onmouseover = "this.src = '../images/over.jpg'"
onmouseout = "this.src = '../ images/out.jpg'"/>あなたが知っているかもしれませんが、オンマウスオーバーなどの属性の文字列はインシデントの時点でスクリプトとして実行されますが、上記のコードは上記のコード
//表示しやすくするために、以下にそれらを抽出します
this.src = '../images/over.jpg'
this.src = '../images/out.jpg'上記のコードを分析しますこのオブジェクトは、常に存在するオブジェクトです(これはキーワードです)。以下のIMGタグの場合、次のオブジェクトに解析されます。
<img src = "../ images/stack_heap.jpg" onclick = "alert( 'hello!)"/>
//実際には、これは手動で宣言することはできません
これ= {
src: "../ images/ stack_heap.jpg" ,,
Alt:「メモリスタック」、
OnClick:「Alert( 'Hello!')」、
Tagname:「IMG」
};
//これらの属性だけでなく、IMGタグはオブジェクトとして解析され、src、alt、src、alt属性などの属性がHTMLで記述され、tagnameはシステムによって自動的に生成されますラベル名をテストに使用できます。
<img src = "../ images/stack_heap.jpg" onclick = "alert(this.src); alert(this.tagname);"/> natureも、その値を変更することができます。画像の画像効果が成功しました
そのようなラインイベントバインディングにはある程度の注意があります。
<head>
<スクリプト>
functionmyfn(){
アラート(「画像がロードされている!」);
}
</script>
</head>
// ................いくつかのコードの後
<img src = "../ images/stack_heap.jpg" online = "myfn()" ///画像が正常にロードされたとき
上記のコードの実行は大丈夫ですが、注文は反転しています(スクリプトはあらゆる法的場所に配置できます)
<img src = "../ images/stack_heap.jpg" online = "myfn()" ///画像が正常にロードされたとき
// ................いくつかのコードの後
<スクリプト>
functionmyfn(){
アラート(「画像がロードされている!」);
}
</script> HTMLページは、画像が正常にロードされると、順にロードされます(カスタム関数)。 ;これがスクリプトラベルが頭の部分に置かれる理由です。なぜなら、体の要素がロードされると、頭のスクリプトが間違いなくロードされるからです。
しかし、XHTMLがあり、「3層の分離」があり、W3CはDOM2を起動しました。別の方法でイベントをバインドする必要があります。
<head>
<スクリプト>
var img = document.getElementById( "myimg");
//document.getElementByIDメソッドには、パラメーター、文字列IDがあります
// IMGとは、その画像ラベルオブジェクトを意味します
img.onclight = myfn;
/*文字列文字値を使用してJavaScriptコードをOnClickプロパティに提供しませんか
関数名を与えるために直接割り当てられます
また、なぜimg.onclick = myfn();
これはJavaScriptコード領域にあるからです
この関数を示すために「()」を追加し、この関数の返品値をimg.onclick*/に与える
functionmyfn(){
アラート(「画像がロードされている!」);
}
</script>
</head>
// .......
<img src = "../ images/stack_heap.jpg" id = "myimg"/>
// OnClick属性を追加しなくなりましたが、IDを指定します
ただし、HTMLが上から下にロードされると、上記のコードが下にロードされているため、JavaScriptは閲覧時に自動的に実行されますまだロードされているため、document.getElementByIDフォームIDが必要であり、ページにIDがない場合は、次の行(空のオブジェクト)を返します空のオブジェクトでは、解決策については、従来のイベントをHTML要素の背後に置いています。
<img src = "../ images/stack_heap.jpg" id = "myimg"/>
// ....................いくつかのコードの後
<スクリプト>
var img = document.getElementById( "myimg");
//この時点で、スクリプトラベルの位置はIMGタグに配置されるため、IMGタグはスクリプトにロードするときに間違いなくロードされます
img.onclight = myfn;
functionmyfn(){
アラート(「画像がロードされている!」);
}
</script>しかし、スクリプトをヘッド部分に置くために標準がまだ推奨されます
window.onload = initall;
//ウィンドウは、ウィンドウが開く限り、常に存在します。
関数initial(){
var img = document.getElementById( "myimg");
img.onclight = myfn;
functionmyfn(){
アラート(「画像がロードされている!」);
}
}したがって、コードは間違っていません。
HTMLページにアクセスしてください:HTML DOM
HTML DOMは、ドキュメントオブジェクトのラベルにアクセスする必要があります。
<p id = "p1"> Pタグを使用してデモを行います</p>次のオブジェクトに変換されます
//オブジェクトの文字通りの数量文法を常に覚えていますか?
{{
tagname: "p"、
クラス名:「デモ」、
タイトル:「最初の段落:Dom Tree」、
ID:「P1」、
innerhtml:「Pラベルを使用してデモを行います」
}
//奇妙なことかもしれません。ラベルのクラス属性がクラスの代わりにオブジェクトのクラス名属性になる理由です。
//クラスはJavaScriptの予約単語です!!!
// tagnameはそのラベル名を表し、innerhtmlはHTMLコードがHTMLラベルをそのようなオブジェクトに変換することを意味し、JavaScriptのタグ内の属性またはコンテンツははるかに単純ですが、問題は方法です。このオブジェクトにアクセスしてください!!
//最初にラベルにIDを追加してから、document.getElementByIDメソッドを使用してアクセスします
window.onload = initall;
関数initial(){
var p = document.getElementById( "p1");
アラート(p.classname);
アラート(p.tagname);
アラート(p.tital);
アラート(p.id);
アラート(p.innerhtml);
} HTMLページへのアクセスは非常に簡単です。
window.onload = initall;
関数initial(){
var p = document.getElementById( "p1");
p.title = "javascript";
p.classname = "load"; //そのスタイルを変更できます
}これらを使用して、私たちはすでに何かエキサイティングなことをすることができます!
//いくつかのCSS
.oder {
色:赤;
背景:青;
フォントサイズ:大きい;
}
。外 {
色:黒;
背景:白。
フォントサイズ:小さい;
}
。クリック {{
色:黄色;
背景:黄色。
フォントサイズ:12px;
}
// HTMLコード
<p id = "p1">大量のテキスト、それらはすべて通常のテキストです!
// JavaScriptコード
window.onload = initall;
関数initial(){
var p = document.getElementById( "p1");
P.ONCLICK = Clickfn;
p.onmouseover = overfn;
p.onmouseout = outfn;
}
関数clickfn(){
this.classname = "Click"; //これも利用できます
//クラスではなくクラス名であることに注意してください
}
function overfn(){
this.classname = "over";
}
function outfn(){
this.classname = "out";
}もちろん、このメソッドだけでなく、ページの要素を取得することもできますID名の名前は唯一のものであり、ラベル名のほとんどは同じであるため、getElementsByTagnameメソッドには1つのパラメーターのみがあります。つまり、文字列の形式のtagnameで、返品値はHTMLのリストです。配列に似た要素。
window.onload = initall;
関数initial(){
var plist = document.getElementsByTagname( "P");
//なぜあなたは都市Pを使用する必要がありますか?
アラート(plist.length); //配列に似ています。
アラート(plist [0] .innerhtml); //これを使用して最初のp要素にアクセスします
}さらに、document.getElementsByTagnameメソッドの場合、CSSの通過文字と同様に、ページのすべての要素を取得するパラメーターとして「*」番号を渡すこともできます。
window.onload = initall;
関数initial(){
var allthings = document.body.getElementsByTagname( "*");
// getelementsbytagnameメソッドを任意のDOM要素で呼び出すことができます。
Alert(allthings.length);ページにはいくつのラベルがありますか、どれだけ報告されていますか(doctypeを含む)
アラート(Allthings [3] .innerhtml); //これを使用して4番目の要素にアクセスします
} other-javascript:擬似プロトコル
擬似プロトコルは、http://、https://、ftp://など、インターネット上の実際の存在とは異なりますが、関連するアプリケーションを使用します。 :
「JavaScript:Alert( 'js!');」を入力できます。結果値は現在のページに返されます
同様に、AタグのHREF属性でJavaScript Pseudoプロトコルを使用できます
<a href = "javascript:alert( 'js!');"> </a>
//この側のリンクをクリックします。代わりに、ポップアップウィンドウが表示されます。
<a href = "javascript:window.prompt( '入力コンテンツは現在のページを置き換えます!'、 '');"> a </a>ソリューションは非常に単純です
<a href = "javascript:window.prompt( '入力コンテンツは現在のページを置き換えます!'、 ''); undefined;"> a </a>
//端に未定義を追加しますが、JavaScript Pseudo Protocolは特定の柔軟性を提供しますが、JavaScriptをデバッグするために使用しないようにしてください。