JavaScriptライブラリjQueryのみを使ってプラグインを使わず色々試してみました。

自分で1からjavascriptコードを書いた事はほとんどないのですが、
JavaScriptライブラリといえば jQuery（入門編）を見てかなり直感的に出来る事を知りました。

$('#message').css('background', 'red').html('Hello!').show();

こんな感じで<div=”message”>にCSSや出力文字列を指定できます。簡単ですねー

ちょっと書いてみたくなったので自分が作ったなかで使えそうなものを紹介します。
jQuery公式からCompressedから最新版をダウンロードして下さい。記事では1.1.4を使用しています。

onMouseを使わず特定のタグの透明度を変更する方法

jQueryのhover()を使ってオンマウスオーバー使わずに要素を変更しています。
好きな要素を選択できるので、どこでも透明にできますね。
head内でダウンロードしたjQueryを読み込ませて下さい。

コード

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("p").fadeTo(0,0.4);//ページ読み込み時
});
$(function(){
$("p").hover(
function(){
$(this).fadeTo(100,1.0);
},
function(){
$(this).fadeTo(200,0.4);
}
);
});
// -->
</script>
<!--▲head内-->
<p>SAMPLE TEXT</p>

表示SAMPLE
fadeto(表示Speedミリ秒 ,　透明度)で指定する事が出来ます。MENUとかにも使えそうですね。

javascriptだけで背景色を交互に変更する方法

普段はPHPなどでCSSのclass等を書いて指定していたのですが、
javascriptならHTMLコードを弄らずに変更出来ます。

コード

<style type="text/css">
<!--
.list {background-color: #ddd;}
-->
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function(){
$('li:odd').addClass('list');
});
// -->
</script>
<!--▲head内-->
<ul>
<li>TEXT DATA1</li>
<li>TEXT DATA2</li>
<li>TEXT DATA3</li>
<li>TEXT DATA4</li>
<li>TEXT DATA5</li>
<li>TEXT DATA6</li>
</ul>

表示SAMPLE
背景色やスタイルを交互に変更というのは意外と使用頻度が高いので作成しました。
9/5日に修正しました。
　

Jqueryはjavascriptの知識がない自分でも、とても入りやすいライブラリだと感じました。
皆さんもぜひ試してみてはいかがでしょうか？

This entry was posted on 月曜日, 9月 3rd, 2007 at 14:55:24 and is filed under jQuery, Ajax.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.