STEP3-1.Ajaxを使ってみる / チームラボ オンラインスキルアップ課題
STEP3-1.Ajaxを使ってみる Ajaxとは、JavaScriptなどからHTTP通信をすることによって、ページのリロードをせずにサーバとデータのやり取りをする技術です。ここでは1秒ごとに自動で再読み込みを行うような簡単なチャットを作成してみます。 まずはAjaxで取得するデータを用意しましょう。データはSTEP1で作成した掲示板のデータを流用することにします。以下の内容をajax_get_data.phpという名前で保存します。今回はCakePHPは使用しませんのでhtdocsに保存してください。 <?php $mysqli = new mysqli('localhost', 'root', '', 'board'); $json = array(); $result = $mysqli->query("SELECT * FROM datas ORDER BY created DE
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。 ダウンロード CDN スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.autosize.js" type="text/javascript"></script> 実装 <textarea id="text1018"></textarea> <script type="text/javascript"> $(document).ready(function(){ $('textarea').autosize({ // append: "\n" // 内部に
要素のリサイズイベントを取得 - Qiita
要素のリサイズイベントを取りたいが、jQueryだけでは出来ないみたいなので、探していたらこういうものを見つけた。 http://d.hatena.ne.jp/cyokodog/20101101/exresize01 https://github.com/cyokodog/jquery.ex-resize ただ、このままだとjQuery1.9以降でエラーがでるみたいなので、その部分だけとりあえず動くようにしてみた。 この変更を入れると、古いブラウザに対応できなくなるのかな？ 古いブラウザも対応する必要がある場合は、ここのブラウザ判定処理をそれ用に書き直せばいけると思う。 $.ex.resize = function(idx , targets , option){ if ($.isFunction(option)) { option = {callback : option}; } var
jQuery の位置・サイズ関連メソッドまとめ - Cyokodog :: Diary
ばらけてきたのでこちらにまとめます。 索引 位置の設定 css(name,value) 位置の取得 css(name) offset() position() scrollTop() / scrollLeft() event.pageY / event.pageX サイズの設定 css(name,value) / height(value) / width(value) サイズの取得 css(name) / height() / width() attr(clientHeight / offsetHeight / scrollHeight) outerHeight() / innerHeight() コンテナ要素の取得 offsetParent() 解説 位置の設定 css(name,value) 対象要素を指定した位置に配置できます。単位を省略した場合はピクセル単位となります。 $('#
jQuery で JSON ファイルを読み込む - Qiita
[ {"id":1,"name":"田中"}, {"id":2,"name":"鈴木"}, {"id":3,"name":"佐藤"} ] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script> $(function() { $.getJSON("data.json" , function(data) { var ulObj = $("#demo"), len = data.length; for(var i = 0; i < len; i++) { ulObj.append($("<li>").attr({"id":data[i].id}
jQuery の on() と off() を理解する - tacamy--blog
初心者向けの本とかだと、イベントを jQuery オブジェクトの後に直接指定する、 $('.foo').click(); のような書き方で説明されている場合が多いけど、少し複雑なことをしようとするとそれだと困ることが出てきます。そんなときに便利なのが on() を使ったイベント設定です。 on() ひとつで bind() live() delegate() を表せる jQuery 1.7 で、bind() live() delegate() がすべて on() に統合されたそうです。 つまり on() の書き方によって、3 パターンの使い方ができるということです。 .foo という要素をクリックしたら何かするという例で、イベントの設定と削除の方法をそれぞれ書いてみます。 bind() $('.foo').bind('click', function(){...}); は $('.foo')
Enterでsubmitするtextarea - Qiita
追記 (2019-04-16) MDNによると、keypressはdeprecatedで今後はkeydownを使ってくれとのこと。 あわせてkeyCodeもdeprecatedなので、keyかcodeを使ったほうが良い。 Facebookのコメント投稿欄とかLingrの発言欄とか、Enter一発でsubmitするtextareaの作り方。 一応次の機能も盛り込む。 Shift+Enterで改行も入力できるようにしておく。 本文がスペース、改行だけならsubmitしない。 HTML: <form action="/messages" method="POST" id="new-message"> <textarea id="message-text" name="text"></textarea> </form> var $form = $("#new-message"); var $ta
JavaScript・jQueryの改修・高速化のためのメモ - Qiita
たまにJavaScriptやjQueryなどの改修が入ったりすると忘れてしまうので、自分用のメモとして残しておきます。 JavaScriptコーディングベストプラクティス（高速かつ堅牢なコードを効率よく書くために）を参照しながらのメモになります。 随時、この記事に追記予定です。 高速化メモ JavaScript編 スタイルシートは上に、JavaScriptは下に指定する JavaScriptファイルは読み込んだ後、通常はスクリプトを解析している間、他のファイルの読み込みをブロックする JavaScriptはページの上部に指定すると、このブロックによりロード時間が増加する場合がある スタイルシートはなるべく上に、JavaScriptファイルは下部にしていることで、ロード時間が短縮できる 画面描画に関係ないJavaScriptは、</body>の直前に書く $(document).readyを
【jQuery】on() で イベントをバインドする。 - pospomeのプログラミング日記
今更ながら、jQuery の on() を知った。 http://api.jquery.com/on/ 本当は live() を知って調べたんだけど、 これは jQuery 1.9 で廃止になったらしい。 同時に bind() / delegate() も廃止になる。 これら廃止になった3つをまとめたのが on() になる。 つまり、on() を使うと live() / bind() / delegate() の機能を使うことができる。 今回は旧API live() の代用として on() を使った場合。 live() は HTML要素のイベントをバインドする関数。 click() とか blur() と同じ。 では、何が違うのか・・・? click() は HTMLが読み込まれた時点の要素にしかclickイベントをバインドしない。 つまり、JavaScript で動的にボタンを生成した場
jQuery高速化！処理速度を10倍上げるテクニック20選
Aircraft manuevers during an airpower deomonstration. / Official U.S. Navy Imagery Javascriputを簡単に書けるようにしてくれるライブラリのjQueryですが、使い方をちょっと変えるだけで、パフォーマンスに大きく差がでます。ハイスペックPCでは分かりづらいかもしれませんが、スペックの低いPCやモバイルではWebページの表示速度が遅くすぐに閉じられるかもしれません。 Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。そこで、jQuery高速化のポイントや方法をここにまとめておきます。 jQueryの最新バージョンを使う 図1 jQueryのバージョンによる速度 https://jsperf.com/speed-comparison-of-jquery-vers
IEの条件付きコメントを使ったjQuery1系2系の使い分け - Qiita
jQuery2.xとIE jQueryの1系と2系、実は機能的に大きな違いはありませんが、2系は1系に比べて軽量でかつ高速です。 なぜ軽量で高速なのかというと、2系はIE6～8をサポートしなくなったから。 私は常に最新のバージョンのものを使用したいので、迷わず2系を使用していましたが、やはり古いIEを使用している人はいるもの。サポートしません、という手もありますが、古いIEもサポートするには、やはりjQuery1系を使用しなければいけません。 条件付きコメントとは、Microsoft Internet Explorerによって解釈されるHTMLソースコード中にある条件付きのステートメントである。条件付きコメントは、マイクロソフトのInternet Explorer 5ブラウザーで初めて登場し、バージョン9までサポートされた。なお、バージョン10以降はこの機能は廃止され、他のブラウザと同様、
はてなブログで本文の上に自動で目次を表示する方法 - はてなブログ脱獄ブログ
記事が長くなりがちな人にオススメな「自動目次」の設定を紹介します。 機能 記事内の大見出し（h3）を探して目次に表示する。 実装前に投稿した記事にも有効。 「◯個以上大見出し（h3）があったら目次を表示する」という設定が可能。 目次のリンクをクリックすると該当箇所までスクロール。 実装方法 以下のコードを指定した箇所へ追加して下さい。 CSS（設定→デザイン→カスタマイズ→デザインCSS） article .entry-content .sectionList { background: #F8F8F8; margin: 50px 0 0; padding: 15px; border: 1px solid #CCC; } article .entry-content .sectionList h3 { font-size: 110%; margin: 0; } article .entry
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
autosizeの上限を指定する方法 - Qiita
GitHub - metafizzy/infinite-scroll: 📜 Automatically add next page
【jQuery】ページ離脱時に確認メッセージを表示させる方法 | スターフィールド株式会社