Seita's programmer notes...: jQuery

ラベル jQuery の投稿を表示しています。すべての投稿を表示

2015年3月20日金曜日

jQueryで兄弟（同列）のDomエレメントにアクセスするには？

<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>

$( "li.third-item" ).siblings().css( "background-color", "red" );

http://api.jquery.com/siblings/

2014年12月10日水曜日

jQueryでバインドさせたいファンクションにパラメータを渡すには？

jQueryでバインドさせたいファンクションにパラメータを渡すには、event.dataを使えるよう。例えば、

element.bind('click', {'id':3}, function(event) {
console.log(event.data.id);
});

のようにしてパラメータとして渡せます。

参考リンク
http://stackoverflow.com/questions/3994527/passing-parameters-to-click-bind-event-in-jquery

2014年11月7日金曜日

jQueryでブラウザで表示中のビューポートの情報を得るには？

getViewport = function() {
var $w = $(window);
return {
l: $w.scrollLeft(),
t: $w.scrollTop(),
w: $w.width(),
h: $w.height()
}
}

参考リンク
http://stackoverflow.com/questions/10324753/jquery-function-to-get-the-curren-viewport

2014年9月4日木曜日

jQueryでフォームの値をクリアするには？

// Call it on your <form>
$('form').clearForm();

http://jquery-howto.blogspot.com/2013/08/jquery-form-reset.html

jQueryでフォームのバリデートをするにはjQuery Form Validatorが便利

フォームのバリデーションをjQueryでやるにはjQuery Form Validatorが便利だ。

http://formvalidator.net/#default-validators_email

2013年11月23日土曜日

jQueryの:notセレクタは何かと便利

HTMLのエレメントでclassに何種類か設定してある場合、jQueryの:notセレクタを使ってやると便利。

<div class="someA someB" />

<script>
var divs = $('.someA:not(someB)');
</script>

みたいな感じ。

HTMLのhiddenを使わずして値をエレメントに保持する

HTMLのページで、例えばテーブルの列のIDなどを保持したい場合にhiddenなどのタグを使うと面倒くさいので、エレメントその物にデータ(ID)を保持できるのが便利。

DIVのdata-value属性を使ってやると、jQueryだとdata()で取得できる。

<div class="comment" data-value="64">

 var value = $('[div selector]').data('value');

楽ちん楽ちん。

http://stackoverflow.com/questions/6887343/jquery-cannot-fetch-the-value-attribute-of-a-div

jQueryでAjaxを使ったDataTableでちょっとハマったとこ

jQueryのDatableのプラグインで、Ajaxを使ってサーバーサイドからデータを取るページを作るのに若干ハマったとこをメモ書き。

ページでテーブルが表示されてから、何かのアクションを起こしてテーブルをサーバーサイドのデータで再描画する時、sEchoというパラメータに注意。あまり注意してなかったので、適当に1と設定していたのですが、これは描画リクエストがある度に更新してやらないと、クライアントサイドで再描画が起こらない。（キャッシュしてるのかな？）

という事なので、バックエンドではインクリメントをして返してやると、ちゃんとテーブルを描画してくれました。

string

sEcho

An unaltered copy of sEcho sent from the client side. This parameter will change with each draw (it is basically a draw count) - so it is important that this is implemented. Note that it strongly recommended for security reasons that you 'cast' this parameter to an integer in order to prevent Cross Site Scripting (XSS) attacks.

http://datatables.net/usage/server-side

2013年11月16日土曜日

HTMLのformをjQueryでsubmitさせない方法

<form id="someform">....</form>

<script>
$('#someform').submit(function(event){
event.preventDefault();
});
</script>

event.preventDefault()はイベント制御には何かと便利。

http://api.jquery.com/event.preventDefault/

jQueryとAjaxを使ってフォームのデータを送信する時、たくさんのエレメントがあると面倒くさいのでserialize()を使う。

<form id="someForm">...</form>

<script>
$.ajax({
url: 'someurl',
type: 'post',
data: $('#someForm').serialize()
}) ;
</script>

こんな感じ。

http://stackoverflow.com/questions/5004233/capture-all-of-the-forms-data-and-submit-it-to-a-php-script-jquery-ajax-post

2013年10月24日木曜日

jQueryでラジオボタンの無効化やチェックのやり方

$('#radioButtonId').prop('disabled', true);

$('#radioButtonId').prop('checked', true);

http://stackoverflow.com/questions/17057481/enable-disable-a-button-on-select-of-radio-button-in-jquery

jQueryのセレクタで複数のタグ属性を指定する使い方

例えば、

<div>

</div>

$('#divId input[type=radio][name=radio1]').prop('disabled', true);

こんな感じで、[]を複数使う。

http://api.jquery.com/multiple-attribute-selector/

jQueryのCDN

jQueryのDataTablesを使うのに、どのCDNを使えば良いか？

jQueryのDataTablesで各種ウィジェットを隠すには？

$('#tableId').dataTable({

"bFilter": false,

"bInfo": false,

"bPaginate": false

});

http://datatables.net/usage/features

jQueryのDataTablesで必要なHTMLタグの前提条件

<table id="table_id">

    <thead>

        <tr>

            <th>Column 1</th>

            <th>Column 2</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Row 1 Data 1</td>

            <td>Row 1 Data 2</td>

        </tr>

        <tr>

            <td>Row 2 Data 1</td>

            <td>Row 2 Data 2</td>

        </tr>

    </tbody>

</table>