በአጃክስ ላይ የተመሰረተ መተግበሪያ መፍጠር በ jQuery በጣም ቀላል እና ፈጣን ይሆናል።
jQuery በመጀመሪያ የተፈጠረው በጆን ሬሲግ እ.ኤ.አ.
በ jQuery ብዙ ጊዜ እና ጥረት መቆጠብ ይችላሉ። ስለዚህ ይህን ጣቢያ ወደ ተወዳጆችዎ ያክሉ እና ማንበብዎን ይቀጥሉ
በ jQuery ማድረግ የሚችሏቸው ብዙ ተጨማሪ ነገሮች አሉ።
ዝርዝሩ በዚህ አያበቃም፣ በ jQuery ሌሎች ብዙ ጥሩ ነገሮችም አሉ።
jQuery ን ለመጠቀም ለምን መምረጥ እንዳለበት ብዙ ጥቅሞች አሉት።
ለመጀመር መጀመሪያ የ jQuery ቅጂን እናውርድና በፕሮጀክታችን ውስጥ እናካተት። ሁለት የ jQuery ስሪቶች ለማውረድ ይገኛሉ፡- በችኮላ e አልተጨመቀም .
ያልታመቀ ፋይል ለልማት ወይም ለማረም የተሻለ ነው; ሳለ፣ የተቀነሰው እና የተጨመቀው ፋይል እንዲመረት ይመከራል ምክንያቱም የመተላለፊያ ይዘትን ስለሚቆጥብ እና በትንሽ የፋይል መጠን ምክንያት አፈፃፀሙን ያሻሽላል።
jQuery ን ከዚህ ማውረድ እንችላለን፡- https://jquery.com/download/
የjQuery ፋይል አንዴ ካወረዱ js ቅጥያ እንዳለው ማየት ይችላሉ ማለትም የጃቫስክሪፕት ፋይል ነው። በእውነቱ JQuery የጃቫ ስክሪፕት ቤተ-መጽሐፍት እንጂ ሌላ አይደለም፣ ስለዚህ የ jQuery ፋይልን በኤችቲኤምኤል ሰነድ ውስጥ ከኤለመንቱ ጋር ማካተት ይችላሉ። ልክ እርስዎ መደበኛ ጃቫስክሪፕት ፋይሎችን እንደሚያካትቱ።
<head>
<title>Simple HTML Document</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>ከብጁ ስክሪፕቶች በፊት የ jQuery ፋይልን ሁል ጊዜ ማካተትዎን ያስታውሱ። ያለበለዚያ፣ የjQuery ኮድዎ እነሱን ለማግኘት ሲሞክር jQuery APIs አይገኙም።
እርስዎ እንዳስተዋሉት፣ በቀደመው ምሳሌ ላይ ባህሪውን አልፈነዋል type="text/javascript" በመለያው ውስጥ . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiበ HTML5 እና በሁሉም ዘመናዊ አሳሾች ውስጥ ተጠናቅቋል።
እንደ አማራጭ፣ ፋይሉን ከማውረድ መቆጠብ ከፈለግክ፣ በነጻ በሚገኙ የሲዲኤን (የይዘት ማቅረቢያ አውታረ መረብ) አገናኞች jQueryን ወደ ሰነድህ መክተት ትችላለህ።
ሲዲኤንዎች የመጫኛ ጊዜን በመቀነስ የአፈፃፀም ጠቀሜታን ሊሰጡ ይችላሉ፣ ምክንያቱም jQuery በአለም ዙሪያ ባሉ በርካታ አገልጋዮች ላይ ስለሚያስተናግዱ እና ተጠቃሚው ፋይሉን ሲጠይቅ ከቅርብ አገልጋይ ነው የሚቀርበው።
ይህ በተጨማሪ ጥቅማ ጥቅሞች አሉት የእርስዎ ድረ-ገጽ ጎበኚ ወደ ሌሎች ድረ-ገጾች በሚጎበኝበት ጊዜ የjQuery ቅጂ ከተመሳሳይ ሲዲኤን አውርዶ ከሆነ፣ ቀድሞውንም በአሳሽ መሸጎጫ ውስጥ ስላለ እንደገና ማውረድ አይኖርባቸውም።
በዚህ ሁኔታ የሚከተሉትን መጻፍ ያስፈልግዎታል:
<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>በ jquery ፕሮጀክት ከሚቀርበው ሲዲኤን በተጨማሪ jQuery በ በኩል ማካተት ይችላሉ። google e Microsoft ሲዲኤን።
የjQuery ቤተ መፃህፍትን ግቦች እና በሰነድዎ ውስጥ እንዴት እንደሚያካትቱት ከተመለከትን፣ jQueryን በተግባር የምናውልበት ጊዜ አሁን ነው።
አሁን የራስጌ ጽሑፍን ቀለም ከቅድመ ቀለም በመቀየር ቀላል የ jQuery ኦፕሬሽን እንስራdefiጥቁር ወደ አረንጓዴ ቀለም.
<head>
<title>My First jQuery Web Page</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("h1").css("color", "#00ff00");
});
</script>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>በኮዱ ውስጥ የራስጌውን ቀለም ማለትም ኤለመንቱን በመቀየር ቀላል የ jQuery ክወና አከናውነናል። ሰነዱ ዝግጁ ሲሆን የ jQuery አባል መምረጫ እና css() ዘዴን በመጠቀም የሰነድ ዝግጁ ክስተት በመባል ይታወቃል።
የ jQuery መግለጫ ብዙውን ጊዜ የሚጀምረው በዶላር ምልክት ነው ( $) እና በሴሚኮሎን ያበቃል ( ;).
በ jQuery፣ የዶላር ምልክት ( $) ለ jQuery ተለዋጭ ስም ብቻ ነው። ቀላሉን የ jQuery መግለጫ የሚያሳይ የሚከተለውን የናሙና ኮድ አስቡበት።
<script>
$(document).ready(function(){
alert("Hello I'm a JQuery sign");
});
</script>ምሳሌው በቀላሉ የማስጠንቀቂያ መልእክት ያሳያልHello I'm a JQuery sign” ለተጠቃሚው። አንዳንድ ባህሪያትን እንመልከት፡-
<script>jQuery የጃቫ ስክሪፕት ቤተ-መጽሐፍት ብቻ ነው፣ jQuery ኮድ በኤለመንቱ ውስጥ ሊቀመጥ ይችላል። <script>, ወይም በውጫዊ ጃቫስክሪፕት ፋይል ውስጥ ማስቀመጥ ይችላሉ;$(document).ready(handler); ዝግጁ ክስተት በመባል ይታወቃል. የት ነው handler ሰነዱ እንደተዘጋጀ, ማለትም የ DOM ተዋረድ ሙሉ በሙሉ ሲገነባ ወደ ትግበራው ዘዴ የተላለፈ ተግባር ነው.የ jQuery ዘዴ ready() ብዙውን ጊዜ ጥቅም ላይ የሚውለው ከማይታወቅ ተግባር ጋር ነው። ስለዚህ፣ ከዚህ በላይ ያለው ምሳሌ እንዲሁ በአጭሩ እንደሚከተለው ሊፃፍ ይችላል።
<script>
$(function(){
alert("Hello I'm a JQuery sign");
});
</script>በአንድ ተግባር ውስጥ እንደ መሰረታዊ አገባብ ማንኛውንም ተግባር ለማከናወን jQuery መግለጫዎችን መጻፍ ይችላሉ፡-
$(selector).action();የት ነው, $(selector) እሱ በመሠረቱ የኤችቲኤምኤል ኤለመንቶችን ከ DOM ዛፍ ይመርጣል ስለዚህ እንዲሠራ እና action() የተወሰኑ እርምጃዎችን በተመረጡት ንጥረ ነገሮች ላይ ይተግብሩ፣ ለምሳሌ የCSS ንብረቱን ዋጋ መለወጥ ወይም የንብረቱን ይዘት ማቀናበር ፣ ወዘተ.
አሁን ደግሞ የአንቀጽ ጽሑፍን የሚያዘጋጅ ሌላ ምሳሌ እንመልከት፡-
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("p").text("Hello World!");
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>የ jQuery ምሳሌ መራጩን ያመለክታል p, እና ይሄ ሁሉንም አንቀጾች, ከዚያም ዘዴውን ይመርጣል text() የአንቀጹን የጽሑፍ ይዘት በ" ያቀናብሩHello World!".
በቀድሞው ምሳሌ ውስጥ ያለው የአንቀጽ ጽሑፍ ሰነዱ ዝግጁ ሲሆን በራስ-ሰር ይተካል. ነገር ግን የ jQuery ኮድን ከማሄድዎ በፊት አንድን ድርጊት ለማከናወን ከፈለጉ የአንቀጹን ጽሑፍ ለመተካት እንዴት እንደሚያደርጉት እንይ.
የመጨረሻውን ምሳሌ እንመልከት፡-
<head>
<title>jQuery Demo</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery-3.6.3.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").text("Hello World!");
});
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
<button type="button">Replace Text</button>
</body>
</html>በዚህ ምሳሌ ውስጥ የአንቀጹ ጽሑፍ የሚተካው በአዝራሩ ላይ የጠቅታ ክስተት ሲከሰት ብቻ ነው"Replace Text"፣ ይህም ማለት በቀላሉ ተጠቃሚው ይህን ቁልፍ ሲነካ ነው።
በገጹ ላይ ልዩ መታወቂያ ያለው ነጠላ ንጥል ለመምረጥ መታወቂያ መራጩን መጠቀም ይችላሉ።
ለምሳሌ፣ የሚከተለው jQuery ኮድ የመታወቂያ ባህሪ ያለው አካል መርጦ ያደምቃል id="markid", ሰነዱ ዝግጁ ሲሆን.
<script>
$(document).ready(function(){
// Highlight element with id markid
$("#markid").css("background", "grey");
});
</script>የክፍል መራጭ ከተወሰነ ክፍል ጋር ክፍሎችን ለመምረጥ ጥቅም ላይ ሊውል ይችላል.
ለምሳሌ፣ የሚከተለው jQuery ኮድ ከክፍል ባህሪ ጋር ክፍሎችን መርጦ ያደምቃል class="markclass", ሰነዱ ዝግጁ ሲሆን.
<script>
$(document).ready(function(){
// Highlight elements with class markclass
$(".markclass").css("background", "grey");
});
</script>የንጥል መምረጫው እቃዎችን በንጥል ስም ለመምረጥ ሊያገለግል ይችላል.
ለምሳሌ, የሚከተለው የ jQuery ኮድ ሁሉንም አንቀጾች ይመርጣል እና ያደምቃል, ማለትም ኤለመንቶችን "<p>" ሰነዱ ዝግጁ ሲሆን.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$("p").css("background", "grey");
});
</script>ከኤችቲኤምኤል ባህሪያቱ በአንዱ ላይ በመመስረት አንድን አካል ለመምረጥ የባህሪ መራጩን መጠቀም ይችላሉ፣ ለምሳሌ የአገናኝ መለያ ባህሪ targetወይም የግቤት ባህሪ typeወዘተ
ለምሳሌ፣ የሚከተለው jQuery ኮድ ሁሉንም የጽሑፍ ግብዓቶች እንደ ኤለመንቶች መርጦ ያደምቃል "<input>" ጋር type="text", ሰነዱ ዝግጁ ሲሆን.
<script>
$(document).ready(function(){
// Highlight paragraph elements
$('input[type="text"]').css("background", "grey");
});
</script>ምርጫዎን ይበልጥ ትክክለኛ ለማድረግ የ CSS መራጮችን ማጣመርም ይችላሉ።
ለምሳሌ በሰነድ ውስጥ የተወሰነ አይነት እና ክፍል ያላቸውን ንጥረ ነገሮች ለማግኘት የክፍል መራጩን ከኤለመንት መራጭ ጋር ማጣመር ይችላሉ።
<script>
$(document).ready(function(){
// Highlight only paragraph elements with class mark
$("p.mark").css("background", "yellow");
// Highlight only span elements inside the element with ID mark
$("#mark span").css("background", "yellow");
// Highlight li elements inside the ul elements
$("ul li").css("background", "red");
// Highlight li elements only inside the ul element with id mark
$("ul#mark li").css("background", "yellow");
// Highlight li elements inside all the ul element with class mark
$("ul.mark li").css("background", "green");
// Highlight all anchor elements with target blank
$('a[target="_blank"]').css("background", "yellow");
});
</script>ከተመረጡት በተጨማሪ definiti, jQuery በገጽ ላይ ክፍሎችን የመምረጥ ችሎታን የበለጠ ለማሳደግ የራሱ ብጁ መራጭ ይሰጣል።
<script>
$(document).ready(function(){
// Highlight table rows appearing at odd places
$("tr:odd").css("background", "yellow");
// Highlight table rows appearing at even places
$("tr:even").css("background", "orange");
// Highlight first paragraph element
$("p:first").css("background", "red");
// Highlight last paragraph element
$("p:last").css("background", "green");
// Highlight all input elements with type text inside a form
$("form :text").css("background", "purple");
// Highlight all input elements with type password inside a form
$("form :password").css("background", "blue");
// Highlight all input elements with type submit inside a form
$("form :submit").css("background", "violet");
});
</script>ክስተቶች ብዙውን ጊዜ የሚቀሰቀሱት በተጠቃሚዎች ከድረ-ገጹ ጋር በሚያደርጉት መስተጋብር ነው፣ ለምሳሌ ማገናኛን ወይም ቁልፍን ሲጫኑ፣ ወደ ግብዓት ሳጥን ወይም የጽሑፍ ቦታ ጽሁፍ ሲያስገቡ፣ በምርጫ ሳጥን ውስጥ ምርጫ ያድርጉ፣ በቁልፍ ሰሌዳው ላይ ቁልፍን ይጫኑ፣ የመዳፊት ጠቋሚውን ያንቀሳቅሱ። ወዘተ. በአንዳንድ አጋጣሚዎች አሳሹ ራሱ እንደ የገጽ ጭነት እና የማውረድ ክስተቶች ያሉ ክስተቶችን ሊያስነሳ ይችላል።
jQuery ለአብዛኛዎቹ ቤተኛ አሳሽ ሁነቶች የክስተት ዘዴዎችን በማቅረብ በመሠረታዊ የክስተት አያያዝ ዘዴዎች ላይ ያሻሽላል፣ ከእነዚህ ዘዴዎች ውስጥ አንዳንዶቹ ready(), click(), keypress(), focus(), blur(), change()ወዘተ
<script>
$(document).ready(function(){
// Code to be executed
alert("Hello World!");
});
</script>በአጠቃላይ ዝግጅቶች በአራት ዋና ዋና ቡድኖች ሊከፈሉ ይችላሉ-
የመዳፊት ክስተት የሚቀሰቀሰው ተጠቃሚው አንድ ንጥል ላይ ጠቅ ሲያደርግ፣ የመዳፊት ጠቋሚውን ሲያንቀሳቅስ፣ ወዘተ.
የመዳፊት ክስተቶችን ለመቆጣጠር አንዳንድ በብዛት ጥቅም ላይ የዋሉ jQuery ዘዴዎች እዚህ አሉ።
click()ዘዴው click() የክስተት ተቆጣጣሪ ተግባርን ለዝግጅቱ ከተመረጡት አካላት ጋር ያያይዙclick". የተገናኘው ተግባር ተጠቃሚው ያንን ንጥል ጠቅ ሲያደርግ ይፈጸማል። የሚከተለው ምሳሌ ኤለመንቶችን ይደብቃል <p> ጠቅ ሲደረግ በአንድ ገጽ ላይ.
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).slideUp();
});
});
</script>dblclick()ዘዴው dblclick() የክስተት ተቆጣጣሪ ተግባርን ለዝግጅቱ ከተመረጡት አካላት ጋር ያያይዙdblclick". የተገናኘው ተግባር ተጠቃሚው ያንን ንጥል ሁለት ጊዜ ጠቅ ሲያደርግ ነው የሚሰራው። የሚከተለው ምሳሌ ንጥረ ነገሮቹን ይደብቃል <p> ሁለት ጊዜ ጠቅ ሲያደርጉ.
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).slideUp();
});
});
</script>hover()ዘዴው hover() የመዳፊት ጠቋሚው ወደ ኤለመንቶች ሲገባ እና ሲወጣ ከሚፈፀሙ አንድ ወይም ሁለት የክስተት ተቆጣጣሪ ተግባራት ጋር ያያይዙ። የመጀመሪያው ተግባር የሚሄደው ተጠቃሚው የመዳፊት ጠቋሚውን በንጥል ላይ ሲያስቀምጠው፣ ሁለተኛው ተግባር ደግሞ ተጠቃሚው የመዳፊት ጠቋሚውን ከእቃው ላይ ሲያስወግድ ነው።
የሚከተለው ምሳሌ እቃዎችን ያደምቃል <p> ጠቋሚውን በላዩ ላይ ስታስቀምጠው ጠቋሚውን ስታስወግድ ድምቀቱ ይወገዳል.
<script>
$(document).ready(function(){
$("p").hover(function(){
$(this).addClass("highlight");
}, function(){
$(this).removeClass("highlight");
});
});
</script>mouseenter()ዘዴው mouseenter() የክስተት ተቆጣጣሪ ተግባርን ከተመረጡት ንጥረ ነገሮች ጋር ያያይዙት ይህም መዳፊት ወደ አንድ አካል ሲገባ ይከናወናል። የሚከተለው ምሳሌ የክፍል ማድመቅን ወደ ኤለመንት ያክላል <p> ጠቋሚውን በላዩ ላይ ሲያስቀምጡ.
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$(this).addClass("highlight");
});
});
</script>mouseleave()ዘዴው mouseleave() የክስተት ተቆጣጣሪ ተግባር አይጥ አንድን ነገር ሲለቅ ከሚሄዱት ዕቃዎች ጋር ያያይዙ። የሚከተለው ምሳሌ የክፍል ድምቀቱን ከኤለመንት ያስወግዳል <p> ጠቋሚውን ከእሱ ሲያስወግዱ.
<script>
$(document).ready(function(){
$("p").mouseleave(function(){
$(this).removeClass("highlight");
});
});
</script>ተጠቃሚው በቁልፍ ሰሌዳው ላይ ቁልፍ ሲጫን ወይም ሲለቅ የቁልፍ ሰሌዳ ክስተት ይነሳል። የቁልፍ ሰሌዳ ክስተቶችን ለማስተናገድ አንዳንድ የተለመዱ የ jQuery ዘዴዎችን እንመልከት።
keypress()ዘዴው keypress() አሳሹ ከተጠቃሚው የቁልፍ ሰሌዳ ግብዓት ሲቀበል የሚሄዱትን የክስተት አያያዝ ተግባር ከተመረጡት አካላት (በተለምዶ የቅጽ መቆጣጠሪያዎች) ጋር ያያይዘዋል። የሚከተለው ምሳሌ ክስተቱ ሲቀሰቀስ መልእክት ያሳያል keypress እና በቁልፍ ሰሌዳዎ ላይ ያለውን ቁልፍ ሲጫኑ ምን ያህል ጊዜ እንደሚቀሰቀስ.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keypress(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>የመቀየሪያ እና የማተሚያ ቁልፎች ካልሆነ በስተቀር እንደ Shift፣ Esc፣ Backspace ወይም Delete፣ የቀስት ቁልፎች፣ ወዘተ የመሳሰሉ የቁልፍ ፕሬስ ክስተቱ ከቁልፍ ቁልፍ ጋር ተመሳሳይ ነው። የቁልፍ መክፈቻ ክስተቶችን ያቃጥላሉ ነገር ግን የቁልፍ መጫን ክስተቶች አይደሉም.
keydown()ዘዴው keydown() ተጠቃሚው በመጀመሪያ በቁልፍ ሰሌዳው ላይ ቁልፍ ሲጫን የሚከናወነውን የክስተት አያያዝ ተግባር ከተመረጡት ንጥሎች (በተለምዶ የቅጽ መቆጣጠሪያዎች) ያያይዘዋል። የሚከተለው ምሳሌ ክስተቱ ሲቀሰቀስ መልእክት ያሳያል keydown እና በቁልፍ ሰሌዳዎ ላይ ያለውን ቁልፍ ሲጫኑ ምን ያህል ጊዜ እንደሚቀሰቀስ.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keydown(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>keyup()ዘዴው keyup() ተጠቃሚው በቁልፍ ሰሌዳው ላይ ቁልፍ በሚለቀቅበት ጊዜ የሚከናወነውን የክስተት አያያዝ ተግባር ከተመረጡት አካላት (በተለምዶ የቅጽ መቆጣጠሪያዎች) ጋር ያያይዙ። የሚከተለው ምሳሌ ክስተቱ ሲቀሰቀስ መልእክት ያሳያል keyup እና በቁልፍ ሰሌዳዎ ላይ ቁልፍ ሲጫኑ እና ሲለቁ ምን ያህል ጊዜ እንደሚቀሰቀስ.
<script>
$(document).ready(function(){
var i = 0;
$('input[type="text"]').keyup(function(){
$("span").text(i += 1);
$("p").show().fadeOut();
});
});
</script>የቅጽ ክስተት የሚቀሰቀሰው የቅጽ ቁጥጥር ሲቀበል ወይም ትኩረቱን ሲያጣ ወይም ተጠቃሚው የቅጽ መቆጣጠሪያ እሴትን ሲቀይር ለምሳሌ ጽሑፍን ወደ ጽሁፍ ግብዓት መተየብ፣ በተመረጠ ሳጥን ውስጥ ምርጫን መምረጥ ወዘተ። የቅጽ ክስተቶችን ለማስተናገድ አንዳንድ የተለመዱ የ jQuery ዘዴዎች እዚህ አሉ።
change()ዘዴው change() የክስተት ተቆጣጣሪ ተግባርን ከኤለመንቶች ጋር ያያይዙ <input> እና ዋጋው ሲቀየር ይፈጸማል. የሚከተለው ምሳሌ በተቆልቋይ መምረጫ ሳጥን ውስጥ አንድ አማራጭ ሲመርጡ የማስጠንቀቂያ መልእክት ያሳያል።
<script>
$(document).ready(function(){
$("select").change(function(){
var selectedOption = $(this).find(":selected").val();
alert("You have selected - " + selectedOption);
});
});
</script>ለጠቅታ ሳጥኖች፣ ቼክ ሳጥኖች እና የሬዲዮ አዝራሮች ተጠቃሚው የመዳፊት ምርጫን ሲያደርግ ክስተቱ ወዲያውኑ ይቃጠላል፣ ነገር ግን ለጽሑፍ ግብዓት እና ለጽሑፍ አካባቢ ዝግጅቱ የሚቀጣጠለው ንጥረ ነገሩ ትኩረት ካጣ በኋላ ነው።
focus()ዘዴው focus() የክስተት ተቆጣጣሪ ተግባር ትኩረቱን ሲያገኝ የሚፈጽመውን ከተመረጡት ንጥረ ነገሮች (በተለምዶ ይቆጣጠራል እና ማያያዣዎችን ይመሰርታል)። የሚከተለው ምሳሌ የጽሑፍ ግብዓት ትኩረት ሲቀበል መልእክት ያሳያል።
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>blur()ዘዴው blur() እንደ ኤለመንቶችን ለመመስረት የክስተት ተቆጣጣሪ ተግባርን ያያይዙ <input>, <textarea>, <select> ትኩረትን በሚቀንስበት ጊዜ የሚፈጸመው. የሚከተለው ምሳሌ የጽሑፍ ግቤት ትኩረት ሲያጣ መልእክት ያሳያል።
<script>
$(document).ready(function(){
$("input").blur(function(){
$(this).next("span").show().fadeOut("slow");
});
});
</script>submit()ዘዴው submit() የክስተት ተቆጣጣሪ ተግባርን ከኤለመንቶች ጋር ያያይዙ <form> ተጠቃሚው ቅጽ ለማስገባት ሲሞክር የሚሰራ። የሚከተለው ምሳሌ ቅጹን ለማስገባት በሚሞክርበት ጊዜ በገባው እሴት ላይ የተመሰረተ መልእክት ያሳያል.
<script>
$(document).ready(function(){
$("form").submit(function(event){
var regex = /^[a-zA-Z]+$/;
var currentValue = $("#firstName").val();
if(regex.test(currentValue) == false){
$("#result").html('<p class="error">Not valid!</p>').show().fadeOut(1000);
// Preventing form submission
event.preventDefault();
}
});
});
</script>ክስተቶቹ እንዲሁ የተቃጠሉት የ DOM (የሰነድ ዕቃ ሞዴል) ገጽ ዝግጁ በሆነበት ሁኔታ ወይም ተጠቃሚው የአሳሽ መስኮቱን ሲቀይር ወይም ሲያሽከረክር ወዘተ ነው። ይህን አይነት ክስተት ለመቆጣጠር አንዳንድ የተለመዱ የ jQuery ዘዴዎች እዚህ አሉ።
ready()ዘዴው ready() DOM ሙሉ በሙሉ ሲጫን የሚፈፀመውን ተግባር ይገልጻል።
የ DOM ተዋረድ ሙሉ በሙሉ እንደተገነባ እና ለመጠቀም ዝግጁ እንደ ሆነ የሚከተለው ምሳሌ የአንቀጽ ጽሑፍን ይተካል።
<script>
$(document).ready(function(){
$("p").text("The DOM is now loaded and can be manipulated.");
});
</script>resize()ዘዴው resize() የክስተት ተቆጣጣሪ ተግባር የአሳሽ መስኮቱ መጠን ሲቀየር ከሚሰራው የመስኮት አካል ጋር ያያይዙት።
የሚከተለው ምሳሌ የአሳሽ መስኮቱን ማዕዘኖቹን በመጎተት መጠኑን ለመለወጥ ሲሞክሩ የአሁኑን ስፋት እና ቁመት ያሳያል።
<script>
$(document).ready(function(){
$(window).resize(function() {
$(window).bind("resize", function(){
$("p").text("Window width: " + $(window).width() + ", " + "Window height: " + $(window).height());
});
});
});
</script>scroll()ዘዴው scroll() የክስተት ተቆጣጣሪ ተግባርን በመስኮቱ ወይም በ iframe እና የእቃው ማሸብለል ቦታ በሚቀየርበት ጊዜ ሁሉ የሚሄዱ ሊሽከረከሩ የሚችሉ እቃዎች።
የሚከተለው ምሳሌ የአሳሽ መስኮቱን ሲያሸብልል መልእክት ያሳያል።
<script>
$(document).ready(function(){
$(window).scroll(function() {
$("p").show().fadeOut("slow");
});
});
</script>Ercole Palmeri
.
Coveware by Veeam የሳይበር ዘረፋ የአደጋ ምላሽ አገልግሎቶችን መስጠቱን ይቀጥላል። Coveware የፎረንሲክስ እና የማገገሚያ ችሎታዎችን ያቀርባል…
የመተንበይ ጥገና የዘይት እና ጋዝ ዘርፉን አብዮት እያደረገ ነው፣ ለዕፅዋት አስተዳደር ፈጠራ እና ንቁ አቀራረብ።…
የዩኬ ሲኤምኤ ስለ ቢግ ቴክ ባህሪ በአርቴፊሻል ኢንተለጀንስ ገበያ ላይ ማስጠንቀቂያ ሰጥቷል። እዚያ…
የሕንፃዎችን ኢነርጂ ውጤታማነት ለማሳደግ በአውሮፓ ህብረት የተቀረፀው የ"ኬዝ አረንጓዴ" ድንጋጌ የህግ አውጭ ሂደቱን በ…