jQuery 濃縮精華

1
$(document).ready(function(){
2
    //確保jQuery載入瀏覽器中才執行當中的程式
3
})

1
$(document).ready(function(){
2
    $(".header h1").hide();
3
    //選擇器用法，原生 document.queryselector(".header h1")
4
})

1
$(document).ready(function(){
2
    $(".header h1").hide();
3
    //隱藏
4
    $(".header h2").show();
5
    //顯示
6
})

1
$(document).ready(function(){
2
    $(".button").click(function{
3
        $(".header").toggle();
4
        //toggle切換開啟或隱藏
5
    })
6
})

1
$(document).ready(function(){
2
    $(".button").click(function(event){
3
        $(".header").slideDown(1000);
4
        //slide滑動效果，可帶transition參數毫秒
5
    })
6
})

1
$(document).ready(function(){
2
    $(".button").click(function(event){
3
        $(".text").fadeToggle();
4
        //fadeToggle淡入淡出，也可帶參數
5
        //fadeIn預設隱藏的東西打開
6
        //fadeOut預設隱藏的東西關閉
7
    })
8
})

1
$(document).ready(function(){
2
    $(".button").click(function(event){
3
        $(".text").toggleClass("active");
4
        //假設active是一個效果，按下button後，若已存在active則會移除，否則新增
5
    })
6
})

1
$(document).ready(function(){
2
    $(".button").click(function(event){
3
        $(".header").slideDown(1000).slideUp(1000);
4
        //透過鏈式寫法可串連多個效果
5
    })
6
})

1
$(document).ready(function(){
2
    $(".close").click(function(event){
3
        event.preventDefault();
4
        //取消了點擊後的行為
5
    })
6
})

1
$(document).ready(function(){
2
    $(".box").css("width","500px");
3
    //box class載入了寬度500px
4
})

1
$(document).ready(function(){
2
    $(".close").click(function(event){
3
        $(".box").delay(500).slideUp();
4
        //延遲0.5秒後向下滑動
5
    })
6
})

1
$(document).ready(function(){
2
    $(".close").click(function(event){
3
        $(".box").stop().slideToggle(3000);
4
        //點擊可以中斷動畫
5
    })
6
})

1
$(document).ready(function(){
2
    //功能：希望點擊到該點擊的元素會有新增active效果
3
    $(".menu li").click(function(event){
4
        // $(".menu li").addClass('active');
5
        //會使所有li套用active效果
6
        $(this).addClass('active');
7
        //會使該被點擊的li套用active效果
8
    })
9
})

1
$(document).ready(function(){
2
    //功能：希望點擊到該點擊元素的父元素會有新增active效果
3
    $(".addCart").click(function(event){
4
        $(this).parent.toggleClass('active');
5
        //該被點擊元素的父元素會新增active，如果已存在active將移除
6
    })
7
})

1
$(document).ready(function(){
2
    //功能：希望只有該被點擊元素才有active效果
3
    $(".addCart").click(function(event){
4
        $(this).addClass("active").siblings().removeClass("active");
5
        //該被點擊元素會先新增active class，並將自己以外的同層移除active class
6
    })
7
})

1
$(document).ready(function(){
2
    //功能：希望指定該被點擊的元素增加active效果
3
    $(".cart li").click(function(event){
4
        $(this).find("h3").toggleClass("active");
5
        //點擊元素後尋找元素內的h3，新增或移除active
6
    })
7
})

1
$(document).ready(function(){
2
    $(".box").html("<h1>hello world</h1>");
3
    //新增html h1
4
    $(".box h1").text("hello world");
5
    //在h1中新增文字
6
})

1
$(document).ready(function() {
2
  // click範例
3
  $(".box").click(function(event) {
4
    event.preventDefault();
5
    //要執行的程式碼
6
  });
7

8
  // on 範例
9
  $('body').on('click', '.selector', function(event) {
10
    event.preventDefault();
11
    //要執行的程式碼
12
  });
13
});

1
$(document).ready(function() {
2
    $("img").attr("width","50");
3
    //img新增寬度50px
4
    //一次性新增標籤屬性
5
});

1
$(document).ready(function() {
2
    $(".top a").click(function(event){
3
        event.preventDefault();
4
        $("html,body").animate({
5
            scrollTop: 0
6
        },700);
7
        //滑動0.7秒到置頂
8
    });
9
});