jQueryを覚えよう その2 | LayOut blue
jQueryを使って簡単にHTMLやCSSを変更したり、追加したりすることができます。今回は、HTML、CSSをjQueryで変更する命令についてご紹介します。jQueryを使用したJavascriptは、どのHTML要素を操作するか指定する『セレクター』と、操作する『処理』が基本です。今回も前回使用しました『ready関数』を使ってサンプルを交えてご紹介します。 テキスト HTMLで使用される『テキスト』をjQueryで制御するには『text()』を使用します。 変更 『text()』うを使用してテキストを変更するには『text()』の括弧の中に変更後のテキストを記述します。 Javascript $("p#first").text("テキスト変更後"); デモ 取得 『text()』の括弧内に何も記述しなければ指定したセレクターのテキストを取得できます。 $("p#first").t
一行おきにテーブル行の色を変える - jQuery 日本語リファレンス
HOME'S賃貸 家賃相場 2008/03/28のデータより $(document).ready(function(){ // 偶数行の色を設定 $('table#stripe-table tr:even').css('background-color', '#666'); // 奇数行の色を設定 $('table#stripe-table tr:odd').css('background-color', '#333'); }); ここでは直接背景色を指定していますが、addClassなどを使って事前に定義されたスタイルを充てる方が、より実践的でしょう。 $(document).ready(function(){ // 偶数行にのみクラスを指定 $('table#stripe-table tr:even').addClass('even-row'); });
jQueryでカレントページの要素にclass=”current”を付加する方法 – creamu
<ul class="menu"> <li id="menu01"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul> <ul class="menu"> <li id="menu01" class="current"><a href="/page01/">page01</a></li> <li id="menu02"><a href="/page02/">page02</a></li> <li id="menu03"><a href="/page03/">page03</a></li> </ul>
scrolldeck.js
scrolldeck created by Chicago Web Developer John Polacek. I work at at AuctionsByCellular. We make mobile bidding and auction software for charities. Follow @johnpolacek A jQuery plugin for making scrolling presentation decks For example: animations, fullscreen images or parallaxing Powered by Scrollorama Download: zip tar How to Use Build a web page with each slide as a div. Pro-Tip: Use rem’s to
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design
jQuery tubular Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and
Julien Milliès - Directeur Artistique & Designer Graphique - Lyon France
Personal portfolio of Art director and Graphic designer Julien Millièsimages/thumbs/zilli-thumb.jpg, Profiter de la situation. Tirer parti du contexte. New 02 Loyalty Expert Online images/thumbs/thumb_loyalty-expert.png, Stimuler la réflexion et la sensibilité de façon équivalente. 03 Endodontie Lyonnaise Corporate Identity images/thumbs/thumb_ela.png, On ne peut décomposer précisément que ce
jquery.jaticker.js
≫Download jquery.jaticker.js はjquery.jaticker.js は日本語のにほんごの変換アニメーションにへんかんあにめーしょんに対応した、たいおうした、ティッカーのてぃっかーの jQuery プラグインです。ぷらぐいんです。文字列をもじれつをタイプしている風にたいぷしているふうに順に表示する事がじゅんにひょうじすることが出来ます。できます。 使い方 上部の Download リンクから zip ファイルをダウンロードして解凍すると、css ファイルと js ファイルが 1 つずつ含まれているのでそれを読み込みます。 jQuery プラグインですので、jQuery 自体は先に読み込んでおいて下さい。 <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
Smooth Vertical or Horizontal Page Scrolling with jQuery | Codrops
In this tutorial we will create a simple smooth scrolling effect with jQuery. We will create a horizontal and a vertical website layout to show the effect. We will be using the jQuery Easing Plugin and just a few lines of jQuery. So, let’s start! Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek. The Markup The
jQueryの.bind(), .live(), .delegate()の違い
The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/ jQueryの.bind(), .live(), .delegate()違いや仕組みの理解、また.delegate()の方が.live()より優れている理由について書かれています。 内容を簡単に書き出すと以下のようなことについて書かれています。 $('a').bind('click', function() { alert("That tickles!") }); .bind()は$(‘a’)に対してイベントを設定してる。 $('a').live('clic
Turn.js: The page flip effect in HTML5
Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. <div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> <div> Page 2 </div> <div> Page
JS/CSSでふわりとフェードするボタンをつくる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） 震災後、なんやかんやで2週間あけてしまいました。こんにちは、私は元気です。 今日は、せっかくCSS3で色々な事が出来るようになってきたところで、 ふわりとフェードするボタンの作りなどを記してみる。 作るもの マウスオーバーすると、ふわーっと表示が切り替わるボタン。 画像を二枚重ね、上の画像の透明度を変化させて表示を切り替える。 こういったUIにあたるエフェクトは好みが別れる気がしますが、 個人的にはリッチな感じがして結構好きです。 HTML <div id="demo" class="fadeButton"> <a href="#">FadeButton</a> </div> 基本となるCSS #demo { display: block; width: 135px; height: 135px; background-posi
Web Creator's Contest Q the 2nd - jsdo.it - Share JavaScript, HTML5 and CSS
画面が切り替わる際の演出を魅力的につくってください。 サンプルコードでは3つの画面をフェードイン・フェードアウトで切り替えています。こちらを元にして演出を加えても良いですし、もちろんJavaScript, HTML, CSSをゼロからコードを書き直してもOKです。複数の画面をクリックなどで切り替えるものであれば、自由に作成していただいて構いません。画面遷移であればスライドを切り替えるような演出であったり、スマートフォンのトランジションでも良いので、あなたの得意分野でチャレンジしてください。 下記のお手本コードをFork（＝あなたなりのアレンジ）すると自動的にエントリーとなります。自由な発想をお待ちしています！ Web Creator's Contest "Q" 利用規約・プライバシーポリシー 「Q」は、株式会社リクルートが企画・運営する、WEBクリエイター向けのコンテストイベント（以下「本
jQuery で checkbox が check されてるか調べる - dogmap.jp
Twitter で、@masaru_b_cl さんが、「jQueryでチェックボックスがチェックされているかどうかを取るのって、 var checked = $("#checkboxid").attr("checked"); しか方法ないのか・・・」と言ってました。 jQuery オブジェクトには .checked() とかってメソッドがありません。 なので checkbox がチェックされてるかどうかは、通常以下のようにして取得します。 checked = $("#checkboxid").attr("checked"); checked = $("#checkboxid").get(0).checked; ただ、これだとあまり直感的じゃないですね。 checked = $("#checkboxid").checked(); のようにして、取得できるとカッコイイです。 本当にできないんで
Let's get animating! | GSAP | Docs & Learning
Welcome! In this article we're going to cover GSAP's core fundamentals and animate some HTML elements. 🥳 If that's not your end goal, don't worry. Whatever you plan to animate, whichever framework you use - the techniques and principles covered here will serve you well. The GreenSock Animation Platform (GSAP) is an industry-celebrated suite of tools used on over 11 million sites, including a ton
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scroll Navigation
Men's Suits, Shirts, Casualwear & Shoes | Crane Brothers
jQuery Address Tabs
jQuery Address API
.delegate() | jQuery API Documentation
cmmntr.com