<p>there friend!</p> <p>amigo!</p> $("p").prepend("<b>Hello </b>");
<p>there friend!</p> <p>amigo!</p> $("p").prepend("<b>Hello </b>");
<form id="my_form"> <input type="file" name="file_1"> <button type="button" onclick="file_upload()">アップロード</button> </form> 【注意点】 ボタンに type="button" が無い場合は submit と見なされ、ボタン押下時にブラウザーが勝手にアップロードしてしまいます(現画面を再更新)。そのため、下記 JavaScript によるアップロード処理中には意図しない status が返ってくるため、成功したり失敗したり、不可解な動きとなります。 function file_upload() { // フォームデータを取得 var formdata = new FormData($('#my_form').get(0)); // POSTでアップロード $.ajax({
<form> <input type="file" name="upfile"> <button id="upButton" type="button">送信</button> </form> let $upfile = $('input[name="upfile"]'); let fd = new FormData(); fd.append("upfile", $upfile.prop('files')[0]); $('#upButton').on('click', function () { $.ajax({ url:'index.php', type:'post', data: fd, processData: false, contentType: false, cache: false, }).done(function (data) { // 成功時の処理 }).fail(fu
$(function() { $('input[type=file]').after('<span></span>'); // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; // 画像以外は処理を停止 if (! file.type.match('image.*')) { // クリア $(this).val(''); $('span').html(''); return; } // 画像表示 var reader = new FileReader(); reader.onload = function() { var img_src = $('<img>').attr('src', reader.result); $('span').html(i
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。 ← 前回 連載 INDEX 次回 → 配列から条件に合致した要素だけを取り出すには、$.grepメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてfilterがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.grepメソッドを利用するのが無難でしょう。 $.grepメソッドの基本 まずは、基本的な例を見ていきます。以下は、オブジェクト配列(メンバーリスト)を読み取り、age(年齢)プロパティが30より大きいメンバーだ
「post()」とは? それでは、まず最初にpost()メソッドについて基本的な知識から学んでいきましょう! 「post()」は、ブラウザ側から任意のデータをサーバへ送信してその結果を取得することができるメソッドになります。一般的には、フォーム要素にユーザーが入力した情報をサーバーへ送信するようなケースが多いでしょう。 例えば、サーバー側で受け取ったデータを処理してJSONに変換してまたブラウザ側で受け取るようなことも簡単に実現できます。 本記事では、post()メソッドの基本的な使い方からフォームを使った活用例まで詳しく解説しますので、ぜひ参考にしてみてください! post()の使い方 ここからは、実際に「post()」メソッドを使ったプログラミング手法を学んでいきましょう!post()の基本的な書き方からデータを送信する方法や、サーバーからデータを取得する方法まで具体的に見ていきます。
jQuery.post( url [, data ] [, success ] [, dataType ] )Returns: jqXHR Description: Send data to the server using a HTTP POST request. version added: 1.0jQuery.post( url [, data ] [, success ] [, dataType ] )
任意のボックス要素を画面の高さと同じにします。 *ボックス要素の高さが画面サイズより大きい場合は、そのまま何もしません。 $(document).ready(function(){ //画面の高さを取得して、変数wHに代入 var wH = $(window).height(); //div#exampleの高さを取得を取得して、変数divHに代入 var divH = $('div#example').innerHeight(); // ボックス要素より画面サイズが大きければ実行 if(wH > divH){ // div#examplに高さを加える $('div#example').css('height',wH+'px'); } }); 補足 innerHeight は、ボックスのpaddignを含めた高さを取得するメソッドです。 *類似したメソッド height 要素のpaddin
……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む? ……水割り? わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――『jQuery』がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる? ……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
$.jstree 関数や変数に関連するjstreeの全てを保持しています。実際のクラスやインスタンスに対して作成、接続、操作といった処理を行うメソッドが含まれています。
デザインはjQueryで作られる、実装はVue.jsで行う。なんやかんやあってこの方式でwebページを作る必要が出てくることがあります。一貫していた方が作りやすいはずなのですが、なんやかんやあってこうなります。 デザインの実装の際、jQueryとVue.jsを読み込ませるとデザイン時に動いていたイベントが消える時があります。これはVueがテンプレートエンジンも兼ねていることが原因で起きがちです。例えば次の様なシナリオで起きます。 // デザイン時HTML読み込み完了↓jQueryによるイベント付与実行↓全てのHTMLに付与されるべきイベントが付与されている// 実装時HTML読み込み中、Vue構築中↓HTML読み込み完了↓jQueryによるイベント付与実行↓Vue構築完了。Vue内で定義されたHTML構築を持ってきて描画 特にVueでAPIの結果をHTMLの一領域に描画する仕組みを作った時
今回、Vue.jsをなんとか覚えようと思って頑張ってみました。 巷でよく「デザイナーでもとっつきやすいVue.js」とありますが、私の場合、アニメーションなどのDOM操作を中心にjQueryを使用しているので、その場合は全然とっつきやすくはなかったです。 開発側でない為に、開発の基本的概念の知識が乏しく、Vue.jsの概念を理解したり、環境構築したり、というところでつまづいてしまいました。 であるならば、無理してまずはVue.jsで書ききる必要もなく、学習コストを下げるために一旦、Vue.jsとjQueryと併用で使いながらちょっとずつ覚えていけばいいんではないか・・・と思ったので、今回は併用する手段を紹介しようと思います。 1.VueをCDNもしくはローカルで読み込ませるパターン Vue.jsがどのように動いているかを学ぶにあたって、このパターンが一番とっつきやすかったです。 LPなどの
禁断の融合魔術 もうjQueryなんて使いたくない! Vue.jsや、Reactを使って脱jQueryするんだ! こんな、言葉が叫ばれて久しい昨今、皆様どうお過ごしでしょうか? 新しいプロジェクトでは、ほとんどが、脱jQeryを果たしていても、各フレームワークのテンプレートエンジン+jQuery+Vueが融合しているプロジェクトも実はあったりするのではないでしょうか? または、お客様から、 「いやだ!この『ポワン』っていうアニメーションが気に入ってたんだから、このカレンダーはそのままのデザインにしてほしい!」 などの要望があり、泣く泣く、jQueryライブラリを使う事もあるかもしれません。 そんなときは、以下の方法で、なるべく被害が広がらないような、状態にしておきましょう(もちろん、Vue.jsを使用する場合は、jQueryを極力使わない選択をするのがベストです。) 対応前 mounted
jQuery逆引きリファレンス 要素の高さ/幅を設定/取得するには?(height/width/innerHeight/innerWidth/outerHeight/outerWidth)
こんにちは、ライターのマサトです! 今回は、HTML要素をフェードインさせながら表示することができる「fadeIn()」について学習をしていきましょう! この記事では、 ・「fadeIn()」とは? ・「fadeIn()」の使い方 という基本的な内容から、 ・「fadeIn()」に関数を指定する ・イベント処理を実装する方法 ・フェードイン・アウトの実現 などの応用的な使い方に関しても解説していきます。 この記事で、「fadeIn()」メソッドをしっかり学習して自分のスキルアップを目指しましょう! 「fadeIn()」とは? それでは、まず最初に「fadeIn()」についての基本的な知識から身に付けていきましょう! 「fadeIn()」は、HTML要素をゆっくり時間をかけて表示させることが可能なメソッドです。 一般的には、「ドロップダウンメニュー」「アコーディオンメニュー」などでコンテンツ
Responsive Multi-Level Menu | Codrops 今回は、主にスマートフォンサイトで活躍しそうなレスポンシブタイプのドロップダウンメニューを紹介します。 限られたスペースからでも、メニューをふわっとアニメーションしながら展開して表示させてくれます。 まずは、サンプルをご覧下さい。 レスポンシブなドロップダウンメニューを実装する「Responsive Multi-Level Menu」サンプル 古いブラウザやIEなどでは作動しませんが、最新ブラウザが標準のスマホサイトにピッタリですね。 【設置方法】 こちらのResponsive Multi-Level Menuからソースをダウンロードします。このダウンロードしてきたソースファイルをもとに設置してみます。 <head>部分にCSS関連を読み込む記述をします。 <link rel="stylesheet" type="
いつか使いたいと思ったので書いておく。 オシャレなデザインと、かっこいいアニメーションが魅力的なメニューが簡単に実装できる。下記リンクよりDemoページに飛ぶことが出来るので、一度試してみていただきたい。 RESPONSIVE MULTI-LEVEL MENU 使い方 まずはソースをダウンロード。DemoのHTMLも一緒にダウンロードできるので、簡単に実装可能。一応以下に個人的に一番イケてる!と思ったDemo 2の実装方法を書いておく。 HTML headタグ内では以下の5つのソースを読み込む。 <link rel="stylesheet" type="text/css" href="css/default.css"> <link rel="stylesheet" type="text/css" href="css/component.css"> <script src="js/jquer
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く