jQueryからネイティブJavaScriptへ置き換えの第一歩 - Qiita
この記事はJavaScript Advent Calendar 2016の9日目の記事です。 jQueryのセレクタはめちゃくちゃ楽なので多用しているのですが、最近ちょこちょこRiot.jsを使い始めたこともあり、jQueryを使うのもいいけど出来れば外部ライブラリは最小限にして書きたいよねーってことで、jQueryでこうやって書いてたの、ネイティブのJavaScriptで実現する場合どうやるんだっけ？という備忘録。 jQuery3.1.1 GoogleChrome54で検証 HTML5が解釈できるWebブラウザなら動くはず (IE？知らない子ですね……) セレクタ Selectors API jQueryでお馴染みCSSセレクタライクのセレクタをネイティブなJavaScriptでも使えるように実現しているのがSelectors APIです。 覚えるのはたった2つだけ！ document.
jQueryは有害なのか | POSTD
ずっと「～は有害なのか」という記事を書いてみたかったんです ^(1) 。 まず本題に入る前に、1つ言わせてください。 jQueryはWeb業界の発展に大いに役立った と私は考えています。jQueryがあることで、開発者はこれまで想像もできなかったことをできるようになりましたし、そういった機能をブラウザの製作者がネイティブに実装するきっかけにもなりました（もしjQueryが開発されていなければ、今でもdocument.querySelectorAllは存在していなかったでしょう）。jQueryは、今ある便利なツールを使うことができなかったり、IE8やそれ以下の過去の遺産をサポートしなければならない際に今でも必要になってきます。 しかし、そのようなケースはもはや稀なものとなりました。Web開発者の大半は、マーケットシェアの縮小した古いブラウザをサポートする必要はありません。更に、忘れてはならな
「JavaScript初級者のためのコーディングガイド」に補足を試みる - Qiita
はじめに http://qiita.com/raccy/items/bf590d3c10c3f1a2846b を見ていたら、はてブに「理由がないから」ということがよく挙がっていたので、理由をつけてあげたら有益な内容になるかな？と思い、拙いながらも補足を試みようと思います。 【2017 1/3 15:10 追記】 元記事の前提はgulpなどを使ってminifyなども行なえる（もしくは行う目標がある）前提の様子なので、中級者以上がターゲットかなーと思いました。そのつもりで読むととてもいい記事だと思っています。 「最新のJSの書き方を覚えてあとは変換機能に任せればレガシーなJSのキツイところに向き合わなくて済みますよ？」みたいなイメージだとわかりやすいかな？ ==、!= 理由 暗黙の型変換が発生して、別の型の比較が真で扱われてしまう場合があるため。 解説 サンプルコードにも出ていますが言葉足らず
非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が使えない環境でコーディングしようとすると、「どう書くんだっけ？」となることが多いです。ということで分かる範囲でチートシ
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
You Don't Need jQuery - Qiita
注意とお願い この記事の内容はもはや古いです。ここに書いている方法では動かないものをいくつか見つけました。参考にする際は動作をよく確認してから使ってください。 ひとつお願いがあります。「あれ、動かないぞ」というコードを見つけたら是非コメントか編集リクエストで教えてください。解決方法までなくても結構です。「これはもう動かないよ」という印をつけたいのです。 この記事はYou Don't Need jQueryの日本語訳と同じ内容です。 先日ひょんなことからYou Don't Need jQueryの日本語訳をさせていただきました。著者のCam Songさんからも快諾をいただけたので1、Qiitaでも公開させていただきます。 なお、本家の英語の説明は継続的にメンテされているので、この記事の情報は古くなっている可能性があります。 追記 この記事は当初は「もうjQueryは必要ない」というタイトルで
jQueryを使ったスライダーの作り方とその仕組み
Webサイトでは必ずと言っていいほどよく見かけるスライダーUIですが、どういった仕組みで動いているか知っていますか？ いまや便利で高機能なjQueryプラグインがたくさんあるため、わざわざイチから作る機会は少ないと思います。しかし、仕組みを知っておけばプラグインで対応できない場合に作ることができますし、プラグインをカスタマイズして実装することもできるようになります。 自分で作ることができるようになると仕様をプラグインに縛られることがなくなるため、わがままな要求にも応えられるようになります。なにより自分で作って動いてるものを見ると楽しいこと間違いなしです。 そういったものでバグが見つかったときの焦り具合も尋常じゃありませんが。 ということで、スライダーの作り方と仕組みを初心者向けに解説していきたいと思います。 （ここでいう初心者とはHTML・CSS・jQueryの基本がわかる程度です） ※I
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
Yahoo!番組表の映画にレビュー点数を表示する - ナレッジエース
おそらく、誰もがやる深夜のWebサーフィンは、究極のところ時間の無駄ではないのかもしれない。 それは、Webで夢をみているのにほかならないのだ。(T.B=リー「Webの創成」より) Created at: 2015-01-02 | Tags: javascript 最近、WOWWOWの映画を見てまして、だいたいYahoo!映画のレビュー点数4点以上(5点満点)を基準に見るものを選んでいます。 ひとつひとつレビュー点数を検索するのが面倒だったので、ChromeのUserScriptで番組表に表示できるようにしてみました。 Yahoo!番組表の映画にレビュー点数を表示する Yahoo!番組表用UserScript // ==UserScript== // @name Yahoo!番組表 映画レビュー点数反映 // @namespace http://n.blueblack.net/ // @i
HTML／CSS、PHP、jQueryの基礎を学ぶなら超オススメ！プログラミング学習サービス「Progate」
まずはProgateへアクセスしてアカウントを作成。私はTwitterで認証しました。 現在学べる言語は HTML & CSS PHP jQuery の3言語の基礎部分。 とりあえずHTML & CSSをやってみましょう。 学習の流れ 学習の流れは3ステップ。 スライドで基礎知識を学習 ブラウザ上のエディタにコードを書いて実際に学習 プレビュー画面で実際に挙動を確認→答え合わせ といった感じです。 スライド スライドは非常に丁寧な作りとなっておりますので、よく読みこめば初心者でもしっかりと理解をしながら学習することが出来ます。 矢印キーでページ送りができるのがCool。 1レッスンにつき数枚のスライドが表示されますので、見終わったらエディタ画面へとGO！ エディタ画面 こちらがブラウザ上で動作するエディタ画面。左側が問題文、真ん中がエディタ、右側がプレビュー画面となります。 もう一度スライ
jQueryのセレクタ解説 - jQuery入門 - [SMART]
jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img") 例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 $("img").css("border","3px solid red"); セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。 セレクタは要素名以外にも、ID名やCLASS名を指定することができます。 たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。 $("img.photo") IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。 $("img#photo01")
![jQueryのセレクタ解説 - jQuery入門 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
bxsliderというjqueryを使用したいのですが、「前｜次」という表示がデフォルトですと下にしか表示されません。上... - Yahoo!知恵袋
bxslider というjqueryを使用したいのですが、「前｜次」 という表示がデフォルトですと下にしか表示されません。上と下に表示したいです。どこをいじればよいでしょうか？ bxslider というjqueryを使用したいのですが、「前｜次」 という表示がデフォルトですと下にしか表示されません。上と下に表示したいです。どこをいじればよいでしょうか？ bxslider の説明サイトがこちらですが↓ http://zxcvbnmnbvcxz.com/jquery-%E7%B0%A1%E5%8D%98%E3%81%8B%E3%81%A4%E9%AB%98%E6%80%A7%E8%83%BD%E3%81%AA%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC%E3%80%90bxslider%E3%80%91%E3%81%AE%E8%A8%AD%E7%B
bxsliderというスクリプトを使ってサイトにスライドショーを設置しましたが、1度ページ送りなどのボタンを押すと、以後... - Yahoo!知恵袋
bxsliderというスクリプトを使ってサイトにスライドショーを設置しましたが、 1度ページ送りなどのボタンを押すと、以後スライドが停止したままになります。 自動でスライドショーをリスタートする方法を教えて下さい bxsliderというスクリプトを使ってサイトにスライドショーを設置しましたが、 1度ページ送りなどのボタンを押すと、以後スライドが停止したままになります。 自動でスライドショーをリスタートする方法を教えて下さい 配布サイト(http://bxslider.com/)のオプションコマンド解説や、検索サイトで同様の質問がないか調べてみましたが分かりませんでした。 スライド中にページ送りやページャーのボタンを押して任意のスライドを停止状態で見た後、放置していると何秒後かにスライドショーが再開するように出来ると大変ありがたいです。 スクリプトの設置状況 jquery.bxsilder.
【Ninja】jQueryとCSS3アニメーションで作る何度もクリックしたくなる「ページトップ」ボタン / SQUEEZE - Web Design Studio -
前回の記事『Webデザインの参考にしたい遊び心あふれる「ページトップ」ボタン9個』にならって、jQueryとCSS3アニメーションを使って遊び心あふれる何度もクリックしたくなる「ページトップ」ボタン作成してみました。 Ninjaページトップボタンブックマークバーとスクロールアニメーションを活かしたページトップボタンにしてみました。サンプルページをご覧ください。 サンプルページ » 忍者登場はCSSスプライトアニメーションコマ送りでアニメーションさせるため、1枚のPNG画像に32px×32pxの絵を10個並べました。マウスオーバーした時に、X軸方向に-32pxずつ背景画像がずれることでアニメーションしているように見えます。 .ninja{ display:block; width:32px; height:32px; background:url(images/ninja.png) no-r
jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。 | Ginpen.com
仕事の進みがちょいとアレなので、現実逃避もとい気分転換に。 フォームの入力内容を、jQuery.ajax()を使ってサーバーへ送信したいって時のパターンです。 基本的な流れ フォームのsubmitを拾う 通常の送信はキャンセル 送信ボタンを無効化 送信先URLやフォームの入力値を取得 送信 受信後、送信ボタンを戻す 入力値をどう得るか、というのがポイントかと思います。 送信ボタンを無効化するってのはやらなくても良いんだけど、誤操作防止のためにも是非やって頂きたいと思います。あと送信ボタンの制御以外にも応用がききます。 デモ なんかお問い合わせフォーム的なものを用意しました。 まー実際にお問い合わせフォームをAjaxで送信する場面なんてないような気もするんですが、基本パターンという事で。
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
40分で覚える！jQuery速習講座 (1/6)
いまやWeb制作に欠かせなくなったJavaScript。でも、「JavaScriptはほとんど“アリモノ”で済ませている」という方も多いのでは？ そこで、WebデザイナーやマークアップエンジニアなどのWeb制作者の方向けに、いま一番人気のJavaScriptライブラリー「jQuery」の基本を学べる特別レッスンをお届けします。題して、「40分で覚えるjQuery」。要点だけにぎゅっと絞って解説しますので、手を動かしながら今すぐjQueryを始めましょう。 【0分目：導入編】 jQueryのダウンロードと利用方法 jQueryのライブラリー本体（JavaScriptファイル）は公式サイトからダウンロードし、head要素などにscript要素を書いて読み込みます。
CSSは分かるけど jQuery は苦手 … という人が jQuery に親しんでくれるといいなーと思って書きました
Webデザインをしていると、HTML と CSS だけではできない表現ってありますよね。そんな時によく使うのが jQuery。今回は jQuery っていまいちよく分からない ... っていう人が、jQuery に少しでも親しんでもらえたらいいなーと思って、知ってる事をまとめてみました。なので jQuery 初心者さん向けの記事です。 とっても当たり前なんですけど、Web サイトは基本的に HTML で書かれていて、デザインは CSS で装飾されていますよね。最近では CSS3 の登場で、簡単なアニメーションも CSS で作れるようになりました。でもクライアントワークでは、まだまだ CSS3 を使える部分が限られているし、Webデザインに少し動きなどをつけたい時などは、まだまだ jQuery を活用する事も多いです。 私は Javascript が苦手で、jQuery もどちらかというと苦
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
漢は黙ってjQuery
CodeMyUI