はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
2010年5月21日 jQueryを利用して、フォームに記述されているradioボタンのチェックをはずす方法。これも簡単。 $("input:[name=ラジオボタンのname属性]").attr("checked",false); これでラジオボタンのname属性 のラジオボタンのチェックははずれる。
javascriptでループから抜けるときはbreak;を使います。 for(var i=0, l=myArg.length; i<l; i+=1) { if(i === 7) { // ループから抜ける break; } } jQueryの.each()を使ってループを回していた時にループを抜けたい箇所にbreak;を書いたのですがjsHintでエラーが表示されてしまいました。 どうやらjQueryのループでbreakしたい時にはreturn false;としなければダメっぽいです。 jQueryでbreak $(myArg).each(function(i, elm) { if(i === 7) { // ループから抜ける ... break return false; } // 処理 }); ついでに、javascriptのcontinueに該当するjQueryでの書き方はretur
$.ajaxによるJSON読み込み方法 例えば以下のようなJSONの場合 [ { "version": "1.5", "codename": "Cupcake" }, { "version": "1.6", "codename": "Donut" }, { "version": "4.4", "codename": "KitKat" } ] $.ajaxでの読み込みは下記のようになる $.ajax({ type: 'GET', url: 'https://iwb.jp/s/js/data.json', dataType: 'json', success: function(json){ var len = json.length; for(var i=0; i < len; i++){ $("#a").append(json[i].version + ' ' + json[i].coden
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
jQueryを使って要素の背景に色をつける方法についてです。 要素の背景の色を変更するのはCSSだけではなく、jQueryでも可能になっています。 jQueryを使った背景色変更方法を覚えればできることの幅が広がります。
jQueryの作者であるJohn Resig氏は、個人的な仕事として日本画のデータベースに関わっているとのこと。それに関連して、最近公開されたニューラルネットワークの技術を活用した画像拡大ツールWaifu2xを使ったところ、すばらしいとブログで激賞しています。 Regardless, this technology is quite exciting and it’s extremely serendipitous that the subject matter that was used just so happens to correlate nicely with one of my areas of study. I’ll be very curious to see where else people have success with this particular utili
javascript (ajax)では、ファイル保存ダイアログを起動できない? ブラウザでファイルをダウンロードすると、通常、次のようなコモン?ダイアログが表示されますが、javascript (ajax)で、このダイアログを起動することはできないようです。 ajaxのダウンロードは、validation後、location.hrefでredirect どうやら、ajaxを使ったファイルのダウンロードは、サーバによるvalidation後、実際?のダウンロード用URLへリダイレクトすることで、ファイル保存ダイアログを起動できるみたい。 client側、server側のsrcは、以下に貼っておきます。 client側 html <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <meta http-equiv="Cont
jQueryを利用してコンボボックスを選択状態にできないかなって思って調べていたら、selectで指定のものを選択状態にってエントリを発見。早速試してみました。 <select id="col1" name="col1"> <option value="val1">値1</option> <option value="val2">値2</option> <option value="val3">値3</option> </select> ってHTMLに対して $("#col1").val("val2"); って記述でほんとに選択状態にできました。素敵過ぎです。 checkboxとかradioとかはどうなのかと思ったら、こっちは $(".col2[@value=val2]").attr("checked","checked"); って記述でいけるみたい。これまたシンプル！ HTML中にsel
直下の子要素を取得する.children() 要素内の全ての子要素を取得します。children(‘セレクタ’)のように、セレクタを引数に渡すことで子要素を絞り込むこともできます。 （例１）#parentの子要素の中から、imgタグのみ取得する HTML <div id="parent"> <p>テキスト1</p> <p>テキスト2</p> <p>テキスト3</p> <img src="sample.png" /></div> jQuery $("#parent").children('img'); なおchildren()メソッドでは、孫要素は取得されません。 全ての子孫要素から取得する.find() children()では、取得できるのは直下の子要素のみでしたが、find()では子要素の子要素も含む全ての子孫要素から条件を指定して取得できます。 （例２）#parentの子要素の中から
実践、jQuery 第1回 .on()と.off()を使いこなす 1 jQuery 1.7から実装された.on()と.off()メソッドを取り上げます。jQueryオブジェクトに対してイベントの定義を行う機能をきちんと理解して、イベントを自在にコントロールできるようになりましょう。 はじめに この『実践、jQuery』シリーズは、jQueryを使った実装がある程度できるようになったエンジニアが、さらにjQueryへの理解を深めていくためのシリーズです。 今回は、jQuery 1.7*から実装された.on()と.off()という2つのメソッドを取り上げます。これらのメソッドが担う、jQueryオブジェクトに対してイベントの定義を行うための機能をきちんと理解することで、イベントを自在にコントロールできるようになることを目的としています。 *注：jQuery 1.7 jQuery 1.7は201
実装例（サンプル）の動作について 実装例（サンプル）のラベンダー色のボックスをクリックすると、ボックスをハイライト表示する。 実装例のソースコード 読み込み 読み込み方は、2種類ある。パスは、それぞれ、アップロードした場所を指定する。 まとめて読み込む場合 <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="ui/jquery-ui-1.8.12.custom.min.js"></script> <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> <scri
jQueryで、クリック時に動作する関数をセットすると… $(‘window’).click( function(){ alert( ‘hoge’ ); } ); となるが、コレは実はappend方式で関数がどんどん追加されていく。 $(‘window’).click( function(){ alert( ‘hoge’ ); } ); $(‘window’).click( function(){ alert( ‘hoge’ ); } ); こうかくと、同じ処理が2度起きることになる。 ループやイベントごとに関数がappendされていくと大変なことになる。 なので上書きしたい時はunbindして登録関数をクリアしてから、appendするという事にする $(‘window’).click( function(){ alert( ‘hoge’ ); } ); $(‘window’).unbin
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く