はじめに 自分の忘備録としてまとめました。 サンプルは全てこのページ上で試せます(2014/03現在)。 ※セレクタについては言及していません。 初心者向け情報 javaScriptのちょっとした動作確認はブラウザの開発者ツールを使う 結果を表示したいときはalert();じゃなくてconsole.log();が便利! 画面上の値を取得する 画面上の値を取得します。 次の例ではこのページのタイトルを取得しています。
![忘れっぽい人のためのjQueryでよく使う関数逆引き - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/7319289a647d3c8078cb157c602d998f39ae344d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JUU1JUJGJTk4JUUzJTgyJThDJUUzJTgxJUEzJUUzJTgxJUJEJUUzJTgxJTg0JUU0JUJBJUJBJUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFalF1ZXJ5JUUzJTgxJUE3JUUzJTgyJTg4JUUzJTgxJThGJUU0JUJEJUJGJUUzJTgxJTg2JUU5JTk2JUEyJUU2JTk1JUIwJUU5JTgwJTg2JUU1JUJDJTk1JUUzJTgxJThEJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mYzMxNTczZGYxMzAzNmM1NzBhNGI0OWZkZmQzZmE1YQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFydXlhbS1hJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01Yjc1ZGIxZjA2MGM5NGM0Mjk2NWQxOGYwMTMyYjU4Nw%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D40e5e4e44119d9350280e0f87e81230c)
はじめに 自分の忘備録としてまとめました。 サンプルは全てこのページ上で試せます(2014/03現在)。 ※セレクタについては言及していません。 初心者向け情報 javaScriptのちょっとした動作確認はブラウザの開発者ツールを使う 結果を表示したいときはalert();じゃなくてconsole.log();が便利! 画面上の値を取得する 画面上の値を取得します。 次の例ではこのページのタイトルを取得しています。
任意の要素に対してJavaScriptのプロパティを設定/取得する方法を解説。また、要素の属性を設定/取得できるattrメソッドと機能を比較する。 ← 前回 連載 INDEX 次回 → propメソッドは、要素のプロパティを取得/設定します。attrメソッドと似ていますが、 1属性値とJavaScriptのプロパティとで値が異なるもの、 もしくは、 2そもそも(属性名に対応しない)JavaScriptのプロパティにしかない情報 を取得する際に利用します。 具体的には、 1はselected/checked/disabled/multipleなどの属性のこと、 2はtagName/nodeName/nodeTypeのようなJavaScriptプロパティのことです。 以下は、prop/attrメソッドを利用して、さまざまな属性/プロパティにアクセスする例です。
索引 ├ リファレンス目次 ├ アルファベット順 └ 検索 Core:コアとなる仕組み ├ 目次 ├ jQuery(selector) ├ jQuery(html) ├ jQuery(function) ├ jQuery.holdReady() ├ jQuery.noConflict() └ jQuery.sub() 他ページ参照 └ jQuery.when() Selectors:セレクタ └ 目次 基礎 ├ *(すべて) ├ element(html要素) ├ #id名(ID属性) ├ .class名(clas属性) ├ 複数のセレクタ(and) └ 複数のセレクタ(or) 階層関連 ├ 先祖 子孫 ├ >(子要素) ├ +(直近の後要素) └ ~(後要素) 属性 ├ [属性名] ├ [属性名='値'] ├ [属性名!='値'] ├ [属性名^='値'] ├ [属性名$='値'] ├
jQueryのメソッドfind()とchildren()は、ともに指定した要素が持つ子要素を取得するためのものですが、children()が直下の要素だけを取得するのに対し、find()は全ての子要素を探索するという違いがあります。両者の違いと使い方についてまとめました。 //html example <div> <dl> <dt>カテゴリー</dt> <dd><a href="./foo.html">foo</a></dd> <dd><a href="./bar.html">bar</a></dd> <dd><a href="./hoge.html">hoge</a></dd> </dl> </div> find()は強力な検索機能を持っています。例えば上のhtmlのdivの中から、一番最後のリンク先を取得したい場合、このようなコードで可能になります。 var a = $("div").
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
jQuery の jQuery . ajax( settings ) メソッドを使った Ajax リクエストで、html形式のデータを読み込み、表示する方法。 実装例(サンプル) 実装例(サンプル)の動作について 「toggle」ボタンをクリックすると、「jquery-sample-ajax-html.html」ファイルを読み込み、黄色のボックス要素内に表示する。「toggle」ボタンを、再度クリックすると、元に戻す。 実装例(サンプル)のソースコード JavaScript <script> <!-- jQuery( function() { jQuery( '#jquery-sample-button' ) . toggle( function() { jQuery . ajax( { url: 'jquery-sample-ajax-html.html', success: funct
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 1.問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
<!-- 1.モーダル表示のためのボタン --> <button class="btn btn-primary" data-toggle="modal" data-target="#modal-example"> モーダルダイアログ表示 </button> <!-- 2.モーダルの配置 --> <div class="modal" id="modal-example" tabindex="-1"> <div class="modal-dialog"> <!-- 3.モーダルのコンテンツ --> <div class="modal-content"> <!-- 4.モーダルのヘッダ --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden
環境:jQuery 1.10 jQuery の .load() メソッドを使って HTML ファイルを読み込み、 現在表示中のページ内に挿入することができます。 予め複数パターンの HTML を準備しておき、 条件分岐によって、表示内容を切り替えるといった場合に使用可能です。 APIドキュメントはこちら .load() - jQuery サンプルを作成したのでご覧ください。 サンプルページ - okanoworld index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery load() sample</title> </head> <body> <h1>ここに外部 HTML ファイルを表示します</h1> <div id="page"></div> <script src="http://aj
リンクで起動させたメールに、予め件名や本文などを挿入しておくことができます。 以下のサンプルコードをコピーする場合は、メールアドレスの書き換えを忘れないようにご注意ください。 <a href="mailto:info@example.com?subject=問い合わせ&body=ご記入ください">メールはこちらへ</a> 値の詳細 mailto:info@example.com?subject=件名&body=本文 info@example.com … 送信先のメールアドレスを記述します ? … メールアドレスとその後に続く情報を ? マークで区切ります subject= … メールの件名を記述します body= … メールの本文を記述します & … 件名と本文を & マークで区切ります(文字参照で & と記述します) サンプル(メールソフトを起動します)
帳票といえばPDFとして生成するのが一般的でしょうか? でも、2015年の今、あえてHTMLで描くのがホットです(個人的に)。ミリ単位で設定された高度な帳票も、CSSを駆使して簡単に作ることができます。業務システムでもモダンブラウザを選択することが増え、@pageなども積極的に使えるようになったこと、SPA(Single Page Application)の台頭、いろいろと条件が揃ってきました。 書いてたら結構長くなっちゃったので、さくっとコードだけ見たい方は、Paper CSSリポジトリをどうぞ。 はじめに HTML帳票のメリット 2015年現在、HTML帳票を選択する幾つかのメリットがあります。 ライブリロードで、リアルタイムなスタイル調整 バックエンドではなくフロントエンドで生成できる 前者は、gulpやGruntの普及で、CSSにしろHTMLにしろ、リアルタイムにプレビューできる環
自分で作ったWebページをリポジトリとして公開して、なおかつそのページをGitHub Pagesで表示させる方法です。やってみれば簡単だけどそもそもGitHubほとんど使ったことなかったので時間かかってしまいましたorz 1.ローカルでWebページの作成 公開したいwebページを作ってください。 2.GitHubにリポジトリ作成 GitHubのユーザーページに行って好きな名前でリポジトリを作成してください。 3.ローカルでファイルを追加してadd→commit→push まずは作成したリポジトリをローカルにクローンします; git clone https://github.com/ユーザー名/リポジトリ名.git クローンしたリポジトリのディレクトリに移動してください; cd リポジトリ名 作成したhtmlファイル等をディレクトリ内にコピーしてください。 cssやらjsやらimagesやら
使ってみた MarkdownPresenter chrishulbert/MarkdownPresenter · GitHub (追記20130521:機能が追加されました) シンプルで良い コマンド入力して書き出しとかしなくてよい md ファイルを修正してブラウザを再読み込みすると最初のページ表示になるのが難点 ページ指定して表示できない ページ指定機能 webブラウザ印刷対応 タッチデバイスでスワイプによるページ切替機能 mdslide ymrl/mdslide · GitHub (現在これを使用) アドレスバーにページ数を /#12 などとページ指定して表示できる md ファイルを修正してブラウザ再読み込みすれば、即ブラウザに表示を反映(例:12ページ目を修正して再読み込みすれば12ページを修正して表示) md から html に書き出しするとタグ直書きしてしまうので、md ファイル
目次 目次 はじめに GAE登録 GAEのSDKをインストール HTMLファイルをアップロードする. はじめに Google App Engine(GAE)を使えば, いつも使っているGmailのアカウントを使用して, HTMLを使った無料のサイトを作ることができます. 今回はiPhone専用のWebアプリを作成するために, まず初めにGAEでHTMLによるWebサイトを作成してみました. GAEは,PythonやJavaによるウェブアプリケーションを開発し、 Googleのインフラ上で実行できるサービスです. Google App Engine - Google Code このGAEを使えば, あの天下のGoogleのインフラを使用できるため, 面倒なサーバ管理を必要としない 非常に安定したWebサービスを構築することができます. また,GAEは容量500MB(!)、月500万PV(!)
※[ブックマーク]ボタンの中に delicious, reddit, digg, Google+(G+) のボタンもあります。 2014年5月時点で、HTML/Webスクレイピングに使える Ruby 関連のライブラリたちについて、前回 (2010年) のまとめとの差分とともに、概要をまとめた。各々のライブラリの特徴と入手先、HP、インストール方法、ライセンスなどについて簡単に説明している。 今回扱っているのは、nokogiri, Mechanize, Selenium-webdriver, Capybara-webkit, poltergeist の 5 つ。Ruby 以外にも、PhantomJS, Yahoo!Pipes, ScraperWiki, kimono についても取り上げた。 一覧をまとめたのち、比較と評価、おすすめの用途について簡潔に述べる。 背景 2010年に「Ruby関連
B! 460 0 1 0 何か人に見せる時には資料としてPower Pointとかでスライドを作るわけですが、 普段メモもMarkdown形式で書いてく事が多くて、 簡単なもの、特に文字だけの物の場合はそのままコピペするだけみたいな ことも多いので、 直接Markdownからスライドを作る物を試してみることに。 Markdownからスライドを作れるツール Pandoc 対応フォーマット インストール PDF作成(beamerテンプレートを使う) beamerのテーマについて 日本語について Pandocまとめ Slide Show (S9) インストール スライド用HTML作成 PDFにコンバート その他のツール Marp mkd2pdf markdown-pdf markdown2impress mdslide slidedeck remark Markdown2pdf Swipe Sl
原著バージョン: 2.18 更新日: 2022/04/29 翻訳者(アルファベット順): becolomochi makotosan niszet Takada Atsushi Tomoki Ishibashi Yuki Fujiwara 概要¶ pandoc [options] [input-file]… 説明¶ Pandocは、あるマークアップ形式から他の形式へ変換する Haskell ライブラリと、そのライブラリを用いたコマンドラインツールです。 Pandoc は、 Markdown 、 HTML 、LaTeX 、 Word docx など、これに限定されない多数のマークアップとワープロ形式の間で変換することができます。入力および出力形式の完全なリストについては、下記 (options below) の --from と --to を参照してください。 Pandoc は PDF 出力
追記(2020.4.19) Pandoc User’s Guideを日本語に全訳しました。 よろしければご参照ください。 新しい翻訳をプレリリースしました!(翻訳途中の部分もあります) Pandocユーザーズガイド 日本語版 [2.7.2] — 日本Pandocユーザ会 2019.02.21 ドキュメント 旧日本語版:Pandoc ユーザーズガイド 日本語版 はじめに 今回は、ドキュメント作成Tips Advent Calendar 2012の1日目 (マインドマップから全てを紡ぎ出す - XMind+Pandocのドキュメント作成術 -) で少し紹介したPandocというツールについて、もう少し深く掘り下げて紹介したいと思います。 MarkdownとかreStructuredTextとか、流行ってますよね いわゆる軽量マークアップ言語が最近流行しています。特にMarkdownは猫も杓子も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く