「jQuery」fadeToggle()で開閉式のメニューを実装する
書式
$(selector).fadeToggle(speed,callback);
サンプルコード
「jQuery」fadeIn()、fadeOut()でフェードイン、アウトを実現する
フェードイン
$(“button”).click(function(){
$(“#div1”).fadeIn();
$(“#div2”). ...
「jQuery」 position()で相対位置を取得する
① topの位置取得
var cftTop = $(‘div’).position().top;
② leftの位置取得
var cftLeft = $(‘div’ ...
「jQuery」addClass()、removeClass()でcssの追加、削除
1.cssを追加
「user」がついた要素にcss「cft」を追加
$(‘#user’).addClass(‘cft’);
2.cssを削除
$(&# ...
「jQuery」css( )でstyle属性の追加、変更、削除
1.1つのcssプロパティ
class「info」がついた要素のcss「background-color」を「yellow」に追加,変更
$(‘.info’).css(‘backgr ...
「Jquery入門」slideToggleでコンテンツを出したり隠したりするサンプル
JSコード
$(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); });});CSSコード
「Jquery入門」特定要素以外クリック時のイベントを処理するサンプル
1.htmlコード
<div class="cftA"><div class="cftB">テストデータのサンプル</div></div>2.イベント取得
$(docu ...「jQuery入門」replaceWith()の使い方
サンプルコード1
$(‘li’).replaceWith(function(){
return $(“<div/>”).append($(this).cont ...
「jQuery入門」テキストアリア、チェックボックスのvalue値を追加するサンプル
①JSPコード
<!–textarea–>
<textarea name=”address”></textarea>
&l ...
「jQuery入門」divのpadding/margin/height/widthを取得する方法
サンプルコード
$(function(){ $("div").width();//div要素のwidth $("div").innerWidth();//div要素のpadding+width $("div").outerWid ...「jQuery開発」Ajaxでpost送信をするサンプル
サンプルコード
$( '#btnSend' ) .click( function() { var empApiUrl= ' var userNo = 2001; var age = 19; $.ajax({ url: empAp ...「jQuery入門」append()でチェックボックス要素を追加するサンプル
1.htmlコード
<div class="gameList"></div><div>スマホゲームを追加してください</div><input type="text" id=" ...「JQuery入門」全てにチェックを実装するサンプル
1.htmlコード
<p><input type="checkbox" name="cft" value="cft" id="cft">全てにチェック</p><p><inpu ...「jQuery入門」:contains()で特定要素を指定して処理を行う
htmlコード
<ul>
<li>shinagawa</li>
<li>oosaki</li>
<li>kawasaki</ ...
「jQuery入門」属性セレクター [attribute*=’value’]のサンプル
サンプルコード
1.htmlコード<div> <p class="class-AA">test data AA</p> <span class="kdf-info">test da ...jQueryの子セレクター(parent > child)を利用するサンプル
サンプルコード
①htmlコード<div id="parentID_User"> <p id="kdfInfo">test data AA</p> <p class="childID_U ...「jQuery入門」each()でプラグインを作成するサンプル
1.プラグインの定義
$.fn.txtChangePlugin = function(str) {
$(this).each(function() {
$(this).text(str).trigger( ...
「jQuery入門」イベントデリゲート( event.delegateTarget)を利用するサンプル
サンプルコード
$(“#cft”).on( “click”, “span”, function(event){
console.log( ev ...