タグ

サンプルとjQueryに関するkams3261のブックマーク (7)

  • いろんなセレクタ指定方法+α

    ずいぶん以前にセレクタについて書いたのですが、今回はセレクタの種類を抜粋して、記述例と説明書きにまとめてました。「セレクタとは?」という方は、まず下記記事を読んでみて下さい。 jQueryを使ってみよう。(基編 セレクタ1) +αというのはトラバース(走査)系のメソッドです。「この要素を抜き出したい!」と思ったときにセレクタだけでは抜き出しにくい場合があります。そういうときにトラバース(走査)系のメソッドを使うと、簡単にできたりするので覚えておくと便利なものです。 「こういう書き方をすると、こういう要素が選択される」という例で説明を添えていますが、数が多いので説明書きは、ほんとうに添えた程度です。説明だけではわかりにくいと思うので動作サンプルを用意しました。動作サンプルを眺めながら、ちらっと説明書きをチェックしてもらえれば「なるほど!」となるはず。。。ご利用ください。 jQuery セレ

  • jQueryでテーブルに行を追加する方法

    jQueryでテーブル(table要素)に行を追加する方法を紹介します。 テーブル操作は、テーブル系のjQueryプラグインで色々なことが実現できると思いますが、業務で使っているツールでこの機能がピンポイントで必要になったため自力で作りました。 単に追加するだけであれば後述するappend()とprepend()で大丈夫です。ただアニメーション表示する方法についてはネットで色々探しましたが同様の情報がなかったので試行錯誤して作りました。テーブルを操作する場合の参考になれば幸いです。 1.サンプル まずはサンプルで動作をご確認ください。 jQueryでtableに行を追加するサンプル サンプルでは行の追加・削除・全削除が行えます。 2.テーブルの先頭に行を追加する 行をtable要素の先頭に追加するには次のように記述します。 $('tbody').prepend('<tr><td>~</td

    kams3261
    kams3261 2011/11/02
    jQueryでテーブルに行を追加する方法
  • jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる

    以前に書いたjQuery事始め、という記事の 続編のような内容の記事です。基を理解 したら今度はコードを真似して体で覚えて みるのも勉強方法の有効な手の一つだと 思います。ご自分で改変して遊べる程度の 簡単なコードなのでぜひチャレンジしてみて ください。 内容はjQueryを覚えたいけどなかなか時間が無い、というWebデザイナーさん向けです。多くのプラグインやチュートリアルが存在しますが、jQueryの基中の基と少しのアイデアだけでも十分出来ることがありますので、そこまで深く追求する必要は無い気もします。 少しでもハードルが低くなればと思って、コードを真似して、そこからご自身で応用出来るような簡単な内容を記事にしてみました。今回はよくあるマウスオーバーエフェクトを作ってみます。 サンプルまずはサンプル。画像にマウスを乗せるとアニメーションエフェクトがかかります。 確認出来ましたでしょ

    jQuery事始めvol.2・画像にマウスオーバーして動作するアニメーションエフェクトを作ってみる
  • jQueryプラグイン サンプル(画像系):skuare.net

    JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via:dcdeiv/jsonslider

    jQueryプラグイン サンプル(画像系):skuare.net
  • InnerFade with Jquery | 設定サンプル

    InnerFade with Jquery | 設置サンプル ▼読込んだ画像を隠しておき、すべての画像が読込まれたら順番にフェードインしながら画像を表示していきます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"

  • syboos.jp

  • jQueryの実践サンプル集 (Part2) - gooブログ

    jQueryの実践サンプル集です。 ◆jQuery: メニュー編 jQuery: ドック型メニュー jQuery: ラバランプ型メニュー jQuery: ラバランプ型メニュー (Part2) jQuery: タブ型メニュー jQuery: ツリー型のメニュー jQuery: ツリー型のメニュー (Folder) jQuery: ドロップダウン型メニュー(水平) jQuery: ドロップダウン型メニュー(垂直) jQuery: コンテキスト型のメニュー jQuery: スライディング型のメニュー jQuery: アコーディオン型のメニュー jQuery: アコーディオン型のメニュー (Part2) jQuery: アコーディオン型のメニュー (Part3) ◆jQuery: アコーディオン編 jQuery: アコーディオン jQuery: アコーディオンメニュー jQuery: 水平型アコー

    jQueryの実践サンプル集 (Part2) - gooブログ
  • 1