jQueryでCSSの!important指定を行う - Qiita$('#sample').css({'margin-top': '20px !important'}); // 無効 のような !important 指定は認識されません（宣言自体が無視されます）。 このような場合は、CSS書式をそのまま記述できる"cssText"を使用することで !important 指定を実現できます。
ajax(jQuery)でファイルをアップロードする - Qiita
<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
配列から特定の条件で要素を取り出すには？（$.grep）
$.grepメソッドを使って、配列から条件に合致した要素だけを取り出す方法を解説。Internet Explorer 8以前の環境ではJavaScriptのfilterメソッドをこれで代替しよう。 ← 前回 連載 INDEX 次回 → 配列から条件に合致した要素だけを取り出すには、$.grepメソッドを利用します。標準のJavaScriptにも同等のメソッドとしてfilterがありますが、Internet Explorerではバージョン9以降での動作が前提です。Internet Explorer 8以前の環境を想定しなければならない状況がまだまだあることを考えると、現時点では、$.grepメソッドを利用するのが無難でしょう。 $.grepメソッドの基本 まずは、基本的な例を見ていきます。以下は、オブジェクト配列（メンバーリスト）を読み取り、age（年齢）プロパティが30より大きいメンバーだ
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
jQueryオブジェクトをHTML文字列に変換したり戻したりする方法 | PisukeCode - Web開発まとめ
jQueryオブジェクト ⇒ HTML文字列 HTML文字列 ⇒ jQueryオブジェクト このように互いに変換したい場合、いくつかのjQuery関数を組み合わせて使えば簡単に変換可能です。 ということでここではその変換テクニックについて詳解していきます。 jQueryオブジェクトをHTML文字列に変換する方法 まず初めはjQueryオブジェクトを文字列としてのHTMLに変換する方法 その変換は次のような手順で可能です。 変換したい要素を入れるダミーの要素を作る 要素をclone関数でコピーしてダミー要素に挿入 html関数でダミー要素内部のHTML取得 clone関数というのはあるjQueryオブジェクトのディープコピーを取得できる関数です。 それでこの関数と要素内部のhtmlを取得できるhtml関数をうまく組み合わせれば変換できます。 では具体的な例を使って説明しましょう。 例えば次が
jQuery AJAX通信でリクエストヘッダに動的に任意のコードを付与 - Oboe吹きプログラマの黙示録
jQuery AJAX通信でHTTPリクエストヘッダに任意のコードを付与するには、 headers{ }, を付ければ良いのだが、 折角なので、Wicket でページ表示のタイミング＝Page コンストラクタ実行で付与する値を決めて 送るようにする。 ページが読込む JavaScript は、以下のように用意（途中省略） var custom_id; var c_type; var setCustom = function(a, b){ custom_id = a; c_type = b; }; // 省略 $.ajax({ type: 'POST', timeout: 10000, url: "/xxxx", headers: { "CUSTOM_ID" : custom_id, "C_TYPE" : c_type }, data: { "kind":"add", "xscaleLast
jQueryでfadeOutの後にremove - Qiita
としてみたところ、 フェードアウトせずにそのまま消えてしまった。 ちょっと調べてみると、処理を待つキューに入る処理と入らない処理があるとのこと。 エフェクト系は概ね入るようだけど、remove()はキューに入らない。 キューに入れるには.queue()を使う。
jQuery:親ウィンドウに子ウィンドウのデータを反映するときの注意 – BmathLog
そもそも jQuery で親ウィンドウの要素に値を埋める時 window.opener.$(要素).val(値) とすればよいのだが、サンプルをつくったら window.opener.$ is not function というエラーがでて反映どころではない状況に陥った。 注意点 いままで XoopsCube とか ZendFramework で画面を構成しているもので作業しているときは自動的にどの画面にも jQuery を読み込ませていた。 サンプルでは子ウィンドウ側では jQuery を読み込んでいたが、親ウィンドウでは読み込んでいなかった。 親ウィンドウも読み込んでいないと先のエラーが出る、ということがわかった。そりゃそうだろう、とわかってしまえばそうなのだが、気づかないとハマる。手っ取り早くサンプルを作ったつもりが思わぬ落とし穴に気づかず時間を浪費した。 親ウィンドウのデータ参照だけ
phiary
Code html 目次となるアンカーと, ページトップに移動するアンカーを設置しています. <body> <h1 id='top'>jQuery でページ内リンクを全てスムーズスクロールにしよう</h1> <h2>Table of contents</h2> <ul> <li><a href='#section1'>Section 1</a></li> <li><a href='#section2'>Section 2</a></li> <li><a href='#section3'>Section 3</a></li> <li><a href='#section4'>Section 4</a></li> </ul> <h2 id='section1'>Section 1</h2> <p class='pad'>Text Text Text Text</p> <a href='#top'
スマホでソフトウェアキーボードを表示させない。 - Qiita
jqueryのdatepickerをスマフォで使っていてキーボードが邪魔だから非表示にしたい！ってことで inputタグに対してreadonlyをつかって読み込み専用のボックスにしてやることで対応。 これによって値が送れるかつ、スマフォのソフトウェアキーボードを出さないということが可能です。 ただし、入力はjsからしかできなくなります。 参考タグ <input type="text" name="date" value="0000-00-00" readonly="readonly" /> Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する | ITハット
JS/jQueryでCSS疑似要素である:before:afterのプロパティを取得し変更する jQueryにはCSSのプロパティを取得できる css() という関数がありますが、残念ながら疑似要素には対応していません。 サンプル要素 .pseudo::before { content: '疑似要素取得'; } 今回はこの要素の content の値を取得・変更していきます。 取得する var property = window.getComputedStyle($('.pseudo')[0], '::before').getPropertyValue('content'); console.log(property); // 疑似要素取得 JSの関数を使って疑似要素のプロパティを取得することができます。 getComputedStyle() 関数の第二引数に ::before または :
jQueryでmarginも含めた幅や高さを取得 | このコードわからん
しょぼい話し。 たとえば #id{ height: 10px; width: 10px; margin: 5px; padding: 5px; } とした時に、jQueryで普通に $('#id').height(); を実行してもheightで帰ってくる値は 10。 しかしながら、 $('#id').outerHeight(); ってやると、paddingを含んだ高さが返ってきます。 今回の場合は20。 marginを含めるには、trueを渡す必要がある。 $('#id').outerHeight(true); ってやると30だ。
jQuery.noConflict()を指定していると「$ is not a function」とエラーが出る
既存サイトにjQueryで処理を追加しているときに、「$ is not a function」とエラーが出て少し調べたのでメモ。 prototype.jsなどの$関数を使う他のライブラリと一緒に使用する場合、jQuery.noConflict()メソッドを実行して、$を使って記述する部分をjQueryに置き換えることで、他のライブラリとの競合を避けることができます。 今回の場合、処理を追加している部分より前でjQuery.noConflict()が実行されていたため、「$ is not a function」とエラーが出ていました。 JavaScript jQuery.noConflict(); $(function() { $('body').css('background', '#999'); }); jQuery.noConflict()でエラーが出る場合のデモページ $をjQuer
jQueryを利用してselected、checkedで選択状態に - matsukaz's blog
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
jQueryでradioボタンが変更された時のイベント処理
jQueryでradioボタンが変更された時のイベント処理 html <input name="test" type="radio" value="on" />on <input name="test" type="radio" value="off" />off jquery $( 'input[name="test"]:radio' ).change( function() { alert( $( this ).val()); // valueを表示 });
【jQuery】チェックされたチェックボックスを取得する - Qiita
<input type="checkbox" class="area" value="kantou">関東 <input type="checkbox" class="area" value="touhoku"> 東北 <input type="checkbox" class="area" value="hokkaidou"> 北海道 area = $('[class="area"]:checked').map(function(){ //$(this)でjQueryオブジェクトが取得できる。val()で値をvalue値を取得。 return $(this).val(); }).get(); //mapの結果がjQueryオブジェクトの配列で返ってくるので、get()で生配列を取得する。 console.log(area); //['kantou','touhoku']のような形で取得でき
jQueryに独自の関数を追加 - Toro_Unit
jQueryを使っているとやっぱり独自の関数を作りたくなってきますよね。 hoge()とhogehoge()というjQueryで使える関数を作ります。 [js] jQuery.fn.extend({ hoge:function(vars){ jQuery(this).addClass("hoge").css({color:"#FFF"}); return this; }, hogehoge:function(){ var $this = jQuery(this); $this.html("hogehoge"); return this; } }); [/js] こんな感じで独自の関数を定義できます。コードの再利用が簡単になるので、覚えておいて損はないです。 return thisを返しておくと、メソッドチェーンができるようになるので、忘れずに入れましょう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita![[jQuery]でcssプロパティを動的に追加、変更、削除する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7e28908ac9b9959fef7026fb9250b7af90da5995/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCalF1ZXJ5JTVEJUUzJTgxJUE3Y3NzJUUzJTgzJTk3JUUzJTgzJUFEJUUzJTgzJTkxJUUzJTgzJTg2JUUzJTgyJUEzJUUzJTgyJTkyJUU1JThCJTk1JUU3JTlBJTg0JUUzJTgxJUFCJUU4JUJGJUJEJUU1JThBJUEwJUUzJTgwJTgxJUU1JUE0JTg5JUU2JTlCJUI0JUUzJTgwJTgxJUU1JTg5JThBJUU5JTk5JUE0JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03MmMyZDAzNmU3ZGQ4NjEzYjg2YzZjMDBiZDdkMTY0OQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBrYXpUZXJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YjUzOTM5ZTFlZGJiOThjNjI0OTliNGI1NDY2N2Y0ZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D0fa2209207d0cd39648d80aa68a9cc91)
jsTreeのJSONデータを変えたい。
https://hozunomiya.xyz/?p=83