jQuery

【Javascript】スクロールに追随する要素を簡単に実装できるjQueryプラグイン。

これはまじで便利。

http://leafo.net/sticky-kit/

親要素も適切に判別できるし超素敵。

今度自分のサイトで試してみよう。

 

【jQuery】セレクタでAND条件を指定する。

めも。

「+」演算子を用いることで可能。

// classがhogeかつIDがpiyoの要素を取得したい場合
$('.hoge' + '#piyo');

と言った感じ。
めちゃくちゃ便利。

 

【jQuery】オブジェクトをクエリストリングに変換する。

メモ。

var query = {
	one: 'first',
	two: 'second'
}

var qstr = $.param(query);

console.log(qstr);

↓

one=first&two=second

これはめちゃくちゃ便利。

 

【jQuery】idにドット(ピリオド)が含まれる要素の取得方法。

w3の定義だとidにピリオドを含めることは可能。

http://www.w3.org/TR/REC-html40/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (“-“), underscores (“_”), colons (“:”), and periods (“.”).

例えば下記のような要素を取得したい場合。

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

下記のいずれかで取得可能。

$('#hoge\\.piyo').text();
$('[id="hoge.piyo"]').text();

覚えておくと便利。

 

【jQuery】要素の高さを揃えるライブラリ?、jquery.tile.js。

高さ統一プラグインその?。

http://file.urin.take-uma.net/jquery.tile.js-Demo.html

$('.selector').tile();

とてもシンプルかつ強力なプラグイン。

 

【jQuery】ブロックの高さを揃えてくれるライブラリ、jquery.heightLine.js。

ブロックの要素を揃えたい時に是非。

公式は下記URLを参照

http://blog.webcreativepark.net/2013/10/21-112000.html

利用方法は、jQueryとライブラリ本体を順番に読み込み、下記の通り使う。

$('.class').heightLine();

これで「.class」というクラスがふられている要素の高さが全て統一される。

 

【jQueryUI】テキスト選択を無効にする。

メモ。

■HTML

<p id="disable-selection">
テキスト
</p>

■Javascript

$(function(){
    $('#disable-selection').disableSelection();
});

これでマッチした要素集合のテキスト選択を無効にすることが出来る。
DragableやSortableと併せると、ユーザービリティ的にグッド。

 

【jQueryUI】リスト要素をドラッグしてソートさせる。

jQueryUIのSortableWidgetを用いる。

公式は下記URLを参照。

http://jqueryui.com/sortable/

記述方法は簡単。下記の通り。
※予めjQueryとjQueryUIを読み込んでいる必要あり。

■HTML

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

■Javascript

$("#sortable").sortable();

APIドキュメントは下記URLを参照。

http://api.jqueryui.com/sortable/

Ajaxと組み合わせて使うといろいろと便利。