タグ別アーカイブ: jQuery

jQuery：jQueryを実行する時のready()の記述方法

Posted on by
返信

jQueryを実行するときにready()を使用し記述しますが、省略して書くことができます。
また、jQueryの記述を$で省略することも可能です。
それぞれの書き方を下記に記載します。

■ ready()

jQueryを実行するのに必要な関数です。
DOMの読み込み完了時に関数を実行します。

■ jQueryを$で書き換えた場合の記述方法

・「jQuery」で記述した場合

?
1
2
3
jQuery(document).ready(function(){
    // 実行する処理
});

・「$」で記述した場合

?
1
2
3
$(document).ready(function(){
    // 実行する処理
});

$で記述すれば何回もjQueryを記述する必要がないので楽でソースがきれいに見えます。

■ ready()を省略した場合の記述方法

・readyを使用した場合
documentが読み込まれてから実行します。

?
1
2
3
$(document).ready(function(){
    // 実行する処理
});

・documentを省略した場合
使用できるが推奨はされていないそうです。

?
1
2
3
$().ready(function(){
    // 実行する処理
});

・readyを省略した場合
(document).readyを省略できるのでソースも短く楽に書くことができます。

?
1
2
3
$(function(){
    // 実行する処理
});

jQuery：jQueryを使用して<div>要素の表示・非表示

Posted on by
返信

jQueryを使用して<div>要素をクリックした場合、別の<div>要素の表示・非表示を行いました。
また、jQueryを使用せずにjavascriptでも行った場合の方法を記載します。
jQuery日本語リファレンスを参考にしました。

■ jQueryメモ

toggle()

各要素のうち、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にします。

■ 使用例（jQuery）

[javascript]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    // 「id="jQueryBox"」を非表示
    $("#jQueryBox").css("display", "none");
 
    // 「id="jQueryPush"」がクリックされた場合
    $("#jQueryPush").click(function(){
        // 「id="jQueryBox"」の表示、非表示を切り替える
        $("#jQueryBox").toggle();
    });
});
</script>

[HTML]

?
1
2
3
4
<div id="jQueryPush">クリック（jQuery）</div>
<div id="jQueryBox">
    <p>jQueryを使用し表示・非表示</p>
</div>

■ サンプル（jQuery）

【ここをクリック（jQuery）】

jQueryを使用し表示・非表示

■ 使用例（javascript）

[javascript]

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
window.onload = function(){
    Box = document.getElementById("javascriptBox");        // 「id="javascriptBox"」をBox変数に格納
    Push = document.getElementById("javascriptPush");    // 「id="javascriptPush"」をPush変数に格納
    Box.style.display = 'none'; // Box変数のstyleを「display: none;」にする
 
    // Push変数がクリックされた場合
    Push.onclick = function(){
        // 「id="javascriptBox"」が「display: block;」の場合、クリックすると「display: none;」にする。
        // また「id="javascriptBox"」が「display: none;」の場合、クリックすると「display: block;」にする。
        Box.style.display = Box.style.display == 'block' ? 'none' : 'block';
    }
}
</script>

[HTML]

?
1
2
3
4
<div id="javascriptPush" onclick="return false;">クリック（javascript）</div>
<div id="javascriptBox">
    <p>javascriptで表示・非表示</p>
</div>

■ サンプル（javascript）

【ここをクリック（javascript）】

javascriptで表示・非表示