ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

jQuery

jQuery008 スクロールボタン

スクロールボタン ■考え方 とある酒屋さんのコンテンツを想定した場合 ・画面をローディング時、「offsetメソッドで高さを取得」し変数へ入れる。 ・クリックイベント時、animate({scrollTop: topOffset }で、取得した高さまで移動する。※注意として、ready…

jQuery007 カルーセル「Slick」

カルーセル「Slick」 ■メモ ・RWD対応してるプラグイン ・カスタマイズが楽。css,jsなど必要なものはマスターからコピーして所定のディレクトリで管理。それに合わせてパス修正。 ・.slider,.slick-slideクラスあたりでcssを整える。 ・埋め込みは外部ファイ…

jQuery006 モーダル「Lightbox」

プラグイン「Lightbox」 公式よりDL。 Lightbox サンプルのindex.htmlがあるため、使いやすい形に修正する。 今回は画像はサムネイルとメインの2つを用意。 ■コード html <html lang="en-us"> <head> <meta charset="utf-8"> <title>Lightbox Example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </meta></head></html>

jQuery005 スライダー「bxSlider」

プラグイン「bxSlider」 ■インストール(公式抜粋) Step 1: Link required files →HTMLでjQuery,bxsliderjs,cssを読み込み Step 2: Create HTML markup →スライドさせたいイメージをマークアップ。 Step 3: Call the bxSlider →.bxsliderクラスに対してslid…

jQuery004 要素内外への要素挿入(prepend,append,before,after)

要素内外への要素挿入(prepend,append,before,after) ■ポイント ・対象要素の外側:before(); afret(); ・対象要素の内側:prepend(); apend(); ・テキストの変更:text();■コード <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの基本</title> <meta name="description" content=""> <link href="css/style.css" rel="stylesheet"> </link></meta></meta></head></html>

jQuery003 表示・非表示のメソッド

表示・非表示のメソッド ■ポイント ・主要なメソッドの種類 hide,show slideUp,slideDown toggle fadeIn,fadeOut ・時間の指定 ('slow'),('2000') ・アニメーション実行中は次の処理を受け付けない $('#box:not(:animated)').slideUp('2000');■コード html埋…

jQuery002 アコーディオン

アコーディオン ■ポイント ・利用:Google CDN: jQuery 1.12.4 ・N件同一要素がある中で、クリックされた箇所の要素の指定の仕方 ※隣接セレクタの使い方 ※$('+dd',this)、$(this).next()、etc... ・選択中の要素に色をつける(クラスを付け外しする) ※addCl…

jQuery001 セレクタ指定

セレクタ指定 jquery/1.12.4/jquery.min.jsあとで整理します。^:〜から始まる $:最後がvalueで終わる→[attribute$=’value’] gt:greater than attr:アターって読む。 ・JavaScriptはhtml操作、jQueryはcssの操作、必要に応じincludeの中身いじって軽量化 …