بیشتر

JQuery، دا څه دي او موږ د جاواسکریپټ کتابتون سره څه کولی شو

jQuery د اصولو پراساس یو ګړندی ، سپک وزن او بډایه جاواسکریپټ کتابتون دی "لږ ولیکئ، ډیر وکړئ" . JQuery APIs د HTML اسنادو مدیریت او ساتنه ساده کوي، د پیښو مدیریت، ویب پاڼې ته د حرکت اغیزې اضافه کول. دا د ټولو لوی براوزرونو لکه کروم، فایرفوکس، سفاري، ایج سره مطابقت لري.

د ایجیکس پراساس غوښتنلیک رامینځته کول د jQuery سره خورا ساده او ګړندي کیږي.

jQuery په اصل کې د جان ریسیګ لخوا د 2006 په لومړیو کې رامینځته شوی. د jQuery پروژه اوس مهال د پرمختلونکو توزیع شوي ګروپ لخوا د خلاصې سرچینې پروژې په توګه ساتل کیږي.

تاسو کولی شئ د jQuery سره ډیر وخت او هڅې خوندي کړئ. نو دا سایټ په خپلو خوښیو کې اضافه کړئ او لوستلو ته دوام ورکړئ

تاسو د jQuery سره څه کولی شئ

دلته ډیر نور شیان شتون لري چې تاسو یې د jQuery سره کولی شئ.

  • تاسو کولی شئ په اسانۍ سره د HTML پاڼې عناصر وټاکئ، د ځانګړتیاوو لوستلو یا بدلولو لپاره؛
  • تاسو کولی شئ په اسانۍ سره تاثیرات رامینځته کړئ لکه عناصر ښودل یا پټول ، لیږدونه ، سکرولونه او داسې نور؛
  • تاسو کولی شئ په اسانۍ سره د لږو کوډونو سره پیچلي CSS متحرکات جوړ کړئ؛
  • تاسو کولی شئ په اسانۍ سره د DOM عناصر او د هغوی ځانګړتیاوې سمبال کړئ؛
  • تاسو کولی شئ په اسانۍ سره Ajax پلي کړئ ترڅو د پیرودونکي او سرور ترمینځ غیر متناسب ډیټا تبادله فعال کړئ؛
  • تاسو کولی شئ د هر عنصر موندلو لپاره د DOM ټولې ونې په اسانۍ سره تیر کړئ؛
  • تاسو کولی شئ په اسانۍ سره د کوډ د یوې کرښې سره په یو عنصر کې ډیری کړنې ترسره کړئ؛
  • تاسو کولی شئ په اسانۍ سره د HTML عناصرو اندازه ترلاسه کړئ یا تنظیم کړئ.

لیست دلته پای ته نه رسیږي، ډیری نور ښه شیان شتون لري چې تاسو یې د jQuery سره کولی شئ.

د jQuery کارولو ګټې

دلته ډیری ګټې شتون لري چې ولې یو څوک باید د jQuery کارولو لپاره غوره کړي:

  • ډیر وخت خوندي کړئ: تاسو کولی شئ د jQuery جوړ شوي تاثیراتو او انتخاب کونکو په کارولو سره ډیر وخت او هڅې خوندي کړئ او د پراختیا نورو اړخونو باندې تمرکز وکړئ؛
  • د عام جاواسکریپټ دندې ساده کړئ - jQuery د جاوا سکریپټ عام کارونه خورا ساده کوي. اوس تاسو کولی شئ په اسانۍ سره د ځانګړتیاوو بډایه او متقابل ویب پاڼې جوړې کړئ، د لږو کوډونو سره. عادي بیلګه د Ajax پلي کول دي ترڅو د یوې پاڼې مینځپانګې تازه کړي، پرته له دې چې تازه کړي؛
  • سادگي: jQuery کارول خورا اسانه دي. هر هغه څوک چې د HTML، CSS، او JavaScript لومړنۍ کاري پوهه لري کولی شي د jQuery سره وده پیل کړي؛
  • د ټولو براوزرونو سره مطابقت لري: jQuery د عصري براوزرونو سره په ذهن کې رامینځته شوی او د ټولو لوی عصري براوزرونو سره مطابقت لري لکه کروم ، فایرفوکس ، سفاري ، ایج؛
  • بالکل وړیا - او غوره برخه دا ده چې دا د ډاونلوډ او کارولو لپاره په بشپړ ډول وړیا ده.

jQuery ډاونلوډ کړئ

د پیل کولو لپاره، راځئ لومړی د jQuery یوه کاپي ډاونلوډ کړئ او بیا یې زموږ په پروژه کې شامل کړئ. د jQuery دوه نسخې د ډاونلوډ لپاره شتون لري: په بیړه e نه کمپریس شوی .

غیر کمپریس شوی فایل د پراختیا یا ډیبګ کولو لپاره غوره دی؛ پداسې حال کې چې د تولید لپاره کم شوی او کمپریس شوی فایل سپارښتنه کیږي ځکه چې دا د بنډ ویت خوندي کوي او د کوچني فایل اندازې له امله فعالیت ښه کوي.

موږ کولی شو له دې ځایه jQuery ډاونلوډ کړو: https://jquery.com/download/

یوځل چې تاسو د jQuery فایل ډاونلوډ کړئ تاسو کولی شئ وګورئ چې دا د js توسیع لري ، د بیلګې په توګه دا د جاواسکریپټ فایل دی. په حقیقت کې JQuery د جاواسکریپټ کتابتون پرته بل څه ندي ، نو تاسو کولی شئ د jQuery فایل د عنصر سره په HTML سند کې شامل کړئ لکه څنګه چې تاسو منظم جاواسکریپټ فایلونه شامل کړئ.

<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 APIs به شتون ونلري کله چې ستاسو jQuery کوډ دوی ته د لاسرسي هڅه کوي.

لکه څنګه چې تاسو شاید یادونه کړې وي، موږ په تیرو مثال کې ځانګړتیا پریښوده type="text/javascript" د ټګ دننه . Infatti questo non è richiesto in HTML5. JavaScript è il linguaggio di scripting predefiپه HTML5 او ټولو عصري براوزرونو کې پای ته ورسید.

jQuery د CDN څخه

د یو بدیل په توګه، تاسو کولی شئ jQuery په خپل سند کې په وړیا توګه موجود CDN (د مینځپانګې تحویلي شبکې) لینکونو له لارې ځای په ځای کړئ ، که تاسو د فایل ډاونلوډ کولو څخه مخنیوی وکړئ.

CDNs کولی شي د بار وخت کمولو سره د فعالیت ګټه وړاندې کړي، ځکه چې دوی په ټوله نړۍ کې په ډیری سرورونو کې jQuery کوربه کوي، او کله چې یو کاروونکي د فایل غوښتنه کوي، دا به د نږدې سرور څخه خدمت وکړي.

دا دا ګټه هم لري چې که ستاسو د ویب پا pageې لیدونکي دمخه د ورته CDN څخه د jQuery یوه کاپي د نورو سایټونو لیدو پرمهال ډاونلوډ کړې وي ، نو دوی به یې بیا ډاونلوډ نه کړي ځکه چې دا دمخه د دوی براوزر کیچ کې دی.

پدې حالت کې تاسو باید ولیکئ:

<script src =" https://code.jquery.com/jquery-3.6.3.min.js "> </script>

د jquery پروژې لخوا چمتو شوي CDN سربیره، تاسو کولی شئ د jQuery له لارې شامل کړئ د ګوګل e د Microsoft cdn.

لومړی ویب پاڼه د jQuery پر بنسټ

د 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 لپاره یوازې یو عرف دی. لاندې نمونې کوډ په پام کې ونیسئ چې د 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 ونې څخه د HTML عناصر غوره کوي نو دا د مینځلو وړ کیدی شي او 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"، چې په ساده ډول معنی لري کله چې یو کاروونکي دا تڼۍ کلیک کوي.

د ID لخوا توکي غوره کول

تاسو کولی شئ د ID انتخاب کونکی وکاروئ ترڅو په پاڼه کې د ځانګړي ID سره یو واحد توکي غوره کړئ.

د مثال په توګه، لاندې jQuery کوډ به د ID خاصیت سره یو عنصر غوره او روښانه کړي 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>
د ځانګړتیاوو له مخې د عناصرو انتخاب

تاسو کولی شئ د HTML ځانګړتیاو پراساس یو عنصر غوره کولو لپاره د ځانګړتیا انتخاب کونکی وکاروئ ، لکه د لینک ځانګړتیا targetیا د ننوت ځانګړتیا type، وغيره.

د مثال په توګه، لاندې jQuery کوډ به ټول متن ان پټونه غوره او روښانه کړي، لکه عناصر "<input>" سره type="text"، کله چې سند چمتو وي.

<script>
$(document).ready(function(){
    // Highlight paragraph elements
    $('input[type="text"]').css("background", "grey");
});
</script>
د مرکب CSS انتخاب کونکي له لارې د عنصر انتخاب

تاسو کولی شئ د 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>
jQuery ګمرک ټاکونکی

د انتخاب کونکو سربیره 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>

پیښی

پیښې اکثرا د ویب پاڼې سره د کاروونکي متقابل عمل لخوا رامینځته کیږي، لکه کله چې د لینک یا تڼۍ کلیک کول، د ان پټ بکس یا متن ساحې ته متن داخلول، د انتخاب بکس کې انتخاب کول، په کیبورډ کې کیلي فشارول، د ماوس پوینټر حرکت کول , etc. په ځینو مواردو کې، براوزر پخپله پیښې رامینځته کولی شي، لکه د پاڼې بار او ډاونلوډ پیښې.

jQuery د ډیری اصلي براوزر پیښو لپاره د پیښې میتودونو وړاندیز کولو سره د اصلي پیښو اداره کولو میکانیزمونو ته وده ورکوي ، ځینې دا میتودونه دي ready(), click(), keypress(), focus(), blur(), change()، وغيره.

<script>
$(document).ready(function(){
    // Code to be executed
    alert("Hello World!");
});
</script>

په عموم کې، پیښې په څلورو عمده ډلو ویشل کیدی شي: 

  • د موږک پیښې
  • د کیبورډ پیښې
  • د پیښو ماډل ed
  • سند / کړکۍ پیښې 

د موږک پیښې

د موږک پیښه هغه وخت رامینځته کیږي کله چې کارونکي په یوه توکي کلیک کوي ، د موږک پوینټر حرکت کوي ، او داسې نور.

دلته د موږک پیښو اداره کولو لپاره ځینې عام کارول شوي 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، arrow keys، او نور. دوی د کیډون پیښې ډزې کوي مګر د کیپریس پیښې نه.

طریقه 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

.

د نوښت خبر پاڼه
د نوښت په اړه خورا مهم خبرونه له لاسه مه ورکوئ. د بریښنالیک له لارې دوی ترلاسه کولو لپاره لاسلیک وکړئ.

وروستي مقالې

راتلونکی دلته دی: د بار وړلو صنعت څنګه د نړیوال اقتصاد انقلاب کوي

سمندري سکتور یو ریښتینی نړیوال اقتصادي ځواک دی ، کوم چې د 150 ملیارد بازار په لور حرکت کړی ...

1 د 2024 ماین

خپرونکي او OpenAI تړونونه لاسلیک کوي ترڅو د مصنوعي استخباراتو لخوا پروسس شوي معلوماتو جریان تنظیم کړي

تیره دوشنبه، فایننشل ټایمز د OpenAI سره یوه معامله اعلان کړه. FT د نړۍ په کچه ژورنالیزم جواز ورکوي ...

30 اپریل 2024

آنلاین تادیات: دلته د سټیمینګ خدمات تاسو ته د تل لپاره تادیه کوي

ملیونونه خلک د سټیمینګ خدماتو لپاره تادیه کوي ، د میاشتنۍ ګډون فیس ورکوي. دا عام نظر دی چې تاسو…

29 اپریل 2024

Veeam د ransomware لپاره خورا پراخه ملاتړ وړاندې کوي ، له محافظت څخه تر غبرګون او رغیدو پورې

د Veeam لخوا Coveware به د سایبر غصب پیښو غبرګون خدماتو چمتو کولو ته دوام ورکړي. Coveware به د عدلي او درملنې وړتیاوې وړاندې کړي ...

23 اپریل 2024

نوښت په خپله ژبه ولولئ

د نوښت خبر پاڼه
د نوښت په اړه خورا مهم خبرونه له لاسه مه ورکوئ. د بریښنالیک له لارې دوی ترلاسه کولو لپاره لاسلیک وکړئ.

مونږ سره په