jQuery：操控網頁元素

this 操控自身元素

this可以選取自己點選、選取的元素

  $('.menu li').click(function(event) {
    /* Act on the event */
    $(this).addClass('active');
  });
});

假設 menu li 裡面有很多個 li，上方程式碼的意思是你點選了 .menu li 的話，
你點選的那個li就會增加active這個class。

parent() 是能夠在現在指定的元素裡面往它的上面一層找。

1
2
3

<ul >
  <li><input type="button" class="btn" value="加入購物車">吹風機</li>
</ul>

如果指定的是.btn的話，那就可以利用parent()去操控父元素(li)。如下

1
2
3

$('.btn').click(function(e)) {
  $(this).parent().addClass('active');
});

這段程式碼意思是點選.btn的時候，你點選的那個.btn就會往它的父元素(li)去增加一個active的class。

siblings() 可以選取自己之外的所有同層元素。

<ul class="menu">
  <li>選單1</li>
  <li>選單2</li>
  <li>選單3</li>
  <li>選單4</li>
  <li>選單5</li>
  <li>選單6</li>
</ul>

以上方程式碼為例子，我指定選單3 的話，那用 siblings()就能夠選取除了選單3 以外的所有li。

如下

1
2
3

$('.menu li').click(function(event) {
  $(this).addClass('active').siblings().removeClass('active');
});

以上方程式碼為例，我點選選單3 之後，我加入了一個active的Class，接著我利用siblings()選取選單3 之外的所有li，移除了它們的active的Class。

find() 是能夠在現在指定的元素裡面往它的下面一層找。

1
2
3

<ul >
  <li><input type="button" class="btn" value="加入購物車">吹風機</li>
</ul>

以上方程式碼為例，我如果點選到li的區塊，利用find()也能夠選取到裡面的.btn。

1
2
3

$('li').click(function(event) {
  $(this).find('.btn').addClass('active');
});

以上方程式碼為例，如果指令了li的區塊，他會往下一層尋找.btn的元素，如果有他會增加一個active的class。