忍者ブログ

からすまる日誌 JavaScript

応用(9) jQuary htmlメソッド、textメソッド

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

応用(9) jQuary htmlメソッド、textメソッド


ディレクトリの記述方法
 
../ いっこ上の階層
./  カレントディレクトリ(今いる階層)


JQuaryのファイルはどこで読み込んでも当たり障りない。
一般的には<head>の最後の部分に記述する。
 
$ JQuaryを表す特別な記号。
 

$(document).ready
 
.ready
準備が整ったら実行せよというメソッド
(修正が可能なメソッドなので覚える必要はない)
 
 
--->ここまで
 
<!DOCTYPE html>
<html lang="ja" hoge="foo">
<head>
 <meta charset="UTF-8">
 <title>JQuery</title>
 <link rel="stylesheet" href="test2.css">
 <script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
 <script src="test2.js"></script>
</body>
</html>
--->test2.js
 
$(document).ready(function(){
 $('body').html('<p>jQuaryの動作チェック</p>');
});
 
 

これがjQuaryの記述だが、もっとシンプルな記述があるので
普通こういう書き方はしないらしい。
なおリファレンスエラーが出て、
「$が未定義だ」とか言われたら、
読み込みが違っているのを疑う。
(パスが違うとか、ファイル名が違うとか。なにかしらjQuaryが読み込めてないとこのエラーが起こる)
 

$(document).readyは普通省略するらしい。
「document自体が全部読み込まれたときに、以下のことをやってください。」という意味。
というわけで省略できる。
 
$(document).ready(function(){
$(function(){ 
})
例外なくjQuaryを書くときは、この、ダラーファンクションから始める。
これは読み込まれ切ってないことでエラーが出るのを回避するために入れるらしい。
 
先頭行はかならずこの、
$(function(){
 
最終行は必ずこの、
})
になり、
Jクエリーの記述はその中に書かれる。
 

Jクエリーでは、名前のついたfunctionを使うことは非常にまれ。
名前のない関数を定義するということがちょいちょい行われる。
これを無名関数(むめいかんすう)という。
 
名前をつけるのは「どこかから呼び出すため」。
しかしjsはイベント駆動型のプログラムであるため、特に名前がなくてもいいことになる。
 
Jクエリーは無名関数をつかう。
さらにプロパティがない。
指示命令は全部メソッド。
イコール値という記述がない。
  
 

 
この青い部分がgetElementByIdを兼ねているらしい。
   

htmlに以下のものを追加↓ 
 
<p></p>
<p class="hoge"></p>
<p id="foo"></p>
 
jsに追加
 
$(function(){
 $('#foo').html('<h1>jQuary</h1>');
});
idがfooとなっているもののなかに、<h1>jQuary</h1>というhtmlを入れてね。
という意味。
html(タグを伴うコンテンツ)を書きたいときはこのhtmlメソッドを使い、
特にテキストだけ書き出したいときはtextメソッドを使う。
この2つはよく使う。

テキストの例
 
$(function(){
 $('#foo').text('<h1>jQuary</h1>');
});
 
 

じゃあ全部の<p>(idつきもclassもちも何も持ってないのも)に文字を入れようとなったら、
 
$(function(){
 $('p').html('<h1>jQuary</h1>');
});
 
で済む。
 

ゲットエレメントしなくていい。
CSSのセレクタで書けばいい。
 
必ず$()
ダラーかっこ
で捕まえる。
 
これがJクエリーの書き方。
 

ちなみにゲットエレメントバイアイディーで取得したオブジェクトは、
jQuaryの想定しているオブジェクトじゃないので、
jQuaryでは操作できない。
 
jQuaryが捕まえたオブジェクト ← jQuaryで使える。
getElementByIdで捕まえたオブジェクト ← ネイティブなコードで使える。
両者に交流はないので、使おうとするとエラーになる。
 

10種類ぐらいJクエリーのメソッドが使えると
いろんなことができるらしい。

jQuaryのリファレンスのサイトもある。
もっと使いたかったらそのへんを見ればいい。
 
PR

コメント

ただいまコメントを受けつけておりません。

ブログ内検索

P R