jQuery

Webサイト制作におけるjQueryのプラグイン(設置)に関するまとめ

先日、訓練におけるWebサイト制作の発表が終わったので、授業が次のステップに進む前に今回のWebサイト制作において用いたjQueryのプラグインについてまとめておく。私が用いた主なjQueryのプラグインは以下の3つ。 flexslider:画像の移り変わりの方法(フ…

Webサイト制作におけるjQueryの基本的なメソッド6 - wrap()とremove()

今回はwrap()メソッドとremove()メソッドについて確認する。その前に、ここまでは既にHTML内にある要素を指定してそれを操作するという方法で確認等を行ってきたが、同じような書き方で、新しく要素を作って、それを操作するということができる。記述方法は…

Webサイト制作におけるjQueryの基本的なメソッド5 - before()とafter()

前回に引き続き、今回はbefore()メソッドとafter()メソッドについて確認する。 before()メソッド 以下、挙動確認コード。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>before()メソッド</title> <style> body, div, p, li { margin: 10px; padding: 0; } #done { background: #0F0; } #dtwo { width: 200px; backgr</meta></head></html>…

Webサイト制作におけるjQueryの基本的なメソッド4 - prepend()とprependTo()

前回に引き続き、今回はprepend()メソッドとprependTo()メソッドについて確認する。機能の概要は既に(前回)書いたので割愛する。挿入される位置が異なる以外は、append()メソッドおよびappendTo()メソッドと同じ機能なので、前回の記事を見て頂いた人は特…

Webサイト制作におけるjQueryの基本的なメソッド3 - append()とappendTo()

今回からは、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドの中でも、要素の移動や挿入(追加)する機能をもつメソッドをまとめていく。 要素を移動・挿入(追加)する機能をもつ基本的なメソッド append()メソッド:指定した要素内(…

Webサイト制作におけるjQueryのメソッドの書き方あれこれ

ここ数回に渡ってjQueryの基本的なメソッドについてまとめてきたが、正しい書き方(意図した通りに処理される書き方)がやや曖昧なので、一度確認しておく。以下、確認コード。 <html lang="ja"> <head> <meta charset="UTF-8"> <title>メソッドの書き方あれこれ</title> <style> body, div, p, li { margin: 10px; padding: 0;</meta></head></html>…

Webサイト制作におけるjQueryの基本的なメソッド2

前回に引き続き、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、まとめていく。今回はデザイン面ではなく、コードそのものや表示される内容を変える機能面のメソッドをまとめる。 内容や機能を変更する基本的なメソッド addC…

Webサイト制作におけるjQueryの基本的なメソッド1

今回から、Webサイト制作のコーディングにおいて用いるjQueryの基本的なメソッドについて、何回かに渡ってまとめていく。 スタイルを変更する基本的なメソッド css()メソッド:要素のcssを操作する width()メソッド:要素の幅を操作する。カッコ内はデフォル…

Webサイト制作におけるjQueryのメソッドの基本的な書き方

Webサイト制作のコーディングにおいて用いるjQueryのメソッドの基本的な書き方をまとめておく。まずは記述の共通ルールを確認する。 共通ルール メソッドはドット「.」で繋ぐ(ドットシンタックス) メソッド名には必ず括弧()をつける 必要に応じて括弧()内…

Webサイト制作におけるjQueryのセレクタの種類1

Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめておく。セレクタはほぼCSSと同じなので、CSSが分かっている人は一度確認しておく程度でよいと思われる。 基本的なセレクタの種類 タイプセレクタ:HTMLの要素名(タグ名) 例 div …

Webサイト制作におけるjQueryのセレクタの種類2

前回に続き、Webサイト制作のコーディングにおいて用いるjQueryのセレクタの種類をまとめていく。今回は少し高度?なセレクタについて確認する。 セレクタの種類 子セレクタ:指定した親に対する子のみ(孫以下は対象外)を指定するセレクタ 例 div > span …

Webサイト制作におけるjQueryの基礎

Webサイト制作において、動的要素の導入方法の一つとして、jQueryを用いる方法がある。 jQueryはJavascriptのライブラリの一つで、現在ではデザイン面においても機能面においても幅広く利用されている。本日よりjQueryについて基礎から学んでいく。 jQueryの…