[セットトップ]JavaWeb初級学習のJQuery
1、JQuery要素のフィルタeq()
:eqセレクタと同様に、指定したインデックスを取得する要素です.
first()
:firstセレクタと同様に、最初の要素を取得します.
last()
:lastセレクタと同様に、最後の要素を取得します.
hasClass(class)現在の要素に特定のクラスが含まれているかどうかを確認し、ある場合はtrueを返します.これが実はis("."+class).
filter(exp)
指定したセレクタに一致する要素を選択
is()
要素がisのセレクタに合致するかどうかを判断します.一致が1つあればtrueを返します
has(exp)
指定したセレクタに一致する要素を保持
not(exp)
:notセレクタと同様に、セレクタに一致する要素を削除します.
children(exp)
jqueryオブジェクトの各要素の子要素を取得します(expは選択セレクタに一致する要素をフィルタで残します)
find()
指定したセレクタに一致するすべての子孫要素を検索
next()
jqueryオブジェクトの各要素の同世代要素の接続された次の要素を取得します.
nextAll()
現在のエレメントのすべての後の世代エレメントを検索
nextUntil()は、一致するエレメントに出会うまで、現在のエレメントの後にあるすべての世代エレメントを検索します.
parent()
すべての要素を含む一意の親を検索
prev(exp)
jqueryオブジェクトの各要素の前の接続の同世代要素を検索
prevAll()
jqueryオブジェクトの各要素の前のすべての同世代要素を検索
prevUnit(exp)
Jqueryオブジェクトの各要素の前の要素をexpセレクタ要素まで検索
siblings(exp)
JQueryオブジェクトの各要素の同世代要素を検索し、指定したセレクタに一致させる
add()
JQueryオブジェクトとaddセレクタのjqueryオブジェクトをマージ
addSelf()
最初のJQueryオブジェクトを後のクエリ結果に追加することです
end()
最後のクエリー操作をキャンセルします.
JQueryの特徴:暗黙反復
$(“ul li”).css(“background-color”,”red”);
チェーン操作
$(“span”).add(“div”).add(“#one”);
2、JQueryの属性操作
JQueryプロパティ操作
html()はinnerHTMLに相当し、開始ラベルと終了ラベルの内容を設定して取得できます.
text()はinnerTextがラベルのテキスト内容を設定して取得できることに相当する
val()
要素の現在の値を取得するか、要素の値を設定します.チェックボックスを設定するか、ドロップダウンリストを選択すると、必ず配列が使用されます.
attr()
属性の値の設定、取得
prop()
属性の値を設定、取得します(チェック、ラジオ、ドロップダウンリストで選択したoptionが選択された状態を取得することを推奨します).
3、JQuery練習
1).インタリーブ変色
2).すべてを選ぶ
4、Domの追加削除内部挿入:
append()a.append(b)は、bをaに追加する要素内でjavascriptのappendChildと類似している
appendTo()a.appendTo(b)b要素にaを追加
prepend()a.prepend(b)は、a要素にbを追加する開始位置である
prependTo()a.prependTo(b)は、aがb要素に追加される開始位置である
外部挿入:
after()
a.after(b)はaの後ろにb要素を挿入する
before()
a.before(b)はb元素をaの前に加える
insertAfter()a.inertAfter(b)b要素をb要素の後ろに挿入する
insertBefore()
a.insertBefore(b)a元素をb元素の前に挿入する
小包:
wrap()
a.wrap(b)は、aの各要素をbで包む
unwrap()
a.unwrap()はaの親要素を取り除く
wrapAll()
a.wrapAll(b)は、得られたaの元素を同じb元素で包む
wrapInner()
a.wrapInner(b)は、a要素のすべてのサブ要素またはテキスト内容をbで包む
置換:
replaceWith()
a.replaceWith(b)aをbで置き換える
replaceAll()
a.replaceAll(b)はすべてのbをaで置き換える
削除:
remove()
a.remove()は、aがhtmlドキュメントから自分を削除する
empty()a.empty()は、a要素の内容をクリアします.
Dom操作の練習コード:
5、JQuery練習二
1).JQueryフォームセレクタ練習
2).左から右へ、右から左へ練習
3).表レコードの動的追加、削除
6、CSSスタイル操作.
addClass()はすべての一致する要素にclassを追加し、複数のclass値をスペースで区切るremoveClass()はすべての一致する要素にclassを削除し、複数のclass値をスペースで区切るtoggleClass()指定したclassが存在する場合は指定したclassを削除し、存在しない場合はhasClass()を追加して一致する要素が存在するかどうかを判断し、指定したclassが存在するかどうかを判断します.存在する場合はtrueを返します.そうでない場合はfalse css()を返します.指定したcssスタイル値height()を取得または設定できます.要素の高さ(PX単位)width()を取得または設定できます.要素の幅(PX単位)offset()を取得または設定できます.要素の位置(topおよびleftの値)を取得または設定できます.
7、JQueryアニメーション
Jqueryのアニメーション関数は、時間と関数の実行後のコールバック関数を渡すことができます.
基本アニメーション(要素の幅と高さを変更)
show()は、非表示の要素が表示され、この表示の時間を設定するために時間を渡すことができる.2つのパラメータを渡すこともできる.1つの時間、もう1つはアニメーションの実行後に実行する方法です.
hide()表示要素を非表示にすることができ、2つのパラメータを渡すことができ、最初のパラメータはアニメーションの実行時間である.2番目のパラメータは、アニメーションの実行後に呼び出されるコールバック関数です.
toggle()
エレメントの可視性を切り替えることができます.エレメントの表示が非表示に設定されている場合、エレメントが非表示に設定されている場合、表示に設定されている場合
スライドアニメーション(要素のデバッグを修正する)
slideDown()は要素の高さを増やし、要素を表示させてslideUp()は要素の高さを減らし、要素を非表示にしてslideToggle()は高さの変化によってすべての一致する要素の可視性を切り替え、切り替えが完了した後にオプションでコールバック関数をトリガーします.
フェードインフェードアウトアニメーション(要素の透明度を変更)
fadeIn()要素の透明度を変更することによって要素fadeOut()を徐々に表示する要素fadeTo()要素の透明度を変更することによって要素fadeTo()を徐々に非表示にする要素の透明度を所定の時間に従って指定された透明度fadeToggle()に変更する要素の透明度を変更することによって要素をフェードまたはフェードアウトする
練習06、CSS_アニメーションブランド展示
需要:1.ボタンをクリックすると、カシオの後のブランドを隠して表示します.2.すべてのコンテンツが表示されると、ボタンテキストが「コンパクトブランドを表示」になり、小三角形が上向きになります.すべてのブランド製品はデフォルトの色です.3.コンパクトブランドのみを表示する場合、カシオ以降のブランドを非表示にするには、ボタンテキストが「すべてのブランドを表示」になり、小さな3形下に下がります.キヤノン、ニコンのブランド色を赤に変更(liラベルにpromotedスタイルを追加すればいい)
8、Queryイベント操作
$(function(){}); とwindow.onload=function(){}の違いは?
これらはすべてページがロードされた後です!
その全書は
documentはdomオブジェクトを管理します.htmlドキュメント全体を表します
ドキュメント(domオブジェクト)の準備ができたら
では、documentオブジェクトの準備ができたら?
1.すべてのhtmlタグがブラウザにロードされ、
2.すべてのDomオブジェクトが作成された後.
3.Documentオブジェクトはすべてのdomオブジェクトを管理するために使用されるからです.
4.だから$(document).ready(function(){}); この方法の意味は、
5.ブラウザがhtmlページのロードを完了し、すべてのDomオブジェクトを生成した後です.
そしてwindowonloadメソッドは、ページがロードされた後だけではありません.また、ページ内のすべての要素データが得られた後です.
彼らはそれぞれいつトリガーされますか? $(document).ready()この方法は、ページ内のすべてのラベルオブジェクト(domオブジェクト)が作成された後に実行される. window.onloadイベントは、ページ内のすべての要素がロードされた後に実行されます.
彼らがトリガーする順序は?
先に$(document)を実行する.ready()メソッド、すなわち$(function(){});
後でwindowを実行します.onloadイベント
事件の泡
事件の泡とは何ですか.イベントのバブルとは、親子要素が同じイベントを同時に監視することです.サブエレメントのイベントに触れると、同じイベントも親エレメントのイベントに渡されて応答します.では、どうやって事件の泡を止めるのでしょうか.イベント関数内でreturn false;イベントのバブル伝達を阻止することができます.
イベントオブジェクト
イベントオブジェクトは、トリガされたイベント情報をカプセル化したjavascriptオブジェクトです.私たちが重点的に関心を持っているのは、このjavascriptのイベントオブジェクトをどのように手に入れるかです.および使用します.Javascriptイベントオブジェクトをどのように取得しますか?バインドされたイベント関数のパラメータリストにパラメータを追加するだけです.パラメータの名前はeventに慣れています.例:
☆練習07イベント画像フォロー
:eqセレクタと同様に、指定したインデックスを取得する要素です.
first()
:firstセレクタと同様に、最初の要素を取得します.
last()
:lastセレクタと同様に、最後の要素を取得します.
hasClass(class)現在の要素に特定のクラスが含まれているかどうかを確認し、ある場合はtrueを返します.これが実はis("."+class).
filter(exp)
指定したセレクタに一致する要素を選択
is()
要素がisのセレクタに合致するかどうかを判断します.一致が1つあればtrueを返します
has(exp)
指定したセレクタに一致する要素を保持
not(exp)
:notセレクタと同様に、セレクタに一致する要素を削除します.
children(exp)
jqueryオブジェクトの各要素の子要素を取得します(expは選択セレクタに一致する要素をフィルタで残します)
find()
指定したセレクタに一致するすべての子孫要素を検索
next()
jqueryオブジェクトの各要素の同世代要素の接続された次の要素を取得します.
nextAll()
現在のエレメントのすべての後の世代エレメントを検索
nextUntil()は、一致するエレメントに出会うまで、現在のエレメントの後にあるすべての世代エレメントを検索します.
parent()
すべての要素を含む一意の親を検索
prev(exp)
jqueryオブジェクトの各要素の前の接続の同世代要素を検索
prevAll()
jqueryオブジェクトの各要素の前のすべての同世代要素を検索
prevUnit(exp)
Jqueryオブジェクトの各要素の前の要素をexpセレクタ要素まで検索
siblings(exp)
JQueryオブジェクトの各要素の同世代要素を検索し、指定したセレクタに一致させる
add()
JQueryオブジェクトとaddセレクタのjqueryオブジェクトをマージ
addSelf()
最初のJQueryオブジェクトを後のクエリ結果に追加することです
end()
最後のクエリー操作をキャンセルします.
JQueryの特徴:暗黙反復
$(“ul li”).css(“background-color”,”red”);
チェーン操作
$(“span”).add(“div”).add(“#one”);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM </title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() 3 div
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first() div
$("#btn2").click(function(){
$("div").first().css("background-color","#bfa");
});
//(3)last() div
$("#btn3").click(function(){
//last()
$("div").last().css("background-color","#bfa");
});
//(4)filter() div
$("#btn4").click(function(){
//filter()
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is() #one :empty :parent
//is jq
$("#btn5").click(function(){
// alert( $("#one").is(":empty"));//.css("background-color","#bfa");
alert( $("#one").is(":parent") );
});
//(6)has() div .mini
$("#btn6").click(function(){
//has(selector) selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not() div class one
$("#btn7").click(function(){
//not(selector) selector
$("div").not(".one").css("background-color","#bfa");
});
//(8)children() body class one div
$("#btn8").click(function(){
//children()
$("body").children("div.one").css("background-color","#bfa");
});
// children
// find （ ）
//(9)find() body class mini div
$("#btn9").click(function(){
//find()
$("body").find(".mini").css("background-color","#bfa");
});
//(10)next() #one div
$("#btn10").click(function(){
//next()
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one span
$("#btn11").click(function(){
//nextAll()
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one span
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span div
$("#btn15").click(function(){
//prevAll()
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span #one
$("#btn16").click(function(){
//prevUntil(exp) exp
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two
$("#btn17").click(function(){
//siblings() ，
$("#two").siblings().css("background-color","#bfa")
});
//(18)add() span id two
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").add(".mini")
.add("#one").css("background-color","#bfa");
});
//19.andSelf() #two .mini ，
$("#btn19").click(function(){
//andSelf()
$("#two").find(".mini").andSelf().css("background-color","#bfa");
});
//20.end() #two .mini ， #two "
$("#btn20").click(function(){
//end()
$("#two").find(".mini").first().end().end().css("background-color","#bfa");
}); /**/
});
</script>
</head>
<body>
<input type="button" value="eq() 3 div " id="btn1" />
<input type="button" value="first() div " id="btn2" />
<input type="button" value="last() div " id="btn3" />
<input type="button" value="filter() div " id="btn4" />
<input type="button" value="is() #one :empty :parent" id="btn5" />
<input type="button" value="has() div .mini " id="btn6" />
<input type="button" value="not() div class one " id="btn7" />
<input type="button" value="children() body class one div " id="btn8" />
<input type="button" value="find() body class mini div " id="btn9" />
<input type="button" value="next()#one div" id="btn10" />
<input type="button" value="nextAll()#one span " id="btn11" />
<input type="button" value="nextUntil()#one span " id="btn12" />
<input type="button" value="parent().mini " id="btn13" />
<input type="button" value="prev()#two div" id="btn14" />
<input type="button" value="prevAll()span div" id="btn15" />
<input type="button" value="prevUntil()span #one " id="btn16" />
<input type="button" value="siblings()#two " id="btn17" />
<input type="button" value="add() span id two " id="btn18" />
<input type="button" value="andSelf()， #two .mini ， " id="btn19" />
<input type="button" value="end()， #two .mini ， #two " id="btn20" />
<h3> .</h3>
<br /><br />
<input type="text" name="account" disabled="disabled" />
<br><br>
<div class="one" id="one">
id one,class one div
<div class="mini">class mini</div>
</div>
<div class="one" id="two" title="test">
id two,class one,title test div
<div class="mini" title="other"><b>class mini,title other</b></div>
<div class="mini" title="test">class mini,title test</div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini"></div>
</div>
<div class="one">
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini">class mini</div>
<div class="mini" title="tesst">class mini,title tesst</div>
</div>
<div style="display:none;" class="none">style display "none" div</div>
<div class="hide">class "hide" div</div>
<span id="span1">^^span 111^^</span>
<div>
input type "hidden" div<input type="hidden" size="8">
</div>
<span id="span2">^^span 222^^</span>
<div id="mover"> div .</div>
</body>
</html>2、JQueryの属性操作
JQueryプロパティ操作
html()はinnerHTMLに相当し、開始ラベルと終了ラベルの内容を設定して取得できます.
text()はinnerTextがラベルのテキスト内容を設定して取得できることに相当する
val()
要素の現在の値を取得するか、要素の値を設定します.チェックボックスを設定するか、ドロップダウンリストを選択すると、必ず配列が使用されます.
attr()
属性の値の設定、取得
prop()
属性の値を設定、取得します(チェック、ラジオ、ドロップダウンリストで選択したoptionが選択された状態を取得することを推奨します).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// input ， name a
// alert( $("input[name='a']").size() );
//
// alert( $("input[name='a']").val() );
//
// $("input[name='a']").val(" ");
// alert( $(":checkbox").size() );
//
// $(":checkbox").val([' ',' ']);
//
// $(":checkbox:first").attr("checked","checked");
// $(":checkbox:first").prop("checked",true);
// checked
// alert( $(":checkbox:first").attr("checked") ); // undefined
// alert( $(":checkbox:first").prop("checked") ); // false
// prop attr 。 ， ， ， prop
// div
// alert( $("div").html() );
// div
// alert( $("div").text() );
// div
// $("div").html("<p>111</p>");
// 。 html ，
$("div").text("<p>111</p>");
})
})
</script>
</head>
<body>
<div><span>div span </span></div>
<button id="btn1"> name </button>
<form action="#" id="form1">
:<input name="a" value="abc" type="text"/><br/>
:<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
</form>
</body>
</html>3、JQuery練習
1).インタリーブ変色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. p ,
/*
jquery ，.click（function(){}）
// function this , this dom
*/
$("p").click(function(){
//
alert(" ：" + this.innerHTML + "， ");
});
//2. table
$("table:eq(1) tr:even").css("background-color", "#FF0000");
//3. button, checkbox
$("button").click(function(){
//
alert( $(":checked").length )
});
});
</script>
</head>
<body>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<table>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
</table>
<br>
<hr>
<br>
<table>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td>
</tr>
</table>
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<button> </button>
</body>
</html> 2).すべてを選ぶ
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// window.onload
$(function(){
//
$("#checkedAllBtn").click(function(){
//
// $(":checkbox").prop("checked",true);
// $(":checkbox").attr("checked","checked");
/*
jquery each ， dom
each function， this ， dom
*/
$(":checkbox").each(function(){ //
this.checked = true;
});
});
//
$("#checkedNoBtn").click(function(){
//
var $checkBoxObjs = $(":checkbox");
// dom
for(var i = 0; i < $checkBoxObjs.size(); i++) {
// jquery dom
var checkBoxObj = $checkBoxObjs[i];
// dom checked
checkBoxObj.checked = false;
}
});
/*
*/
$("#checkedRevBtn").click(function(){
// 1. checkbox
$("input[name='items']").each(function(){
// 2. 。 ，
// ，
this.checked = !this.checked;
});
/*
， ，
，
*/
//
var checkedCount = $(":checked").size();
//
if ( checkedCount == $("input[name='items']").length ) {
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
});
//
$("#sendBtn").click(function(){
//
$("input[name='items']:checked").each(function(){
// this dom
alert(this.value);
});
});
// ，
$("#checkedAllBox").click(function(){
// ，
//
//
// if ( this.checked ) {
// $("input[name='items']").prop("checked",true);
// } else {
// $("input[name='items']").prop("checked",false);
// }
$("input[name='items']").prop("checked", this.checked );
});
/* 。 */
$("input[name='items']").click(function(){
// if ( $("input[name='items']:checked").length == $("input[name='items']").length )
// {
// alert(" " + $("input[name='items']:checked").length);
// $("#checkedAllBox").prop("checked" , true);
// } else {
// $("#checkedAllBox").prop("checked" , false);
// }
$("#checkedAllBox").prop("checked"
, ( $("input[name='items']:checked").length == $("input[name='items']").length ) );
});
});
</script>
</head>
<body>
<form method="post" action="">
？<input type="checkbox" id="checkedAllBox" /> /
<br />
<input type="checkbox" name="items" value=" " />
<input type="checkbox" name="items" value=" " />
<input type="checkbox" name="items" value=" " />
<input type="checkbox" name="items" value=" " />
<br />
<input type="button" id="checkedAllBtn" value=" " />
<input type="button" id="checkedNoBtn" value=" " />
<input type="button" id="checkedRevBtn" value=" " />
<input type="button" id="sendBtn" value=" " />
</form>
</body>
</html>4、Domの追加削除内部挿入:
append()a.append(b)は、bをaに追加する要素内でjavascriptのappendChildと類似している
appendTo()a.appendTo(b)b要素にaを追加
prepend()a.prepend(b)は、a要素にbを追加する開始位置である
prependTo()a.prependTo(b)は、aがb要素に追加される開始位置である
外部挿入:
after()
a.after(b)はaの後ろにb要素を挿入する
before()
a.before(b)はb元素をaの前に加える
insertAfter()a.inertAfter(b)b要素をb要素の後ろに挿入する
insertBefore()
a.insertBefore(b)a元素をb元素の前に挿入する
小包:
wrap()
a.wrap(b)は、aの各要素をbで包む
unwrap()
a.unwrap()はaの親要素を取り除く
wrapAll()
a.wrapAll(b)は、得られたaの元素を同じb元素で包む
wrapInner()
a.wrapInner(b)は、a要素のすべてのサブ要素またはテキスト内容をbで包む
置換:
replaceWith()
a.replaceWith(b)aをbで置き換える
replaceAll()
a.replaceAll(b)はすべてのbをaで置き換える
削除:
remove()
a.remove()は、aがhtmlドキュメントから自分を削除する
empty()a.empty()は、a要素の内容をクリアします.
Dom操作の練習コード:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// input ， name a
// alert( $("input[name='a']").size() );
//
// alert( $("input[name='a']").val() );
//
// $("input[name='a']").val(" ");
// alert( $(":checkbox").size() );
//
// $(":checkbox").val([' ',' ']);
//
// $(":checkbox:first").attr("checked","checked");
// $(":checkbox:first").prop("checked",true);
// checked
// alert( $(":checkbox:first").attr("checked") ); // undefined
// alert( $(":checkbox:first").prop("checked") ); // false
// prop attr 。 ， ， ， prop
// div
// alert( $("div").html() );
// div
// alert( $("div").text() );
// div
// $("div").html("<p>111</p>");
// 。 html ，
$("div").text("<p>111</p>");
})
})
</script>
</head>
<body>
<div><span>div span </span></div>
<button id="btn1"> name </button>
<form action="#" id="form1">
:<input name="a" value="abc" type="text"/><br/>
:<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
<input type="checkbox" name="interest" value=" ">
</form>
</body>
</html>5、JQuery練習二
1).JQueryフォームセレクタ練習
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//
$(function(){
//
// ' 3 '
$(":button:eq(0)").click(function(){
// "#single option:eq(2) id single select option ，
// $("#single option:eq(2)").prop("selected" , true);
// ， 3
$("#single").val(['s3']);
});
//
// ' 2 ' ' 4 '
$(":button:eq(1)").click(function(){
//
// $("#multiple option:selected").prop("selected" ,false);
// 2 4
// $("#multiple option:eq(1),#multiple option:eq(3)").prop("selected",true);
// $("#multiple option:eq(1)").add("#multiple option:eq(3)").prop("selected",true);
// $("#multiple option:odd").prop("selected" ,true);
// 2 4
$("#multiple").val(['x2','x4']);
});
//
// ' 2' ' 4'
$(":button:eq(2)").click(function(){
$(":checkbox").val(['check2','check4']);
});
//
// ' 2'
$(":button:eq(3)").click(function(){
// :radio:eq(1) ' 2'
$(":radio:eq(1)").prop("checked",true);
});
//
//
$(":button:eq(4)").click(function(){
//1. :checked ， ， option
$(":checked").each(function(){
//2.
// each function this ， dom
alert(this.value);
});
});
});
</script>
</head>
<body>
<input type="button" value=" ' 3 ' "/>
<input type="button" value=" ' 2 ' ' 4 ' "/><br>
<input type="button" value=" ' 2' ' 4' "/>
<input type="button" value=" ' 2' "/><br>
<input type="button" value=" "><br>
<br/>
<select id="single" name="singlecheck">
<option value="s1"> 1 </option>
<option value="s2"> 2 </option>
<option value="s3"> 3 </option>
</select>
<select id="multiple" multiple="multiple" name="multiplecheck" style="height:120px;">
<option selected="selected" value="x1"> 1 </option>
<option value="x2"> 2 </option>
<option value="x3"> 3 </option>
<option value="x4"> 4 </option>
<option selected="selected" value="x5"> 5 </option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 1
<input type="checkbox" name="c" value="check2"/> 2
<input type="checkbox" name="c" value="check3"/> 3
<input type="checkbox" name="c" value="check4"/> 4
<br/>
<input type="radio" name="r" value="radio1"/> 1
<input type="radio" name="r" value="radio2"/> 2
<input type="radio" name="r" value="radio3"/> 3
</body>
</html>2).左から右へ、右から左へ練習
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//
$(function(){
//
$("button:eq(0)").click(function(){
//1. option
// alert( $("select:eq(0) option:selected").length );
//2. select
$("select:eq(0) option:checked").appendTo("select[name='sel02']");
});
//
$("button:eq(1)").click(function(){
// 1. option
// alert( $("select[name='sel01'] option").length );
// 2.
$("select[name='sel01'] option").appendTo("select[name='sel02']");
});
// option
$("button:eq(2)").click(function(){
// option
// alert( $("select[name='sel02'] option:selected").length );
// option， select
$("select[name='sel02'] option:selected").appendTo("select[name='sel01']");
});
//
$("button:eq(3)").click(function(){
// 1. select option
var $selectedOptions = $("select[name='sel02'] option");
// 2. option select
$selectedOptions.appendTo("select[name='sel01']");
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01"> 1</option>
<option value="opt02"> 2</option>
<option value="opt03"> 3</option>
<option value="opt04"> 4</option>
<option value="opt05"> 5</option>
<option value="opt06"> 6</option>
<option value="opt07"> 7</option>
<option value="opt08"> 8</option>
</select>
<button> </button>
<button> </button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button> </button>
<button> </button>
</div>
</body>
</html>3).表レコードの動的追加、削除
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
//
$(function(){
// alert( $("a").length );
// a ，
// a ， 。 ，
var aDeleteFunction = function(){
// 1. a ， this ， td
// 2. td tr
// 3. .remove() ，
// $(this).parent().parent().remove();
// a tr
var $trObj = $(this).parent().parent();
// tr td ，
// first() td 。
var nameText = $trObj.find("td").first().html() ;
//
// ， ， true
// ， false
var result = confirm(" " + nameText + " ？");
if (result) {
$trObj.remove();
} else {
}
//
return false;
};
// a
$("a").click(aDeleteFunction);
// submit
$("#addEmpButton").click(function(){
//
var nameText = $("#empName").val();
//
var emailText = $("#email").val();
//
var salaryText = $("#salary").val();
// alert(" ：" + nameText + ",email:" + emailText + ", ：" + salaryText);
//
var $newTrObj = $("<tr><td>" + nameText + "</td><td>" + emailText + "</td>" +
"<td>" + salaryText + "</td>" +
"<td><a href='javascript:void(0)'>Delete</a></td></tr>");
// table
$newTrObj.appendTo("#employeeTable");
// a ， tr a a
$("a:last").click(aDeleteFunction);
// $newTrObj.find("a").click(function(){
// alert(" A ");
// });
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4> </h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>6、CSSスタイル操作.
addClass()はすべての一致する要素にclassを追加し、複数のclass値をスペースで区切るremoveClass()はすべての一致する要素にclassを削除し、複数のclass値をスペースで区切るtoggleClass()指定したclassが存在する場合は指定したclassを削除し、存在しない場合はhasClass()を追加して一致する要素が存在するかどうかを判断し、指定したclassが存在するかどうかを判断します.存在する場合はtrueを返します.そうでない場合はfalse css()を返します.指定したcssスタイル値height()を取得または設定できます.要素の高さ(PX単位)width()を取得または設定できます.要素の幅(PX単位)offset()を取得または設定できます.要素の位置(topおよびleftの値)を取得または設定できます.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() -
$divEle.addClass("redDiv");
});
$('#btn02').click(function(){
//removeClass() -
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//hasClass() - class
alert( $divEle.hasClass("redDiv") );
});
$('#btn04').click(function(){
//toggleClass() - /
$divEle.toggleClass("blueBorder");
});
$('#btn05').click(function(){
//css() -
// alert( $divEle.css("background-color") );
$divEle.css("background-color","#00FF00");
});
$('#btn06').click(function(){
//height() - 。
// alert( $divEle.height() );
$divEle.height(10000);
});
$('#btn07').click(function(){
//width() - 。
$divEle.width(1000);
});
$('#btn08').click(function(){
//offset() - 。
// console.log( $divEle.offset() );
//offset （top left）
$divEle.offset({top:200,left:400});
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="hasClass()" id="btn03"/>
<input type="button" value="toggleClass()" id="btn04"/>
<input type="button" value="css()" id="btn05"/>
<input type="button" value="height()" id="btn06"/>
<input type="button" value="width()" id="btn07"/>
<input type="button" value="offset()" id="btn08"/>
</div>
</td>
</tr>
</table>
<br /> <br />
<br /> <br />
</body>
</html>7、JQueryアニメーション
Jqueryのアニメーション関数は、時間と関数の実行後のコールバック関数を渡すことができます.
基本アニメーション(要素の幅と高さを変更)
show()は、非表示の要素が表示され、この表示の時間を設定するために時間を渡すことができる.2つのパラメータを渡すこともできる.1つの時間、もう1つはアニメーションの実行後に実行する方法です.
$(function() {
$("button").click(function() {
// show
// （ ）
$("div").show(1000,function(){
alert(" ！");
});
});
});hide()表示要素を非表示にすることができ、2つのパラメータを渡すことができ、最初のパラメータはアニメーションの実行時間である.2番目のパラメータは、アニメーションの実行後に呼び出されるコールバック関数です.
$("button:last").click(function() {
$("div").hide("fast",function(){
alert(" ， ");
});
})toggle()
エレメントの可視性を切り替えることができます.エレメントの表示が非表示に設定されている場合、エレメントが非表示に設定されている場合、表示に設定されている場合
スライドアニメーション(要素のデバッグを修正する)
slideDown()は要素の高さを増やし、要素を表示させてslideUp()は要素の高さを減らし、要素を非表示にしてslideToggle()は高さの変化によってすべての一致する要素の可視性を切り替え、切り替えが完了した後にオプションでコールバック関数をトリガーします.
フェードインフェードアウトアニメーション(要素の透明度を変更)
fadeIn()要素の透明度を変更することによって要素fadeOut()を徐々に表示する要素fadeTo()要素の透明度を変更することによって要素fadeTo()を徐々に非表示にする要素の透明度を所定の時間に従って指定された透明度fadeToggle()に変更する要素の透明度を変更することによって要素をフェードまたはフェードアウトする
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
// show
// （ ）
$("div").show(1000,function(){
alert(" ！");
});
});
$("button:eq(1)").click(function() {
// ，
$("div").hide("fast",function(){
alert(" ， ");
});
});
$("button:eq(2)").click(function() {
// ， ， hide() ， show()
$("div").toggle(1000);
});
$("button:eq(3)").click(function() {
// ， ，
$("div").slideDown(1000,function(){
alert("slideDown aminate over！");
});
});
$("button:eq(4)").click(function() {
// ， ，
$("div").slideUp(1000);
});
$("button:eq(5)").click(function() {
// slideUp slideDown ， ， slideDown
// ， slideUp
$("div").slideToggle(1000,function(){
alert(1);
});
});
//
$("button:eq(6)").click(function() {
//
//
$("div").fadeIn(1000);
});
//
$("button:eq(7)").click(function(){
// div ，
$("div").fadeOut(1000,function(){
alert(" ！");
});
});
//
$("button:eq(8)").click(function(){
// Math.random 0-1
$("div").fadeTo(1000,Math.random());
// ,function(){
// alert("fadeTo over!");
// });
});
//
$("button:eq(9)").click(function(){
// Math.random 0-1
$("div").fadeToggle(1000);
});
});
</script>
</head>
<body>
<button>show div</button>
<button>hide div</button>
<button>toggle div</button>
<button>slideDown div</button>
<button>slideUp div</button>
<button>slideToggle div</button>
<button>fadeIn div</button>
<button>fadeOut div</button>
<button>fadeTo div</button>
<button>fadeToggle div</button>
<div
style="border: 1px solid blue;height: 100px;width: 100px;background-color: red; display: none;">
！
</div>
</body>
</html>練習06、CSS_アニメーションブランド展示
需要:1.ボタンをクリックすると、カシオの後のブランドを隠して表示します.2.すべてのコンテンツが表示されると、ボタンテキストが「コンパクトブランドを表示」になり、小三角形が上向きになります.すべてのブランド製品はデフォルトの色です.3.コンパクトブランドのみを表示する場合、カシオ以降のブランドを非表示にするには、ボタンテキストが「すべてのブランドを表示」になり、小さな3形下に下がります.キヤノン、ニコンのブランド色を赤に変更(liラベルにpromotedスタイルを追加すればいい)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 1. ， 。
// alert( $("div>a").length );
//
// true
// false
var isShowAll = false;
// div div， ， div
var $div_div = $("div>div");
// ， span
// div>a>span span
var $div_a_span = $("div>a>span");
// ，
$div_a_span.html(" ");
$div_div.addClass("showless");
$("li:contains(' '),li:contains(' ')").addClass("promoted");
$("div>a").click(function(){
// $("li:gt(5):not(:last)") ，
// alert(isShowAll);
$("li:gt(5):not(:last)").toggle(isShowAll);
isShowAll = !isShowAll;
// 2. ， “ ”
// ， 。 。
// class
$div_div.removeClass();
if (isShowAll) {
$div_a_span.html(" ");
// ，
$div_div.addClass("showmore");
// 3. ， ， “ ”
// 。 ， （ li promoted ）
$("li:contains(' '),li:contains(' ')").removeClass("promoted");
} else {
$div_a_span.html(" ");
// ，
$div_div.addClass("showless");
// 3. ， ， “ ”
// 。 ， （ li promoted ）
$("li:contains(' '),li:contains(' ')").addClass("promoted");
}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#"> </a><i>(30440) </i></li>
<li><a href="#"> </a><i>(27220) </i></li>
<li><a href="#"> </a><i>(20808) </i></li>
<li><a href="#"> </a><i>(17821) </i></li>
<li><a href="#"> </a><i>(12289) </i></li>
<li><a href="#"> </a><i>(8242) </i></li>
<li><a href="#"> </a><i>(14894) </i></li>
<li><a href="#"> </a><i>(9520) </i></li>
<li><a href="#"> </a><i>(2195) </i></li>
<li><a href="#"> </a><i>(4114) </i></li>
<li><a href="#"> </a><i>(12205) </i></li>
<li><a href="#"> </a><i>(1466) </i></li>
<li><a href="#"> </a><i>(3091) </i></li>
<li><a href="#"> </a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span> </span></a>
</div>
</div>
</body>
</html>8、Queryイベント操作
$(function(){}); とwindow.onload=function(){}の違いは?
これらはすべてページがロードされた後です!
$(function(){
});その全書は
$(document).ready(function(){
});documentはdomオブジェクトを管理します.htmlドキュメント全体を表します
ドキュメント(domオブジェクト)の準備ができたら
では、documentオブジェクトの準備ができたら?
1.すべてのhtmlタグがブラウザにロードされ、
2.すべてのDomオブジェクトが作成された後.
3.Documentオブジェクトはすべてのdomオブジェクトを管理するために使用されるからです.
4.だから$(document).ready(function(){}); この方法の意味は、
5.ブラウザがhtmlページのロードを完了し、すべてのDomオブジェクトを生成した後です.
そしてwindowonloadメソッドは、ページがロードされた後だけではありません.また、ページ内のすべての要素データが得られた後です.
彼らはそれぞれいつトリガーされますか?
彼らがトリガーする順序は?
先に$(document)を実行する.ready()メソッド、すなわち$(function(){});
後でwindowを実行します.onloadイベント
$(document).ready() ， ， 。
window.onload ， ， 。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
jquery $(document).ready(function(){}) window.onload 。
$(document).ready()
$(document).ready(function(){}) ， html ，
html （dom ） ， document 。
document ready document
document dom
window.onload
window.onload ， 。
window.onload
$(document).ready() （ ）
*/
$(document).ready(function(){
alert(" ！ JQuery ");
});
// $(document).ready(function(){})
$(function(){
alert("jquery 2");
})
$(function(){
alert("jquery 3");
})
$(function(){
alert("jquery 4");
})
$(function(){
alert("jquery 5");
})
// window.onload
// window.onload
window.onload = function(){
alert("window.onload ");
}
window.onload = function(){
alert("window.onload 2");
}
</script>
</head>
<body>
<button> </button>
<iframe src="http://www.baidu.com"></iframe>
<br/>
<img alt=" " width="100" height="100" src="http://www.baidu.com/1.jpg">
</body>
</html>
click() （ function ）， （ ）
mouseover() （ function ）， （ ）
mouseout() （ function ， （ ）
bind() ， ， 。
one() 。 ，
live() 。 ， 。
unbind() unbind bind ， 。 ， 。 ， 。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//
$("button:first").click(function(){
// alert(" ");
// $("p").click(function(){
// alert(" p");
// });
// //
// $("p").mouseover(function(){
// alert("mouseover");
// });
// //
// $("p").mouseout(function(){
// alert(" ， ， ！");
// });
// ，
// $("p").mouseover(function(){
// alert("mouseover");
// }).mouseout(function(){
// alert(" ， ， ！");
// });
//bind
// $("p").bind("click",function(){
// alert(" bind click ");
// });
// bind
$("p").bind("click mouseout",function(){
alert("bind click mouseout ");
});
// one p
// ，
// $("p").one("click",function(){
// alert(" ！");
// });
// live ，
// $("p").live("click",function(){
// alert(" live ！");
// });
// $("<p> p </p>").appendTo("body");
});
//
$("button:eq(1)").click(function(){
// p
// $("p").click();
// $("p").mouseover();
// $("p").mouseout();
});
//
$("button:eq(2)").click(function(){
// p
// $("p").unbind("click");
//
$("p").unbind();
});
});
</script>
</head>
<body>
<button> </button>
<button> </button>
<button> </button>
<p style="border: 1px red solid;"> </p>
</body>
</html 事件の泡
事件の泡とは何ですか.イベントのバブルとは、親子要素が同じイベントを同時に監視することです.サブエレメントのイベントに触れると、同じイベントも親エレメントのイベントに渡されて応答します.では、どうやって事件の泡を止めるのでしょうか.イベント関数内でreturn false;イベントのバブル伝達を阻止することができます.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
/*
，
return false
*/
$("span").click(function(){
alert(" span");
//
return false;
});
$("div:first").click(function(){
alert(" div");
//
return false;
});
$("body").click(function(){
alert(" body");
});
})
</script>
</head>
<body>
<div id="content">
div
<span> span </span>
div
</div>
</body>
</html>イベントオブジェクト
イベントオブジェクトは、トリガされたイベント情報をカプセル化したjavascriptオブジェクトです.私たちが重点的に関心を持っているのは、このjavascriptのイベントオブジェクトをどのように手に入れるかです.および使用します.Javascriptイベントオブジェクトをどのように取得しますか?バインドされたイベント関数のパラメータリストにパラメータを追加するだけです.パラメータの名前はeventに慣れています.例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//2.JQuery
// $("#areaDiv").click(function(event){
// alert(" ");
// console.log(event);
// });
//1. javascript
// document.getElementById("showMsg").onclick = function(event){
// alert(" javascript ");
// console.log(event);
// }
//3. bind 。 。
$("div:first").bind("click mouseout",function(event){
// event.type
// console JavaScript 。log
console.log(event.type);
if (event.type == "click") {
console.log(" ");
} else if(event.type == "mouseout") {
console.log(" ");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>☆練習07イベント画像フォロー
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function(event){
// ，
var $showBig = $("#showBig");
var $showXY = $("#showXY");
if (event.type=="mouseover") {
// event.pageX event.pageY
console.log( "x=" + event.pageX + ",y=" + event.pageY );
//
$showBig.show();
//
$showBig.offset({top: event.pageY, left: event.pageX});
} else if (event.type == "mouseout") {
$showBig.hide();
} else if (event.type == "mousemove") {
$showBig.show();
// event.pageX event.pageY
// console.log( "x=" + event.pageX + ",y=" + event.pageY );
$showXY.html("x=" + event.pageX + ",y=" +event.pageY );
// ，
$showBig.offset({top:(event.pageY + 10), left: (event.pageX + 10)});
}
});
});
</script>
</head>
<body>
<div id="showXY"></div>
<br/>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>