webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

jquery

.animate(); 1

ボタンをクリックしたら、表示してある width: 100px、height: 100pxの正方形が1,000px 移動して止まるように記述する。duration=600ms html <html lang="ja"><head><meta charset="utf-8"><title>Q2</title><style>.box{ width: 100px; height: 100px; background: #777; line-height: 100px; text-align: center; color: white</style></meta></head></html>…

tab panel 手順2

<script>$(function(){ $('#panel li').hide(); $($('#tab>li a.selected').attr('href')).show(); });</script> $('#panel li').hide(); パネルの li をすべて隠す $($('#tab>li a.selected').attr('href')).show(); ul(#tab) 子供の li の.selectedの<a>のhref属性=つまり「#t</a>…

tab panel 手順1

タブパネルを作る 手順1 ulを2組、id をそれぞれ'tab'と'panel'にする。そして2つのul をcontainerで囲う。 ul #tabの li に<a href="#tab1">を書き足す。 ul#panelの li に id=tab1 をくわえる。 ここが仕掛けの肝です。 <body><div id="container"><ul id="tab"><li><a href="#tab1">html</a></li><li><a href="#tab2">css</a></li><li><a href="#tab3">javascript</a></li><li></li></ul></div></body></a>

insertBefore before insertAfter after

$('A').insertAfter('B'); AをBの後ろに挿入。B,Aの順番。 $('A').After('B'); Aの後ろにBをおく。A,Bの順番。 beforeとinsertBeforeも同じ関係 <html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, ul, li, button{ margin…</meta></meta></head></html>

after before

$('A').after('B'); AのafterにB わかりづらい…が、基準(A)の後にBを持ってくると覚えるしかない。

append prepend appendTo prependTo

<html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery</title><style>html, body, p, button, ul, li{ margin: 0; padding: 0; line-height: 2.0;}#container{ width: 480px; margin: 50px auto;}button{ cursor: pointer;}u…</meta></meta></head></html>

appendTo prependTo

$('A').appendTo('B'); AをBの後ろに持っていく。 いますでに存在しているところの、AをBの後ろに移動する。 B Aの並びになる。 $('A').prependTo('B'); AをBの前に持っていく。 ちなみに、$('A').append('B');は、AにBをappend する。 Aの最後にBを持ってい…

append prepend

$('A').append(B); Aにくっつける。 Aに添える。なにを?Bを。 A(主体)にBを添える。 AのあとにBがくっつく。 $('A')prepend(B); Aの前に足す。なにを?Bですよ。 Aの前にBを持ってくる。 どちらも「新たに作ったもの」を挿入する、意味。

jQuery で console.log();

functionの中に、以下のように記述すれば良い。

toggle 画像置換

.toggle() 新しいバージョンではサポートされないメソッド。 jquery-migrate-1.3.0.min.jsをリンクすれば、過去のメソッドも使えるようになる。 <script src="js/jquery-2.2.3.min.js"></script><script src="js/jquery-migrate-1.3.0.min.js"></script> toggleさせたい関数を、.toggle(function(){ここの中に}); 列挙する。 <script> $(function(){$('img').toggle(functio…

.mouseover .mouseout 画像置換

2枚の画像を置換する html <body><div id="imgArea"><img src="img/ph01.jpg" alt="ph01" id="ph01"></div></body> jQuery のリンクがないまま、30分がんばってしまいました。 <div>にはsrcがないから、これではダメ。 <script>$(function(){ $('#imgArea').mouseover(function(){$('#imgArea').attr('src','img/ph02.jpg')}) .mouseout(function(){$('#img</div>…

アコーディオン 再び

手順の整理 1番先頭、以外のddは閉じる(hide) dtがクリックされたら クリックされた隣のddが閉じているならば すべてのddを閉じて クリックされた隣のddを開く 以上の5段階。 さらに、開いているddの上にあるdtの色を変える。 addClass, removeClassでcs…

ul でアコーディオン

html ここでのマークアップがすべてです。 クラス名の付け方にもセンスが必要です。 <div class="accordion"><ul class="nav"> <div class="category">家具・インテリア</div><ul class="menu"><li><a href="#">ソファ</a></li><li><a href="#">ベッド</a></li><li><a href="#">テーブル</a></li><li><a href="#">チェア</a></li></ul> <div class="category">ステーショナリー</div></ul></div>

jQuery 復習 定義型リスト で アコーディオンメニュー

定義型リスト をセンタリングする。 dl にはwidth を指定する dt には cursor: pointer; でクリックできるように見せる。 リストをbody のセンターに配置しようと思うならば、↓ではダメですね。 dt, dd の親は dl だから、親に対するセンターになってしまい…

jQuery 復習 箱で遊ぶ

一週間の復習。箱を作って、クリックすると閉じて見えなくなるようにする。 高さがなくなるから、再びslideDownしようがない… また、jQuery のファイルとのリンクを間違えてロスタイム。 「../」では1階層外に出てしまう。 index.htmlとjQuery の入っている…

jQuery アコーディオン

http://ohtafelica.webcrow.jp/20160519/index02.html Definition Listをつくる。 CSSを使って、形を整える。 dtのfont-weightを太くする。 ddには、適当な高さを設定しておく。 <dl><dt id="menuA">menu A</dt><dd>ここにメニューAの内容が入ります。</dd><dt id="menuB">menu B</dt><dd>ここにメニューBの内容が入り</dd></dl>…

traversing

Traversing | jQuery API Documentation

$('+dd',this) セレクタの第2引数について

セレクタで選んだ要素を、jQueryオブジェクトに変換する。 取得した要素に、メソッドで処理をする。 $('セレクタ','コンテキスト').メソッド(''); contexの意味がわかりませんが… $("A","B")というのは、どうやらBの中のAということ、らしい。 対象(オブジ…

jQuery クリックすると箱の状態が変わる

http://ohtafelica.webcrow.jp/20160519/index01.html 箱を3つ作ります(初期状態) 冒頭からつまずく。原因は、#div1{margin-left: none;} という記述。 noneは使えません。 <body><div id="container"><div id="div1" class="box">div1</div><div id="div2" class="box">div2</div><div id="div3" class="box">div3</div></div> jQueryを使って、箱を操作する。(最終形) まず、$(fun…</body>

jQuery セレクターのまとめ 3

擬似クラス これまでは、放置していた言葉の定義をこの辺りできちんと理解しておきたいところですが… いったい、要素に対する「擬似クラス」とは、なにか? 要素の、状況に応じたクラス分け。定まっていない、状況に対するクラス分け。 正式なクラスは「.(…

jQuery セレクターのまとめ 2

<div id="container"><dl><dt class="top">111</dt><dd class="top">222</dd><dt class="middle">333</dt><dd class="middle">444</dd><dt class="last">555</dt><dd class="last">666</dd></dl></div><script>$(function(){$("dl>dd").css("color", "red");});</script> 子セレクター $("dl>dd").css("color", "red");と記述すると… dl…

jQuery セレクターのまとめ 1

HTMLの要素をダイレクトに指定する方法 <h1><p>などを指定する。$("h1") , $("p") ID名がついた場合。例えば、<div id="wrapper">、を指定するには、$("#wrapper") Class名がついた場合。<p class="first">を指定するには、$(".first") とにかく、$("要素名、要素に対するID,またはクラス名") このあた</p></div></p></h1>…

dreamweaver で jQuery を使うための準備

ダウンロードした3個のファイルを「js」と名前をつけたフォルダーにしまう。 この「js」フォルダーを、新規作成した「jquery」フォルダにしまう。 「jQuery」をルートフォルダにして、「新規サイト」を作る。 参照する jQuery のファイルのアイコンをドラッ…

jQuery を使うための下準備

jQuary=JavaScriptのためのクエリー。 jQuaryには「1」系統と、「2」系統がある。 「1」系統はIE8に対応している。 クライアントの要請で必要なときはこちらを使う。 「2」系統よりも読み込み速度が遅い。 通常は「2」系統を使う。 「2」系統を使うとI…