第2回 jQueryの基本（お題編） | gihyo.jp
はじめに 第2回の今回からは本格的にjsdo.it -Share JavaScript,HTML5 and CSS-（以下、jsdo.it）を使ってJavaScriptを勉強していきたいと思います。毎回お題編と回答編に分けてやる予定で、お題編では基礎知識を解説してそれに関連した課題を出し、それをjsdo.itでつくってもらい、回答編で解説するというかたちで連載を進めていきます。 今回はjQueryの基本のお題編ということで、jQueryの基礎を解説したあと最後にお題がありますのでそちらを次回までにやっておくとより理解が深まるはずです。 jQueryってなに？ そもそもjQueryとはなんでしょう。まったく知らないという人もいれば名前くらいは聞いたことがある、いつもJavaScriptを書くときは使っている、さまざまだと思います。今回は初回なので念のためjQueryとな何なのかというところ
40分で覚える！jQuery速習講座 (3/6)
【10分目：基礎編】 jQueryでHTML/CSSを操作する jQueryにはさまざまな機能がありますが、Web制作者にとっては「HTML/CSSを操作するためのライブラリー」と考えておけば間違いありません。jQueryでHTML/CSSを操作するには、次のような書式でjQueryの命令を記述します。 jQueryの命令は豊富にあり、たとえばhtml()という命令を使うと、セレクターで指定した要素の内側を変更できます。 ▼サンプル1（スクリプト部分） $("p#first").html("<strong>変更後</strong>"); 上記のサンプルコードを実行すると、id属性に「first」が設定されているp要素の内容が、<strong>変更後</strong> に変わります。 ▼サンプル1（元のHTML部分） <p id="first">変更前</p> ▼サンプル1（実行結果） <p
jquery.jsを読み解く：第1回 jQueryライブラリ（1～171行目）｜gihyo.jp … 技術評論社
はじめに jQueryとは、John Resigによって開発され、最近非常に注目を集めている Javascriptライブラリです。 JavaScriptとHTMLの対話を劇的に改善し、Ajaxなどにより複雑化してきているWebアプリケーション構築に必要な処理を非常に簡潔に書くことができます。また、ブラウザの種類やバージョンによる違いも吸収してくれるため、プログラマの作業量も減らしてくれます。 本連載では、jQueryライブラリのコードを読みながら、実装として中で何が行われているのかを見ていこうと思います。 想定している読者は、jQueryライブラリをただ使うだけでなく、やっていることを理解したいという方、使われているコードを応用して自分なりの改造をしてみたい方、新たなプラグインを開発したいという方などです。 今回の連載では執筆開始時点の最新版であるバージョン1.2.2を対象としています。説
ウノウラボ Unoh Labs: jQueryのパフォーマンス最適化に関するTips
こんにちは、山下です。 今回は、jQueryのパフォーマンス最適化について説明したいと思います。 軽量と言われているjQueryですが、いろいろな機能を実現しようとして複数のプラグインを導入すると、だんだんと動作が重くなってきます。サーバ側をいくらチューニングしたところで、ブラウザ側での処理に時間がかかっていたら、せっかく訪問してくれたユーザに重いサイトとして認識されてしまいます。以下に、ウノウで運営している「映画生活」で実際に行っている方法を紹介します。 1. Packed版ではなくMinified版を使う jQuery1.1まではPacked版のみだったのですが、jQuery1.2からMinified版もダウンロードできるようになりました。Packed版よりもMinified版を使うことをお勧めします。どう違うのかというと、Packed版はファイルサイズを極限まで削減するために静的辞
ウノウラボ Unoh Labs: 簡単Ajaxライブラリ「jQuery」と便利なプラグインたち
こんにちわ、hideです。 最近は、jQueryというJavaScriptライブラリを使ってAjax関連の処理を書くことが多いです。なんといっても軽量で高速、XPathによる要素の指定がとても便利です。今回は、その便利なjQueryをもっと便利にするプラグインをいくつか紹介します。 ThickBox LightBoxのようなもので、画像の他にHTMLの表示も可能です。難点は、$()を使って書かれているので、他のライブラリと混ぜて使えないこと。僕はソース内の$()をすべてjQuery()に書き換えて使っています。 JSON for jQuery AjaxでJSONを取得して、処理できるようにするプラグイン。これは必須とも言っていいと思います。CallBack関数を指定してのJSONPも簡単。 BlockUI Plugin 画面の一部や全体を半透明のレイヤーで覆って操作できなくするものです
ウノウラボ Unoh Labs: JavaScriptライブラリといえば jQuery（入門編）
こんにちわ。山下です。 最近、私の周りではJavaScriptライブラリといえば、jQuery の名前がまず最初に挙がってくるようになってきました。今回は、jQueryって何が便利なの？っていう人向けに、ポイントを掻い摘んで説明します。 1.名前空間を汚さない 他のJavaScriptライブラリとかだとStringとかArrayを直接拡張してたりしますが、jQueryはグローバルな名前空間を汚しません。eachとかmapのような便利な関数もすべてjQueryオブジェクトの属性として定義されています。 jQuery.each, jQuery.extend, jQuery.grep, jQuery.map, jQuery.merge, jQuery.trim, etc. また、標準では $ にショートカットが割り当てられるのですが、jQuery.noConflict()と書くことで proto
キーフレームを使ったCSSアニメーションを実現·jQuery keyframe MOONGIFT
jQuery keyframeはCSSのスタイルの中で%を使ってアニメーションをキーフレーム単位で設定できるjQueryライブラリです。 CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったアニメーションを実現するjQuery keyframeを紹介します。 最初の表示です。ボックスをクリックします。 動き出しました。動きは一定ではなく、ペースを変えながら滑っていきます。 デモ動画です。 設定方法です。入れ子に設定しています。 jQuery keyframeではスタイルの指定の中でパーセントを指定してそれをキーフレームとしてスタイル指定を行います。leftやbackground、colorなどが利用できます。後はjQuery keyframeが自動的にその間の動
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ - Shinichi Nishikawa's
グラフを描画してくれるjQueryプラグインは、多分”jQuery Visualize”がベスト！ 2011 10/11 グラフを描画してくれるjQueryプラグインを紹介します。 グラフを動的に作ってくれるものとしては、他のjQueryプラグインやGoogle Chartというサービスなどがあります。 が、今回の”jQuery Visualize”は、中でも一番使いやすそうでしたので、ご紹介します。 他のプラグインについては、【jQuery】IEでも使えるグラフ描画ツール | 岡山のWebプログラマーがつぶやくブログ | 神歌.blogでまとめて紹介されています。 作れるグラフの種類 グラフは以下のものを使うことができます。 棒グラフ 線グラフ 線グラフで線の下を薄く塗れるやつ 円グラフ デザインは二種類 冒頭写真の黒っぽいCoolなのと別に、白っぽいのも用意されています。 また、背景画
<meter> polyfill (jQuery プラグイン) - JavaScript ライブラリー - HTML5.JP
使い方 JavaScript/CSS <script src="jquery.min.js"></script> <script src="jquery.html5jpMeterPolyfill.js"></script> <script> $(document).ready(function() { $('meter').html5jpMeterPolyfill(); }); </script> <style> meter { display: inline-block; width: 5em; height: 1em; vertical-align: -0.2em; } </style> HTML <meter value="20" min="0" low="30" high="70" max="100" optimum="100"></meter> <meter value="50"
自力でjqueryで動きをつけたい場合の考え方 | バニデザノート
なめらかに動くスライド、可愛いローディングやフェード、 次々と展開されるプレゼンテーション。 配布されている拡張ソースは圧縮されていて読めないし、 コピペすれば動いても、触れるのはcssとhtmlだけ。 だからなにがどうなってそうなるのか、 わからないままでもなんとなく使えてしまうjquery。 そのままでも一般的な動きは付けられますが 一歩すすんで要望や自分のイメージ通りにしようとしたときに ハードルが高くなってしまうように感じます。 本やウェブの資料を読んでだいたいの知識はあるけれど、 なんとなくしっくりこなかった私自身の jqueryの考え方を書いてみたいと思います。 jqueryはきっかけがあってやっと動く。 jqueryというのは、何か”きっかけ”があって初めて動き始めます。 ブラウザにデータがロードされたタイミングとか、ボタンを押したタイミング、マウスを乗せたタイミング。 この
画像を生成せずにサムネイル風に小さな画像を表示·jQuery NailThumb MOONGIFT
jQuery NailThumbはWeb上でCSSによる画像サムネイル風表示を実現するjQueryライブラリです。 Webサイトで画像を縮小して表示したい場合、ImageMagickなどのサーバサイドの技術を使うのが一般的です。しかしjQuery NailThumbを使えばクライアントサイドだけで高度なサムネイル風表示を実現します。 デモです。左側が元画像、その右側にサムネイル化した画像が表示されています。 正方形の他に縦横比の固定、横幅優先といった指定もできます。 縦長の画像の場合、横幅優先にすると自動的に左右に空白が入ります。 こちらは切り取りです。 他にもサンプルが多数あります。 画像の量にもよりますが思ったよりも負荷は少ないように感じられます。jQuery NailThumbはCanvasで画像生成という訳ではなく、CSSを使って画像を擬似的に縮小表示しています。その際の配置やサイ
Binbo-Special－技術資料－JavaScript－画像の上に画像を配置してフェード（透過）
「FLASHでやれよ」とか言われるとそれまでですが。 ちょっとしたことをJavascriptでやりたいと思うのは、よくある話だし、そもそもFLASH嫌いだよって人もいるかもしれない。 そんなわけで、お手軽にJavascriptで画像の上に画像を置いて、さらにその画像が透過しても（フェードイン・フェードアウトしても）問題無いか、ということを突然実験してみたくなったわけです。 （以下のサンプルコードは、jquery.js前提の書き方しちゃってます。） まず、divで単純に重ねた場合。 absoluteとかrelativeとか使ってdivを配置した場合・・・・・（配置適当だなー） 背景画像もついでに変えます。（例えば、○○部門の紹介、みたいなボタンで、バックの画像がそれぞれの部門の様子の写真になったりとかに使えそうですよね。） IE6でも大丈夫っぽいですね。 一応、コードはこんな感じ html
画像にグラデーションをかけるjavascript「Transparent Gradients」
画像を編集するさいにグラデーション加工をする場合があるかもしれません。 Transparent Gradientsなら簡単に透明なグラデーションを付けることができます。 sponsors 使用方法 Transparent Gradientsからsnipets.textをダウンロードし、拡張子をhtmlに変更すればできます。 またはjQueryからjquery.js（v1.2.1）とjquery.transgradient.jsをダウンロードし以下のようにします。 <script type="text/javascript" src="http://yourdomain/jquery.js"></script> <script type="text/javascript" src="http://yourdomain/jquery.transgradient.js"></script> あと
アップ画像のどこを見ているかを表示するJavaScript「ImgNavigator」
(mb)ImgNavigator 1.0大きな画像を表示したいし、その画像のどこを見ているか表示させたいという、あなたにお勧めです。 地図とか、商品画像に使用すると便利かもしれません。 sponsors 使用方法 (mb)ImgNavigator 1.0からファイル一式をダウロードします。 <link href="/test/css/mbImgNav.css" rel="stylesheet" type="text/css"> <script type="text/javascript" src="/test/js/jquery-1.3.js"></script> <script type="text/javascript" src="/test/js/ui.core.min.js"></script> <script type="text/javascript" src="/test/j
画像とテキストの組合せの見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」
画像とテキストの組合せで見せ方を変えるJavaScript「Switch Display Optionswith CSS & jQuery」 画像とテキストは時と場合により色々な見せ方が必要となります。 表示スペースの都合で、サムネイルしか見せられない時もSwitch Display Optionswith CSS & jQuery - by Soh Tanakaを利用すると、スマートに表示することができます。 sponsors 使用方法 jQueryからjquery.jsをダウロードします。 また、以下のように画像とテキストを記述していたとします。 <ul class="display"> <li> <div class="content_block"> <a href="#"><img src="画像パス" alt="" /></a> <h2><a href="#">テキスト</a><
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.codediesel.com/javascript/build-a-nice-sliding-help-section-using-jquery/
はじめてのjQuery
40分で覚える！jQuery速習講座 (2/6)
連載インデックス「CSSの書き方も分かるjQueryプラグイン実践活用法」 - ＠IT
GitHub - loopj/jquery-tokeninput: jQuery plugin which allows your users to select multiple items from a predefined list
