VFページ jQuery

セレクタ書式

.classname クラス名による参照
#id idによる参照
#mytable tbody tr:last-child tbodyの下の一番最後のtr
input[type="checkbox"] checkbox
input[type="radio"] radio
input[type="checkbox"]:checked checkbox
input[type="radio"]:checked radio
input[attrname="xxx"] checkbox + 属性値
input.xxx[type="checkbox"] xxxはクラス名

ノードの値参照

$(#セレクタ書式#).val();

ノードの値設定

$(#セレクタ書式#).val('値');

属性値の値参照

$(#セレクタ書式#).attr('id');

カスタム属性値(data-xxxx)の値参照

$(#セレクタ書式#).data('xxxx'); //xxxxには data- は含まない

スタイルの設定

$(#セレクタ書式#).css('display', 'block');

クラスの追加

$(#セレクタ書式#).addClass('has-error');

クラスの削除

$(#セレクタ書式#).removeClass('show');

クラスのtoggle

$(#セレクタ書式#).toggleClass('hide');

イベントハンドラの追加

$(#セレクタ書式#).on('click', function (){xx});

//<select>タグ変更時のハンドラ
var picklist = $('.form-group').find('select');
picklist.on('change', function (){
    //処理
    this.value;   //選択された値
});

<div class="form-group">
  <select class="form-control" name="input_{!itemValue.itemNo}" id="input_{!itemValue.itemNo}">
    <apex:repeat value="{!itemValue.picklist}" var="choice">
      <option value="{!choice}">{!choice}</option>
    </apex:repeat>
  </select>   

Checkboxのチェック

$(#セレクタ書式#).prop('checked', true);

Checkboxのチェック有無

if ($(this).is(':checked')) {

Checkbox/Radio チェックされた要素の取得（戻り値は配列）

$親要素.find('input[type="checkbox"]:checked')
$親要素.find('input[type="radio"]:checked')

SELECTリストの選択された要素の取得

<apex:selectList styleClass="profiles" size="5" multiselect="false" style="width:200px">
    <apex:selectOptions value="{!allProfileOptions}"/>
</apex:selectList>

$('.profiles > option:selected');

SELECTリストの全要素の取得

$('.profiles> option');

SELECTリストのOPTION要素の削除

//要素を1つだけ選択
var option = $('.profiles > option:selected');
option[0].remove();

SELECTリストにOPTION要素を追加

var select = $('.profiles');
select.append('<option value="value">label</option>');
select.append('<option value="value" selected="selected">label</option>');

SELECTリストで要素の選択を解除/セットする

//下記は選択されたOptionを取得した後に解除している
var selectedOption = $('.selected_profiles > option:selected');
selectedOption.prop("selected", false) //解除

selectedOption.prop("selected", true)  //セット

ボタンのラベル名変更

$(#セレクタ書式#).text('xxx');

ボタンの無効化

$(#セレクタ書式#).attr('disabled',true);

参考

pure JSでのCSS styleの設定
document.getElementById('xx').style.display = 'none';

Cookie

Jquery cookieを使う

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

//Cookieの参照
var jsonstr = $.cookie('apex__xxxx'); //xxxxはCookie名
var cookieValue;
if (jsonstr!=null){
    cookieValue = JSON.parse(jsonstr);
}

//削除
$.removeCookie('apex__xxxx', { path: '/' });

テーブルのヘッダを固定する

jquery:floatThead
jqueryと組み合わせて手軽にテーブルのヘッダ部分を固定化できる。この方式であればカラムの横幅もずれない。

<table id="tableTab1" ...>
 <thead>
  ・・・
 </thead>
 <tbody>
  ・・・
 </tbody>
</table> 

//to fix table header
j$('#tableTab1').floatThead();

//reflow the table header
j$('#tableTab1').floatThead('reflow');

//remove fixed header
j$('#tableTab1').floatThead('destroy');

JSの正規表現サンプル