jQuery
Ajax（エイジャックス）とは？ 参考サイト Ajax（エイジャックス）とは？ JavaScriptからサーバーとの通信を行い、ページの動的な書き換えを行います。Asynchronous JavaScript + XMLの略でAsynchronous＝非同期通信を指します。 参考サイト QiitaでAjaxや非…
focusメソッド blurメソッド change 下記のようなテキスト入力欄やセレクトボックスがあったとします。このようなフォームで使えるイベント をいくつか見ていきます。 <input type="texat" id="name"><select id="members" name="members"> <option>a</option> <option>b</option> <option>c</option> </select> focusメソッド テキスト入力欄などにフォーカスがあたった際のイベントを指定で…
click mouseover mouseout mousemove クリックイベントなどを扱う方法について見ていきます。 click クリックしたときのイベントを設定できます。下記はクリックしたときにhiと表示する例です。 $(function(){ $('#box').click(function(){ alert("hi!"); })…
視覚効果（エフェクト） hideメソッド showメソッド fadeOut fadeIn toggle コールバック関数 視覚効果（エフェクト） jQueryでは視覚効果（エフェクト）を使うことができます。代表的なものについて記載します。なお、例では下記ボックスに対して視覚効果を…
before、afterメソッド beforeの場合 afterの場合 insertBefore/insertAfterメソッド insertBefore insertAfter prepend/appendメソッド prepend append prependTo/appendToメソッド prependTo appendTo jQueryでは要素を追加することができます。 before、a…
textメソッド htmlメソッド valメソッド removeメソッド emptyメソッド jQueryではタグの中身を操作するメソッドがありますのでいくつか見ていきましょう。 textメソッド テキストの内容を設定、取得するメソッドです。例えばｐ要素のテキストの内容を書き換…
css メソッド addClass、removeClassメソッド attrメソッド css メソッド CSS に関する値の設定をする場合は css メソッドを使います。また、メソッドチェーンを使っていくつも設定することができます。 $('p').css('color','red').css('background','blue')…
属性セレクタとは？ 属性セレクタの使い方 属性を指定する記号 = != *= ^= $= 属性セレクタとは？ 例えばHTMLに下記コードがあります。「a」要素の「href」属性が「Google」となっているものを指定することができます。 <p>jQueryの練習</p> <p><a href="http://google.com">Google</a></p> <p><a href="http://yahoo.co.jp">Yahoo</a></p> <p><a href="http://bing.com">bing</a></p> 属性…
メソッドを使った要素指定 使い方 メソッドを使った要素指定 下記のメソッドを使いDOM要素を指定することができます。 parent() 親要素を指定 children() 子要素を指定 next() 次の要素を指定 prev() 前の要素を指定 siblings() 兄弟要素を全て指定 使い方 …
主なフィルタについて 例えば下記のHTMLコードがあったとします。 <ul id="sub"> <li>3-0</li> <li>3-1</li> <li class="item">3-2</li> <li class="item">3-3</li> <li>3-4</li> </ul> この中で上から３番目のli要素を選択したいといった場合、jQueryでは下記のセレクタ記法を使うことができます。 $("#sub > li:eq(2)" ).css("color" , "red"); eq(2)…
HTML要素の指定方法 idの指定方法 classの指定方法 特定の要素の指定方法 jQueryではHTML要素、id、classの指定方法がそれぞれ異なります。どのように指定すればよいか見ていきましょう。 HTML要素の指定方法 「$("")」に「p」や「h1」などそのままHTML要素…
jQueryって何？ 公式サイト 学習に必要な知識 学習に必要なツール jQueryの読み込み方 ・公式サイトからjQueryをダウンロードして使用する。 ・Google、Microsoft、jQueryなどがサーバー配信しているものを使用する。 jQueryの書き方 セレクタとメソッド メ…
