JavaScript $.ajax(jQuery)とfetch APIを使ってsvgを外部ファイルとして読み込む
jQueryJavaScriptsvgをcss3のアニメーションで動かす場合、下記のようにsvgファイルのコードをインラインでbody内に入れる必要があります。<body><svg class="likeButton" width="500...
jQuery
JavaScript jQuery jQueryを記述する上で気をつけるポイント
jQueryjQueryはライブラリーという性質上、どうしても動作が重くなってしまいます。PCではあまり気にならなくても、パフォーマンスの低いスマートフォンでは読み込み速度が遅くなる、という事が良くあります。jQueryを適切に記述する事で...
jQuery jQuery演習問題2
jQuery【問01】「変更」ボタンを押したら、p要素のテキストが変更するよう記述しなさい。【変更前】初めまして 【変更後】よろしくお願いします【問02】「変更」ボタンを押すたびに、p要素のテキストが繰り返して変更するよう記述しなさい。【...
jQuery jQuery演習問題
jQuery【問1】「変更ボタン」をクリックしたら、300pxの正方形の背景色が1秒掛けて青から赤に変更するアニメーションをcssとjqueryの両方を使い作成しなさい。【問2】「移動ボタン」をクリックしたら、300pxの正方形の背景色が1...
jQuery アコーディオンパネルの作成
jQuery今回は、パネル部分が展開されると他のパネル部分は閉じるようにしたいので、「開いているパネル部分以外のパネル部分は閉じる」という命令が必要です。$('ul').not($(this).next('ul'))という記述で、複数あるu...
jQuery jQueryでクリックする度にテキストを切り替える
jQueryjQueryでテキストを変更するには「.text()」を使用します。<script>$(function(){$('#btn').text('閉じる');});</script></head><body><p id="btn">...
jQuery Traversingメソッドを使ったタブパネルの作成
jQueryTraversingメソッドを利用Traversingのメリットトラバースを利用することで、イベントが発生した要素に関連した要素を操作する事ができます。ボタンが複数ある場合などは「this」を使う事になりますが、このトラバースを...
jQuery スクロールしたら、ナビゲーションを固定する
jQueryスクロールイベント今まで授業では、要素が読み込まれたら動くという「$function」とクリックしたら動くという「on.click」イベントの2つを主にやってきましたが、今回はそれに加えてウィンドウをスクロールしたら動く、「スク...
jQuery jQueryを使ったajax
jQueryAjaxとは「Asynchronous（エイシンクロナス）JavaScript+XML」の略です。簡単に言えばJavaScriptとXMLを使って非同期にサーバとの間の通信を行うことが出来ます。通常Webページの内容を変更するた...
jQuery ページ内リンクへのスムーススクロール
jQuery通常であれば以下の記述で良いのですが、以下の記述では「#」がついているアンカーポイントには全てスムーススクロールでリンクされてしまいます。#がついている全てにスムーススクロールさせる場合$(function(){ // #で...