jqueryの使用:マウスをハイライト表示に移動
3836 ワード
jqueryを勉強する以上、javaScriptの基本的な勉強をしなければなりません.なければ、jsを勉強してからにしましょう.
ステップ1:2つのjsのプラグインを追加します(後でダウンロードできます)
1つ目はjsの主要なプラグインで、2つ目は表で使用されるプラグインです.
ステップ2:比較的簡単なtable
ステップ3:
第四歩:今が肝心だ
OKです.
主にプラグインを使用します
もちろん表プラグインを使わなくてもこの効果は得られます
次のようになります.
$(「table td」):表のすべてのtd
$(this).parent():このtdの親要素tr
$(this).parent().find("td").each(function(i){}):その後、この親要素ノードを介して下のすべてのサブ要素(すべてのtd)を見つけます.
ループを開始し、
tdが見つかりませんでした.この関数を実行します.
$(this).css({color:“black”,background:'#efefef'})ここのthisはすべてtdで、それからcss
ステップ1:2つのjsのプラグインを追加します(後でダウンロードできます)
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="script/jquery-latest.pack.js"></script>1つ目はjsの主要なプラグインで、2つ目は表で使用されるプラグインです.
ステップ2:比較的簡単なtable
<body>
<table align="center" width="70%" border="0" cellpadding="3"
cellspacing="0" borderColor="#cccccc" bgcolor="#efefef">
<thead>
<tr>
<th>
</th>
<th>
</th>
</tr>
</thead>
<tr>
<td>
a
<input type="checkbox" value="c1">
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c5">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c4">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c3">
</td>
<td>
d
</td>
</tr>
<tr>
<td>
c
<input type="checkbox" value="c2">
</td>
<td>
d
</td>
</tr>
</table>
</body>ステップ3:
<style type="text/css">
th {
background: #6E6E6E;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
/*td td ， */
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
tr.over td {
background: #cccccc; /* */
}第四歩:今が肝心だ
<script>
$(document).ready( function() {
// tr ， $("table tr").mouseover(function(){$(this).addClass("over")}),
// tr ， $("table tr").mouseout(function(){$(this).removeClass("over")});
});
</script>OKです.
主にプラグインを使用します
もちろん表プラグインを使わなくてもこの効果は得られます
次のようになります.
$(document).ready( function() {
$("table td").mouseout( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"black",background: '#efefef' }) });
});
$("table td").mouseover( function() {
$(this).parent().find("td").each(function(i){ $(this).css({color:"red",background: '#cccccc' }) });
});
});$(「table td」):表のすべてのtd
$(this).parent():このtdの親要素tr
$(this).parent().find("td").each(function(i){}):その後、この親要素ノードを介して下のすべてのサブ要素(すべてのtd)を見つけます.
ループを開始し、
tdが見つかりませんでした.この関数を実行します.
$(this).css({color:“black”,background:'#efefef'})ここのthisはすべてtdで、それからcss