★jQuery

アコーディオンパネル

アコーディオンパネル 縦・横の限られたスペースに複数のコンテンツを繰り返し表示させたいときに利用する HTMLの構造 すべての要素を表示 GoogleMapのiframeは、最後に挿入 class名、id名は適宜追加します <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <title>jQueryを使ったアコーディオンパネル</title> </meta></meta></head></html>

スライダー - bxslider

bxSlider スライドショーを手軽にWebページ内に設置できるスライドライブラリ ulでもdivでもスライダーが使える スライド動作も3種類選べる カルーセルタイプにすることも可能 bxSliderをダウンロード 読み込んで利用 <link rel="stylesheet" href="css/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="js/jquery.bxslider.js"></link>

thisキーワード と readyイベント

thisキーワード JavaScriptの予約語 thisは、標準の要素オブジェクト jQueryメソッドにアクセスするには、「$()関数」で「this」をラッピングする必要があります 「$()関数」を利用することで、標準の要素オブジェクトをjQueryオブジェクトに変換できます そ…

イベントが発生した要素を取得

イベントが発生した要素を取得 サムネイルをホバーしたとき メイン画像の「src」と「attr」の値を取得して 指定された値に置き換える(スワップイメージ) <html lang="ja"> <head> <meta charset="UTF-8"> <title>マウスによる画像置換</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <p><img src="img/00.jpg" alt="" id="mainImg"></p>…</div></body></html>

イベント

イベントとは ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります ユーザーイベントは、キーボードやマウスを操作することで実行されます ブラウザイベン…

実践的なメソッド

hide()メソッド 表示されている要素を非表示にする 引数がない場合は、即座に非表示 キーワードは、「slow」「normal」「fast」のいずれかを記述 秒数で指定する場合は、「1000」が1秒 <html lang="ja"> <head> <meta charset="UTF-8"> <title>hide()メソッド</title> <style> .box {width: 300px; height: 300px;} #hide1 {ba</meta></head></html>…

HTML/CSSを操作する

HTML/CSSを操作するjQueryの命令 どのHTMLの要素を操作するか指定する(セレクター) 操作する内容(命令) jQueryの命令 テキストの変更と取得 HTMLの変更と取得 HTMLの挿入 HTMLの移動 他の要素で包む 親要素を取り除く 要素の置き換え 要素の削除 属性値…

jQueryとは

jQueryとは よく使うJavaScriptを簡単に使えるようにしたもの JavaScriptのライブラリのひとつ HTMLやCSSを操作して、要素・属性・スタイルを追加・変更・削除できる 要素に対してアニメーションできる 主要なブラウザをサポート(ブラウザ依存を気にしなく…

ハンバーガーメニュー - jQuery

ハンバーガーメニュー - jQuery jQueryでクリックイベントを作成する場合 jQueryでクリックイベントを作成する場合 ボタンのアニメーションは、CSS3で設定 HTML記述例 <header class="header"> <h1><span>info</span></h1> <div class="menu"> <p id="btn"><span id="hum"></span></p> </div> <nav class="gnav"> <ul> <li><a href="../index.html">HOME</a></li> <li></li></ul></nav></header>