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});`

```java
//<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リストの選択された要素の取得
```html 
<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要素の削除
```java 
//要素を1つだけ選択
var option = $('.profiles > option:selected');
option[0].remove();
```

####SELECTリストにOPTION要素を追加
```java
var select = $('.profiles');
select.append('<option value="value">label</option>');
select.append('<option value="value" selected="selected">label</option>');
```
####SELECTリストで要素の選択を解除/セットする
```java
//下記は選択された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を使う

```java
<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](http://mkoryak.github.io/floatThead/)
jqueryと組み合わせて手軽にテーブルのヘッダ部分を固定化できる。この方式であればカラムの横幅もずれない。

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

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

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

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

```

[JSの正規表現サンプル](http://cya.sakura.ne.jp/js/regexp.htm#s007)