Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Jquery Presentation

    Загружено:

    Hanif Sudira
    289 просмотров43 страницы
    This document provides an overview of jQuery including what it is, what it can do, how to use it, syntax, selectors, events, effects, HTML manipulation, and AJAX. jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and AJAX easier. It works across browsers using CSS selector syntax. Key features covered include selecting elements, running actions on events like clicks, common effects like hide/show, and loading data asynchronously with AJAX.

    Исходное описание:

    Оригинальное название

    jQuery Presentation.pptx

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PPTX, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    This document provides an overview of jQuery including what it is, what it can do, how to use it, syntax, selectors, events, effects, HTML manipulation, and AJAX. jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and AJAX easier. It works across browsers using CSS selector syntax. Key features covered include selecting elements, running actions on events like clicks, common effects like hide/show, and loading data asynchronously with AJAX.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    289 просмотров43 страницы

    Jquery Presentation

    Загружено:

    Hanif Sudira
    This document provides an overview of jQuery including what it is, what it can do, how to use it, syntax, selectors, events, effects, HTML manipulation, and AJAX. jQuery is a JavaScript library that makes HTML document traversal and manipulation, event handling, animation, and AJAX easier. It works across browsers using CSS selector syntax. Key features covered include selecting elements, running actions on events like clicks, common effects like hide/show, and loading data asynchronously with AJAX.

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PPTX, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 43

    Pemrograman Web B

    5113100113
    Roeha

    Muhamad

    Luthfie

    5113100145

    Daniel Bintar

    5113100171

    Nugroho Wicaksono

    La

    What Is jQuery?
    jQuery is a fast, small, and feature-rich JavaScript
    library. It makes things like HTML document traversal
    and manipulation, event handling, animation, and
    Ajax much simpler with an easy-to-use API that works
    across a multitude of browsers. With a combination of
    versatility and extensibility, jQuery has changed the way
    that millions of people write JavaScript.
    - jQuery.com

    What You Should Already Know

    What It Can Do
    HTML event methods
    Effects and animations
    HTML/DOM manipulation
    CSS manipulation
    AJAX
    Utilities
    *Tip:In addition, jQuery has plugins for almost any task out
    there.

    How To Use It
    Download the jQuery library from jQuery.com
    Include jQuery from a CDN, like Google

    Code:
    <head>
    <script src="jquery.min.js"></script>
    </head>

    OR
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    </head>

    Syntax
    Sintaks jQuery dibuat khusus untuk selecting elemen
    HTML dan melakukan action pada elemen HTML.
    Syntax:
    $(selector).action()

    $ untuk mendefinisikan/mengakses jQuery


    (selector) untuk mencari/memilih elemen HTML
    Suatu action() jQuery yang akan dilakukan pada elemen
    yang di pilih.

    Why Always Document Ready


    $(document).ready(function(){
    // jQuery methods go here...
    });

    Terdapat kemungkinan beberapa action gagal untuk


    dijalankan
    Untuk mencegah suatu kode jQuery berjalan sebelum
    halaman berhasil di load/ready.

    Selectors
    Salah satu bagian paling penting dalam mempelajari
    jQuery.
    jQuery Selectors = CSS selectors

    Note :
    $(this) berarti memilih elemen HTML itu sendiri.

    Events and Effects

    jQuery Events
    Mouse :

    Keyboard :

    Form Events :

    Documents :

    click

    keypress

    Submit

    load

    Dblclick

    Keydown

    Change

    rezise

    mouseenter

    keyup

    Focus

    scroll

    blur

    unload

    mouseleave

    ready

    jQuery Events - Mouse


    click ()
    syntax : $(selector).click()
    Example :
    $('div').click(function()
    {
    alert("You clicked me.");
    });

    jQuery Events - Mouse


    mouseenter ()
    syntax : $(selector).mouseenter()
    Example :
    $('div').mouseenter(function()
    {
    alert("You entered me");
    });

    jQuery Events - Mouse


    mouseleave ()
    syntax : $(selector).mouseleave()
    Example :
    $('div').mouseleave(function()
    {
    alert("Bye! You now leave me.");
    });

    jQuery Events - Keyboard


    keypress ()
    syntax : $(selector).keypress()
    Example :
    i=0;
    $("input").keypress(function(){
    $("span").text(i += 1);
    });

    jQuery Events - Form


    submit ()
    syntax : $(selector).submit()
    Example :
    $("form").submit(function(){
    alert("Submitted");
    });

    jQuery Effect
    Hide/show
    Fade
    Slide
    Animate
    Stop
    Callback
    Chaining

    jQuery Effect - Hide and Show


    Hide () /show ()
    syntax : $(selecter).hide(); $(selecter).show();
    Example :
    $("div").click(function()
    {
    $(this).hide("fast");
    });
    $('#action').click(function()
    {
    $("#red,#yellow,#blue,#green").show(2000);
    });

    jQuery Effect - Sliding


    slideDown()
    slideUp()
    slideToggle()
    syntax : $(selecter).slideDown();
    Example :
    $("#flip").click(function(){
    $("#panel").slideToggle("slow");
    });

    jQuery Effect - Animation


    animate ()
    syntax : $(selecter).animate();
    Example :
    $("div").click(function()
    {
    $(this).animate(
    {
    height: '130px',
    width: '130px',
    opacity : 0.5
    });
    });

    jQuery Effect Stop Animations


    stop ()
    syntax : $(selector).stop();
    Example :
    $("#flip").click(function(){
    $("#panel").slideDown(5000);
    });
    $("#action").click(function(){
    $("#panel").stop();
    });

    jQuery Effect : Callback Functions


    callback
    syntax : $(selector).action(speed,callback);
    Example :
    $("#action").click(function(){
    $("#red").hide("slow", function(){
    alert("Red Box is now hidden");
    });
    });

    jQuery Effect - Chaining


    chaining
    Example :
    $("#action").click(function(){
    $("#panel").slideDown("slow").slideUp("slow");
    });

    jQuery HTML
    Get
    Set
    Add
    Remove
    Css classes
    Css
    dimensions

    jQuery HTML Get Content and


    Attributes
    Text ()
    Html ()
    Val ()
    Syntax : $(selector).action();
    Example :
    $("#action").click(function(){
    alert("Text: " + $("#panel").text());
    alert("HTML: " + $("#panel").html());
    });

    jQuery HTML - Set Content and


    Attributes
    Text ()
    Html ()
    Val ()
    Syntax : $(selector).action();
    Example :
    $("#action").click(function(){
    $("#flip").text("Created By : ");
    });

    jQuery HTML - Add Elements


    Append ()
    Prepend ()
    After ()
    Before ()
    Syntax : $(selector).action();
    Example :
    $("#action").click(function(){
    $("#flip").append(" Kelompok 4 ,");
    });

    jQuery HTML - Remove Elements


    Remove
    Empty
    Syntax : $(selector).remove(); $(selector).empty();
    Example :
    $("#action").click(function(){
    $("div").remove();
    });

    jQuery HTML - Get and Set CSS


    Classes
    addClass()
    removeClass()
    toggleClass()
    css ()
    Example :
    $("div").click(function(){
    $(this).addClass("blue");
    });

    jQuery HTML - Get and Set CSS


    css()
    syntax : $(selector).css();
    Example :
    $("div").click(function(){
    alert("Background color = " + $(this).css("backgroundcolor"));
    });

    jQuery HTML - Dimensions


    Width()
    Height()
    innerWidth()
    innerHeight()
    outerWidth()
    outerHeight()
    Example :
    $("div").click(function(){var txt = "";
    txt += "Width: " + $(this).width();
    txt += ", InnerWidth: " + $(this).innerWidth();
    txt += ", Height: " + $(this).height();
    txt += ", InnerHeight: " + $(this).innerHeight();
    alert(txt);
    });

    Traversing dan AJAX

    jQuery Traversing

    yang berarti "bergerak melalui digunakan


    untuk memilih elemen HTML berdasarkan
    hubungan mereka dengan elemen yang lainnya.

    Intro

    Elemen <div> adalah parent dari <ul> dan ancestordari semua yang berada di
    dalamnya.
    .
    Kedua elemen <li> adalah siblings
    Elemen <b> adalah childdari <li> kanan dan descendantdari <ul> dan <div>

    Macam-macam Traversing
    Traversing Up
    parent()
    parents() / parents("ul)
    parentsUntil(div)

    Macam-macam Traversing
    Traversing Down
    children() / children(p.1)
    find(span) / find(*)

    Macam-macam Traversing
    Traversing Sideaways
    siblings()
    next()
    nextAll()
    nextUntil(selector)
    prev()
    prevAll()
    prevUntil(selector)

    Macam-macam Traversing
    Traversing Filtering
    first()
    last()
    eq()
    *eq(0) == first()
    filter(".intro")
    not(".intro")
    Penggunaan filter dan not terlihat saat chaining.

    jQuery AJAX
    AJAX = Asynchronous JavaScript and XML.
    AJAX menload data di background dan menampilkannya di
    halaman web tanpa mereload keseluruhan halaman tersebut.
    Contoh : Gmail, Google Maps, Youtube dan Facebook tabs.

    Macam-macam AJAX
    load()
    Syntax:
    $(selector).load(URL,data,callback);
    Macam-macam callback :
    responseTxt - contains the resulting content if the call succeeds
    statusTxt - contains the status of the call
    xhr - contains the XMLHttpRequest object
    Contoh :
    $("#div1").load("demo_test.txt #p1");
    $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr));

    Macam-macam AJAX
    get()
    Syntax :
    $(selector).get(URL,callback);
    Contoh :
    $.get("demo_test.php", function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
    });

    Macam-macam AJAX
    post()
    Syntax:
    $(selector).post(URL,data,callback);
    Contoh :
    $.post("demo_test_post.php",
    {
    name: "Donald Duck",
    city: "Duckburg"
    },
    function(data, status){
    alert("Data: " + data + "\nStatus: " + status);
    }
    );

    Live Coding !

    Вам также может понравиться