jQuery isの利用方法 – 条件式を満たす場合に要素を操作 – Change the elements if the condition is satisfied | Stronghold Archive
jQuery isの利用方法 – 条件式を満たす場合に要素を操作 – Change the elements if the condition is satisfied どうもこんにちは。toshikuraです。今日のtipsは【jQuery isの利用方法 – 条件式を満たす場合に要素を操作】です。今回のtipsはjQueryを触る上で重要な部分かと思いますので、復習がてらメモしておきたいと思います。 jQuery is 条件を満たした場合にtrueを返します。if文やeachを使う際にはお世話になるかと思います。 HTML例 <ul id="ex"> <li class="one">class="one"</li> <li class="two">class="one two"</li> <li class="three">class="three"</li> <li class="o
[JavaScript] `String.match( regexp )` の返り値は何か？ / 正規表現の変わりに文字列を使うとどうなるのか
ここを参考にいろいろとテストしてみる。 match する場合の返り値 と しない場合の返り値する場合は Array オブジェクト が返るしない場合は null が返る
文字列を連結する
算術演算子の一つである加算演算子(+)は 2 つの値がともに数値の場合には数値の加算として使用されますが、 1 つまたは 2 つがの値が文字列の場合には文字列の連結として使用されます。 次のサンプルをみてください。
【JavaScript】数字データを文字列として認識させる: GEEK TECH - PCとWebとプログラミング
例えば、JavaScriptで、 document.write(2+3); とすれば、5と表示される。 JavaScriptは、加算演算子も連結演算子も同じ「+」を使うので、数字を文字列として、連結させるには工夫が必要。 例えばどんなときに使うかと言うと、 var a=5; var b=7; と言うときに、5と7とをつなげて、「57」と表示させたいとする。 どうするか。 答えはこう。 document.write(''+a+b); //もしくは document.write(a+''+b); 数字の前に、1つでも文字列が入ると、その後の数値データは文字列として認識される。 逆に、括弧でくくれば数字として認識される。 document.write(''+(2+3));//5と出力される 型がないので、キャストを明示的に行うことは出来ないが、JavaScriptではこんな感じにすることが多いと
String.prototype.match() - JavaScript | MDN
標準組み込みオブジェクトStringコンストラクターString() コンストラクター静的メソッドString.fromCharCode()String.fromCodePoint()String.raw()インスタンスメソッドString.prototype.anchor() 非推奨; String.prototype.at()String.prototype.big() 非推奨; String.prototype.blink() 非推奨; String.prototype.bold() 非推奨; String.prototype.charAt()String.prototype.charCodeAt()String.prototype.codePointAt()String.prototype.concat()String.prototype.endsWith()String.prot
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 - Qiita
結局jQuery.Deferredの何が嬉しいのか分からない、という人向けの小話 一年ほど前に JavaScript - jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita [キータ] という記事を書きました。 で、一年経って、ふと、「もっと分かりやすくjQuery.Deferredの便利さを説明できるんじゃないか」と思い立ってざざざっと書いてみました。 小話と言うにはちょっと長いけど。 -- jQuery.Deferredを使うと嬉しいのは、jQuery.Deferredの仕様を満たす部品同士を簡単に組み合わせることが可能だからです。中には処理を書き下すことができるとかコールバックのネストを防げるのがいいとか言う人もいますが、個人的にこっちのほうがよっぽど重要だと感じます。 例えるならレゴブロックです。レゴブロックはあの凸と凹を持ってるブロックを自由に組み合
文字列を指定の区切り文字で分割する(split)
文字列を分割する(split) String オブジェクトの split メソッドは、対象の文字列を指定した区切り文字で分割し、分割された文字列をそれぞれ要素として格納した配列を返します。書式は次のとおりです。 引数の区切り文字には文字列または正規表現オブジェクトを指定してください。 1 文字だけでなく複数の文字の並びを指定することもできます。分割された部分文字列がそれぞれ要素として格納された配列が返されます。区切り文字が省略された場合は、文字列全体が要素として格納された配列が返されます。 最大分割回数を指定した場合、指定した回数だけ区切り文字が現れた時点で分割を終了します。ご注意いただきたいのは最後に分割された部分文字列は戻り値の配列に格納されますが、最後の区切り文字以降の文字列は戻り値には含まれません。 次のサンプルをみてください。 let months = 'Jan..Feb..Ma
JavaScript で日付のフォーマットを整形する - tacamy--blog
Movable Type で日付のフォーマットをいじりたいときには、% を使って簡単に設定できます。 例えば、「2013年03月14日 (月)」と表示したいときは、次のように指定します。 <$MTDate format="%Y年%m月%d日 (%a)"$> 詳しくは、日付に関するテンプレートタグのモディファイアリファレンス を参照。 その感覚で、JavaScript でも同じようなことできると思っていたら、そういうものは無いらしい。 なので、自分でフォーマットを整形したいときは、次のように指定します。 // 今日の日付で Date オブジェクトを作成 var now = new Date(); // 「年」「月」「日」「曜日」を Date オブジェクトから取り出してそれぞれに代入 var y = now.getFullYear(); var m = now.getMonth() + 1;
JavaScript で URL からフラグメント以外を取得 | すぐに忘れる脳みそのためのメモ
1. URL の # 以降の文字列 ウェブページで、特定の場所にアンカーを指定するには、要素の属性に id または name を指定する。これにより、特定の場所へ # を使いリンクを貼ることができる。 この # 以降の文字列は、フラグメント識別子と言う。 フラグメント識別子とは - はてなキーワード によると、 「id属性やa要素のname属性で指定するアレ」の正式名称。 例えば、http://ja.wikipedia.org/wiki/Javascript#.E6.AD.B4.E5.8F.B2 からフラグメントを取得するには、 location.hash 逆に、フラグメント以外を取得するには、 location.protocol + "//" + location.hostname + location.pathname cf. ロケーション（Location） 2. クエリ文字列 クエ
スクロールバーの座標を取得するscrollTop | alt
スクロールバーの座標を取得するscrollTop Published by alt on 12 月 26, 2008 02:14 pm Category[ サンプル ] Tag[ Javascript ] Javascriptでスクロールバーの上端の座標を取得するとき、 こちら の記事を参考にすると、 document.body.scrollTop document.documentElement.scrollTop window.scrollTop の３つのどれかで値がとれます。 onLoadのタイミングで取得すると、 大概のブラウザではスクロールバーが初期値に戻ってしまうため 0 が返ってきます。 ボタンアクションなどの任意のタイミングなら IE、Firefox、Operaはdocument.documentElement.scrollTop Safar
DIVのスクロールをJavaScriptから操作する - YoheiM技術やらずに終われまテン
こんにちは、@yoheiMuneです。 今日はライトなネタを。 Webページを作成する際に、要素の高さを固定して、内容量によってはスクロールして表示させる事があるかと思います。そのスクロールの上げ下げをJavaScriptで操作する方法を調べたので、ブログに残しておきたいと思います。 Webページ内のスクロールする要素 Webページ内で、以下のような要素を見た事は無いでしょうか。高さが固定されていて、表示内容がたくさんある場合には、スクロールして内容を全て見るやつです。 こんにちは。 この文章を最後まで読むには縦スクロールする必要があります。 あああ いいい ううう えええ おおお 最後までスクロール頂きありがとうございます。 <div id="area" style="width:300px; height:100px; overflow:auto; border:1px solid #
要素のスクロール｜jQuery plugin｜Ajax｜PHP & JavaScript Room
リスト要素の各アイテムに指定したメッセージをMarquee風に切替表示するjQueryプラグイン。 文字を流すスタイルは上から下、下から上、左から右など、垂直・水平共にオプションで指定することができます。 初期化時、メッセージ切替前／切替時、スクロール終了時に呼ばれるコールバック関数が用意されています。 長いメッセージを垂直方向に切り替える場合は、メッセージ切り替え表示後、更に表示されたメッセージを水平方向にスクロールさせることで、長いメッセージをすべて表示させることができます。 APIが用意されているので、動的にリスト要素にアイテムを追加したり、スクロールの一時停止や再開なども簡単に実装することができます。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1
jQueryでボッス要素のスクロール位置を取得する方法
実装例（サンプル）の動作について 背景色が黄色のボックス要素を縦スクロールすると、「垂直方向にスクロールした距離：」の右横に、垂直方向にスクロールした距離を表示する。 背景色が黄色のボックス要素を横スクロールすると、「水平方向にスクロールした距離：」の右横に、水平方向にスクロールした距離を表示する。 ソースコード JavaScript <script type="text/javascript"> jQuery( function() { jQuery( '#sampleBox' ).scroll( function () { var $scrollTop = this.scrollTop; var $scrollLeft = this.scrollLeft; jQuery( '#scrollTopOutput' ).html( $scrollTop + 'px' ); jQuery( '
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも
JavaScript MVCフレームワーク「AngularJS 1.2」リリース。要望の多かったアニメーション機能が追加、脆弱なコードを制限するモードも JavaScriptのMVCフレームワークはBackbone.jsやEmber.jsなど多くの種類が登場していますが、Backbone.jsやEmber.jsなどが比較的シンプルなフレームワークを指向しているのに対して、AngularJSの特徴はUIバインディングを含むリッチなフレームワークとして開発されていることです（ちなみにAngularJSのWebサイトでは「MVWフレームワーク」と名乗っています。MVWのWはWhateverらしいです）。 AngularJSでは、HTMLにJavaScriptのコードを混ぜ込まなくとも、識別子を差し込むだけで、その識別子に対応したモデルのデータを自動的かつリアルタイムに表示してくれます。逆に、HT
[JS]デモがバツグンにかっこいい！さまざまな要素がビューポートに表示される時にエフェクトを与えるスクリプト -onScreen
Scrollable Containers onScreenはさまざまなDOM要素に対応しており、パラグラフ、画像、コンテンツスライダーなどスクロールが可能な要素全てに利用できます。 スクロールして表示する際に、ちょっとだけCSSのエフェクトを加えるのかっこいいですね。 onScreenの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="lib/jquery.onscreen.min.js"></script> </head> Step 2: HTML onScreenを適用するエレメントは指定できるよ
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
jQuery.Deferredを使って楽しい非同期生活を送る方法 - Qiita
【JavaScript】要素の位置にスクロールする at softelメモ
