JQuery-osnovne Stvari

jQuery
Hasan Bapi
748
jQuery je JavaScript biblioteka

jQuery uveliko pojednostavljuje JavaScript programiranje
jQuery je jednostavan za uenje
Svrha jQuery-a jeste da pojednostavi koritenje JavaScript-a. Prije uenja jQuery-a potrebno
je poznavati osnove:
-
HTML-a
- CSS-a
- JavaScript-a.
ta je jQuery?
jQuery je lagana,pii manje, uradi vie, JavaScript biblioteka. jQuery uzima vie zadataka,
koji u JavaScriptu zahtijevaju mnogo linija koda, i objedinjuje ih u metode koje se kasnije
mogu pozvati jednom linijom koda. Pored toga jQuery pojednostavljuje sloenije JavaScript
stvari, kao to su pozivanje AJAX-a i manipulacija nad DOM-om.
jQuery podrava sljedee:
HTML/DOM manipulacije
CSS manipulacija
HTML metode za dogaaje
Efekte i animacije
AJAX
Korisne alate
jQuery je mogue ukljuiti na dva naina i to:

- da se preuzme sa stranice jQuery.com
<head>
<script src="jquery1.11.3.min.js"></script>
</head>
- ukljuivanje jQuery-a preko CDN (Content Delivery Network) kao to je Google
Google CDN:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
Microsoft CDN:
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
jQuery sintaksa
jQuery sintaksa je zasnovana na tome da da se odaberu HTML elementi i onda da
se na njih provedu neke akcije.
Osnovna jQuery sintaksa je : $(selektor).akcija ().
- znak $ slui za definisanje/pristup jQuery-u
- (selektor) slui za odabir HTML elemenata
- akcija() je ono to treba da se provede nad HTML elementom
Npr.
$(this).hide() sakriva se trenutne elemente.
$("p").hide() sakriva sve <p> elemente tj. paragrafe.
$(".test").hide() sakriva sve elemente ija je klasa class="test".
$("#test").hide() sakriva sve elemnte iji je id id="test".
jQuery selektori
Selektori su jedni od
najvanijih dijelova jQuery biblioteke. Oni omoguavaju selektovanje i
manipulisanje
Sa HTML elementima. Koriste se za pronalaenje ili selektovanje elemenata preko njihovog ida,klase, tipa, atributa, vrijednosti atributa i td. Bazirani su na postojeim CSS selektorima, ali
postoje i posebni selektori.
Svi selektori poinju sa znakom dolara i otvorenom zagradom: $().
Elementarni selektori selektiraju elemente na snovu njihoovg imena tj. mogue je selektirati sve
paragrafe na stranici na sljedei nain: $(p).
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Ovo je naslov</h2>
<p>Ovo je paragraf.</p>
<p>Ovo je drugi paragraf.</p>
<button>Klikni!</button>
</body>
</html>
#id selektori
.class selektori
$("#test").hide();
});
});
$(".test").hide();
});
});
$("*") selektira sve elemente
$("a[target='_blank']") selektira sve linkove koji
$(this) selektira trenutne HTML elemente
se otvaraju u novom prozoru
$("p.intro") selektira sve paragrafe sa klasom intro
$("a[target!='_blank']) selektira sve linkove koji
$("p:first") selektira prvi paragraf
se ne otvaraju u novom prozoru
$("ul li:first") selektira prvi element prve liste
$(":button") selektira sve <button> i < input>
$("ul li:first-child") selektira prvi element svake liste elemente koji su tipa button
$("[href]") selektira sve elemente sa href atributom $("tr:even") selektira sve jednake <tr>
elemente
jQuery dogaaji
Razliiti zahtijevi korisnika na koje web stranica moe da odgovori nazivaju se dogaajima.
Svaki dogaaj je reprezentiran
tanim trenutkom kada se neto treba da dogodi.
Primjeri: pomjeranje miem preko elementa, odabir radio dugmeta ili klikom na neki element.
Mi
Tastatura
Forma
Dokument/Prozo
rski dogaaji
click
keypress
submit
load
dblclick
keydown
change
resize
mouseenter
keyup
focus
scroll
blur
unload
mouseleave
$("p").click();
$("p").click(function(){
// ovdje se navodi akcija
});
<!DOCTYPE html>
<html>
<head>
<script>
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>Ako kliknemo ovdje, ovaj paragraf e nestati. p>
<p>Ako i ovdje kliknemo paragraf e nestati</p>
<p>Kliknimo i ovdje!</p>
</body>
</html>
document).ready()
omoguuje nam da izvrimo neku funkciju nakon to se dokument sav u
$("#p1").mouseenter(function(){
alert(Presli ste preko p1!");
});
});
$("#p1").hover(function(){
alert(Preli ste preko p1!");
},
function(){
alert(Pozdrav.Odoste vi!");
});
});
hover() metoda kombinuje mouseenter() i mouseleave() metode
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
$("p").on("click", function(){
$("input").blur(function(){
$(this).hide();
$(this).css("background-color", "#ffffff");
});
});
});
});
on() metoda slui za dodjeljivanje
vie dogaaja selektiranim elementima
focus() metoda slui za fokusiranje na odreeni element
blur() metoda slui da se smakne fokus sa odreenog elementa
kada kliknemo pored tog elementa
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
});
</script>
</head>
<body>
<p>Kliknite ili preite miem preko paragrafa.</p>
</body>
jQuery efekti
show( )
$(selektor).show(brzina,odziv);
hide( )
$(selektor).hide(brzina,odziv);
toggle( )
$(selektor).toggle(brzina,odziv);
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
______________________________
$("p").hide(1000);
});
});
______________________________
$("p").toggle();
});
});
fadeIn()
$(selektor).fadeIn(brzina, odziv);
fadeOut()
$(selektor).fadeOut(brzina, odziv);
fadeToggle() $(selektor).fadeToggle(brzina, odziv);

fadeTo()
$(selektor).fadeTo(brzina, neprovidnost, odziv);
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#div1").fadeTo("slow", 0.15);
});
slideDown( )
$(selektor).slideDown(brzina, odziv);
slideUp( )
$(selektor).slideUp(brzina, odziv);
slideToggle( ) $(selektor).slideToggle(brzina, odziv);
$("#flip").click(function(){
$("#panel").slideDown("slow");
});
});
<style>
#panel, #flip {
padding: 5px;
text-align: center;
background-color: #e5eecc;
border: solid 1px #c3c3c3;
}
#panel {
padding: 50px;
display: none;
}
</style>
animate ( ) $(selektor).animate({parametri},brzina,odziv);
$("div").animate({left:
'250px'});
});
});
//relativne vrijednosti
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
});
});
});
//vie osobina
//unaprijed definirane vrijednosti
$(document).ready(function(){ $(document).ready(function(){
$("div").animate({
$("div").animate({
left: '250px',
height: 'toggle'
opacity: '0.5',
});
height: '150px',
});
width: '150px'
});
});
});
});
//Koristei red funkcionalnos
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");
});
});
stop( )
$(selektor).stop(stopAll,goToEnd);
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
<style>
#panel, #flip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}
#panel {
padding: 50px;
display: none;
}
</style>
</head>
Metoda vezanja u lanac

<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
"></script>
<script>
$("#p1").css("color", "red").slideUp(2000).slideDown(2000);
});
});
</script>
</head>
<body>
<p id="p1">jQuery je zabavan!!</p>
<button>Klikni me</button>
</body>
</html>
jQuery HTML
GET
Tri jednostavne ali korisne, jQuery metode za DOM manipulaciju su:

text() postavlja ili vraa tekstualni sadraj selektiranih elemenata
html() postavlja ili vraa sadraj selektiranih elemenata (ukljuujui HTML oznake)
val() postavlja ili vraa vrijednosti od polja iz forme
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
alert("HTML: " + $("#test").html());
});
});
alert("Value: " + $("#test").val());
});
});
attr() vraa vrijednost atributa

<!DOCTYPE html>
<html>
<head>
<script>
alert($("#w3s").attr("href"));
});
});
</script>
</head>
<body>
<p><a href="http://www.w3schools.com" id="w3s">W3Schools.com</a></p>
<button>Prikazi vrijednost atributa href</button>
</body>
</html>
SET
$("#test1").text("Hello world!");
});
$("#test2").html("<b>Hello world!</b>");
});
$("#test3").val(Neki primjer");
});
});
$("#w3s").attr("href", function(i, origValue){
return origValue + "/jquery";
});
});
});
$("#w3s").attr("href", "http://www.w3schools.com/jquery");
});
});
ADD
Postoji nekoliko metoda za dodavanje HTML elemenata a to su:
append() dodaje sadraj na kraj selektiranog elementa
prepend() dodaje sadraj na poetak selektiranog elementa
after() dodaje sadraj poslije selektiranog elementa tj. prelazi u novi red
before() dodaje sadraj prije selektiranog elementa
$("p").append(" <b>Tekst koji se nastavlja na tekest paragrafa</b>.");
});
$("ol").append("<li>Stavka koja se nastavlja</li>");
});
});
<!DOCTYPE html>
<html>
<head>
<script>
function appendText() {
var txt1 = "<p>Text.</p>";
// kreiranje teksta HTML
var txt2 = $("<p></p>").text("Text."); // kreiranje teksta jQuery-em
var txt3 = document.createElement("p");
txt3.innerHTML = "Text.";
// kreiranje teksta sa DOM-om
$("body").append(txt1, txt2, txt3);
// dodavanje novih elemenata na kraj
}
</script>
</head>
<body>
<p>Ovo je paragraf.</p>
<button onclick="appendText()">DodajText</button>
</body>
</html>
REMOVE
Za brisanje elemenata i sadraja koriste se dvije metode:
- remove( ) brie selektirane elemente kao i njihove potomke
- empty( ) brie potomke selektiranih elemenata
$
(document).ready(function()
{
$
("button").click(function(){
$("#div1").remove();
});
});
$("#div1").empty();
});
});
GET i SET CSS klase

U jQuery-u postoji nekoliko metoda za upravljanje CSS-om a to su:
addClass() dodaje jednu ili vie klasa u selektovani element
removeClass() brie jednu ili vie klasa iz selektovanih elemenata
toggleClass() mijenja izmeu dodavanja/brisanja klasa iz selektovanih elemenata
css() postavlja ili vraa style atribut
.important{
font-weight:bold;
font-size:xx-large;
}
.blue{
color:blue;
}
$("h1, h2, p").addClass("blue");
$("div").addClass("important");
});
});
css("propertyname");
css("propertyname","value");
css({"propertyname":"value","propertyname":"value",...});
<!DOCTYPE html>
<html>
<head>
<script>
alert(Boja pozadine= " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>Ovo je naslov</h2>
<p style="background-color:#ff0000">Ovo je paragraf.</p>
<p style="background-color:#00ff00"> Ovo je paragraf.</p>
<p style="background-color:#0000ff"> Ovo je paragraf.</p>
<button>Vrati boju pozadine paragrafa p</button>
</body>
</html>
jQuery-Dimenzije
Postoji nekoliko metoda za dimenzioniranje koritenjem jQuery-a, a to su:
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
<!DOCTYPE html>
<html>
<head>
<script>
var txt = "";
txt += "irina div-a: " + $("#div1").width() + "</br>";
txt += "Visina div-a: " + $("#div1").height() + "</br>";
txt += "Unutarnja irina div-a: " + $("#div1").innerWidth() + "</br>";
txt += "Unutranja visina div-a: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
});
</script>
</head>
<style>
#div1 {
height: 100px;
width: 300px;
} padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
</style>
<body>
<div id="div1"></div>
<br>
<button>Prikaz dimenzija div-a</button>
<p>innerWidth() - vraa irinu elementa ukljuujui i padding.</p>
<p>innerHeight() - vraa visinu elementa ukljuujui i padding.</p>
</body>
</html>

JQuery-osnovne Stvari

Загружено:

Сведения о документе

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

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

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

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

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

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

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

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

JQuery-osnovne Stvari

Загружено:

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

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

jQuery

jQuery je JavaScript biblioteka

jQuery je mogue ukljuiti na dva naina i to:

najvanijih dijelova jQuery biblioteke. Oni omoguavaju selektovanje i

$("*") selektira sve elemente

$("a[target='_blank']") selektira sve linkove koji

$(this) selektira trenutne HTML elemente

se otvaraju u novom prozoru

$("p.intro") selektira sve paragrafe sa klasom intro

$("a[target!='_blank']) selektira sve linkove koji

$("p:first") selektira prvi paragraf

se ne otvaraju u novom prozoru

$("ul li:first") selektira prvi element prve liste

$(":button") selektira sve <button> i < input>

tanim trenutkom kada se neto treba da dogodi.

omoguuje nam da izvrimo neku funkciju nakon to se dokument sav u

fadeToggle() $(selektor).fadeToggle(brzina, odziv);

$(selektor).fadeTo(brzina, neprovidnost, odziv);

slideToggle( ) $(selektor).slideToggle(brzina, odziv);

Metoda vezanja u lanac

Tri jednostavne ali korisne, jQuery metode za DOM manipulaciju su:

attr() vraa vrijednost atributa

GET i SET CSS klase

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