What is jQuery?
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more.
How to use jQuery?
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
Local Installation
1.Go to the https://jquery.com/download/ to download the latest version available.
2.If you are using Eclipe, create js folder in WebContent.
3.Now put downloaded jquery-2.1.3.min.js file in js folder.
Example
Now you can include jquery library in your HTML file as follows −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/js/jquery-2.1.3.min.js"></script><script type = "text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body><h1>Hello</h1></body>
</html>
This will produce following result −Hello, World!
$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script> </head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});
</script>
This is Hello World by HTML <div id="msgid"></div>
</body>
</html>
window.onload = function() {
document.getElementById('msgid3').innerHTML = "This is Hello World by JavaScript";
}
$(document).ready(function() {
$("#msgid1").html("This is Hello World by JQuery 1<BR>");
});
< script >
function myFunction() {
alert("Page is loaded");
}
< /script>
<body onload="myFunction()">
<h1>Hello World!</h1 >
< /body>
jQuery selectors allow you to select and manipulate HTML element(s). All selectors in jQuery start with the dollar sign and parentheses: $().
1.The element Selector:-
HTML element :-
a (hyperlink),table,tr,td,p ..etcYou can select all <p> elements on a page like this:$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2. Select Elements by ID in jQuery
Normally, in JavaScript, we use document.getElementByID to find a specific Id. In jQuery, it is more compact than that.
Use # character to select elements by ID.
Example: $(‘#myID’).
The above Selector will select <p id=”myID”> element.
3. Select Elements by Class in jQuery
Use dot(.) character to select elements by class name.
Example: $(‘.myClass’)
The above selector will select <p class=”myClass”> element.
4. Select Elements by Attribute Value in jQuery
Use brackets [attribute] to select based on attribute name and/or attribute value.
Example: $(‘a[title]‘).
The above selector will select all <a> elements that have a title attribute.
$(‘a[title="Customer Info"]‘) will select all anchor elements that have a “Customer Info” title attribute.
5. Select Input Nodes in jQuery
A new character syntax $(‘:input’) used for this.
The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.
$(‘:input[type="radio"]‘) will specifically target RadioButtons on the web page.
jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto − Write less, do more.
How to use jQuery?
There are two ways to use jQuery.
Local Installation − You can download jQuery library on your local machine and include it in your HTML code.
CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN).
Local Installation
1.Go to the https://jquery.com/download/ to download the latest version available.
2.If you are using Eclipe, create js folder in WebContent.
3.Now put downloaded jquery-2.1.3.min.js file in js folder.
Example
Now you can include jquery library in your HTML file as follows −
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript" src = "/js/jquery-2.1.3.min.js"></script><script type = "text/javascript">
$(document).ready(function(){
document.write("Hello, World!");
});
</script>
</head>
<body><h1>Hello</h1></body>
</html>
This will produce following result −Hello, World!
CDN Based VersionYou can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version.Example:-Now let us rewrite above example using jQuery library from Google CDN.<html><head><title>The jQuery Example</title><script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script type = "text/javascript"> $(document).ready(function(){ document.write("Hello, World!");});</script></head><body><h1>Hello</h1></body></html>How to use Custom Scripts?It is better to write our custom code in the custom JavaScript file : custom.js, as follows/* Filename: custom.js */$(document).ready(function() {
$("div").click(function() {
alert("Hello, world!");
});
});
Now we can include custom.js file in our HTML file as follows −<html><head><title>The jQuery Example</title><script type = "text/javascript"src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script<script type = "text/javascript" src = "/jquery/custom.js"></script></head><body><div id = "mydiv"> Click on this to see a dialogue box.</div></body></html>
How to call a jQuery library functions?
If you want an event to work on your page, you should call it inside the$(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded.<html>
<head>
<title>jQuery Hello World</title>
<script type="text/javascript" src="/js/jquery-2.1.3.min.js"></script> </head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$("#msgid").html("This is Hello World by JQuery");
});
</script>
This is Hello World by HTML <div id="msgid"></div>
</body>
</html>
Different between function calling in JavaScript and JQuery?
1.JavaScript To call a function after page loaded, JavaScript uses the “window.onload“, and “innerHTML” to create the content dynamically.window.onload = function() {
document.getElementById('msgid3').innerHTML = "This is Hello World by JavaScript";
}
2.jQuery To call a function after page loaded, jQuery uses the “$(document).ready“, and “html()” to create the content dynamically.$(document).ready(function() {
$("#msgid1").html("This is Hello World by JQuery 1<BR>");
});
What are the effects methods used in jQuery?These are some effects methods used in jQuery:show() , hide(), toggle(), fadeIn(), fadeOut().What is the starting point of code execution in jQuery?$(document).ready() function is the starting point of jQuery code. It is executed when DOM is loaded.Can you use multiple document.ready() function on the same page?Yes. You can use any number of document.ready() function on the same page.
Is there any difference between body onload() and document.ready() function?document.ready() function is different from body onload() function for 2 reasons.We can have more than one document.ready() function in a page where we can have only one body onload() function. document.ready() function is called as soon as DOM is loaded where body.onload() function is called when everything gets loaded on the page that includes DOM,images and all associated resources of the page.Defining Body Onload() event< script >
function myFunction() {
alert("Page is loaded");
}
< /script>
<body onload="myFunction()">
<h1>Hello World!</h1 >
< /body>
Defining jQuery.ready() event<script type="text/javascript">$(document).ready(function() { //Script goes here});</script>
jQuery selectors allow you to select and manipulate HTML element(s). All selectors in jQuery start with the dollar sign and parentheses: $().
1.The element Selector:-
HTML element :-
a (hyperlink),table,tr,td,p ..etcYou can select all <p> elements on a page like this:$("p")
Example
When a user clicks on a button, all <p> elements will be hidden:
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
2. Select Elements by ID in jQuery
Normally, in JavaScript, we use document.getElementByID to find a specific Id. In jQuery, it is more compact than that.
Use # character to select elements by ID.
Example: $(‘#myID’).
The above Selector will select <p id=”myID”> element.
3. Select Elements by Class in jQuery
Use dot(.) character to select elements by class name.
Example: $(‘.myClass’)
The above selector will select <p class=”myClass”> element.
4. Select Elements by Attribute Value in jQuery
Use brackets [attribute] to select based on attribute name and/or attribute value.
Example: $(‘a[title]‘).
The above selector will select all <a> elements that have a title attribute.
$(‘a[title="Customer Info"]‘) will select all anchor elements that have a “Customer Info” title attribute.
5. Select Input Nodes in jQuery
A new character syntax $(‘:input’) used for this.
The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.The above syntax will select all the input elements including Input, Select, TextArea, Button, Image, Radio and more. It will return a collection of input elements.
$(‘:input[type="radio"]‘) will specifically target RadioButtons on the web page.
Tell the name of jQuery method which is used to perform an asynchronous HTTP request?
jQuery.ajax()
What is the use of jquery load() method?
The jQuery load() method is a powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected element without reload the complate page.
Ex:The following example loads the content of the file "demo_test.txt" into a specific <div> element
$("#div1").load("demo_test.txt");
jQuery.ajax()
What is the use of jquery load() method?
The jQuery load() method is a powerful AJAX method.
The load() method loads data from a server and puts the returned data into the selected element without reload the complate page.
Ex:The following example loads the content of the file "demo_test.txt" into a specific <div> element
$("#div1").load("demo_test.txt");
Is jQuery a library for client scripting or server scripting ?
Ans : Client Scripting.
Is jQuery a W3C standard ?
Ans : No.
Which sign does jQuery use as a shortcut for jQuery ?
Ans : $
eg: $("#div").css('color','red');
When and who founded jQuery ?
Ans : jQuery was founded by John Resig in January 2006.
What are jQuery Selectors ?
Ans : Selectors are used in jQuery to find and select DOM elements via id, class or element selector. There are many new selectors introduces in jQuery. Using jQuery selectors DOM elements can be selected and manipulated.
What does $("div") will select ?
Ans : This will select all the div elements on page.
What are the fastest selectors in jQuery ?
Ans : ID and element selectors are the fastest selectors in jQuery.
What are the slow selectors in jQuery ?
Ans : class selectors are the slow compare to ID and element.
Which one is faster Jquery ID selector or JavaScript getElementById()?
Ans : JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector.
How can you select all elements in page using jQuery ?
Ans : We can use all selector to select all elements on page.
eg : $('*').
How to set page title using jQuery ?
Ans :
$(functio() {
$(document).attr('title','alokjava.blogspot.in');
});
What are the features of jQuery in short ?
Ans : Effects and Animations, Ajax, Extensibility.
How to debug jQuery ?
Ans : Add the keyword debugger to the line from where we want to start the debugging.
$(functio()
{
debugger;
$(document).attr('title','20fingers2Brains');
});
What is jQuery UI ?
Ans : jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.
What are the advantages of using jQuery over Javascript .
Ans : jQuery is concise javascript code. Minimal amount of code is to be written for the same functionality than the javascript.
What is the difference between .js and .min.js ?
Ans : .min.js is basically the minified version of .js file. Both the files are same as far as functionality is concerned.
.min.js is used to increase the page performance as it is small in size compare to .js and takes less time to load.
What is Chaining in jQuery?
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
Both the sample codes above will perform the exact same thing but the only difference is that Sample code 2 is using Chaining. But Code 2 is faster and shorter then Code 1.
The problem with the Sample Code 1 is that for every statement, jQuery has to search the entire DOM and find the element and after that executes the attached function on it. But when chaining is used, then jQuery has to find the element only once and it will execute all the attached functions one by one. This is the advantage of Chaining.
Ans : Client Scripting.
Is jQuery a W3C standard ?
Ans : No.
Which sign does jQuery use as a shortcut for jQuery ?
Ans : $
eg: $("#div").css('color','red');
When and who founded jQuery ?
Ans : jQuery was founded by John Resig in January 2006.
What are jQuery Selectors ?
Ans : Selectors are used in jQuery to find and select DOM elements via id, class or element selector. There are many new selectors introduces in jQuery. Using jQuery selectors DOM elements can be selected and manipulated.
What does $("div") will select ?
Ans : This will select all the div elements on page.
What are the fastest selectors in jQuery ?
Ans : ID and element selectors are the fastest selectors in jQuery.
What are the slow selectors in jQuery ?
Ans : class selectors are the slow compare to ID and element.
Which one is faster Jquery ID selector or JavaScript getElementById()?
Ans : JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector.
How can you select all elements in page using jQuery ?
Ans : We can use all selector to select all elements on page.
eg : $('*').
How to set page title using jQuery ?
Ans :
$(functio() {
$(document).attr('title','alokjava.blogspot.in');
});
What are the features of jQuery in short ?
Ans : Effects and Animations, Ajax, Extensibility.
How to debug jQuery ?
Ans : Add the keyword debugger to the line from where we want to start the debugging.
$(functio()
{
debugger;
$(document).attr('title','20fingers2Brains');
});
What is jQuery UI ?
Ans : jQuery UI is a library which is built on top of jQuery library. jQuery UI comes with cool widgets, effects and interaction mechanism.
What are the advantages of using jQuery over Javascript .
Ans : jQuery is concise javascript code. Minimal amount of code is to be written for the same functionality than the javascript.
What is the difference between .js and .min.js ?
Ans : .min.js is basically the minified version of .js file. Both the files are same as far as functionality is concerned.
.min.js is used to increase the page performance as it is small in size compare to .js and takes less time to load.
What is Chaining in jQuery?
$(document).ready(function(){
$('#dvContent').addClass('dummy');
$('#dvContent').css('color', 'red');
$('#dvContent').fadeIn('slow');
});
$(document).ready(function(){
$('#dvContent').addClass('dummy')
.css('color', 'red')
.fadeIn('slow');
});
Both the sample codes above will perform the exact same thing but the only difference is that Sample code 2 is using Chaining. But Code 2 is faster and shorter then Code 1.
The problem with the Sample Code 1 is that for every statement, jQuery has to search the entire DOM and find the element and after that executes the attached function on it. But when chaining is used, then jQuery has to find the element only once and it will execute all the attached functions one by one. This is the advantage of Chaining.
How do you get the text value of a selected option?
Example:-
<select id="pcdsselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Code:
$("#pcdsselect").val();
// => 1
Example:-
<select id="pcdsselect">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Dr</option>
<option value="5">Prof</option>
</select>
Code:
$("#pcdsselect").val();
// => 1
If you wanted to get the string "Mr" if the first option was selected (instead of just "1"), you would do that in the following way:
$("#pcdsselect option:selected").text();
// => "Mr"
Write the code for selecting the 1st div element, 4th div element last div, and for even and odd div elemets also.
one by one? apply the red color on the above div.
<div class="questions">
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
</div>
Code for first div : $("div.questions > div:first").css("color", "green");
Code for 4th div : $("div.questions > div:nth-child(4)").css("color", "green");
Code for last div : $("div.questions > div:last").css("color", "green");
Code for even div : $("div.questions > div:even").css("color", "green");
Code for odd div : $("div.questions > div:odd").css("color", "green");
If you have a table, how you will apply the two differt color on alternate rows using Jquery?
<table border="1">
<tr><td>kk</td></tr>
<tr><td>SB</td></tr>
<tr><td>Avi</td></tr>
<tr><td>SN</td></tr>
</table>
Ans :
<script>
$(document).ready(function () {
$("tr:even").css("background-color", "#f4f4f8");
$("tr:odd").css("background-color", "#ffffff");
});
</script>
one by one? apply the red color on the above div.
<div class="questions">
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
<div class="box"> Question</div>
</div>
Code for first div : $("div.questions > div:first").css("color", "green");
Code for 4th div : $("div.questions > div:nth-child(4)").css("color", "green");
Code for last div : $("div.questions > div:last").css("color", "green");
Code for even div : $("div.questions > div:even").css("color", "green");
Code for odd div : $("div.questions > div:odd").css("color", "green");
If you have a table, how you will apply the two differt color on alternate rows using Jquery?
<table border="1">
<tr><td>kk</td></tr>
<tr><td>SB</td></tr>
<tr><td>Avi</td></tr>
<tr><td>SN</td></tr>
</table>
Ans :
<script>
$(document).ready(function () {
$("tr:even").css("background-color", "#f4f4f8");
$("tr:odd").css("background-color", "#ffffff");
});
</script>
How do you check or uncheck a checkbox input or radio button?
There are two ways to check or uncheck a checkbox or radio button. Set the 'checked' attribute to true or false.
// Check #pcds
$('#pcds').attr('checked', true);
// Uncheck #pcds
$('#pcds').attr('checked', false);
Add or remove the 'checked' attribute:
// Check #pcds
$("#pcds").attr('checked', 'checked');
// Uncheck #pcds
$("#pcds").removeAttr('checked');
There are two ways to check or uncheck a checkbox or radio button. Set the 'checked' attribute to true or false.
// Check #pcds
$('#pcds').attr('checked', true);
// Uncheck #pcds
$('#pcds').attr('checked', false);
Add or remove the 'checked' attribute:
// Check #pcds
$("#pcds").attr('checked', 'checked');
// Uncheck #pcds
$("#pcds").removeAttr('checked');
How do You disable or enable a form element?
There are two ways to disable or enable form elements. Set the 'disabled' attribute to true or false:
// Disable #pcds
$('#pcds').attr('disabled', true);
// Enable #pcds
$('#pcds').attr('disabled', false);
Add or remove the 'disabled' attribute:
// Disable #pcds
$("#pcds").attr('disabled', 'disabled');
// Enable #pcds
$("#pcds").removeAttr('disabled');
There are two ways to disable or enable form elements. Set the 'disabled' attribute to true or false:
// Disable #pcds
$('#pcds').attr('disabled', true);
// Enable #pcds
$('#pcds').attr('disabled', false);
Add or remove the 'disabled' attribute:
// Disable #pcds
$("#pcds").attr('disabled', 'disabled');
// Enable #pcds
$("#pcds").removeAttr('disabled');
Name the Jquery methods which are used for apply css class?
$("#Id1").addClass('YourClassName'); // for apply class
$("#Id1").removeClass('YourClassName'); // for remove class
What is the use of attr() method in Jquery?
The attr() method sets or returns attributes and values of the selected elements.
When this method is used to return the attribute value, it returns the value of the first matched element.
When this method is used to set attribute values, it sets one or more attribute/value pairs for the set of matched elements.
$(selector).attr(attribute) //it will return the value of an attribute
$(selector).attr(attribute,value) //it will set the value of an attribute
$(selector).attr({attribute:value, attribute:value,...}) //for set multiple attribute
No comments:
Post a Comment