JQuery


jQuery
jQuery greatly simplifies JavaScript programming.
jQuery is a JavaScript Library.

jQuery is easy to learn.

With jQuery you select (query) HTML elements and perform "actions" on them.
jQuery Syntax Examples

$(this).hide()
Demonstrates the jQuery hide() method, hiding the current HTML element.

$("#test").hide()
Demonstrates the jQuery hide() method, hiding the element with id="test".

$("p").hide()
Demonstrates the jQuery hide() method, hiding all <p> elements.

$(".test").hide()
Demonstrates the jQuery hide() method, hiding all elements with class="test".
jQuery Syntax

The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s).

Basic syntax is: $(selector).action()

    * A dollar sign to define jQuery
    * A (selector) to "query (or find)" HTML elements
    * A jQuery action() to be performed on the element(s)

Examples:

$(this).hide() - hides current element

$("p").hide() - hides all paragraphs

$("p.test").hide() - hides all paragraphs with class="test"

$("#test").hide() - hides the element with id="test"

<html>

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
  $(this).hide();
  });
});
</script>
</head>

<body>
<p>If you click on me, I will disappear.</p>
</body>

</html>

exp :2

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">This is a heading</h2>
<p class="test">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>


1).What is Jquery?
jquery is javascript library which required a jquery.js file. After that you can write the jquery as fallows. It uses "$" as the short hand to write jquery code.
Simple Syntax is 
Code:
$(document).ready(function()
{
    function body
});

2).When Jquery founded and by whome?
It was released in January 2006 at BarCamp NYC by John Resig(Jquery founder).


3).What scripting language is jQuery written in?
Ans: JavaScript


4).Write a basic code for add jquery library to pages? 
Code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// You can write the code here
</script>
</head>
<body>
<a href="http://www.tutoriz.com/">Jquery Interview Questions and Answers</a>
</body>
</html>


5).What is jQuery Selectors? Give some examples.
Ans: Selectors are used in jQuery to find out DOM elements. Selectors can find the elements via ID, CSS, Element name and hierarchical position of the element.

Code:
Selector     Example          Selects
*           $("*")          All elements
#id          $("#lastname")      The element with id=lastname
.class          $(".intro")              All elements with class="intro"
element      $("p")          All p elements
For more click here http://www.w3schools.com/jquery/jquery_r...ectors.asp


6).What $("div.tutoriz") will select?
Ans: All the div element with tutoriz class.


7).jQuery uses CSS selectors and XPath expressions to select elements true or false?
Ans:- True


8).What are the fastest selectors in Jquery?
Ans: ID and element selectors are the fastest selectors


9).What are the slower selecoters in Jquery?
Ans: Class selectors are slower

10).Which one is faster Jquery ID selector or JavaScript getElementById()?
(Jquery ID selector vs JavaScript getElementById())
Ans: JavaScript getElementById() is faster than Jquery Id ($("#elementID")) selector


11).Where Jquery code execute? On client browser or server browser?
On client browser



12).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.
Code:
<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", "red");
Code for 4th div         : $("div.questions > div:nth-child(4)").css("color", "red");
Code for last div        : $("div.questions > div:last").css("color", "red");
Code for even div        : $("div.questions > div:even").css("color", "red");
Code for odd div         : $("div.questions > div:odd").css("color", "red");

13).Write the code for select second last div element?
Code for second last div : $("div.questions > div::nth-last-child(2)").css("color", "red"); <!-- Introduced in CSS3 -->

14).What are the advantages of using jQuery over JavaScript in ASP.NET web application 
Ans:
Below are the advatages of using jQery over JavaScript
a>.Jquery is well written optimised javascript code so
it will be faster in execution unless we write same standard optimised javascript code.
b>.Jquery is concise java script code ,means minimal ammount of code
is to be written for the same functionality than the javascript.
c>.Javascript related Development is fast using Jquery because most of the
functionality is already written in the library and we just need to use that.
d>.Jquery has cross browser support ,so we save time for supporting all the browsers. 


15).What is Chaining in jQuery?
Ans: 
In jQuery, Chaining means to connect multiple functions, events on selectors. look at Sample Code 1 and 2.
Code:
Sample Code 1
​$(document).ready(function(){
    $('#dvContent').addClass('dummy');
    $('#dvContent').css('color', 'red');
    $('#dvContent').fadeIn('slow');
});​

Sample Code 2 (using Chaining)
​$(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.

16).Is jQuery a library for client scripting or server scripting?
Ans: Client Script

17).What is jQuery & its significance? Why it is so popular?...


18).What are features of JQuery
or
What can be done using JQuery?
Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling


19).How to check Jquery UI loaded or not?
Ans: // Checking if jQuery UI is loaded or not
Code:
if($.ui){
    // jQuery UI is loaded
}else {
    // jQuery UI is not loaded
}

20).How check currently loaded jQuery UI version on the page?
Ans: // Returns jQuery UI version (ex: 1.8.2) or undefined
$.ui.version


21).Write the code for setting datetimepicker on textbox click.
If below is our textbox 
<input type="text" id="abc" name=%26quot%3Bacc%26quot%3B value="Select Date" />
then Jquery code will be
$("#abc").datepicker();



22).If you have a table, how you will apply the two differt color on alternate rows using Jquery?
Code:
<table border="1">
  <tr><td>Vikas Ahlawat</td></tr>
  <tr><td>Edwin George</td></tr>
  <tr><td>Rohit Khurana</td></tr>
  <tr><td>Gyan Singh</td></tr>
</table>
Ans :
<script src="jquery.js"></script>
<script>
$(document).ready(function()
{
  $("tr:even").css("background-color", "#f4f4f8");
  $("tr:odd").css("background-color", "#ffffff");
});
</script>


23).Name the Jquery method which is used to hide selected elements?
Ans: .hide()


24).Name the Jquery methods which are used for apply css class?
Ans:
$("#Id1").addClass('YourClassName'); // for apply class
$("#Id1").removeClass('YourClassName'); // for remove class


25).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.
Code:
$(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

26).Can we use both jQuery and AJAX together?
Ans: yes

27).Tell the name of jQuery method which is used to perform an asynchronous HTTP request?
Ans: jQuery.ajax() 

28).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");


29).Can we use our own specific charactor in the place of $ sigh in Jquery?
Ans: Yes
You can also create your own shortcut very easily. The noConflict() method returns a reference to jQuery, that you can save in a variable, for later use. Here is an example:
Code:
var vikas = $.noConflict();
vikas(document).ready(function(){
  vikas("button").click(function(){
    vikas("p").text("jQuery is still working!");
  });
});

30).Name the 5 Jquery events?
Ans:-
jQuery Events
jQuery click() event.
jQuery dblclick() event.
jQuery mouseenter() event.
jQuery mouseleave() event.
jQuery mousedown() event.
jQuery mouseup() event.
jQuery hover() event.
jQuery focus() and blur() events.

Syntax

The jQuery syntax is tailor made for selecting HTML elements and performing some action on the element(s).
Basic syntax is: $(selector).action()
  • A $ sign to define/access jQuery
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
Examples:
$(this).hide() - hides the current element.
$("p").hide() - hides all <p> elements.
$(".test").hide() - hides all elements with class="test".
$("#test").hide() - hides the element with id="test".
NoteAre you familiar with CSS selectors?

jQuery uses CSS syntax to select elements. You will learn more about the selector syntax in the next chapter of this tutorial.


jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.
SelectorExampleSelects
*$("*")All elements
#id$("#lastname")The element with id="lastname"
.class$(".intro")All elements with class="intro"
.class,.class$(".intro,.demo")All elements with the class "intro" or "demo"
element$("p")All <p> elements
el1,el2,el3$("h1,div,p")All <h1>, <div> and <p> elements
:first$("p:first")The first <p> element
:last$("p:last")The last <p> element
:even$("tr:even")All even <tr> elements
:odd$("tr:odd")All odd <tr> elements
:first-child$("p:first-child")All <p> elements that are the first child of their parent
:first-of-type$("p:first-of-type")All <p> elements that are the first <p> element of their parent
:last-child$("p:last-child")All <p> elements that are the last child of their parent
:last-of-type$("p:last-of-type")All <p> elements that are the last <p> element of their parent
:nth-child(n)$("p:nth-child(2)")All <p> elements that are the 2nd child of their parent
:nth-last-child(n)$("p:nth-last-child(2)")All <p> elements that are the 2nd child of their parent, counting from the last child
:nth-of-type(n)$("p:nth-of-type(2)")All <p> elements that are the 2nd <p> element of their parent
:nth-last-of-type(n)$("p:nth-last-of-type(2)")All <p> elements that are the 2nd <p> element of their parent, counting from the last child
:only-child$("p:only-child")All <p> elements that are the only child of their parent
:only-of-type$("p:only-of-type")All <p> elements that are the only child, of its type, of their parent
parent > child$("div > p")All <p> elements that are a direct child of a <div> element
parent descendant$("div p")All <p> elements that are descendants of a <div> element
element + next$("div + p")The <p> element that are next to each <div> elements
element ~ siblings$("div ~ p")All <p> elements that are siblings of a <div> element
:eq(index)$("ul li:eq(3)")The fourth element in a list (index starts at 0)
:gt(no)$("ul li:gt(3)")List elements with an index greater than 3
:lt(no)$("ul li:lt(3)")List elements with an index less than 3
:not(selector)$("input:not(:empty)")All input elements that are not empty
:header$(":header")All header elements <h1>, <h2> ...
:animated$(":animated")All animated elements
:focus$(":focus")The element that currently has focus
:contains(text)$(":contains('Hello')")All elements which contains the text "Hello"
:has(selector)$("div:has(p)")All <div> elements that have a <p> element
:empty$(":empty")All elements that are empty
:parent$(":parent")All elements that are a parent of another element
:hidden$("p:hidden")All hidden <p> elements
:visible$("table:visible")All visible tables
:root$(":root")The document's root element
:lang(language)$("p:lang(de)")All <p> elements with a lang attribute value starting with "de"
[attribute]$("[href]")All elements with a href attribute
[attribute=value]$("[href='default.htm']")All elements with a href attribute value equal to "default.htm"
[attribute!=value]$("[href!='default.htm']")All elements with a href attribute value not equal to "default.htm"
[attribute$=value]$("[href$='.jpg']")All elements with a href attribute value ending with ".jpg"
[attribute|=value]$("[title|='Tomorrow']")All elements with a title attribute value equal to 'Tomorrow', or starting with 'Tomorrow' followed by a hyphen
[attribute^=value]$("[title^='Tom']")All elements with a title attribute value starting with "Tom"
[attribute~=value]$("[title~='hello']")All elements with a title attribute value containing the specific word "hello"
[attribute*=value]$("[title*='hello']")All elements with a title attribute value containing the word "hello"
:input$(":input")All input elements
:text$(":text")All input elements with type="text"
:password$(":password")All input elements with type="password"
:radio$(":radio")All input elements with type="radio"
:checkbox$(":checkbox")All input elements with type="checkbox"
:submit$(":submit")All input elements with type="submit"
:reset$(":reset")All input elements with type="reset"
:button$(":button")All input elements with type="button"
:image$(":image")All input elements with type="image"
:file$(":file")All input elements with type="file"
:enabled$(":enabled")All enabled input elements
:disabled$(":disabled")All disabled input elements
:selected$(":selected")All selected input elements
:checked$(":checked")All checked input elements

The Document Ready Event

You might have noticed that all jQuery methods in our examples, are inside a document ready event:
$(document).ready(function(){

   // jQuery methods go here...

});
This is to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.
Here are some examples of actions that can fail if methods are run before the document is fully loaded:
  • Trying to hide an element that is not created yet
  • Trying to get the size of an image that is not loaded yet
Tip: The jQuery team has also created an even shorter method for the document ready event:
$(function(){

   // jQuery methods go here...

});

jQuery Utility Functions

.clearQueue()
This function is used to remove all the functions from the queue that have not been executed.

jQuery.contains()
The jQuery.contains() function is used to check if a DOM node is within another DOM node.

jQuery.data()
The jQuery.data() function is used to add data of any type to a DOM element..

.dequeue()
The .dequeue() function is used to remove the next function on the queue.

jQuery.dequeue()
The jQuery.dequeue() is used to execute the next function on the queue for the matched element.

jQuery.each()
The jQuery.each() function is not same as  .each(), which is used to iterate over the jQuery objects. The  jQuery.each() iterates through the array displaying each number as both a word and numeral.
 
jQuery.extend()
The jQuery.extend() function merge the contents of two or more objects together into the first object.
 
jQuery.globalEval()
Execute some JavaScript code globally.
 
jQuery.grep()
The jQuery.grep() function is used to find the elements of an array which satisfy a filter function. The original array is not affected.
 
jQuery.inArray()
The jQuery.inArray() function searches for a specified value within an array and return its index (or -1 if not found).
 
jQuery.isArray()
The jQuery.isArray() function is used to determine whether the argument is an array.
 
jQuery.isEmptyObject()
The jQuery.isEmptyObject() function is used to check to see if an object is empty (in order words contains no properties).
 
jQuery.isFunction()
The jQuery.isFunction() is used to determine if the argument passed is a Javascript function object.
 
jQuery.isPlainObject()
The function jQuery.isPlainObject() is used to find if an object is a plain object (created using "{}" or "new Object").
 
jQuery.isXMLDoc()
The jQuery.isXMLDoc() function is used to find if a DOM node is within an XML document (or is an XML document).
 
jQuery.makeArray()
The function jQuery.makeArray() is used to convert an array-like object into a true JavaScript array.
 
jQuery.map()
The function jQuery.map() translates all items in an array or array-like object to another array of items.
 
jQuery.merge()
The function jQuery.merge() merge the contents of two arrays together into the first array.
 
jQuery.noop()
The jQuery.noop() is an empty function.
 
jQuery.parseJSON
The jQuery.parseJSON function takes a well-formed JSON string as parameter and then returns the resulting JavaScript object.
 
jQuery.proxy()
The jQuery.proxy() function Takes a function and returns a new one that will always have a particular context.
 
.queue()
It shows the queue of functions to be executed on the matched elements.
 
jQuery.queue()
It shows the queue of functions to be executed on the matched element.
 
jQuery.removeData()
This function is used to remove a previously-stored piece of data.
 
jQuery.support
Properties of the Global jQuery Object.
 
jQuery.trim()
It is used to remove the whitespace from the beginning and end of a string.
 
jQuery.unique()
The jQuery.unique() function sorts an array of DOM elements, in place, with the duplicates removed.
In this we have studied how to use jQuery functions.

1 comment:

Subscribe to: Posts (Atom)