SELECTOR 123
jQuery Effects 123
Event Methods (hendleri) 123
jQuery Effects 123
        1. hide() , show()
        2. Fading (izbledjivanje)
        3. Sliding
        4. Animations
jQuery Method Chaining 123       
HTML DOM get set add remuve 123
        1.GET
        2.SET
        3. ADD new HTML content
        4.Remove
        5. Manipulating CSS and with CLASS
jQuery Traversing rodjaci, roditelji, deca 123
        1. parent()
        2. Deca i unuci i pokolenja
        3. Braca i sestre. Dele istog parenta
Moji custom kodovi 123
        1. Accordion
        2. Meni da uvek home dugme bude aktivno
        3. Kako da se onesposobi parent dugme u submeniju(da ne bude klikabilno)

Osnovno

Moze da se downloduje na server ili da se includuje pomocu urla

<head>
<script src="jquery-3.2.1.min.js"></script>
</head>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

Osnovna postavka mu je:

$(document).ready(function(){

   // jQuery methods go here...

});

Ovo kaze da se ne izvrsava nikakvA AKCIJA DOK SE CEO DOM ne lauduje

I unutar se sastoji od selektora(html elementa) plus neka akcija koja ce da se izvrsi nad njim

$(selector).action()

A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)

U JS u se statemant se izvrsavaju jedna po jedna a ne odjednom sve

*** SELECTOR 123

Baziraju se na postojecim css selektorima i uvek pocinju a $ i zagradicama () i unutar dvostruki navodnici

$("div").someAction()

$("*")                    Selects all elements   
$(this)                    Selects the current HTML element     
$("p.intro")            Selects all <p> elements with class="intro"   
$("p:first")            Selects the first <p> element   
$("ul li:first")        Selects the first <li> element of the first <ul>   
$("ul li:first-child")    Selects the first <li> element of every <ul>   
$("[href]")                Selects all elements with an href attribute   
$("a[target='_blank']")    Selects all <a> elements with a target attribute value equal to "_blank"   
$("a[target!='_blank']")    Selects all <a> elements with a target attribute value NOT equal to "_blank"   
$(":button")            Selects all <button> elements and <input> elements of type="button"   
$("tr:even")            Selects all even <tr> elements   
$("tr:odd")                Selects all odd <tr> elements

Primer za this

$(document).ready(function(){
    $("button").click(function(){
        $(this).hide();
    });
});

*** Event Methods (hendleri) 123

Ivent predstavlaj kad se nesto interaktivno desi u DOM-u, mouse click, pres radio button...

Mouse Events    Keyboard Events        Form Events        Document/Window Events
click            keypress            submit            load
dblclick        keydown                change            resize
mouseenter        keyup                focus            scroll
mouseleave         blur                unload
hover

Njihova sintaksa:

$("p").click(function(){
  // action goes here!!
});

Primer za .hover(); on je konbinacija mousee enter i mousse live i kao sto se vidi za mouse live pise se nova funkcija

$(document).ready(function(){
    $("#p1").hover(function(){
        alert("You entered p1!");
    },
    function(){
        alert("Bye! You now leave p1!");
    });
});

Bitna funkcija je .on() ona kazi jedan ili vise hendlera za html element:

$(document).ready(function(){
    $("p").on({
        mouseenter: function(){
            $(this).css("background-color", "lightgray");
        }, 
        mouseleave: function(){
            $(this).css("background-color", "lightblue");
        },
        click: function(){
            $(this).css("background-color", "yellow");
        } 
    });
});

****************** jQuery Effects 123

Efekti na elementu mogu se izvrsiti pomocu Hide, Show, Toggle, Slide, Fade, and Animate

1. hide() , show()

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

Mogu imati dva parametra $(selector).hide(speed,callback); speed moze da bude "slow", "fast", or milliseconds.
callback je opciona funkcija i izvrsava se tek kad je efekat sto posto zavrsen.

$("button").click(function(){
    $("p").hide(1000);
});

toggle() funkcija je kombinacija te dve funkcije, Skriveni element postaje vidljiv i vidljiv postaje skriven.
takodje moze da ima parametre brzinu i callback

$("button").click(function(){
    $("p").toggle();
});

2. Fading (izbledjivanje)

fadeIn()   --> sakriveni element vraca                      $(selector).fadeIn(speed,callback);
fadeOut()  --> vidljivi element sakriva                        $(selector).fadeOut(speed,callback);
fadeToggle() -> kombinuje gore dva                             $(selector).fadeToggle(speed,callback);
fadeTo()   -->  i ovo mu kaze do koje opacity da ga izbledi    $(selector).fadeTo(speed,opacity,callback);

3. Sliding

slideDown() otvara elemenat na dole     $(selector).slideDown(speed,callback);
slideUp()   otvara elemenat na gore        $(selector).slideUp(speed,callback);
slideToggle() kombinuje oba                $(selector).slideToggle(speed,callback);

Primer:

<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

<style>
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 50px;
    display: none;
}
</style>
</head>
<body>

<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>

</body>

4. Animations

Pravi custom animacije sa sintaksom: $(selector).animate({params},speed,callback);

{params} predstavlaj css propertije koje se koriste, primer:

$("button").click(function(){
    $("div").animate({left: '250px'});
});

Da bi se mogla izvrsiti animacija html elementa mora da se setuje css property na relative, fixed ili absolute

Primer:

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({
            left: '250px',
            opacity: '0.5',
            height: '150px',
            width: '150px'
        }, 5000);
    });
});

!!! napomena umesto crtica mora da se koristi camil case u funkciji, znaci umesto margin-left mora da bude marginLeft

takodje mogu da se koriste += i -=

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

znaci ovde se reklo elementu da se uveca za 150px od svoje pocetne velicine

Cak mogu da se unutar animateda da se koriste show hide i toggle funkcije

$("button").click(function(){
    $("div").animate({
        height: 'toggle'
    });
});

AKo ocemo na nekom html elementu da napravimo niz funkcija onda se one izvrsavaju jedna po jedna, i to se radi tako
sto prvo html element definisemo kao promenjivu

$("button").click(function(){
    var div = $("div");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
});

moze i ovako:

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

*** jQuery Method Chaining 123


ovaj metod omogucava da se na jedan html elemenat izvrse mnostvo akcija u jednoj statement-u

Primer:
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);

******************** HTML DOM get set add remuve 123

1.GET

Izvlacimo podatke iz DOM-a i to pomocu:

text() -     Sets or returns the text content of selected elements
html() -     Sets or returns the content of selected elements (including HTML markup)
val()  -     Sets or returns the value of form fields

Primer za value:

<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Value: " + $("#test").val());
    });
});
</script>
</head>
<body>

<p>Name: <input type="text" id="test" value="Mickey Mouse"></p>

<button>Show Value</button>

</body>

*** attr() vraca atribute odredjenog elementa

 </script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert($("#w3s").attr("href"));
    });
});
</script>
</head>
<body>

<p><a href="https://www.w3schools.com" id="w3s">W3Schools.com</a></p>

<button>Show href Value</button>

</body>

2.SET
za set se uzimaju iste funkcije kao za get samo sto se u zagradicama pod navodnicima stavlaj sta se menja

$("#btn1").click(function(){
    $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
    $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
    $("#test3").val("Dolly Duck");
});

3. ADD new HTML content

append() - Inserts content at the end of the selected elements
prepend() - Inserts content at the beginning of the selected elements
after() - Inserts content after the selected elements
before() - Inserts content before the selected elements

<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
    });

    $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
    });
});
</script>

4.Remove

remove() - Removes the selected element (and its child elements)
empty() - Removes the child elements from the selected element

5. Manipulating CSS and with CLASS

addClass() - Adds one or more classes to the selected elements
removeClass() - Removes one or more classes from the selected elements
toggleClass() - Toggles between adding/removing classes from the selected elements
css() - Sets or returns the style attribute  css("propertyname","value"); a ako hocemo multiple value onda ide ovako:
css({"propertyname":"value","propertyname":"value",...});

$("button").click(function(){
    $("p:first").addClass("intro");
});

****** jQuery Traversing rodjaci, roditelji, deca 123

1. parent()

parent()          --> vraca direktne roditelje od gadjanog elementa samo jedni mogu biti
parents()        --> vraca sve pretke elementa sve do document roota, znaci do <html> taga. U zagradicama moze da se
                    Navede element ili klasa tako da bi ti onda vratio samo rodjake sa tom klasom
parentsUntil()    --> Vraca sve pretke izmedju zadata dva parametra


Primer za parents() sa zadatim elementom

$(document).ready(function(){
    $("span").parents("ul");
});

Primer za parentsUntil() gde vraca sve elemente iznad spana do elementa div

$(document).ready(function(){
    $("span").parentsUntil("div");
});

2. Deca i unuci i pokolenja

Ovo je slicno ka i sa precima

children() vraca sve direkne childrens od elementa. I moze da se filtrira sa zagradicom
find()     vraca svu decu i sva pokolenja do zadnjeg od datog elementa i takodje moze da se filtrira zagradom

Primer gde vraca svu decu koja imaju klasu first
$(document).ready(function(){
    $("div").children("p.first");
});

Ovde vraca sva pokolenja koja su sman element
$(document).ready(function(){
    $("div").find("span");
});

3. Braca i sestre. Dele istog parenta

siblings()  --> on vraca svu bracu i sestre gadjanog elementa i moze se filtrirati kroz zagradice
next()      --> on vraca odma sledeceg brat elementa do gadjanog
nextAll()   --> vraca svu bracu koja idu posle gadjenog elementa
nextUntil() --> on vraca svu bracu posle gadjanog elementa pa sve do zadatog argumenta

Prev rade isto ko ove iznad samo u suprotnom smeru
prev()     
prevAll()
prevUntil()

Moj primer akordiona pomocu siblings() funkcije:

 $(document).ready(function () {
     $("h2").click(function () {
         $(this).siblings(".skriveniDeo").toggle();
      });
 });

Moji custom kodovi 123

1. Accordion

JS:
 $(document).ready(function () {
    var x = new function () {
        $("h2").click(function () {
            var kliknutiElement = $(this).siblings(".skriveniDeo");
            var bracaOstalihAcordiona = $(this).parent().siblings(".accordion-element").children('.skriveniDeo');
            if(kliknutiElement.hasClass("accordionClosse")){
                bracaOstalihAcordiona.removeClass("accordionOpen").addClass("accordionClosse");
                kliknutiElement.removeClass("accordionClosse").addClass("accordionOpen");
            }
            else if(kliknutiElement.hasClass("accordionOpen")) {
                bracaOstalihAcordiona.removeClass("accordionOpen").addClass("accordionClosse");
                kliknutiElement.removeClass("accordionOpen").addClass("accordionClosse");
            }
        });
    };
 });

HTML:

 <div id="acordian">
    <div class="accordion-element">
        <h2 class="accordionHeader">Naslov acordiana</h2>
        <p class="skriveniDeo accordionClosse">Skriveni deo acordiona</p>
    </div>
    <div class="accordion-element">
        <h2 class="accordionHeader">Naslov acordiana2</h2>
        <p class="skriveniDeo accordionClosse">Skriveni deo acordiona</p>
    </div>
    <div class="accordion-element">
        <h2 class="accordionHeader">Naslov acordiana3</h2>
        <p class="skriveniDeo accordionClosse">Skriveni deo acordiona</p>
    </div>
    <div class="accordion-element">
        <h2 class="accordionHeader">Naslov acordiana4</h2>
        <p class="skriveniDeo accordionClosse">Skriveni deo acordiona</p>
    </div>
</div>

.skriveniDeo {
    display: none;
}

.accordionOpen{
  display: block !important;
    background-color: red;
}
.accordionClosse{
  display: none !important;
    background-color: #0c08ff;
}

2. Meni da uvek home dugme bude aktivno 123

/**
 * Created by darkf_000 on 19-Jun-17.
 */
$(document).ready(function () {
    var homePage = $(".main-nav  ul li:nth-of-type(1) > a");
    var aderPage = homePage.parent().siblings("li").children('a');

    homePage.removeClass("right").addClass("active");

    if(aderPage.hasClass("active")){
        homePage.removeClass("active");
    }
    else{
        homePage.addClass("active")
    }

})();

3. Kako da se onesposobi parent dugme u submeniju(da ne bude klikabilno)

ovde kaze ako li ima sub menu klasu onda kad se hoveruje da se onemoguci, samo treba dodati
klasu na taj sub menu ul
$("li:has(ul.sub-navigation)").hover(function () {
        $(this).children("a").click(function () {
            return false;
        });
    });