jQueryで楽になる部分、楽にならない部分、顧客が本当に必要だったもの - Qiita
俺も昔はお前のような jQueryスパゲッティジェネレーターだったのだが、膝にReactを受けてしまってな… 基本的な方針 とくにライブラリ設計者において、小さなモジュールを単機能で分割する以上、ライブラリ設計者は可能な限り依存を減らすことを求められます。node環境ならdependency hellの回避のため、フロントエンド環境ならファイルサイズを減らすためです。 ライブラリ設計者ならずともコードのポータビリティを維持するため、できるだけライブラリに依存しないコードを書くのが望ましいです。 Githubみてる限り、最近書かれるJSのライブラリの多くはjQuery非依存です。ユーザーから見る限りは、jQueryElement渡すかHTMLElement使うかぐらいの違いですけどね。 また、Angular, React等のSPAをスクラッチで設計する場合、気づいたらjQueryを使っていな
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
jQuery.fn.onに名前空間をつけることができる - Qiita
恥ずかしながら今日まで知らなかったのですが、jQueryはイベントハンドラを登録するときに名前空間をつけることができます。（名前空間というよりはクラスという言い方の方がしっくりくるのですが、jQueryのドキュメントがnamespaceと表現しているので名前空間と書くことにします） 例えば、あるボタンのクリックイベントにイベントハンドラをつける時にこういう風に書きますが $('.button').on('click', function (e) { /* イベントハンドラ */ });
jQueryについての私見 - mizchi's blog
jQueryでいいやん派の意見 / “Angular JS Kinda Sucks | OKmaya” http://t.co/n4ZlEmeNA4— 高意識エネルギー (@mizchi) 2014, 2月 14 jQuery、経験値貯めてレベルが上がれば上がるほど保守性下がる不思議なライブラリなんですよ…— 高意識エネルギー (@mizchi) 2014, 2月 14 使いこなしすぎると保守性下がる系ライブラリ、jQuery以外にも、pythonのfunctoolsとか、ScalaのList系ライブラリとか、C++のテンプレートとか、その辺— 高意識エネルギー (@mizchi) 2014, 2月 14 jQuery経験値貯めるより find, attr, css, on にのみ用途を限定する方が結果として綺麗になるのが僕の得た結論です— 高意識エネルギー (@mizchi) 2014,
自作オブジェクトのイベントのやりとりにはjQuery.triggerではなくjQuery.triggerHandlerを使うほうがよいと思った - hitode909の日記
DOMオブジェクトには昔からdispatchEventとか，addEventListenerとかあって，最近だと，node.jsのEventEmitterとか，jQueryのon, triggerを使って自作のオブジェクト間でアプリケーション的に定義されたイベントをやりとりできる． これまで，自作オブジェクトからイベントを発行するのに，jQueryのtriggerを使ってたけど，意図しない挙動をすることがあることが分かって，triggerHandlerを使うように変えた． jQuery.trigger()は，イベントタイプと一致する関数をレシーバが持ってるとき，その関数が呼ばれる． イベントのやりとりと，メソッドの呼び出しは独立しているというイメージがあったので，うっかり同名のメソッドを定義したときに，一見するとよく分からない挙動になって，難しい． なので，自作オブジェクトがイベントを発行
ResponsiveSlides.js · Responsive jQuery Slider & Slideshow
ResponsiveSlides.js v1.55 Simple & lightweight responsive slider plugin (in 1kb) ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using elements inside a container. It has been used on sites like Microsoft's Build 2012 and Gridset App. ResponsiveSLides.js works with wide range of browsers including all IE versions from IE6 and up. It also adds css max-width support for
Owl Carousel
How To Use 1. Load jQuery and include Owl Carousel plugin files To use Owl Carousel, you’ll need to make sure both the Owl and jQuery 1.7 or higher scripts are included. <!-- Important Owl stylesheet --> <link rel="stylesheet" href="owl-carousel/owl.carousel.css"> <!-- Default Theme --> <link rel="stylesheet" href="owl-carousel/owl.theme.css"> <!-- jQuery 1.7+ --> <script src="jquery-1.9.1.min.js"
jQueryプラグインのオプションとHTML5 data-*属性でハマった時に幸せになれるかもしれないまとめ | ゆっくりと…
意外と要注意… なんて記事を書いておきながら、実際に HTML5 のカスタム・データ属性にオプションを指定する jQuery プラグインを作っていて、かなりハマってしまいました。 data-* 属性に書いた複雑なオプションを jQuery Data API で処理するには、JSON で指定しなくちゃダメなんですネ。ちゃんと ドキュメント にも書いてありました 😉 。 ということで、「もっと簡単に記述できるようにしたい！」を叶える 簡易な data-* 属性パーサー を作りましたので、ここに発表します。 ついでに data-* を使った jQuery オプション指定のユースケースを整理し、その実装方法をまとめてみたいと思います。 jQuery オプションと data-* のユースケース プラグインの設計段階では、オプションの構造とその指定方法を想定しておくことが重要です。そこでまず、想定し
jQuery の .animate() で普通のオブジェクトをアニメーションさせる - ダーシマ・ヱンヂニヤリング
説明するより見たほうが早かったりして。 $({ x:0, y:100 }) .animate({ x:100, y:50 }, { duration:5000, progress:function (anim, progress, fx) { console.log('x:' + anim.elem.x, 'y:' + anim.elem.y)); } }) このように、プリミティブなオブジェクトでも animate メソッドでグリグリと値を変化させられる。通常の animate と同じように、 duration や easing といったオプションも指定できる。 案外知られていないのではなかろうか。スムーススクロールなどに使えそうですね。 jQuery 1.7.x 以前の場合 jQuery 1.7.x 以前は、 animate メソッドのオプションとして progress を指定できない
Flexslider WordPress Slider Toolkit by WooThemes
Get started with FlexSlider in 3 easy steps! Step 1 – Link files Add these items to the <head> of your document. This will link jQuery and the FlexSlider core CSS/JS files into your webpage. You can also choose to host jQuery on your own server, but Google is nice enough to take care of that for us! Step 2 – Add markup The FlexSlider markup is simple and straightforward. First, start with a single
Smooth Scrolling | CSS-Tricks
Hey! Before you go too far down the rabbit hole of JavaScript-based smooth scrolling, know that there is a native CSS feature for this: scroll-behavior. html { scroll-behavior: smooth; } And before you reach for a library like jQuery to help, there is also a native JavaScript version of smooth scrolling, like this: // Scroll to specific values // scrollTo is the same window.scroll({ top: 2500, lef
Shuffle Letters Effect: a jQuery Plugin
In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element - an interesting effect that can be used in headings, logos and slideshows. Updated on 10 Sep 2011: The plugin was slightly improved by including a callback function, called when the animation is complete. Just pass it as a property of the arguments object: $('#el').shuffleLetters({callba
Direction-Aware Hover Effect with CSS3 and jQuery | Codrops
How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse. In today’s tip we’ll show you how to create a direction-aware hover effect using some CSS3 goodness and jQuery. The idea is to have a little overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. When
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
画像からカラーを取得して背景に適用するjQueryのプラグイン。
Glide.js
jQuery Content Slider | Responsive jQuery Slider | bxSlider
GitHub - alexanderdickson/waitForImages: A jQuery plugin that lets you attach callbacks to useful image loading events.
Loading...
GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothly
GitHub - GianlucaGuarini/Vague.js: Vague.js is an experimental script that allows you to blur any kind of html element thanks to the SVG filters
