めも。

単に要素内に特定の値を持つノードを選択したいのであれば、下記のように「:contains()」を用いれば拾える。

■HTML

<div data-hoge="fuga">piyo</div>

■jQuery

$(function(){
	var elem = $('div:contains("piyo")');
	console.log(elem.data('hoge'));
})
[console]
fuga

これをどうにかごにょごにょして、data属性に特定の値を持つノードを選択できないかと色々調べてみたけれど、結局以下のようにするしかなさそう（？）な感じがした。

■HTML

<div data-hoge="fuga">piyo</div>

■jQuery

$(function(){
	var elem = $('[data-hoge="fuga"]');
	console.log(elem.text());
})
[console]
piyo

とりあえず動作は問題ないけど、もっとスマートな記述方法はないだろうか。属性セレクタはパフォーマンスがクッソ重いからなるべくなら使いたくないところ。
見つけたらもっかいまとめよう。

ブログなどの画面をスクロールしていると、読み終わるころにぴょこっと右下からお勧め記事が出てきたりする際にやってるやーつー。

いたって実装は単純。

$(function(){
	// 処理実行の引き金となる要素を設定
	var target = $("#target");
	$(window).scroll(function(){
		// 実行のトリガーになる要素のオフセット（一番上からの距離）から
		// 画面の縦幅を引いたものを処理実行までの距離とする（画面の下端を基準に設定）
		var tPos = $(target).offset().top - $(window).height();	
		// スクロールされた長さが上記で求めた距離を越えた場合、処理を実行
		if ($(window).scrollTop() >= tPos) {
			// 処理を記述
		}
	});
});

以下関数の解説。

■scroll()
画面のスクロールをトリガーに処理を実行する。

■offset()
指定した要素が可視状態の場合（display:noneとかじゃない）、ドキュメント内最上端から指定要素上端までの距離を取得する。

■height()
指定した要素の高さを取得する。$(window).height()の場合、現在の表示領域（画面の高さ）を返却する。

■scrollTop()
ドキュメントの最上端から現在までにスクロールされた距離をピクセルで返却する。

これらの関数を用いれば、ユーザー操作に連動したダイナミックな処理を簡単に実装することが出来る。
例えばフッターをターゲット要素に設定した場合、自動で次ページを取得しDOMに追加するといった、オートページャー的処理も簡単に行えちゃうのである。

という自分的大発見！

こいつはいったい何を言っているんだ？と言わずにまぁ落ち着いて。

例えば。

$(function(){
	var elem = $('<div>');
	$('body').append(elem);
})

2行目でやってることが、タイトルで言ったまんまの操作。jQueryのセレクタ指定部分にタグを渡している。
すると変数elemには内部的に「<div></div>」を保持していることと同等になる。
なので3行目でbodyに対してappend()を行うと、そのままbodyタグ内に上記のdiv要素がそのまま挿入されることになるのである。これは近年まれに見る世紀の大発見。

しかも第2引数にオブジェクトを渡すことでアトリビュートの設定も出来てしまうという神仕様。

$(function(){
	var elem = $('<div>', {'id':'hoge', 'class':'piyo', 'data-foo':'fuga'});
	$('body').append(elem);
})

例えば上記のようにオブジェクトを渡してやった場合、変数elemは内部的に以下のHTMLを生成してくれている。

<div id="hoge" class="piyo" data-foo="fuga"></div>

素晴らし過ぎるjQuery。これはもうやめられない。止まらない。

かっぱえｂ（ｒｙ

めも。

例えばdiv要素の配下にhogeというテキストが存在している要素を選択したい時。

<div id="piyo">hoge</div>

以下のような記述で要素を指定する事が出来る。

var elem = $('div:contains(hoge)');
var id = $(elem).attr('id');
console.log(id);
↓
piyo

これは相当便利。
てかjQueryマジ便利。