JSで1つめのクラス名を取得する。 - かもメモ
javascriptで要素についたクラスの1つめだけ取り出したい時。 element.className.split(" ")[0]; で最初のクラス名を取得できます。 たいていjQueryを使っている思うので、 // HTML <p id="hoge" class="className1 className2">要素だよ</p> // jQuery $('#hoge').attr('class').split(" ")[0]; の様な記述をすることが多いんじゃないかと思います。 が、ここでトラップです。 jQueryのattrを使うと、 下のように要素にクラスが無い時にだとsplitできないよ。とエラーが起きてしまいます。 // HTML <p id="hoge">要素だよ</p> // jQuery $('#hoge').attr('class').split(" ")[0]; //
【jQuery】$.ajaxで取得したファイルが、更新からn時間以上経過していたら
【重要！】WordPress 4.7.1に深刻な脆弱性 コンテンツが改ざんされるとこうなる 2017.02.07
Stripe.com Navigation in CSS and jQuery | CodyHouse
Stripe.Com Navigation A morphing dropdown that animates according to the size of its content. A few weeks ago stripe.com launched a new website design. It looks awesome. One thing we dig in particular is the morphing navigation dropdown: instead of hiding and showing a new dropdown “container” when the user switches from one navigation item to the other, they animate the dropdown background to mak
JavaScriptでdelegateをつかうメリットを先生と生徒に例えてご説明しましょう - みかづきブログ その3
※ イメージの話なんで実際のJavaScriptの挙動と異なるところがあります。 イメージの話 例えばあなたが30人の生徒を受け持つ教師だったとしましょう。 そして30人の生徒に、 「肩を叩かれたら自分の出席番号を言うようにしましょう。」 という指示を出すことにしたとします。 これをクラス全員、1人1人に伝えるのはなかなか骨が折れる作業です。 また、全員に伝えきったとしても、転校生がくるたびにその生徒に説明しなければならないですし、 逆に転校してしまう生徒には、 「次の学校では肩を叩かれても自分の出席番号を言わなくていいからね。」 と指示を解除してあげる必要があるかもしれません。 そんな時、生徒1人1人に指示をだすのではなく、教室側に、 「この教室では肩を叩かれたら自分の出席番号を言うようにしましょう。」 というポスターを張るとしたらどうでしょう。 まず、伝える手間が相当軽減されます。 ま
20160930 フロントエンド高速化 業務編 (社内勉強会)
業務内容が書いてあったのを省いたのでわかりにくくなっているとは思いますがアップロードしておきました。Read less
「Barba.js」で pjax 対応サイトにして遷移の体感速度を上げる - フロントのエンド
タイトルと画面の一部分だけを入れ替えてページ遷移の体感速度をいい感じに上げてくれるpjax。 pjax自体も導入はそこまで難しくはないんですが、「Barba.js」を使ったら簡単すぎてひっくりこけたので導入メモ。このサイトで使っています。160901現在。 luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. 詳しくは Barba.js のリポジトリのリドミを読んでくれという感じなのですが luruke/barba.js: Create badass, fluid and smooth transition between your website's pages. <script src="barba.min.js" type="text/javascript">
ajaxの際に form.serialize で一括送信できる件 - 技術ブログ
今までバカな事していた。ajaxでpostとかgetする際に、いちいち各inputの値とかを取得していたんだけどそんなことしなくてもform.serializeで一発だった。 javascript function postForm(btn) { $.ajax({ type: "post", url: "/test.php", data: $(btn.form).serialize() + '¶m=1', success: function(json) { // 成功時の処理 } }); } html <form> .. <input type="button" value="送信" onclick="postForm(this)" /> </form> これでformの値をpostしてやるとphp側でうまく配列として取得できる。 serializeすると &xxx=xxx の形式
Ajax 通信を任意のタイミングで中断する方法と、そのとき注意することの話 - BattleProgrammerShibata
jQuery の $.ajax を用いた Ajax 通信処理を実装していると、「リクエストした Ajax 通信を中断したい」というストーリーに遭遇することがある。 こういうときは $.ajax が返却する jqXHR オブジェクト を変数に取得しておき、その中にある abort メソッドを叩いてあげることで Ajax 通信の中断を実現することができる。 jqXHR.readyState の値を見て abort するべきか否かを判定するとよりベターだろう。 readyState は 0～4 の値を取る。 値 説明 0 オブジェクトが生成された 1 サーバとの接続を確立 2 リクエストを送信している 3 レスポンスを取得中 4 レスポンスの取得完了（処理可能） なので、「0より大きく4より小さいならば」というときに abort を叩いてあげるといい。 中断時に注意すること ところで $.aja
別ソースをインポートするには？［JavaScript／jQuery］
JavaScriptファイルに別ファイルの内容を取り込むには、jQueryのajaxメソッドを利用できる。ECMAScript 2015のmoduleを使った例も紹介する。 連載目次 JavaScriptのソースコードに別のソースコードを取り込みたいと思ったことはないだろうか？ 例えば、JavaScriptのソースコードを複数のファイルに分けたいのだが、HTMLの<script>タグで指定するJavaScriptのファイルは1つだけにしておきたいといった場合だ。jQueryを使えば、それが簡単にできる。 本稿では、jQueryを使ってソースコードを取り込む方法を解説するとともに、JavaScriptの新しい機能による方法も紹介する。 jQueryを使って別ソースをインポートするには？ jQueryのajaxメソッドを使えばよい。 同期的に取り込むには、次のコードのようにajaxメソッドを使
レスポンシブサイトの切り替えポイント〜javaScript | IT工房｜AI入門とWeb開発
レスポンシブサイトを作成するときに、javascriptで切り替えポイントを認識させる方法の説明です。 javascriptですからjQueryでも使用できます。 CSSメディアクエリによる切り替え まずは、CSSでのメディアクエリを利用した切り替えポイントの例です。 501px以上ではdiv.baseは赤色ですが、500px以下ではdiv.baseは緑色になります。 これはCSSのメディアクエリで指定したものです。 CSSメディアクエリによる切り替えサンプル HTMLコード <div class="base"></div> CSSコード .base{ width:200px; height:100px; background-color: red; } @media (max-width:500px){ .base{ background-color: green; } } jQuery
非jQuery環境ではどう書んだっけ?チートシート - Qiita
※追記 コメントでこの記事よりも断然質の良い記事を教えてもらいました。 @kabochaさんありがとうございます。 You Don't Need jQuery https://github.com/oneuijs/You-Dont-Need-jQuery 追記の追記。 日本語訳のお手伝いをさせていただきました。 github https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-ja.md [Qiita]もうjQueryは必要ない http://qiita.com/tatesuke/items/b9548dd484b01b139b74 jQueryが使える環境でコーディングした後、jQueryが使えない環境でコーディングしようとすると、「どう書くんだっけ？」となることが多いです。ということで分かる範囲でチートシ
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
jQueryと他のライブラリのコンフリクトを避ける方法 | HALAWATA.NET
jQueryはプラグインの種類も豊富なのでそれだけで事足りることがほとんどではありますが、prototype.js等のライブラリと併用したいというときもたまにあります。 そういう場合に起こるのがライブラリ同士のコンフリクト（衝突）で、$関数がそれぞれで異なる定義をしているために起きてしまうものです。よってこれを何とかしておかないとエラーになってしまいます。 回避方法その1 – $関数ではなくjQuery関数を使う 回避方法その1は$関数ではなくjQuery関数を使う方法です。jQuery関数と$関数は名前が違うだけで中身は同じです。 まず、1行目のjQuery.noConflict();$関数を他のライブラリに開放します。これで$関数が使えなくなるので、代わりとしてjQuery関数を使います。 そのため、jQueryスクリプト内の$はすべてjQueryとする必要があります。 jQuery.
npmとBrowserifyでjQueryを管理する
npmとBrowserifyでjQueryを管理する 本エントリーは「to-R JavaScript Advent Calendar 2015」18日目のエントリー、これまではJavaScriptライブラリの管理にはbowerなどが使われていましたが、最近ではnpmを利用することが多いようなのでnpmを利用した管理方法についてjQueryを利用して解説を行います。 まずはnpm init すでに開発環境としてnpmを利用している場合は不要ですが、まずは開発ディレクトリでnpm initと入力してpackage.jsonを作成します。 npm init 色々聞かれますがGitHbuなどで公開しないのであれば基本Enterで問題ありません。 まずは雛形を用意 確認用の雛形を用意しましょう。 package.jsonと並列にindex.htmlとbundleディレクトリ、destディレクトリをそ
2つのバージョン違いのjQueryを併用する | 忘れないようにメモを
jQueryのプラグインって便利で開発にとても役立つのですが、 とあるバージョンでは動くのに最新バージョンでは動かないプラグインがあったりして、、、 組み合わせていろいろ使っていくとそのうちそういうのに遭遇するんですよね。 そんな時は、複数のバージョン違いのjQueryを併用するためにちょっとした処理を記述する必要があります。 方法１ jQueryの$に別名を付けて使用する方法。 ＜script type="text/javascript" src="jquery-1.9.0.js" ＞＜/script＞ ＜script type="text/javascript"> var $132 = $.noConflict(true); </script> ＜script type="text/javascript" src="jquery-1.3.2.js" ＞＜/script＞ この方法を使う
divもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」
TOP > javascript , WebDesign > divもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」 IEのサポートも縮小され、少しづつではありますが、制作の現場もアニメーションやエフェクトに対して積極的になってきました。本日紹介するのはdivもタブもチェックボックスも回転のエフェクトを与えることができる「TURNBOX.js」です。 こちらは様々な要素に対して、回転のエフェクトを与えることが可能となっております。例えばON/OFFのトグルだったり、アップロードだったりダイアログだったり、div自身にも与えることができるため、ページ全体を切り替えるようにした使い方も可能です。 詳しくは以下 様々な要素に対して簡単にアニメーションを割り当てられ、さらにパラメータで挙動の制御もある程度可能になっています。 あまりにも頻繁に利用し過ぎ
jQueryで要素数を取得する方法のまとめ
jQueryで要素数を数える方法のまとめです。 ここではul要素の子要素li要素の数を数えるサンプルを使って、いくつかの方法を紹介します。 size()メソッドは1.8から非推奨という指摘を頂いたので削除します。失礼致しました。 １．size()メソッドで数える まず、size()メソッドを使って要素数を数える方法です。 <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $(function() { var size = $('li').size(); alert(size); }); </script> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li>ddd</li> <li>eee</li> </ul> ２．lengthプロパティで数え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Paper.li
Biruto hentai
[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
