JQuery գրադարանը մաս 2

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

Այս բաժնում կնայենք հետևյալ հնարավորությունները

  • Chaining
  • Traversing
  • jQuery և AJAX
  • .each()

Chaining

շղթաներ

Օրինակ

շղթաների օրինակներ

$("#otherID").css("color","red").slideUp(1000).slideDown(2000);

$("#OneOtherID").hide(1000)
								   	.slideDown(2000)
								   	.css("width","300px");

Traversing

շրջանց

Traversing(շրջանց) իրականացնող մեթոդներից են

  • parent()
  • parents()
  • parentsUntil()
  • children()
  • find()
  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()
  • first()
  • last()
  • eq()
  • filter()
  • not()

parent(),parents(),parentsUntil()

HTML




  
 
   

	   
 ....

Javascript


$("#id3").parent(); //ընտրում է id2

$("#id3").parents(); //ընտրում է id0,id1,id2

$("#id3").parentsUntil("#id0"); //ընտրում է id1,id2

$("#id3").parentsUntil("article"); //ընտրում է id1,id2

children(),find()

HTML




  
 ... 
	
   ... 
  
 
   

	   
 ....

Javascript


$("#id0").children(); //ընտրում է id1

$("#id0").children("span"); //ընտրում է sp1

$("#id0").find("div"); //ընտրում է id1,id11,id2,id3
* children-ը ընտրում է միայն մեկ էլեմենտ

siblings(),next(),nextAll(),nextUntil()

HTML


 
    
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 

 
 ... 

 
 ... 

 
 ...

Javascript


			$("#id4").siblings(); //ընտրում է բոլոր li էլեմենտները
			$("#myul").siblings("p"); //ընտրում է բոլոր p էլեմենտները
			$("#id4").next(); //ընտրում է id5 էլեմենտը
			$("#id4").nextAll(); //ընտրում է id5,id6 էլեմենտները
			$("#id2").nextUntil("#id5"); //ընտրում է id3,id4 էլեմենտները

prev(), prevAll(), prevUntil()

աշխատում են նույն տրամաբանությամբ ինչ նախորդները, այն տարբերությամբ որ հաջորդ էլեմենտները ընտրելու փոխարեն ընտրում են նախորդները

first(), last(), eq(), filter(), not()

HTML


 
    
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    • 
 	
  • ․․․
    •

Javascript


$("ul #myul").first(); //ընտրում է id1 էլեմենտը
$("ul #myul").last(); //ընտրում է id6 էլեմենտը
$("ul #myul").eq(4); //ընտրում է id5 էլեմենտը
$("ul #myul").filter("#mcl"); //ընտրում է id3,id5,id6 էլեմենտները
$("ul #myul").not("#mcl"); //ընտրում է բոլոր li-ները բացի id3,id5,id6 էլեմենտներից
Ավելին տեսեք այստեղ http://goo.gl/nSxmkv

JQuery և AJAX

Մեթոդներ

  • load()
  • get()
  • post()

load()

Ընդհանուր տեսքը

$(selector).load(url,data,function(response,status,xhr));

Օրինակներ

ամբողջ փաստաթուղթը

$("#div1").load("file.txt");

փաստաթղթից որևէ էլեմենտ ըստ իր id֊ի

$("#div1").load("file.txt #id1");

callback - ֆունկցիայի պարամետրերը

  • response-ստացված տվյալները
  • status-հարցման ստատուսը ("success", "notmodified", "error", "timeout", or "parsererror")
  • xhr - XMLHttpRequest օբյեկտը

օրինակ load() մեթոդով և callback-ով

$("#myId").load("hasce.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Արտաքին տվյալները նորմալ բեռնվեցին!");
    if(statusTxt=="error")
      alert("Սխալ կա: "+xhr.status+": "+xhr.statusText);
  });

get()

Ընդհանուր տեսքը

$.get(URL,callback)

Օրինակ

$("button").click(function(){
  $.get("inchvorhasce.php",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

post()

Ընդհանուր տեսքը

$.post(URL,data,callback);

Օրինակ

$("button").click(function(){
  $.post("inchvorhasce.php",
  {
    name:"David",
    lname:"Sasunci"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

each()

նայել այստեղ http://goo.gl/7mXrAO