iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0
自我挑戰組

網頁排版個人學習筆記系列 第 18

jQuery|操控網頁元素1

  • 分享至 

  • xImage
  •  

文章提要

$(this)、parent()、siblings()、find()、find()與siblings()差異


$(this)

只針對目前點擊的元素做動作(可重複點擊);操作本身元素

  • 範例
  • 以選單為例,一般使用動態(此例為.menu a)加上.active(可自命名),再到jQuery寫click並用addClass啟動它,所有選單會一起執行動作,如果想要按哪個才執行那個,可用this。但如果同時點選很多個就會很多個選單一起執行動作
  • 如果想要點擊執行動作,再次點擊取消剛剛的動作,jQuery可把addClass換toggleClass
    this()小訣竅
    註: 此圖原初處為六角學院

parent()

點擊子元素後父元素也有其它效果產生
parent()示意圖

  • 範例
  • 上方示意圖: 點擊子元素(加入購物車按鈕.addcart),父元素(li)也呈現設定的變化(背景變黃色)
  • 一般只會於.addcart有效果,希望點擊加入購物車後li(父)也有反應的話可使用parent找到父階層元素
    • 於li(父元素)與.addcart(子元素)使用動態加上active,再到jQuery讓active被啟用
    • 目前點擊的東西this(.addcart)執行動作後,再針對this的父元素( li)做toggleClass('active'); 讓它執行css寫的動作
<ul>
    <li>
        <input type="button" class="addcart" value="加入購物車">商品一
    </li>
    <li>
        <input type="button" class="addcart" value="加入購物車">商品二
    </li>
</ul>
$(document).ready(function() {
    $('.addcart').click(function(event) {
//.addcart啟用active
        $(this).toggleClass('active');
//li啟用active
        $(this).parent().toggleClass('active');
    });
});

siblings()

找自己以外的同層元素

  • 下方程式碼中,在點擊選擇器1後→先指定我自己(this)→動態加上addClass active後→希望同層級可以做一些不同設定不同事情,即可使用siblings
    • 當中的active為自訂的class名稱(動態)
      • 『動態』是先寫好一段程式碼,以程式碼來操控網頁元素,讓它能夠在使用者觸發某項事件後,例如點擊 (click),再來執行後面的動作,例如增加或移除 class、觸發某個動畫等等,這就是動態
      • 『非動態』則是網頁載入後的畫面只會根據原始碼來渲染,原始碼如何網頁就如何
$(document).ready(function() {
    $('選擇器1').click(function(event) {
        $(this).addClass('active').siblings().removeClass('active');
    });
});
  • this()與加入siblings()的差異 範例
    • 如下範例中如果li內還有a使用siblings()會無效,因為li內的a無其他同層元素。
<ul class="menu">
    <li>
        <a href="#">選單1</a>
    </li>
    <li>
        <a href="#">選單2</a>
    </li>
    <li>
        <a href="#">選單3</a>
    </li>
</ul>

find()

找自己的子層元素內容

  • 錯誤範例
    • 此範例不成立,無作用: 先指定自己,找到裡面的h3執行動態active,再下sibling找自己(h3)以外的同層元素,但內無東西所以無法做清除作用。
<ul>
    <li>
        <h3>選單1</h3>
    </li>
    <li>
        <h3>選單2</h3>
    </li>
    <li>
        <h3>選單3</h3>
    </li>
</ul>
$(document).ready(function() {
  //無效寫法: 這邊h3並無同層元素
  $('ul li').click(function(event){
    $(this).find('h3').addClass('active').siblings().removeClass('active');
  });
});
  • 範例1被點擊的元素才會執行active。點產品1再點產品2,會取消產品1的active
    • 指定自己 li→找自己的子層元素h3→執行active→再回去找h3的父元素li→自己li以外的同層元素中的h3→做移除active動作
    • 白話:點擊其中一個h3後,執行active。要再次點擊其他h3但不想要原本的h3也是active狀態,就必須要移除其它同的active狀態,active留一即可
$(document).ready(function() {    
    $('.cart li').click(function(event) {
        $(this).find('h3').toggleClass('active').parent().siblings().find('h3').removeClass('active');
    });
});
  • 範例2 被點選以外的其它同層元素會執行active,被點選的li則不執行
    • 指定自己 li→li自己以外的同層元素(如果點選產品一 ,以外的同層元素即產品二~產品六)→找自己以外的子層元素h3→執行active
<body>
    <ul class="cart clarfix">
        <li><h3>產品一</h3></li>
        <li><h3>產品二</h3></li>
        <li><h3>產品三</h3></li>
        <li><h3>產品四</h3></li>
        <li><h3>產品五</h3></li>
        <li><h3>產品六</h3></li>
    </ul>
</body>
$(document).ready(function() {
    //被點選以外的其它同層元素會執行active,被點選的li則不執行
    $('.cart li').click(function(event) {
        $(this).siblings().find('h3').addClass('active');
    });
});

find()、siblings()、parent()差異

find()、siblings()、parent()示意圖


上一篇
jQuery|搭配css的動畫效果-2
下一篇
jQuery|操控網頁元素1-實作篇
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言