JQuery գրադարանը

HTML,CSS, Javascript դասընթացի համար

JQuery-ն ջավասքրիփթ գրադարան է, որը հնարավորություն է տանլիս գրել քիչ, բայց ստնալ շատ արդյունք։)

Այն ապահովում է միատեսակ աշխատանք բոլոր բռաուզեռներում
Այն թեթև է ~32kB
Աշխատում է CSS3 հատկությունների հետ
Ունի բազմաթիվ ֆունկցիաներ
Հեշտ և արագ է օգտագործվում
Գոյություն ունեն բազմաթիվ փլագիններ

Ինչպես ներառել գրադարանը

Գրադարանի վերջին տարբերակը ներբեռնեք այստեղից
http://jquery.com/download/
Ապա այն ներառեք html փաստաթղթի մեջ

Գրադարանը կարելի է ներառել նաև այլ սերվերներից
Google-ի սերվերից

Microsoft-ի սերվերից

JQuery-ի ուղղագրությունը

$(Սելեկտոր).Գործողություն()
$(selector).action()

Օրինակներ

$("p").hide()

$(".test").hide()

$("#test").hide()

Document Ready իրադարձությունը


							$(document).ready(function(){
	   	// մեթոդները գրել այստեղ ․․․
		});

կարճ գրելաձև


							$(function(){
		  // մեթոդները գրել այստեղ ․․․
			});

Սելեկտորներ

Կամ ինչպես «բռնել» էլեմենտները

Օրինակ

HTML

Տեքստ

Javascript

$(document).ready(function(){
  $("#btn").click(function(){
    $("#txt").hide();
  });
});

Տեքստ

Սելեկտորների տեսակները

էլեմենտի անունով

$("p") //բոլոր պարագրաֆները

Կլասի անունով

$("․myclass") //․myclass կլասը ունեցող բոլոր էլեմենտները

Id-ով

$("#content") //#content id-ն ունեցող էլեմենտը

Սելեկտորների ցուցակ

սելեկտոր	բացատր․
$("*")	ընտրում է բոլոր էլեմենտները
$("p.intro")	ընտրում է intro կլասը ունեցող պարագրաֆը
$("p:first")	ընտրում է առաջին պարագրաֆը
$("ul li:first")	ընտրում է առաջին ul-ի առաջին li էլեմենտը
$("ul li:first-child")	ընտրում է բոլոր ul-ների առաջին li էլեմենտները
$("[href]")	ընտրում է href ատրիբուտը ունեցող բոլոր էլեմենտները
$("a[target='_blank']")	ընտրում է բոլոր հղումենրը ,որոնք բացվում են նոր պատուհանում

Ավելին կարելի է փորձել փորձարկիչում

Բոլոր սելեկտորները կարելի է տեսնել այստեղ http://goo.gl/sc8eVd

Իրադարձությունների մեթոդներ

event methods

Կամ ի՞նչ կատարվեց

Իրադարձությունների մեթոդներ

Հաճախակի օգտագործվող մեթոդներ

Մկան մեթոդներ
Ստեղնաշարի մեթոդներ
Ֆորմաների մեթոդներ
Փաստաթղթի/Պատուհանի մեթոդներ

click,mouseenter,mouseleave

HTML

Մոտեցրու,կտտցրու ․․․
Մոտեցրու,կտտցրու ․․․

Javascript

$("#mouseevents").click(function(){
  							$("#alerts").html("Մկնիկը կտտաց");
						});

$("#mouseevents").mouseenter(function(){
  							$("#alerts").html("Մկնիկը մոտեցավ");
						});

$("#mouseevents").mouseleave(function(){
  							$("#alerts").html("Մկնիկը հեռացավ");
						});

Մոտեցրու,կտտցրու ․․․

hover մեթոդը

HTML

Մոտեցրեք մուկը
Ի՞նչ է կատարվում

Javascript

$("#dvv").hover(
  function(){
        $("#alertt").html("Դուք մոտեցրել եք մուկը dvv-ին");
  },
  function(){
        $("#alertt").html("Մուկը հեռացավ dvv-ից");
});

Մոտեցրեք մուկը

Ի՞նչ է կատարվում

Ֆորմաների մեթոդներից focus և blur

HTML

Javascript

$("input").focus(function(){
  $(this).css("background-color","blue");
}); 


$("input").blur(function(){
  $(this).css("background-color","white");
});

Ստեղնաշարի մեթոդներից keydown

HTML


Սեղմված ստեղնի համարը

Javascript

$(document).ready(function(){
  $("#keytest").keydown(function(event){ 
    $("#keytestDiv").html("Ստեղնի համարը: " + event.which);
    $("#keytest").css("background-color","magenta");
  });
  $("#keytest").keyup(function(event){ 
    $("#keytest").css("background-color","yellow");
  });
});

Սեղմված ստեղնի համարը

Իրադարձությունների ավելի շատ մեթոդներ տեսեք այստեղ։ http://goo.gl/nMbfZw

JQuery-ն HTML-ը և CSS-ը

կամ ինչպես փոխել էլեմենտները

text() և html()

HTML

Տեքստ

Javascript

$("#bt").click(function(){
  alert("Text: " + $("#ttext").text());
});
$("#bt1").click(function(){
  $("#ttext").text("Մեկ այլ տեքստ");
});

Տեքստ

val()

HTML

Javascript

$("#butn1").click(function(){
  alert($("#inp3").val());
});

$("#butn2").click(function(){
   $("#inp3").val("Նոր արժեք");
});

attr()

HTML

Հղում

Javascript

$("#btn10").click(function(){
  alert($("#hxum").attr("href"));
  alert($("#hxum").attr("target"));
});
$("#btn11").click(function(){
  $("#hxum").attr("href","http://gitc.am");
});

Հղում

Հղում


$("button").click(function(){
  $("#silka").attr({
    "href" : "http://google.com",
    "title" : "google որոնողական համակարգ",
    "target" : "_blank"
  });
});

append(),prepend(),after(),before()

Տեքստ Նախնական

$("#app").click(function(){
	$("#avelcn").append("Ավելացված է append-ով");
});
...

Տեքստ Նախնական

remove(),empty()

HTML


	Նախնական տեքստ

Javascript

$("#empty").click(function(){
	$("#artaq").empty();
});
$("#rem").click(function(){
	$("#artaq").remove();
});

Նախնական տեքստ

addClass(),removeClass()

CSS

.borderedp {border:solid 3px green;}

HTML

Մոտեցրեք մուկը

Javascript

$("#clss").mouseenter(function(){
		$(this).addClass("borderedp");
});

$("#rmclass").click(function(){
		$("#clss").removeClass("borderedp");
});

Մոտեցրեք մուկը

toggleClass()

CSS

.borderedp {border:solid 3px green;}

HTML

Որևէ տեքստ

Javascript

$("#tgglbt").click(function(){
		$("#tggl").toggleClass("borderedp");
});

Որևէ տեքստ

Ավելին իմացեք http://goo.gl/3u4q9Y հղումով

JQuery էֆեկտներ

Ուսումնասիրել ինքնուրույն http://goo.gl/gNK3K3