トップ 差分 一覧 ソース 検索 ヘルプ PDF RSS ログイン

jQuery

jQuery 日本語リファレンス
http://semooh.jp/jquery/

jQueryの参考サイト

IBM:jQuery を使って Ajax 開発を単純化する
http://www.ibm.com/developerworks/jp/xml/library/x-ajaxjquery.html

セレクタ

Selecters
http://semooh.jp/jquery/api/selectors/
$('div').css('color', '#f00');
$('#id').css('color', '#f00');
$('.class').css('color', '#f00');
$('div[name=foo]').css('color', '#f00');
$('dl > dt:first').css('background', '#eee');

画面がロードされたときに実行させる

$(function(){
// 画面がロードされたときに実行させる処理
});

画面がロードされたときにinputにカーソルを移す

<input type="text" id="email" value="" />
$(fucntion(){
    $('#email').focus();
});

入力欄を目立たせる

.html

<input id="user" name="user" type="text" value="" />
<input id="password" name="password" type="password" value="" />

.css

.focus {
    color: #333;
    border: 2px solid #0cf;
    background-color: #fff;
}

.js

$(function(){
    $('input[type="text"], input[type="password"], textarea')
        .focus(function(){
            $(this).addClass("focus");
        })

        .blur(function(){
            $(this).removeClass("focus");
        });

    $("#user").focus();
});

複数DOMの部分は下のように書くこともできるみたい。

$('input:text, input:password, textarea')

return falseとevent.stopPropagationとevent.preventDefault()

1分でわかるreturn false; preventDefault(); stopPropagation() の違い
http://iwb.jp/return-false-preventdefault-stoppropagation/

HTMLタグが入れ子の関係にあるとき、子のイベントを親に伝播するかとかの違い。

スコープとthisとevent.target

$(".foo").click(function(e){
    $(this)...
    $(e.target)...

class="foo"を持つ要素をclickしたとき、クリックされた要素thisとe.taegetは同じ対象を指す。

$(".foo").click(function(e){
    $.get("bar.php?baz=1", function(){
        $(this)... 
        $(e.target)...

スコープが変わるとthisが変わる。この例でのthisはスコープで引き継がれたe.target(クリックされた要素)と違い、$.getのthisみたいな感じになる。

javascriptの「this」は「4種類」??
http://qiita.com/takeharu/items/9935ce476a17d6258e27

Ajaxを使った送受信の際のエラー取得

$.ajax( {
    dataType :'json',
    type :"POST",
    url :url,
    data :postData,
     :
    error : function(obj, status, errorThrown) {
        alert(obj.responseText.replace(/<\/?[^>]+>/gi, ''));

のような感じにobj.resopnseTextでPHPなどが吐くエラーを取得できる。
replace()しているのは、HTML形式のエラーをalert()で表示する際に、HTMLタグを除去するため。

professional resumes

コールバックが動作しない

Ajax(jQuery)とかで非同期通信を行う時、コールバックが動かなくてハマった(汗)。

ローカルのテスト環境では動くのに、サーバーにアップすると動かない。
ググってみると、戻りのフォーマットがよろしくないとコールバックが動かないんだとか。

で、PHPからJSONの戻りがローカルではOK、サーバーでは何を返してんの?とをチェックしてみると...

Call to undefined function json_encode() ...

PHPのエラー出力やん(汗)。

ローカルはPHP-5.3.8、サーバーはPHP-5.2.17でPHP-5.2にjson_encode()がない? とPHPマニュアルを見てみても

PHP:json_encode
http://php.net/manual/en/function.json-encode.php

pecl入れないといけないってこと?

とりあえずZend_Json::encode()で済ますことにした。

読み込みと記述する場所

いままでは普通<head>の中でjqueryを読み込んでおいて、その後(その下のほうの行)でjqueryを使用したスクリプトを書く、みたいなのが主流だったと思う。

それが最近は

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

みたいに、bodyの最後で読み込めば読み込み処理が最適化されんじゃね?っていう流れに変わった。

普通に考えて

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script>
// ここにスクリプトを書く
</script>
</body>
</html>

となるわけだけど、フレームワークとか使ってる場合

<body>
{{ content }}
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>

なのね。

<body>
{{ content }}
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
{{ java_script }}
</body>

みたいにして任意のコードがあったら挿入すりゃいいんだけど、なるべくファイルの読み込みは増やしたくない。
そこで「ライブラリ読み込み前にjqueryを使ったスクリプトを記述できないか?」と調べた。

<script>
window.onload = function(){

$(".foo").click(function(){
    alert("OK");
});

};
</script>
:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>

呼び出しの部分をjavascriptにしておいて、ロードが完了したらjqueryを使うって感じなら行けるっぽい。