jqueryインスタンスの悟り:
7837 ワード
$(")このタグにはラベル要素を直接入れることができます.
each()は遍歴集合の関数で、中には関数function(index,domEle)が受信され、indexは遍歴のインデックスを表し、domEleは遍歴のオブジェクトを表し、その形式はdomフォーマットである
eq()はフィルタ関数の中で直接整数を受信するタイプです
$(「table tr」)ある要素の下の要素を選択し、このように書くことができます.
このモジュールの機能はJqueryで簡単に実現できます.
まず機能1を解析する.左からすべて右へ移動する.左から選択したものを右へ移動する.ダブルクリックで相手に移動
実装方法:ボタンを取得イベントàをクリックして左selectのoptionをすべて右に移動
取得ボタンのクリックイベントà左のselectで選択されたoptionを右に移動選択されたoptionをjqueryのフィルタリングで実現
selectのダブルクリック時間dblclickを取得後にlがあることに注意し、ダブルクリックしたoptionを左から右に移動します.
右から左に移動する方法は似ています.
ユーザーがモジュール分析を追加するには:
1.まず各フィールドの値を取得する.列オブジェクトの作成3行オブジェクトの作成4列オブジェクトを行オブジェクトに追加
5 tableオブジェクトにカラムオブジェクトを追加a要素にイベントを追加します.注意:aに追加されたイベント関数呼び出しは、要素を追加するイベント関数の内部に置く必要があります.次に、a要素にhref属性が設定されているため、clickイベントのたびにハイパーリンクがアクティブになります.プレゼンテーション効果を達成するために、a要素のclick時間戻り値をfalseに設定することができます.
ハイパーリンクをアクティブにするパスを防ぐことができます.
each()は遍歴集合の関数で、中には関数function(index,domEle)が受信され、indexは遍歴のインデックスを表し、domEleは遍歴のオブジェクトを表し、その形式はdomフォーマットである
eq()はフィルタ関数の中で直接整数を受信するタイプです
$(「table tr」)ある要素の下の要素を選択し、このように書くことができます.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo01.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language='JavaScript' src='../js/jquery-1.4.2.js'></script>
</head>
<body>
<p> 1</p>
<p> 2</p>
<p> 3</p>
<hr>
<table border='1' width='450'>
<tr><td> id </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> 1 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 2 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 3 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 4</td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 5 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 6 </td><td> </td><td>18</td><td> </td><td> </td></tr>
</table><hr>
<table border='1' width='450'>
<tr><td> id </td><td> </td><td> </td><td> </td><td> </td></tr>
<tr><td> 1 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 2 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 3 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 4</td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 5 </td><td> </td><td>18</td><td> </td><td> </td></tr>
<tr><td> 6 </td><td> </td><td>18</td><td> </td><td> </td></tr>
</table>
<script language='JavaScript'>
$("p").each(function(index,domEle){
$(domEle).click(function(){
alert($(domEle).text());
});
});
$("table:eq(0) tr:even").css("background","gray");
$("table:eq(1) tr:odd").css("background","red");
</script>
</body>
</html>
このモジュールの機能はJqueryで簡単に実現できます.
まず機能1を解析する.左からすべて右へ移動する.左から選択したものを右へ移動する.ダブルクリックで相手に移動
実装方法:ボタンを取得イベントàをクリックして左selectのoptionをすべて右に移動
取得ボタンのクリックイベントà左のselectで選択されたoptionを右に移動選択されたoptionをjqueryのフィルタリングで実現
selectのダブルクリック時間dblclickを取得後にlがあることに注意し、ダブルクリックしたoptionを左から右に移動します.
右から左に移動する方法は似ています.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language='JavaScript' src='../js/jquery-1.4.2.js'>
</script>
<style>
body{
background-color:#64BAC1;
text-align:center;
}
select{
background-color:#CCCCCC;
width:50px;
}
input{
width:50px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select size='10' id='first'multiple="multiple">
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
<option> </option>
</select>
</td>
<td>
<input type="button" value=" --> " id='one'><br>
<input type="button" value=" ==> " id='three'><br>
<input type="button" value=" <-- " id='two'><br>
<input type="button" value=" <== " id='four'><br>
</td>
<td >
<select size='10' id='second'multiple="multiple">
<option> </option>
</select>
</td>
</tr>
</table>
<script>
$("#three").click(function(){
$("#second").append($("#first option"));
});
$("#four").click(function(){
$("#first").append($("#second option"));
});
$('#one').click(function(){
$('#second').append($('#first option:selected'));
});
$('#two').click(function(){
$('#first').append($('#second option:selected'));
});
$('#first').dblclick(function(){
$('#second').append($("#first option:selected"));
});
$('#second').dblclick(function(){
$('#first').append($("#second option:selected"));
});
</script>
</body>
</html>
ユーザーがモジュール分析を追加するには:
1.まず各フィールドの値を取得する.列オブジェクトの作成3行オブジェクトの作成4列オブジェクトを行オブジェクトに追加
5 tableオブジェクトにカラムオブジェクトを追加a要素にイベントを追加します.注意:aに追加されたイベント関数呼び出しは、要素を追加するイベント関数の内部に置く必要があります.次に、a要素にhref属性が設定されているため、clickイベントのたびにハイパーリンクがアクティブになります.プレゼンテーション効果を達成するために、a要素のclick時間戻り値をfalseに設定することができます.
ハイパーリンクをアクティブにするパスを防ぐことができます.