jQ 基礎

01JQ 選擇器

$('p') //元素選擇器 
$('#id') //id選擇器 
$('.class') //類選擇器 
$ ('*') //選取全部元素 
$ ('this') // 獲取當前元素

02JQ 事件

$('#id').click(); // 點擊事件 
$('#id').mouseenter() // 鼠標事件
$('#id').keypress() // 鍵盤事件
$('#id').submit() // 表單事件
$('#id').load() // 文檔事件 

03JQ 顯示隱藏

hide()&&show()

$('#id').click(function(){
    $('.class').hide(1000);
    $('.class').show(1000);
})

toggle()

$('#id').click(function(){
    $('.class').toggle(1000);
})

淡入淡出

• fadeIn() 淡入
• fadeOut() 淡出
• fadeToggle() 淡入淡出
• fadeTo() 元素變透明

$('#id').click(function(){
    $('.class').fadeIn();
    $('.class').fadeIn("slow");
    $('.class').fadeIn(1000);
    
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
    
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
})

JQ滑動

• slideDown() 下拉滑動
• slideUp() 上滑
• slideToggle()

$('#id').click(function(){
    $('.clss').slideDown(1000);
    $('.clss1').slideUp(1000);
    $('.clss2').slideToggle(1000)
})

JQ動畫animate()

// 動畫
$('#id').click(function(){
    $('.class').animate(
     {
          left:'250px',
          opacity:'0.5',
          height:'150px',
          width:'150px'
     }
    );
    var divBox = $('#div');
    divBox.animate({height:150px,opacity:'0.4'});
    divBox.animate({width:350px,opacity:'1.4'});
})
// 停止動畫 
$('#button').click(function(){
    $('.divBoxLer').stop();
    // stop() 可以添加兩個參數 來控制動畫的執行
})

JQ動畫 鏈

$('#id').click(function(){
    $('.clss').css('width:150px').slideDown(1000).slideUp(2000);
})

04JQ DOM操作

獲取返回內容

        $(document).ready(function(){
             $('#id').click( function(){
                 var textData = $('.p').text("Hello world!");
                 var textHtml = $('.PL').html("Hello world!");
                 console.log(taxtData);
                 console.log(textHtml);
             })
        })

獲取表單的值

        $(document).ready(function(){
            $('#button').click(function(){
             var formData = $('#name').val("Hello world!");
             console.log(formData,'數據')
            })
        })

獲取屬性

$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href",'Hello world!'));
  });
});

05JQ 添加元素

• append() - 在被選元素的結尾插入內容
• prepend() - 在被選元素的開頭插入內容
• after() - 在被選元素之後插入內容
• before() - 在被選元素之前插入內容

    $(document).ready( function(){
            $('#button').click( function(){
                $('.p').append('添加在p標籤尾部的新內容');
                $('.p').prepend('添加在p標籤開頭的新內容');
                
                var text = $('<li></li>').html('添加內容')
                $('#ul .li').after(text)
                $('#ul .li').before(text)
            })
        })

06JQ 刪除元素

• remove() - 刪除被選元素（及其子元素）
• empty() - 從被選元素中刪除子元素

    $(document).ready( function(){
        $('#button').click(){
            $('.class').remove();
            $('.class').empty();
        }
        })

07JQ 操作CSS

• addClass() - 向被選元素添加一個或多個類
• removeClass() - 從被選元素刪除一個或多個類
• toggleClass() - 對被選元素進行添加/刪除類的切換操作
• css() - 設置或返回樣式屬性

$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("h1,h2,p").removeClass("blue");
    $("h1,h2,p").toggleClass("blue");
    $("h1,h2,p").css("background-color");
  });
});

08JQ 操作尺寸

• width() 返回元素的寬度
• height() 返回元素的高度
• innerWidth() 元素的寬度（包括內邊距）
• innerHeight() 元素的高度（包括內邊距）
• outerWidth() 元素的寬度（包括內邊距和邊框）
• outerHeight() 元素的高度（包括內邊距和邊框）

09JQ 異步交互

load()方法

$(selector).load(URL,data,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $('.form').load('./api/newData.txt')
            })
        })

$.get() 方法

$.get(URL,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $.get('URL',function(data,status){
                    console.log(data,'數據')
                })
            })
        })

$.post() 方法

$.post(URL,data,callback);

        $(document).ready( function(){
            $('#button').click(function(){
                $.post('url',{
                    name:'name',
                    url:'url',
                    },
                    function(data,status){
                        console.log(data,'數據')
                    }
                )
            })
        })