*

テキストの取得・変更

公開日: : 最終更新日:2015/08/03 jQuery

HTMLファイルに含まれるテキストをjQueryで
取得・変更するには、text()という命令を使用します。

テキストの取得

text()の括弧内に何も記述しない場合、セレクタで指定した要素に
含まれるテキストを取得できます。

サンプルコードの31行目をみると
$(“#test1″).text()
と書かれていて、そこでHTMLの<p id=”#test1″>の
「試しに何かを書いてみる。」を取得しています。

テキストの変更

34行目で「試しに何かを書いてみる。」を
「変更完了!」と文字に変えています。

35行目は何も書かれていない物を
「文字を追加する。」と文字に変えています。

このようにtext(“何かしらの文字”)で
文字を追加することができます。

実行結果はこちらです。

console.logについて

サンプルコードの31行目の
console.log()と命令ですが、
これはブラウザの「console」という
箇所に値や文字を出力するための命令です。

確認方法は、Chromeだとブラウザを立ち上げ
このサンプルコードのファイルを読み込んで
F12ボタンを押します。その後に
「Elements」「Network」といった窓がでます。
そこの「console」タブをクリックすると
「試しに何かを書いてみる。」と変更前の
テキストが表示されているのが分かります。

動作確認時に使用することもあるので
覚えておくといいかもしれません。

スポンサードリンク

関連記事

catejQuery

イベント発生時に一度だけ処理を行うone()

この命令は、指定した要素で発生したイベントに対して、 一度だけ実行する処理を設定します。 o

記事を読む

jQuery

class属性の追加・削除

class属性は、ほかの属性とは違い、スペース区切って複数の値を設定できます。class属性の操作に

記事を読む

catejQuery

jQueryのセレクター3 parent/contains/hasセレクター

前回と同様にjQueryのセレクターを紹介します。 parentセレクター parentセレ

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

catejQuery

ページトップへスムーズにスクロールさせる。

今回は、ボタンをクリックしたら ページのトップへ滑らかに遷移するというものを jQueryを使っ

記事を読む

catejQuery

要素の表示・非表示を交互に切り替える toggle()

toggle()は、要素の表示・非表示を交互に 切り替える命令です。セレクターで指定した要素が

記事を読む

catejQuery

タブを利用してコンテンツを表示させる。

ページを遷移させず複数のコンテンツを 表示させたい場合使用します。 必要な手順 1.j

記事を読む

catejQuery

親要素を取り除いたり、要素を削除する。

前回は要素を包む命令を取り上げました。 今回はその逆、親要素を取り除いたり、 要素を置き換えたり

記事を読む

catejQuery

表示・非表示をスライドで交互に切り替える slideToggle()

slideToggle()は、toggle()を スライドアニメーションにしたものです。 セレク

記事を読む

jQuery

Masonryのギャラリーの画像をクリックすると、画像が拡大し、キャプションがでるようにしてみる

前回の記事でMasonryのギャラリーを作成しましたが、今回はそれに、見出しをつけてみます。 サン

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑