التخطي إلى المحتوى الرئيسي

المشاركات

عرض الرسائل ذات التصنيف Jquery

Jquery Introduction

Jquery Introduction Jquery is the plugin of javascript which provides advanced functionality in web application. It provide predefined method for animation,rotation,transition,transformation,validation ,mathematical operation,API communication . Jquery is dependent on the Jquery plugin because all methods will be implemented by the plugin. Syntax of Jquery:- 1) Download Jquery plugin from Jquery.org site 2) Integrate Jquery under HTML head section 3) define Jquery Block Jquery will use predefined method and access page element without explicit calling. <input type="text" id="txt1"  /> document.getElementById("txt1") $("#txt1").val() Jquery Event Method will be called directly. <input type="button" onclick="fun()"  /> <script> $(button).click(){} </script> Download Jquery From This Link and https://code.jquery.com/jquery-3.4.1.min.js Create jquery.min.js file un...
إرسال تعليق
قراءة المزيد

$(document).ready() in Jquery?

                         What is $(document).ready() in Jquery? document:-  container which contain  all HTML element ready():-  it is the predefined method which is used to call function under jquery ready state ,ready state will be called before load state. $ --->  it is access operator of Jquery . <div><div> $(div).html() $(this).click() $(document) Jquery Life Cycle With Diagram
إرسال تعليق
قراءة المزيد

Difference between JS and Jquery

Difference between JS and Jquery Jquery is the Javascript plugin that provides a predefined library to contain predefined functionality. Jquery library has developed by Javascript means we can say that JS is the parent script and jquery is the child script. Jquery syntax pattern is different from Javascript, we can create even method and find element under the same block. for example, if we click on a button then we will create a click event method under Button Tag but in Jquery we will use click() under the jquery function. Step to create Jquery Hello World Program:- step1st:-  download Jquery Plugin and link into the head section <script src="jquery.min.js"></script> step2nd:-  create script section under <head></head> and write javascript code <script>     $(document).ready(function(){              alert("hello world");          }); </script> ...
إرسال تعليق
قراءة المزيد

Jquery Selector

Jquery Selector                                                   It is used to select Html element from web pages 1) ID Selector 2)  Class Selector 3) Tag Selector <button id="btn" >One</button> <button class="abc">Two</button> <button>Three</button> $("#btn").click(function(){}); $(".abc").click(function(){}); $("button").click(function(){}); <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){        $("#btn").click(function(){alert("one")});    $(".abc").click(function(){alert("two")});    $("button").click(function(){alert("three")}); }) </script> </head> <body> <button id="btn" >One</b...
إرسال تعليق
قراءة المزيد

Jquery and Javascript Program to Calculate SI?

Jquery and Javascript Program to Calculate SI? <!DOCTYPE html> <html> <head>     <title></title>     <script type="text/javascript">               function calculate()       {           p = document.getElementById("txtp").value;           r = document.getElementById("txtr").value;           t = document.getElementById("txtt").value;           si = (p*r*t)/100;           //document.write("result is "+si);         document.getElementById("res").innerHTML="result is "+si;       }     </script> </head> <body> <input type="text" id="txtp" placeholder="Enter...
إرسال تعليق
قراءة المزيد

Jquery Calculator Example

<!DOCTYPE html> <html> <head>  <title></title>  <script src="jq.js" type="text/javascript"></script>  <script type="text/javascript">  s='';   $(document).ready(function(){            $(".btn").click(function(){             $(".txtresult").html($(".txtresult").html()+$(this).val());       });        $(".btneql").click(function(){         $(".txtresult").html(eval($(".txtresult").html()));       });   });  /* function calc(v)   {       document.getElementByclass("txtresult").innerHTML=document.getElementByclass("txtresult").innerHTML+v;   }   function sol()   {    document.getElementByclass("txtresult").innerHTML=eval(document.getElementByclass("txtre...
إرسال تعليق
قراءة المزيد

Jquery Methods for animation and effects

Jquery Methods for animation and effects 1) show():-   It is used to show content after hiding 2) hide():-   It is used to hide content 3) toggle():-  It will show data and hide data both Complete Example of show(),hide() and toggle() in Jquery:- <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script>      $(document).ready(function(){          $("#btn1").click(function(){           $("p").show(1000);          });           $("#btn2").click(function(){           $("p").hide(1000);          });            $("#btn3").click(function(){           $("p").toggle(1000);          });   ...
إرسال تعليق
قراءة المزيد

Jquery Normal Method and Toggle Method to perform operation

Jquery has a rich set of libraries to implement the functionality. 1 show():-   it is used to show content which will be hidden 2 hide():-  It is used to hide content which will be shown 3 toggle():-  it will work hide and show both functionalities. Example of the show, hide and toggle <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){            $("#btn1").click(function(){                         $("p").show(2000);            });             $("#btn2").click(function(){                         $("p").hide(2000);            }); ...
إرسال تعليق
قراءة المزيد