jQueryロールオーバーボタン

JQuery

images画像DL http://siteya19.co.jp/ftadata/imges.zip <html lang="ja"><head><meta charset="UTF-8"><title>ロールオーバー</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><script> //nav1 マウスオーバー$(function() { //変数numに1を登録 var num = 1; $('#nav1 li') //マ…</meta></head></html>

2015-09-10

jQUeryページトップ

JQuery

<html lang="ja"><head><meta charset="UTF-8"><title>ページトップ</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$(function() { //変数にID情報を登録 var topBtn = $('#page-top'); //初期非表示 topBtn.hide(); //スクロールが80に達したらボタン表示 $(window).scroll(functi…</meta></head></html>

2015-09-10

jQueryスライダー

JQuery

画像DL http://siteya19.co.jp/ftadata/img.zip HTMLソース <html lang="ja"><head><meta charset="UTF-8"><title>スライドサンプル</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="sliders.js"></script><script>$(function(){ …</meta></head></html>

2015-08-19

jQueryのイベントの使い方2

JQuery

clickイベント簡単な使い方 <html lang="ja"><head><meta charset="UTF-8"><title>clickイベント1</title><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script></head> <body><script type="text/javascript">$(function() { //readyイベントの登録$('<button>Click Me!</button>').appen…</body></html>

2015-08-19

jQueryのイベントの使い方1

JQuery

よく利用されるイベント ready click toggle readyイベント readyイベントはjQueryのイベントの中でももっとも使われるイベントとなる。このイベントはブラウザにDOMが読み込まれた時に実行される。ブラウザはJavaScriptのコードを検出した時点で実行される…

2015-08-18

jQueryの記述

JQuery

Dreamweaverで新規HTMLファイルを作成 <html lang="ja"><head><meta charset="UTF-8"><title>jQueryの勉強1</title><script src="js/jquery-1.11.3.min.js"></script></head> <body><div id="msg"><script type="text/javascript">$ (document) .ready (function () {$ ('#msg') //jQueryのセレクタでdiv#msg要素を検索.text ("Hell …</div></body></html>

2015-08-18

jQueryとは

JQuery

jQueryとはアメリカのJohn Resig氏が中心となって開発したJavaScriptのライブラリ。 jQueryには各種API(Application Program Interface)とプラグインが豊富に用意されていて生産性を飛躍的に向上させることが出来る。 jQueryの特徴・jQueryは2006年に最初の…

2015-08-11

DOMとは3

JavaScript

id名と要素名を組み合わせてみる今回のソースコードのような場合、特定のリストや表組みにアクセスするには、はじめにid要素で絞り込み、更にその中の特定の要素名を指定すると良い。具体的な使い方を記述してみよう。 id名【solar】に含まれるli要素の数…

2015-08-11

DOMとは2

Javascript

要素の内容をデータとして取得するには innerHTMLプロパティを使用する例) オブジェクト名.innerHTML <html lang="ja"><head><meta charset="utf-8"><title>DOMテスト</title></head><body><h1>DOMテスト</h1><p>おはよう</p><p>こんにちは</p><p>こんばんは</p><script> var ps = document.getElementsByTagName( 'p' ); alert(ps[1].innerHTML);</script></body></html>

2015-08-11

DOMとは

Javascript

HTMLの中から特定のオブジェクトを探し出す Document Object Modelの略で【ドム】と発音する。 HTMLドキュメント中のさまざまな要素や属性などをオブジェクトとして考えそれらの中から特定のものにアクセスするためのメソッドを使用することが出来る。 DOMで…

2015-08-01

条件分岐

Javascript

条件を指定して処理するifとif...else 例) もし◯◯だったら◯◯ この条件に合わない場合、△△ といった条件ん応じさせることが出来る ifを使う理由 1つの流れしか記述できなかったJavascriptに対してif文を使うことにより条件に応じた処理の切り替えることが出来…

2015-07-31

Javascriptの演算子

Javascript

四則計算(加減乗除、和差積商を求める計算) 四則計算の記号には【算術演算子】といい次の記号を使用求めるもの算術演算子和(足し算、加算) + 差(引き算、減算) - 積(掛け算、乗算) * 商(割り算、除算) / start04.htmlファイルを開いて下さい。開いたら次…

2015-07-31

Javascript変数

Javascript

データの型 1.そのまま文字列を表示したい場合 2.◯とXを繋ぎ合わせた◯Xという文字列を表示したい場合 3.計算結果を導き出すための【計算式】として扱いたい場合 4.アクションを起こさなかった場合 1.と2.は文字列(String)型 3.は数値(Number)型 4.はnull型で…

2015-07-31

Javascript基本2

Javascript

簡単な入力ダイアログの表示 start03.htmlを開き var user = prompt('お名前を入力してください。','お名前');document.write('いらっしゃいませ、' + user + '様。'); console.log(user ); と記述してブラウザで確認。ダイアログが表示されたら名前を入力し…

2015-07-31

Javascript基本

Javascript

HTMLのソースコードにJavascriptの記述する場合 body要素の中の<script type="text/javascript">〜</script>に記述 <script type="text/javascript">  </script> Jsが理解できないブラウザーがソースコードを表示しないようにHTMLのコメント【】を使用する。【//】はJsのコメント。この記述のある行はJsのコメントとして解釈され【-…