LotosLabo

プログラミング技術とか気になった情報を載せていきます

jQueryについて2

メソッドの処理

メソッドを使ってDOM要素を指定していきます。
ちなみにDOMというのはドキュメントオブジェクトモデルです。

簡単に言うと

タグとかです。

親要素の指定

parent()

例:

<body>
<div id="main">
  <h1>朝のあいさつ</h1>
  <p>おはよう</p>
   <div id="sub">
    <h2>お昼のあいさつ</h2>
    <p>こんにちは</p>
   </div> <!-- sub -->
 </div> <!-- main -->

 <script>
 $function() {
 $("h2").parent().css('color','red');
 });
</body>



h2タグの親要素はsubなので、h2タグとsubが赤色になります。


子要素の指定

children()

例:

<body>
<div id="main">
  <h1>朝のあいさつ</h1>
  <p>おはよう</p>
   <div id="sub">
    <h2>お昼のあいさつ</h2>
    <p>こんにちは</p>
   </div> <!-- sub -->
 </div> <!-- main -->

 <script>
 $function() {
 $("#main").children().css('color','red');
 });
</body>



mainの子要素はsubなので、mainとsubが赤色になります。


次の要素の指定

next()

例:

<body>
<div id="main">
  <h1>朝のあいさつ</h1>
  <p>おはよう</p>
   <div id="sub">
    <h2>お昼のあいさつ</h2>
    <p>こんにちは</p>
   </div> <!-- sub -->
 </div> <!-- main -->

 <script>
 $function() {
 $("h1").next().css('color','red');
 });
</body>



h1の次の要素なので、mainのpタグが赤色になります。


前の要素の指定

prev()

例:

<body>
<div id="main">
  <h1>朝のあいさつ</h1>
  <p>おはよう</p>
   <div id="sub">
    <p>こんにちは</p>
    <h2>お昼のあいさつ</h2>
   </div> <!-- sub -->
 </div> <!-- main -->

 <script>
 $function() {
 $("h2").prev().css('color','red');
 });
</body>



h2の前の要素なのでsubのpタグが赤色になります。


同列の要素の指定

siblings()

例:

<body>
<div id="main">
  <h1>朝のあいさつ</h1>
  <p>おはよう</p>
   <div id="sub">
    <h2>お昼のあいさつ</h2>
    <p>こんにちは</p>
    <p>Goten Tag</p>
   </div> <!-- sub -->
 </div> <!-- main -->

 <script>
 $function() {
 $("h2").siblings().css('color','red');
 });
</body>



よくわかっていないのですが、h2タグの同列なので、
h2タグ以外の下の要素である、pタグ二つが赤色になります。




例えば二つのテキストのURLが指定してある時

例:

<p><a href="http://google.com">Google</a></p>
<p><a href="http://yahoo.co.jp">Yahoo</a></p>


例: スクリプト

$(function (){
  $('a[href="http://google.com').css('background', 'red');
});

URLを指定して背景色を変えたいときに、
href =  ← のイコールを変更することが出来ます。

 = と等しい時
 != と等しくない時
 *= を含むとき
 ^= で始まるとき
 $= で終わるとき


addclass と removeclass

これはというとstyleを設定した時にjQueryで制御できるということです。

例:

<style>
 .myStyle{
           background-color: red;
           font-size: 30px;
 }
</style>
<body>
 <p>おはよう</p>
<script>
 $functoin() {
 $('p').addClass('myStyle');
 });
</script>
</body>



こうすると pタグにmyStyleのスタイルが適用されます。
また逆に外したい場合は .removeClass とすれば外れます。


attributeメソッド

属性の取得や設定ができます。
attrで設定していきます

例:

<body>
 <p><a href="http://google.com">Google</a></p>

<script>
$function() {
$('a').attr('href','http://yahoo.co.jp');
});
</script>
</body>



こうすると上で指定したGoogleのURLをjQueryで変更できるということです。
本来ならGoogleにつながるはずが、Yahooにつながってしまうと。


タグの中身を操作

テキストの中身を変更します

text

<body>
<p>変えられんぞ</p>
<script>
$function() {
$('p').text('変えちゃった><');
});
</script>
</body>



pタグの中身が変わりました


中身も変えてリンク先も付けたいとき

html

<body>
<p>変えられんぞ</p>
<script>
$function() {
$('p').html('<a href="http://lotoslabo.com">変えちゃった><</a>');
});
</script>
</body>



pタグの中身を変えてリンクも付けました


フォームのvalueの値を変更

input

<body>
<input type="text" value="hello">
<script>
$function() {
$('input').val('GOOD');
});
</script>
</body>

テキストボックスの値を変更しました

中身を削除

remove

<body>
<p>消されんぞ</p>
<script>
$function() {
$('p').remove();
});
</script>
</body>



テキストを削除

中身を空に

empty

<body>
<p>消されんぞ</p>
<script>
$function() {
$('p').empty();
});
</script>
</body>

テキストを空に


要素を追加する

リストを簡単に作ります

例:

<ul>
<li>おはよう</li>
<li>こんにちは</li>
<li>こんばんは</li>
</ul>

これに要素を追加していきます。
まず楽に作るために変数を用意します。

var new_li = $('<li>').text('にゃんぱすー');

このliタグのにゃんぱすーを色々な場所に設置していきます。

指定した前に追加

before

$function() {
$('ul > li:eq(1)').before(new_li);
});

liタグの2番目の要素の前に配置します。


指定した後に追加

after

$function() {
$('ul > li:eq(1)').after(new_li);
});

liタグの2番目の要素の後に配置します。



また、 insertBefore も insertAfterも同じように使われます。

new_li.insertBefore($'ul > li:eq(1)'));

new_li.insertAfter($'ul > li:eq(1)'));



要素の子要素の先頭に追加

prepend

$function() {
$('ul').prepend(new_li);
});

liタグの1番目に配置します。


要素の子要素の末尾に追加

append

$function() {
$('ul').append(new_li);
});

liタグの4番目に配置します。


またこれも同じ意味で使われます。

prependTo と appendTo

new_li.prependTo($('ul'))]

new_li.appendTo($('ul'))