jQueryは必要ない（You Don't Need jQuery）You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]
みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React、vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 DOM についての説明は長くなるのでここでは省きますが、簡単に説明すると HTML や XML の構造を表現するための仕様です。DOM は JavaScript のためだけにある仕様ではなく、 Java や Python など、多くの言語に対応する仕様です。 前述した各ライブラリーは多くのウェブブラウザー間の差異を吸収してくれるため、非常に便利なものです。しかし、その機能の豊富さからライブラリー自体のサイズは大きく、ウェブブラウザーで読み込むファイルの数や合計の容量が増えてしまいます。状況
![フロントエンドで知っておきたい要素指定の考え方 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/06141560504fa4e927919dd41de3eab52a11d032/height=288;version=1;width=512/http%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkoharusugiura%2F20151222%2F20151222103513.png)
jQueryでappend関数を使ってDOM要素をネストさせたいとき - knt45の日記
2013-01-30 jQueryでappend関数を使ってDOM要素をネストさせたいとき jQuery 以下の書き方だと、 $('<div>').append('<ul>').append('<li>') こうなってしまうので、 <div> <ul></ul> <li></li> <div> こう書くのが正しい。 $('<div>').append($('<ul>').append('<li>')) 以下のように欲しい形になる。 <div> <ul> <li></li> </ul> <div> knt45 2013-01-30 09:59 jQueryでappend関数を使ってDOM要素をネストさせたいとき Tweet Share on Tumblr 広告を非表示にする コメントを書く « jQueryで連続したDOM要素のいずれかをクリ… Rubyのディレクトリ・ファイル操作周りの…
SCRIPTY #02 に行った - Qiita
SCRIPTY#2 〜フロントエンド紳士・淑女のための勉強会〜 http://scripty.connpass.com/event/10345/ セッション JSコードの品質 - platoの紹介 by @mwakkiy JavaScriptでトゥイーンアニメーション入門 by @wemra Flux + React.js入門 by @pirosikick Dockerを使ったWordPressテーマ開発、Selenium Serverについて by @moongift Meteorフレームワークについて @rukiadia ライブコーディングのすゝめ by @shamabe 僕は遅刻して「JSコードの品質 - platoの紹介」はちょっとしか聞けなかった。 個人的に面白かったものをいくつか紹介します。 わかってない所とか多々ありそうなので、間違っているところは遠慮なくPicaxe投げても
[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI
tooltip ツールチップ Shadow UIの使い方 Step 1: 外部ファイル まずは、ベースとしてhead内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="/shadow-ui/assets/js/jquery.js"></script> <script src="/shadow-ui/js/shadow.js"></script> スタイルシートはベースとなるファイルとそれぞれ用のファイルが用意されています。 <link rel="stylesheet" href="/shadow-ui/assets/css/main.css"> <link rel="stylesheet" href="/shadow-ui/css/ui.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-dr
jQuery 開発者向けメモ - リファレンス
リファレンス $() jQueryオブジェクトを作り出す関数です． $("CSS文字列") CSSで要素を指定し，マッチした要素を持つjQueryオブジェクトを返します． 詳しい指定方法は Selectors を参照してください． jquery 1.1 までは XPath による指定もできましたが，最新版では削除されています． XPath Compatibility Plugin を利用することで，1.2 でも XPath を利用可能です． var $toc_1 = $("#toc_1"); jquery_dump($toc_1); var $h1 = $("h1"); jquery_dump($h1); var $h1head = $("h1.head"); jquery_dump($h1head); var $ahref = $("a[@href^='http://jquery.com
PHPでjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
あ、どうも僕です。 今日はPHPでWebサイトをクローリングしてjQueryチックにDOMを操作して、データを取得したり、画像などをダウンロードする方法について書こうと思うよ！ これができると何がうれしいかって、いつも手動で巡回しているサイトなんかにアップされてる画像データを自動でダウンロードできるようになるんだよね。 人がやっていた作業をコマンド一発で自動化できるから、捗ること間違いなしだよ！ あれ、この人、この前node.js使って同じことやってなかったっけか？ node.jsを使ってjQueryチックにWebサイトをクローリングする方法 なんで同じことをPHPでやってんだ？とか思っていやしないだろうか。ああそうさ！ついこの前、node.jsで全く同じことをやって記事を書いたさ！なぜかって！？それは、node.jsの非同期地獄にやられたからさ！ やつめ、データのダウンロードからデータベ
js で利用する DOM の名前をどうやってつけたらよいのか - おもしろwebサービス開発日記
js で DOM をゴニョゴニョしたい時、きっと皆さんは id や class で DOM に名前を付けて、その名前を利用して js の処理を書いていると思います。 例えば<input type="button" class="update" value="更新" />のようなボタンがあったとして、 js 側で更新処理を書くときには下記のように書きます。 $('.update').on('click', function () { // update 処理 }) でもこれだと問題になるケースがあります。よくあるのが、マークアッパーとフロントエンジニアが分業していて、マークアッパーがデザインのために class 名を変えてしまい js が動かなくなるパターン。分業せずに一人で全部やってたとしても、時間が経つにつれ使っている class 名が js だけで使っているのか、css でも使っている
手軽にレンダリング！テンプレートエンジンTransparency
はじめに Transparencyは、Javascriptで記述されたテンプレートエンジンです。クライアント側にて機能します。このテンプレートエンジンは以下の特徴を持っています テンプレートをHTMLの一部として記述（DOM構造内に記述） 属性値に基づくデータの結合（<%= foo %>や{{foo}}などは不要） 繰り返し構造の描画（ループ処理の記述不要） 一般的なJavaScriptテンプレートエンジン（Underscore.js、Mustache、jQuery Templateなど）では、テンプレートをSCRIPTタグ内に記述します。レンダリング時にはテンプレートからHTML文字列を生成します。これらのエンジンを使った場合、HTMLファイルを編集しずらかったり、読み込みが遅れて画面がブレることが多々あります。 一方で、Transparencyを使うと、HTMLを編集しやすい上、レンダ
DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」:phpspot開発日誌
cssConsole DOM要素をターミナル風の入力エレメントにしてくれる「cssConsole」 divエレメントをプラグインで追加される、.cssConsoleで初期化。 次のようなインタフェースに変換され、入力ボックスに変化します。 inputの代用としても使えそうですが、サーバコマンドを載せる場合なんかで、ちょっと変更してコピーする的な用途に使えそうです。 関連エントリ ターミナルに文字を打ってるアニメーションエフェクトが作れるjQueryプラグイン「Typist」 コーディングもブラウザ上でできるオープンソースソフトウェア「Codiad」 クリックで水滴を落としたようにアニメーションさせられるｊQueryプラグイン「jQuery.twinkle」
DOM操作用に作られた軽量JavaScriptフレームワーク・Chibi
DOM操作用の軽量JavaScriptフレーム ワーク・Chibiのご紹介。圧縮版で 5KBほどのフレームワークで、単純な DOM操作をjQueryライクに出来ます。 オールドブラウザにも対応してくれて るみたいです。 単純なDOM操作用に作られたJSフレームワーク。軽量、IE6やモバイルを含む、様々なブラウザに対応できるみたい。 ChibiはDOM操作に特化したJSライブラリ。圧縮版で5KBほどです。単純なDOM操作だけの為にjQueryを使っているサイトなら、こういう軽いサイズのフレームワークを使ったほうがパフォーマンスの改善も期待できますね。 Sample 動作テスト。a要素を別窓になるように操作しました。 <script src="chibi-min.js"></script> <script> $('a').attr('target','_blank'); </script>こん
PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌
phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に属性を追加等のDOMを操作も簡単に行えます。 jQueryの便利さがPHP上でも十分に使えますので知っておくと確実に面倒な処理を楽に書けるようになるでしょう。 スクレイピング HTMLのスクレイピングをする場合には超簡単かつ、jQueryを使ったことがある方なら抵抗なくすぐに習得できます。 ちょっとコードを書いて実験してみました。 と書くと <div id="two"></div>の中身である t
Scraping Web Pages with jQuery, Node.js and Jsdom - Liam Kaufman
I always found it odd that accessing DOM elements with Ruby, or Python, wasn’t as easy as it was with jQuery. Many HTML parsing libraries employ Simple API for XML (SAX) that can handle extremely large XML documents, but is cumbersome and adds complexity. Other parsing libraries use XML Path Language (XPath), which is conceptually simpler than SAX, but still more of an effort than jQuery. I was pl
デブサミ2012で大規模JS開発について発表してきました - yo_waka's blog
「Developers Summit 2012 - 10年後も世界で通じるエンジニアであるために」で発表してきました。 デブサミ2012 kintoneの表と裏 - 表編 View more presentations from yo_waka イマドキのJSの話とかではなくて、UIをJSで作る際の設計ノウハウみたいな話にしたので、つまらなかったら申し訳ないなと思ってたのだけど、終わったあとも何人か質問しにきてくれた方がいたのでホッとしました。 10年後も・・というテーマとして、激しく進化するJSの最新動向に左右されず使えるネタを選んだつもりではあります。 普段からJSでもパフォーマンス意識して設計してる方には当たり前のことばかりだったかも。 jQueryは甘えってのは書いてみたかっただけですすいません。。 けど、適材適所というかSinatraで100画面近くあるようなWebアプリは作らな
デブサミ2012 kintoneの表と裏 - 表編
The document discusses kintone's JavaScript library. It provides details on how kintone uses JavaScript for its UI components and event handling system. It also describes how kintone leverages the Closure Compiler to optimize and minify its JavaScript down to a small size for faster loading. Advanced techniques like deferred execution are used to improve performance.Read less
注目！サーバサイドからjQueryを使ってDOM操作·nodeQuery MOONGIFT
nodeQueryはnode.js用のサーバサイドjQueryで、サーバサイドでクライアントサイドのDOMを変更できたりします。 node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 インストールはnpmで行います。 まずサンプルのブログです。普通に表示されているのが分かります。 サーバサイドです。node.jsのスクリプトの中でHTMLタグを出力しているのが分かります。構文にjQueryが使われているのも分かります。 ブログの新規投稿です。 投稿できました。 Twitter検索です。 時間が更新されるデモです。サーバサイドの時間であるのがミソです。 サーバサイドのソースです。 nodeQueryを使うとサーバサイドと
jQueryのliveやdelegateは実際何をやってるのか
jQueryにはイベント制御のAPIとして、clickやmouseoverの元になるbindの他に、同じような呼び出し方のliveやdelegateが提供されている。 bindはDOM APIで提供されているaddEventListenerのwrapperだが、liveは以下のような実装になっている。 1. 第一引数のイベント名でdocument objectにlive用のイベントハンドラーをbindする 2. 1で設定したイベントハンドラー内でdocument object内に存在する要素上で発生したイベントを全てキャッチする ・イベントの発生元要素がbind時に設定されたセレクタに一致する場合、第二引数に指定されたユーザーのイベントハンドラーを呼び出す これはもともと「多量の要素に対してbindするとUIをロックしてしまう」という問題の対策として知られていた手法だが、liveはそれをj
SVG with Javascript習作 - Kengo's blog
SVG女子が話題を呼んでいることもあり、連休中にSVGに触れました。作ったのはJavascriptで動的に図形を描画したり動かしたりするもの。ジャンルとしてはSRPGやタワーディフェンスゲームに近いと言えます。 forked from: SRPG Map (Hex, SVG) - jsdo.it - share JavaScript, HTML5 and CSS その他にもいくつか書きましたので、興味をお持ちの方はご覧いただけると嬉しいです。 http://jsdo.it/eller86/bCQH http://jsdo.it/eller86/4pKB http://jsdo.it/eller86/qcC9 以下、気づいたことをメモしておきます。なお開発環境はMac OSX 10.6.7 + Chrome 11.0.696.65でした。 SVGはjQueryとの相性が悪い 今回はjQuer
[JS]あらゆる要素をガタガタ、ぷるぷる、ちりちりと振るわせるスクリプト -jRumble
テキストリンクやナビゲーションなど、ページ上のあらゆる要素を振るわせるjQueryのプラグインを紹介します。 jRumble デモ 振るわせるアニメーションは、ガタガタをはじめ、ぷるぷる、ちりちり、などにすることができます。 [ad#ad-2] jRumbleの実装 jRumbleの実装は簡単です。 div要素でもリンクでも、あらゆるDOM要素をガタガタさせることができます。 JavaScript 「jquery.js」と「jrumble.1.0.js」を外部ファイルとして指定します。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jrumble.1.0.js"></script> JavaScript ガタガタさせるDOM要素をスクリプト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery プラグイン作成入門
