So-net無料ブログ作成
検索選択

JQuery マウスオンイベント [jquery]

JQueryでマウスオンの処理は以下のように記述できます。

$("a[name='pl']").hover(
   function(e) {
      ・・・マウスオンした際の処理を記述
   },
   function(e) {
      ・・・カーソルを外した際の処理を記述
   }
);

以上です[眼鏡]

JQuery スクロール移置の取得と設定 [jquery]

画面もしくはoverflowしたdiv要素のスクロール移置を取得または設定します。

取得
id="pllist"(divです)の縦スクロールの位置を取得します。
var nVal = $("#pllist").scrollTop();

設定
id="pllist"(divです)の縦スクロールの位置(200)を設定します。
$("#pllist").scrollTop(200);

ページ移動前に位置を取得しパラメータとして持ちつつ、再びそのページに戻ってきた際に、
位置を設定すれば、前のスクロール移置を保持することができます。
以上です。[野球]



JQuery 動的に追加された要素のイベント [jquery]

javascript等で動的に追加された要素のイベントを拾うにはonを用いる必要があります。

JQueryなどで画面表示後に追加された要素に対して
以下のようにイベントを拾おうとしてもダメでした。
$("a[name='alink']").click(function() {
…処理を記述…
});

動的に追加された要素に対してonイベントで以下のように書くとイベントが拾えました。
$(document).on("click", "a[name='alink']", function() {
…処理を記述…
});

以上[駐車場]


jQuery入門道場

jQuery入門道場

  • 出版社/メーカー: 株式会社フェンドーラ
  • 発売日: 2014/01/19
  • メディア: Kindle版



nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感

JQuery eachで要素取得 [jquery]

ページ上にある要素を一括して取得し、一定の処理をする方法を書きます。

以下は、id名に"chk_"が含まれるcheckboxを取得し、その内のチェックONのものをカウントしています。

$("input[id^='chk_']").click(function(){ ---①
   var chkcnt=0;
   $("input[id^='chk_']").each(function(){ ---②
      if ($(this).prop("checked")) { ---③
         chkcnt++;
      }
   });
   $("#number").html(chkcnt); ---④
});

①id名に"chk_"が含まれるcheckboxがクリックされた時にイベント発生。
②ページ内のid名に"chk_"が含まれるcheckboxに対して一定の処理を行う。
③対象がチェックONかどうかの判定。
④カウント数をid=numberの要素に表示

色々はまりましたが、上手くいきました。以上[ふらふら]

nice!(1)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感

jqeury セレクタ [jquery]

よく忘れるjquery, cssのセレクタを自分用に記入します。

このサイトから学びました。感謝です。
http://weboook.blog22.fc2.com/blog-entry-268.html

要素名前で検索
$("a[name='link']").click(function(){ … }

要素名前の前方一致
$("a[name^='start_']").click(function(){ … }

要素名前の後方一致
$("a[name$='_end']").click(function(){ … }

要素名前に指定した文字が含まれる
$("a[name*='_middle_']").click(function(){ … }

上記はリンクをクリックした動作を書きたい時に利用しました。
idで指定してもいいのですが、同じリンクを複数持ちたかったため、idではなくname属性からの動作を記入しました。
以上[サッカー]


nice!(0)  コメント(0)  トラックバック(0) 
共通テーマ:日記・雑感