[JS][jQuery] 要素の存在を確認する6通りのコードと実行速度 | きほんのき
JavaScriptまたはjQueryを使い、html要素が存在するかどうか調べる方法はいくつかあります。 jQueryを使ったやり方については、こちらで5つの方法が紹介されています。以下は三項演算子で短く書きなおしたものです。 ( $("selector")[0] )? "有" : "無"; ( $("selector").length > 0 )? "有" : "無"; ( $("selector").get(0) )? "有" : "無"; ( $("selector").size() )? "有" : "無"; ( $("selector").is() )? "有" : "無"; これに加え、IDが設定されている要素の有無を調べるのなら、jQueryを使わずJavaScriptのみで以下のように書くのも良いでしょう。 ( document.getElementById("id")
【JavaScript】 Date.getTime() の単位は、"秒"じゃなくて"ミリ秒"
コンピュータプログラムの世界では、1970/01/01 00:00:00 は『UNIXエポック』などと呼ばれる特別な時刻。この時刻から数えた秒数のことを『UNIXタイム』と呼ぶ。PHPやPerlでは、 time() っていう関数でUNIXタイムを知ることができる。 JavaScript では、Date.getTime() というのを使うんだが、これが実は注意が必要。 PHP や Perl で取得できるUNIXタイムは、単位が "秒" なんだが、JavaScriptでは "ミリ秒" で返ってくるという点が異なる。 だから、JavaScript で PHP のような秒単位のUNIXタイムを使いたい場合は、1000で割るとちょうど近い値が取れる。 次の例は、2つの時刻情報を比較して、30日以上過去かどうかを調べたい場合。 // 【×】間違った例 var dateNow = new Date(20
canvas要素 + Javascriptで作る、動的コンテンツ
HTML 5 + Javascriptで作る動的なコンテンツ 前回の授業では、HTML 5について、その成り立ちや特徴を解説した上で、新しい構造化のための要素について解説しました。また、あわせてCSS3によって格段に進歩した表現力について実際にサンプルページを作りながら解説しました。 今までは、Webページで動的に図や画像やアニメーションを描画するにはFlashが代表的な選択肢でした。しかし、ここ数年でその状況が大きく動きつつあります。Flashに代表されるような動的なコンテンツが、専用のプラグイン無しに、HTMLの要素とそれと連携するスクリプトだけで実現できるようになりつつあるのです。こうした技術は、今後のWebの動向を大きく変える可能性を秘めた技術として脚光を浴びています。 HTML 5で動的に画像やアニメーションを生成するためには、canvas要素という新規に導入された要素と、can
jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法｜BLACKFLAG
jQueryでアニメーションを実行させる「.animate()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
新しいウィンドウをサイズ指定して開く
<html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>サンプル</title> <script type="text/javascript"> <!-- function openwin() { window.open("./window.html", "", "width=500,height=400"); } // --> </script> </head> <body> <a href="javascript:openwin();">新しいウィンドウ</a> </body> </html> <a href
Conditional (ternary) operator - JavaScript | MDN
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colo
JavaScriptの勉強：条件演算子「？」
実はまだまだ知らない事が多いJavaScriptの基本、 ちゃんと勉強しないとなーなんて思うのですが、 ちょくちょく気づいた時にしかできなかったりします。 そんな今回「あれ？なんだっけな、これ？」 なんて思ったのが「?」の使いどころ。 調べてみたら、条件演算子ということ。 どういう使い方ができるのか、少し試してみた。 条件演算子を使ってみた 条件演算子を使ったサンプルを作ってみる事にした。 ついでにifの条件分岐とちょっとだけ正規表現とかも入れてみた。 $(function(){ $('button').click(function(){ $('form').attr('action',''); xx = $('input').val(); if(xx >= 21 || xx <= 0){ alert('数字は１から20の間で入力してください。'); return false; }else
MyFindがより捗る！僕が便利だと思う7つのjavascriptを紹介！
iPhoneの検索窓をMyFindに乗り換えました！ お久しぶりですぶち(@mtnkne)です。 iPhoneには様々な検索窓となる良質なアプリがありますが、最近はMyFindに夢中です。 MyFind – 大辞林/ウィズダム/Oxford カテゴリ: 辞書／辞典／その他 価格: 無料 無料でありながらその拡張性は検索窓となるアプリの中で随一。 まだ僕の勉強不足のため、独自で明確な差別化ができていないのですが、探してみるとMyScriptsを組み合わせたりしてとても上手に使っている方も沢山います。 そういった難しい話は何か面白い使い方を見つけたらにとっておいて、今回はMyFindに登録したjavascriptについて書いていきます！ MyFindでのjavascriptの使い方 MyFindでは、javascript(ブックマークレット)として使いたい項目も、普通の検索のよ
Array.prototype.indexOf() - JavaScript | MDN
標準組み込みオブジェクトArrayコンストラクターArray() コンストラクター静的メソッドArray.from()Array.fromAsync()Array.isArray()Array.of()静的プロパティArray[Symbol.species]インスタンスメソッドArray.prototype.at()Array.prototype.concat()Array.prototype.copyWithin()Array.prototype.entries()Array.prototype.every()Array.prototype.fill()Array.prototype.filter()Array.prototype.find()Array.prototype.findIndex()Array.prototype.findLast()Array.prototype.find
jQueryでチェックボックスのチェック状態を調べる方法 - 小さい頃はエラ呼吸
photo credit: Alan Cleaver via photopin cc 2013.06.14追記 コメント欄の指摘を受けて、記事を一部修正しました。 はじめに jQueryでチェックボックスのチェック状態を調べる方法をまとめてみました。 Web制作の現場で使うjQueryデザイン入門[改訂新版] (WEB PROFESSIONAL)posted with amazlet at 14.02.01西畑一馬 アスキー・メディアワークス 売り上げランキング: 6,298 Amazon.co.jpで詳細を見る jQueryのバージョン jQuery v1.10.1 jQueryでチェックボックスのチェック状態を調べる方法１ jQueryでチェックボックスのチェック状態を調べるには、以下のようなコードを書きます。#check1はチェックボックス要素のIDを指定します。$("#check1
jQueryでcheckboxがcheckされてるかの値をとる - Webtech Walker
checkboxがcheckされてるかどうかを判別するメソッドってjQuery側に用意されてないんですよね。 twitterでも色々教えてもらったけど方法としては3つくらいかなー。 https://twitter.com/kyo_ago/status/11685019866 https://twitter.com/songmu/status/11675950113 https://twitter.com/rea/status/11675545507 素のHTMLエレメントから取得 var checked = $('#elem').get(0).checked; せっかくjQuery使ってるのにという感じがいなめない。。これはないかな。 is()で取得 var checked = $('#elem').is(':checked'); これが一番直感的ではある。これでいいっちゃいい気もする。
さまざまな動きをするjQueryスライダーを作ってみた
前々から自分でスライダーを作ってみようと思いつつ途中で詰まっていたのですが、本を買ったりいろいろ調べたりして出来たので残しておこうと思います。 スライドのパターン よく使う配布されているスライダーを見ると画像の動き方が何種類かありますよね。なので、今回は6種類作ってみました。 サンプルページ サンプルページは以下から。全種類並べています。また、ダウンロードも出来ます。 サンプルページ ダウンロード 設置方法 HTML 設置したい箇所に以下のように記述します。 <div id="slide01"> <ul> <li><a href="#"><img src="img/img01.gif" width="700" height="426" alt=""></a></li> <li><a href="#"><img src="img/img02.gif" width="700" height="
JavaScriptで変な形のクリック領域を作るとき、svgが便利 - MANA-DOT
昨日のVieraのリモコン、リモコンを作りたかったのもあるけど、svgとJavaScriptを組み合わせた簡単なプログラムを試しに書いてみたかったというのがあります。 html5ではsvgをhtml中に埋め込んで、更にそのsvgにcssでスタイルを当てたり、JavaScriptでいろいろやったり出来ます。 この時、要素のクリック領域は要素の形そのままなので、昨日のリモコンのような変な形のクリック領域を簡単に作ることが出来ます。 以下の画像の色のついた箇所にマウスを乗せたりクリックをしたりしてみてください。 100km 画像はWikipediaより。 上記の画像は、クリックできる箇所に .svg-area というクラス名と、data-name属性に市町村の文字列が入っており、以下の様なcss/jsによって動作を実現しています。 path.svg-area { cursor: pointer;
piyo-js.com - このウェブサイトは販売用です！ - 初心者 入門 リファレンス リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
jQuery.Event - jQuery 日本語リファレンス
Events/jQuery.Event jQueryのイベントシステムは、W3C標準に準拠した実装になっています。イベントオブジェクトはjQueryのイベントハンドラーに確実に渡されます。（コールバック関数に引数として渡されず、window.eventなどから取得するタイプのブラウザであっても、そのようなチェックは必要ありません） オリジナルのイベントオブジェクトが持つ殆どのプロパティは、このオブジェクトにコピーされます。 このオブジェクトのコンストラクタも公開されており、triggerを呼ぶ際に用いられます。 コンストラクタではありますが、newオペレータはあってもなくても構いません。 どういった場面でEventオブジェクトを作成するのかは、trigger関数のドキュメントを参照して下さい。 Example: jQuery.Eventを new をつけずに作成する var e = jQu
新しいウィンドウで表示させる際の指定一覧
【リスト】 <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> <form> ここは、おすすめ！ → <input type="button" value="Tatsuya's Home Page" onClick="window.open('http://www.red.oit-net.jp/tatsuya/index.htm')"> </form> 【説明】 新しくウィンドウを開くのは、window.open() を使います。 open( ) のパラメータにURLを指定すれば新しいウィンドウを作ってそこにリンク先をロードします。 例）
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで設定されたクリックイベントなどを定義している場所を調べる方法 - Qiita
jQueryの"含む" にif containsを使おうと思ったけどjsのindexOfが使い勝手良かった件