<ul> <li>Ruby</li> <li>JavaScript</li> <li>PHP</li> </ul> $('li').each(function(index, element){ console.log(index + ':' + $(element).text()); })
HOME>WEBプログラム覚書>[jQuery]こんな機能があったんだ。jQuery stop() [jQuery]こんな機能があったんだ。jQuery stop() 「Buttons like Windows 7 with JS & CSS」を見てて って記述あったので調べてみたらstop()って色々使えるんですね。 全然しらなかったです。 stop([clearQueue], [gotoEnd]) 引数は2つ。何も指定しないとfalse [clearQueue]がtrueの場合、持っているキューが全て削除される。[gotoEnd]はtrueにすると現在のアニメーションの最後のコマへジャンプする。
2017年6月2日 軽量で美しいSVGのパスで書かれたイラストが、アニメーションして表示されるのを一度は見たことがあるだろう。javascriptやCSSを駆使して自分でSVG アニメーションを作るのは面倒だ! しかし、苦労せずとも簡単に10分で、いや5分で「SVG アニメーション」ができるプラグインが、今回使い方を説明する「jQuery DrawSVG」である。 SVGってなんだよ?という人にもSVGファイルのHTMLへの設置の仕方や、SVGファイルの作り方・使い方も解説する! さらに最後に「実用編」として、画面ロード時にすぐに実行せずにターゲットが見える位置までスクロールしてからアニメーションする方法も解説しよう! SVG アニメーションする為に、必要なもの まずはSVG アニメーション用のプラグイン「jQuery DrawSVGの公式」サイトから、プラグイン一式をダウンロードしよう!
ジェイクエリーすぐ忘れる DOM エレメント -> jQuery オブジェクト $() 関数に入れてあげれば OK var sample = document.querySelector('#sample'); var jq_obj = $(sample); jQuery オブジェクト -> DOM エレメント jQuery オブジェクトのインデックス 0 らしい var dom_element = jq_obj[0]; 検証 var body = document.querySelector('body'); var jq_obj = $(body); var dom_elm = jq_obj[0]; body === dom_elm // true
2018年の夏、連日の猛暑日、40度を超えるような地域もあるようです。 熱中症にはお気をつけください。 皆さんこんにちは。 脱jQueryの第三弾! 今回は、第一弾の ネイティブjavascriptでHTMLの要素を取得する!脱jQueryはじめの一歩 で取得したDOM要素、HTMLCollectionやNodeListの使い方です。 そもそもHTMLCollection、NodeListとは どちらも配列っぽいオブジェクトで、 どちらもプロパティとして「length」が提供されています。 arrayでは無いので同じ様に扱うにはひと工夫必要な場合もあります。 HTMLCollectionはDOMに対する変更が随時反映され、 NodeListは反映されません。 HTMLCollectionにアクセスする HTMLCollectionに直接アクセスする HTML <ul> <li class=
痩せないとコートが入らないことに気づいたfukasawaです。こんにちは。 冬が来る前に痩せないと凍死してしまいます。 jQuery Migrate pluginは、jQueryのバージョン差異によって発生する問題を解決する為のjQueryプラグインです。「jQueryのバージョンを上げたら動かなくなった…!」という場合に修正箇所を教えてくれたり、廃止されたAPIを復元して動くようにしてくれたりします。 個人的に使った事が無かったので、使い方について簡単に調べてみました。 jQuery Migrate できること ① 廃止されたAPIを使おうとしたり、挙動が変わった機能を使おうとした際に、ブラウザのコンソールに警告を出力する 開発版(Development version)のjQuery Migrateを使用する jQueryのversion 1.6.4以降を使用していること ② 廃止され
jQueryの要素の表示・非表示を判定する方法を紹介します。 1.基本 jQueryでは、要素の表示・非表示のためのメソッドとして、show()とhide()が提供されています。 show()は指定した要素を表示します。 $('#foo').show(); hide()は指定した要素を非表示にします。 $('#foo').hide(); が、表示・非表示を判定する方法として、isShow()やisHide()、isVisible()などは提供されていません。 2.css('display')で判定する show()はdisplayプロパティ「block」、hide()はdisplayプロパティを「none」にするので、これを判定に利用します。 if ($('#foo').css('display') == 'block') { // 表示されている場合の処理 } else { // 非表示
こんにちは、ライターのマサトです! 今回は、jQueryのセレクタ指定において正規表現や属性フィルタを使った手法について学習を進めていきましょう! この記事では、 正規表現より簡単な属性フィルタとは? 「前方一致」でidを指定してみよう 「後方一致」で指定する方法 「部分一致」で指定する方法 「否定」で指定する方法 という属性フィルタについての基礎知識から学習を進めていき、セレクタを正規表現で複数指定する方法などの正規表現を活用した応用例に関して解説をしていきます。この記事で、セレクタ指定における正規表現・属性フィルタをしっかり学習して自分のスキルアップを目指しましょう! 正規表現より簡単な属性フィルタとは? それでは、まず最初に正規表現よりも簡単にセレクタを指定できる属性フィルタから学習を始めましょう!そもそも、jQueryのセレクタは多種多様な指定方法ができるのが特徴なのですが、HTM
// Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>
こんにちは、ライターのマサトです! 今回は、jQueryで深い階層下にある子要素を効率よく取得できる「find()」メソッドについて学習しましょう! この記事では、 「find()」とは? find()の使い方 each()による複数要素の取得 戻り値「length」とは? find()の検索技 「find()」と「children()」の違いとは? などの基本的な内容から、応用的な使い方に関しても解説していきます。この記事で、「find()」メソッドをしっかり学習して自分のスキルアップを目指しましょう! 「find()」とは? それでは、まず最初に「find()」メソッドについて基本的な知識を学習していきましょう! 「find()」は、対象となる要素から下にある階層をすべて辿って目的の「子要素」を取得することができるメソッドです。この子要素は「子孫要素」とも呼ばれたりしますが、分かりやす
JavascriptやjQueryを書いていると、「この処理がちゃんと終わってから、こっちの処理を始めたい!」って場面に結構遭遇するのではないかと思います。特にアニメーションを作っているときによくあるのではないでしょうか。 コールバック関数を設定出来る処理なら簡単なのですが、それがないものも結構あったりします。僕が困ったのは.html()や.ajax()でした。なんかいい解決策は無いかなーとググってみたところ.when().done()という処理の仕方が良さげだったので使ってみたらばっちりでした。 .when()には先に終わらせたい処理を書く ざっくりとした説明の仕方をすると、.when()には先に完了させたい処理をまとめて書いておきます。例えば、“横に移動したら、フェードアウトする”みたいな事をしたい場合、“横に移動したら”の部分を.when()の中には書きます。 (まあ、そんな簡単な動
jQuery UI Resizableプラグインは選択している要素をリサイズ可能な要素にします。 最大最小の幅や高さなど、様々な指定を行うことが出来ます。 (リサイズのドラッグをするためのつまみを持つようになります) このウィジットはいくつかの機能的なCSSを必要とします。 このCSSが読み込めないと機能しないため、最初に必要とするCSSを読み込むようにしてください。 型:Selector or jQuery or Element 初期値:false リサイズしている要素と同期して同じようにリサイズさせたい要素を指定します。 $( ".selector" ).resizable({ alsoResize: "#mirror" }); // getter var alsoResize = $( ".selector" ).resizable( "option", "alsoResize" )
TIP! Sort multiple columns simultaneously by holding down the Shift key and clicking a second, third or even fourth column header! Getting started To use the tablesorter plugin, include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML document: <!-- choose a theme file --> <link rel="stylesheet" href="/path/to/theme.default.css"> <!-- load jQuery and tablesorter scr
1. Getting Started Installation Basic usage Builds and modules 2. Troubleshooting Getting Help Common problems 3. Configuration Options Global defaults data-* attributes 4. Appearance 5. Options 6. Data sources The Select2 data format Ajax (remote data) Arrays 7. Dropdown 8. Selections 9. Dynamic option creation 10. Placeholders 11. Search 12. Programmatic control Add, select, or clear items Retri
Vegas2Background SlideShowjQuery/Zepto PluginProject by Jay Salvat, Pictures from Unsplash. Need support? Don't waste your precious time, Hire me Feeling Generous? Buy me a beer, beer is good for motivation Need support?Don't waste your precious time, support is available for 24$. Ask your question and quickly receive a ZIP file with a clear running example with commented code and assets solving y
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く