ColorFullWeb

カラーがフルな情報配信ブログ。Web関係多め。

【javascriptパターン】よく使うメソッド、パターン【jQuery】

time 2013/04/06

title.js

こんにちわ。@i_saku39です。
jQueryでブラウザウィンドウ幅めいっぱいに要素を並べたコンテンツスライダーを設置する実験というコードを読んでいまして、
「よく使う処理をまとめといたら後で使えて便利だ!」と思い記事にすることにしました。
今回は備忘録の要素が強いので興味のある方はご覧ください。

ul要素のサイズ取得方法


//リストひとつのwidthを取得
var listWidth = $('ulのラップ名').children('ul').children('li').width();
//リストの数を取得
var listCount = $('ulのラップ名').children('ul').children('li').length;
//ul全体のwidthを取得
var ulWidth = (listWidth)*(listCount);

まぁ実際は、$(‘ulのラップ名’)の部分は変数で扱うことが多いと思います。

jQueryセレクタさまさまです。

基本的ですがこれを応用すればいろいろな要素のwidthが取れそうですね

 
 
 

セレクタの検索方法

//検索範囲を変数に
var kensakuObj = $('検索したい範囲');
	//検索部分
	var one = kensakuObj.find('.select-one');
	var two = kensakuObj.find('.select-two');
	var three = kensakuObj.find('.select-three');

変数に入れなくても検索できますが、複数検索の時大変なので。

eachとか使う場合は‘検索したい範囲’は可能であればthis使ってみてもいいんじゃないでしょうか。

これも結構使ってるプラグイン結構あります。(当然なのかもしれないですけど)
一つずつ検索していく方法もありますが、その場合、いちいち最初から探してしまってパフォーマンス落ちることもあるみたいですからなるべく注意したいところです。

 
 
 

自動処理方法(setInterval)

setInterval(function(){
	処理する場所.関数名();
},秒数(数値指定));

処理する場所.関数名();の部分に他で作成した関数を入れていいなんてわかんなかったんです。

処理を全てこの中に書いていました。ああ。。はずかしい//

書くほどではないのかもしれませんが、
javascriptの触り始めの頃の自分はこの記述方法が呪文にしか見えなかったのです。

 
 
 

ホバー系処理

//初期不透明度設定
var defaultOpacity = 0.5;
//初期CSS設定
		$('Hover処理部分').css({opacity:(defaultOpacity)}).hover(function(){
//Hoverした時の処理
			$(this).stop().animate({opacity:'1'},100);
//Hoverから外れた時の処理
		}, function(){
//そのあとの処理
			$(this).stop().animate({opacity:(default)},100);
		});

もちろん大事なのは.stop()です。

これないと死にますw(経験済み)

.stop()の説明は割愛させていただきますので、
ご存じない方はググってみてください。

 
 
 

次回は

title.next
 
カウント系の処理とかスライドの基本動作とかまとめます。
では、近いうちにノシ

down

コメントする