Jquery初心者メモ #jQuery

jqueryを覚える必要性が出てきたので基本的な事のメモ

セレクタとメソット

jquery.js


$(function(){
    $("#main").css("color", "blue")
});

例えばこういう記述のコードがあったとしたら、$("#main")の部分がセレクタ
一般的にセレクタには、html要素や、class,idを入れて使う。（他の場合もある）

> // 〜の直下

メソッドは.css("color","red")の部分です。

フィルタ

文字通りフィルターをかけることができる。
例えば下記のようなフィルター要素がある


:eq() #イコールという意味
:gt() #グレターザン 〜よりも大きいものをフィルタリング
:lt() #レスザン ~よりも小さいものをフィルタリング
:even #イーブン
:odd  #オッド
:containts() #中身のテキストを指定
:first 
:last

下記htmlを元にjqueryを書いていきます

  <body>
    <p>Jqueryの学習</p>
    <ul id="main">
      <li>0</li>
      <li class="item">1</li>
      <li class="item">2</li>
      <li>
          3
          <ul id="sub">
            <li>3-0</li>
            <li>3-1</li>
            <li class="item">3-2</li>
            <li class="item">3-3</li>
            <li>3-4</li>
          </ul>
      </li>
    </ul>

eq()

#上記htmlに対してeqを使ってみる
$(function)(){
  $("#sub > li:eq(2)").css('color', 'red');
 });

これで#sub直下(>)のli要素の2番目(上から0,1,2番目)を赤色に変更という命令が実行された

gt() と lt()


$(function(){
  $("#sub > li:gt(3)").css('color', 'red');
});

これは、#sub直下(>)のli要素に対して３番目以降は赤色に変更という命令
よって３−４が赤になる

lt()は逆に〜より小さいものをフィルタリングする。

メソッドを使ったDOM要素の指定

メソッドの種類

parent(), children() //parentで親要素　childrenで子要素を指定
next(), prev() //nextで要素の前を、 prevで要素の後ろを指定
siblings() - 兄弟要素

      $(function(){
        // $("#sub").children().css('color', 'red');
        $("#sub > li:eq(2)").siblings().css('color', 'red');
      });