Jqueryで簡潔にコードを記述する方法

Question

Jqueryを用いて、セレクターで取得した要素に対し、CSSとAttributesのAPI
を使用したいのですが、簡潔に記述出来る方法はなにかありますか？
コードが多い場合、ステップ数が増加し、可読性の低いソースとなってしまいます・・・。
コード例は下記になります。

【html】
<span> hoge </span>

【js】
`

<script> $('span').css('color','red'); $('span').text('fuga'); </script>

`

Answer 1

Jqueryではメソッドチェーンというものが使用できます。
下記の様にドットでつなげてください。同じ結果となります。

`

<script> $('span').css('color','red').text('fuga'); </script>

`

また、ご質問者様のコードですと、同じ要素を二回取得しオブジェクト
を作成しているので無駄なステップだけではなく、無駄な負荷にもなります。
おっしゃるとおり２回程度でしたらよいですが、これが何十回、何百回も続くと無駄です。
下記のように変数に格納することもできますが、こちらは無駄なステップですね。
`

<script> var span = $('span'); span.css('color','red'); span.text('fuga'); </script>

`

ということで、コーディングする際は負荷のことも考えられれば
Goodです。

Answer 2

アトリビュートばかり、CSSばかりを同じセレクタで多数指定する場合、オブジェクトとして一気に指定可能です。

`
$("#id").css({left:40, position:'absolute'});

$('.class').attr({title:'ほげ', src:'/path/to/file'});
`