Posts Tagged ‘jQuery’

このページの目次

jQueryの.load()がブラウザによって挙動がまちまち

金曜日, 5月 28th, 2010

こんにちは、なかわけです。

jQueryの.load()の挙動がブラウザによってまちまちです。
実際、どんな感じか。

index.html

<html>
<body>
<div>
    <a href="hoge.html">hoge</a>
    <a href="fuga.html">fuga</a>
    <a href="piyo.html">piyo</a>
</div>
</body>
</html>

deploy.html

<html>
<hed>
<script src="jquery.js"></script>
<script>
$(function(){
    $('div').load('index.html div a', function(){
        alert('ヾ(*´∀｀*)ﾉロードできた～');
    });
});
</script>
</head>
<body>
<div></div>
</body>
</html>

で、主なブラウザ挙動は以下のような感じ。
Firefox
hoge、fuga、piyoのリンクが出力されて、アラートが2回

Chrome
なにも出力されずに、アラートが1回

Safari
hoge、fuga、piyoのリンクが出力されて、アラートが1回

この結果からみるとSafariの挙動が正しいっぽいけど、
なんでこうもまちまちなのかね～。
jQueryには珍しくブラウザ間の差が吸収されていないのでしょうか。
詳しい方、コメントくださいな！（いつもすいません・・・。）

Tags: ,
Posted in JavaScript | No Comments »

ロード直後にラジオボタンを選択するjs（jQuery）

木曜日, 5月 27th, 2010

こんにちは、なかわけです。

タイトルのことをしようとすると以下のようなコードになると思います。

HTML

<input type="radio" name="sweets" value="1"/> チョコレート
<input type="radio" name="sweets" value="2"/> チョコラーテ
<input type="radio" name="sweets" value="3"/> ショコラ

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック    
    $('input:first').click();
});

このままでもラジオボタンのひとつ目は選択されますが、
Buono!は出力されません。

これを以下のように変更するとBuono!も出力されてラジオボタンのひとつ目も選択されます。

Java Script

$(function(){
    //ラジオボタンにchangeイベントを結びつける
    $('input').change(function(){
        console.log('Buono!');
    });
    //ラジオボタンのひとつ目をクリック :ここを変更!   
    $('input').get(0).click();
});

はい、これで期待した挙動にはなりましたが、なぜでしょう？
なぜなぜ？
:firstとget(0)の挙動の違いなんでしょうけど、私にはわかりません・・・。
理由がわかる方コメントいただけると助かります。

Tags: ,
Posted in JavaScript | 2 Comments »

jQueryの.is(expr)にはめられた

月曜日, 11月 9th, 2009

こんにちは、なかわけです。

今日はjQueryの.is(expr)にはめられました。
実装したかったのはoption要素にselected=”selected”があれば、
ある処理をするというもの。

$(function(){
    if($('select option').is('[selected="selected"]')){
        console.log('exist');
    }else{
        console.log('not found');
    }
});

<select>
    <option value="0">Chocolate</option>
    <option value="1" selected="selected">Donut</option>
    <option value="2">Ice cream</option>
</select>

これを実行するとコンソールに’not found’が表示されます・・。
悩んだ挙句、後輩に相談。

どうやら、.is()はoption要素3つに対して判別を行っていたらしく、
false, true, falseが戻っていたらしく、
3番目のfalseがif()にかけられて’not found’が表示されていたようです。

ちくしょー。

で、とりあえず今回は selected=”selected”があるかないかだけ知りたかったので、
以下のように書いて対応しました。

$(function(){
    if($('select[name="nationality"] option[selected="selected"]').length){
        console.log('exist');
    }else{
        console.log('not found');
    }
});

自分が未熟なのがいけないんだけど、よくこういう問題にはめられる気がする・・・。
頼りない先輩ですまん・・・(´・ω・｀)

Tags: , ,
Posted in JavaScript | No Comments »

jQueryの.children()と書き方

水曜日, 7月 1st, 2009

こんにちは、なかわけです。

仕事中にjQueryの書き方がわからなくて後輩に聞いてみた。すぐ返答が来た。

$('ul').each(function(){
    $(this)
        .children('li:odd')
        .addClass('colored');
});

.children()に引数を渡して要素を指定できたんですね。知らなかった。

あと、$(this)のあとにチェーンする場合は、メソッドごとに改行した方が処理が早いんだって。
納得いかない。なんで？

Tags: ,
Posted in Ajax, JavaScript | 3 Comments »