JS-網站互動設計程式進化之道-jQuery

發表於

Jquery

JavaScript&JQuery-網站互動設計程式進化之道-jQuery

學習筆記(6)

寫少一點，做多一點 = jQuery

引言

原文書名：JavaScript & JQuery: Interactive Front-End Web Development
作者：Jon Duckett
譯者：謝銘倫
出版社：碁峰
出版日期：2017/02/24

七、jQuery

MANIPULATION

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//MANIPULATION 基本
$( "div.second" ).replaceWith( "<h2>New heading</h2>" ); //replaceWith 取代
$( ".hello" ).remove(); //remove 移除

$(function() {
    $('ul').before('<p class="notice">Just updated</p>'); //before 元件之前
    $('li.hot').prepend('+ '); //prepend 元件之內,起始標籤之後
    $( ".inner" ).append( "<p>Test</p>" ); //append 元件之內,結束標籤之前
    $('li:last').after($newListItem); //after 元件之後
});

//篩選
$(function() {
    var $listItems = $('li');

    $listItems.filter('.hot:last').removeClass('hot'); //filter 符合條件
    $('li:not(.hot)').addClass('cool'); //.hot 不具有屬性
    $listItems.has('em').addClass('complete'); //.has 具有屬性

    $listItems.each(function() {
        var $this = $(this);
        if ($this.is('.hot')) { //.is 是否符合(回傳布林值)
        $this.prepend('Priority item: ');
        }
    });

    $('li:contains("honey")').append(' (local)'); //contains 包含指定文字
});

//索引值
$(function() {
    $('li:lt(2)').removeClass('hot'); //:lt() 索引值小於
    $('li').eq(0).addClass('complete'); //.eq() 指定索引值
    $('li:gt(2)').addClass('cool'); //:gt() 索引值大於
});

ATTRIBUTES / CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
//ATTRIBUTES / CSS 屬性
//屬性值擷取變更
$(function() {
    $('li#three').removeClass('hot'); //removeClass
    $('li.hot').addClass('favorite'); //addClass
    $('ul').attr('id', 'group'); //attr 擷取/變更屬性
});
if ( input.attr( "title" ) === inputTitle ) {
    input.removeAttr( "title" ) //removeAttr 
    } else {
    input.attr( "title", inputTitle );
    }

//css 擷取/變更
$(function() {
    var backgroundColor = $('li').css('background-color');
    $('li').css({
        'background-color': '#c5a996',
        'border': '1px solid #fff',
        'color': '#000',
        'text-shadow': 'none',
        'font-family': 'Georgia',
        'padding-left': '+=75'
    });
});

//元件位置
$(function() {
    var $window = $(window);
    var $slideAd = $('#slideAd');
    //計算高度(全高 - 可視高 - 訊息框高度)
    var endZone = $('#footer').offset().top - $window.height() - 500; 

    $window.on('scroll', function() {

        if (endZone < $window.scrollTop()) {
        $slideAd.animate({ 'right': '0px' }, 250);
        } else {
        $slideAd.stop(true).animate({ 'right': '-360px' }, 250);
        }

    });

});

TRAVERSING

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
//TRAVERSING 尋訪
$(function() {
    $('li').each(function() { //each迴圈
        var ids = this.id;
        $(this).append(' <span class="order">' + ids + '</span>');
    });
});

//DOM
$(function() {
    var $h2 = $('h2');
    $('ul').hide();
    $h2.append('<a class="show">show</a>');

    $h2.on('click', function() {
        $h2.next('ul')
        .fadeIn(500)
        .children('.hot') //children
        .addClass('complete');
        $h2.find('a').fadeOut(); //find 尋找

});

$(function() {
    var $p = $('p');
    var $clonedQuote = $p.clone(); //clone() 複製
    $p.remove();  //remove() 移除元件
    $clonedQuote.insertAfter('h2');

    var $moveItem = $('#one').detach(); //detach()移除但記憶體保留
    $moveItem.appendTo('ul');

});

EVENTS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//EVENTS 事件
$listItems.on('mouseover click', function(e) { //.on() 
    ids = this.id;
    $listItems.children('span').remove();
    $(this).append(' <span class="priority">' + ids + '</span>');
    eventType = e.type //event
    });

$('ul').on(
    'click mouseover', //事件
    ':not(#four)', //篩選
    {status: 'important'}, //增加資料
    function(e) { //事件處理
        listItem = 'Item: ' + e.target.textContent + '<br />';
        itemStatus = 'Status: ' + e.data.status + '<br />';
        eventType = 'Event: ' + e.type;
        $('#notes').html(listItem + itemStatus + eventType);
        }
    );

EFFECTS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
//EFFECTS 特效
$(function() {

    $('h2').hide().slideDown(); //slideDown() 
    var $li = $('li');
    $li.hide().each(function(index) {
        $(this).delay(700 * index).fadeIn(700); //delay()
    });

    $li.on('click', function() {
        $(this).fadeOut(700); //fadeOut

});

//animate
$(function() {
    $('li').on('click', function() {
        $(this).animate({
        opacity: 0.0,
        paddingLeft: '+=80'
        }, 500, function() {
        $(this).remove();
        });
    });
});