忍者ブログ

からすまる日誌

20191118_03 Jクエリ htmlメソッド,textメソッド

×

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

20191118_03 Jクエリ htmlメソッド,textメソッド


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


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

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

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

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

10種類ぐらいJクエリーのメソッドが使えるといろんなことができるらしい。 
Jクエリーのリファレンスのサイトもある。もっと使いたかったらそのへんを見ればいい。
 
PR

コメント

ブログ内検索

カレンダー

04 2025/05 06
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31