code-sample.com: jQuery concepts

Questions : 1 What is jQuery ?

Answers : 1 It's very simple but most valuable Question on jQuery means jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Jquery is build library for javascript no need to write your own functions or script jquery all ready done for you.

Questions : 2 How you will use Jquery means requirement needed for using jquery Answers : 2

Nothing more need to do just olny download jquery library(.js file) from any of the jquery site Download jquery and just linked with your html pages like all other javascript file

like below :
< script src="jquery.js" language="javascript" type="text/javascript">

Questions : 3 what the use of $ symbol in Jquery Answers : 3

$ Symbol is just replacement of jquery means at the place of $ you may use jquery hence $ symbol is used for indication that this line used for jquery

Questions : 4 How do you select an item using css class or ID and get the value by use of jquery
Answers : 4 If an element of html like < div> , < p> or any tag have ID MyId and class used MyClass then we select the element by below jquery code

$('#MyId') for ID and for classs $('.MyClass') and for value

var myValue = $('#MyId').val(); // get the value in var Myvalue by id
Or for set the value in selected item

$('#MyId').val("print me"); // set the value of a form input

Questions : 5 How to get the server response from an AJAX request using Jquery?
Answers : 5

When invoking functions that have asynchronous behavior We must provide a callback function to capture the desired result. This is especially important with AJAX in the browser because when a remote request is made, it is indeterminate when the response will be received.

Below an example of making an AJAX call and alerting the response (or error):

$.ajax({

url: 'pcdsEmpRecords.php',

success: function(response) {

alert(response);

error: function(xhr) {

alert('Error! Status = ' + xhr.status);

}

});

Questions : 6 How do you update ajax response with id " resilts"
Answers : 6

By using below code we can update div content where id 'results' with ajax response

function updateStatus() {

$.ajax({

url: 'pcdsEmpRecords.php',

success: function(response) {

// update div id Results

$('#results').html(response);

}

});

}

Questions : 7 How do You disable or enable a form element?
Answers : 7

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 #x

$("#pcds").removeAttr('disabled');

Questions : 8 How do you check or uncheck a checkbox input or radio button?
Answers : 8

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');

Questions : How do you get the text value of a selected option?

Answers :
Select elements typically have two values that you want to access. First there's the value to be sent to the server, which is easy:

$("#pcdsselect").val();

// => 1

The second is the text value of the select. For example, using the following select box:

</select>

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:

$("#mpcdsselect option:selected").text();

// => "Mr"

What is Jquery?

JQuery is Java Script library or Java Script Framework which helps in how to traverse HTML documents, do some cool animations, and add Ajax interaction to any web page. It mainly helps programmer to reduce lines of code as huge code written in Java Script, can be done easily with JQuery in few lines.

What does dollar Sign ($) means in JQuery?

Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code

$(document).ready(function(){

});

Over here $ sign can be replaced with "jQuery " keyword.

jQuery(document).ready(function(){

});

How is body onload() function is different from document.ready() function used in jQuery?

Document.ready() function is different from body onload() function because off 2 reasons.

1. We can have more than one document.ready() function in a page where we can have only one onload function.

2. 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.

What are the steps you need to follow to use jQuery in ASP.Net project?

It's really simple. One just need to add reference of javascript file(.js). Go to Jquery.com and download the latest version of jQuery. When download is completed, there is a "jQuery-1.3.2.js" in the folder. Include this file

and you good to go now for JQuery.

What is JQuery UI?

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 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

Name some of the methods of JQuery used to provide effects?

Some of the common methods are :

1. Show()

2. Hide()

3. Toggle()

4. FadeIn()

5. FadeOut()

JQuery is replacement of Java Script?

What are the different type of selectors in Jquery?

There are 3 types of selectors in Jquery

1. CSS Selector

2. XPath Selector

3. Custom Selector

What are the advantages of JQuery ?

There are many advantages with JQuery. Some of them are :

. It is more like a JavaScript enhancement so there is no overhead in learning a new syntax.

. It has the ability to keep the code simple, readable, clear and reusable.

. It would eradicate the requirement for writing complex loops and DOM scripting library calls.

How can you select all elements in a page using jQuery?

To select all elements in a page, we can use all selectors, for that we need to use *(asterisk symbol).

$("*").css("border", "2px dotted red");

</script>

The above code will select all elements of the web page and apply border width as 2 pixel, style as dotted and color as red.

What is jQuery?

jQuery is not a language but it is a well written JavaScript code, As quoted on official jQuery website “it is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.“

In order to work with jQuery you should be aware of basics of JavaScript, HTML and CSS.

Why jQuery?

jQuery is very compact and well written JavaScript code that increases the productivity of the developer by enabling them to achieve critical UI functionality by writing very less amount of code.

It helps to

# Improve the performance of the application

# Develop most browser compatible web page

# Implement UI related critical functionality without writing hundreds of lines of codes

# Fast

# Extensible – jQuery can be extended to implement customized behavior

Other advantages of jQuery are

# No need to learn fresh new syntax's to use jQuery, knowing simple JavaScript syntax is enough

# Simple and Cleaner code, no need to write several lines of codes to achieve complex functionality.

Where to download jQuery from?

jQuery javascript file can be downloaded from jQuery Official website

How to use jQuery?

jQuery usually comes as a single JavaScript file containing everything comes out of the box with jQuery. It can be included within a web page using the following mark-up:

To load local jQuery file

What is jQuery.noConflict()

jQuery is great library written on top of Java Script and its popularity is increasing day by day.The reason of popularity of jQuery is the plenty of useful, simple and easy to use plugins. But while using jQuery plugins, sometimes we include other libraries like prototype, mootools, YUI etc. The problem comes when one or more other libraries are used with jQuery as they also use $() as their global function and to define variables. This situation is creates conflict as $() is used by jQuery and other library as their global function. To overcome from such situations, jQuery has introduced jQuery.noConflict().

How to use it?

jQuery.noConflict();

// Use jQuery via jQuery(...)

jQuery(document).ready(function(){

jQuery("div").hide();

});

// Use Prototype with $(...), etc.

$('someid').hide();

</script>

When .noConflict() is called then jQuery returns $() to its previous owner and you will need to use jQuery() instead of shorthand $() function. In this case, "jQuery" will be used in rest of the code. You won't be able to take advantage of shorthand.

There is another option if you want to take advantage of shorthand.

var $j = jQuery.noConflict();

// Use jQuery via jQuery(...)

$j(document).ready(function(){

$j("div").hide();

});

// Use Prototype with $(...), etc.

$('someid').hide();

</script>

But you still love $() and don't want to lose it. So what to do? But there is a solution for this also.

jQuery.noConflict();

// Put all your code in your document ready area

jQuery(document).ready(function($){

// Do jQuery stuff using $

$("div").hide();

});

// Use Prototype with $(...), etc.

$('someid').hide();

</script>

What you need to do is in jQuery(document).ready() put function($) and now you use $ for your jQuery code.

Is window.onload is different from document.ready()

window.onload() is traditional Java script code which is used by developers from many years. This event is gets called when the page is loaded. But how this is different from jQuery document.ready() event?

Well, the main difference is that document.ready() event gets called as soon as your DOM is loaded. It does not wait for the contents to get loaded fully. For example, there are very heavy images on any web page and takes time to load. If you have used window.onload then it will wait until all your images are loaded fully, hence it slows down the execution. On the other side, document.ready() does not wait for elements to get loaded.

How to use jQuery Selectors with Examples

To work with an element on the web page, first we need to find them. To find the html element in jQuery we use selectors. jQuery provides many selectors out of the box. Let me explain some of the very useful selectors in “how to” ways.

How to select all elements of the page? - All Selector (“*”)
To select all elements of the page, we can use all selectors, for that we need to use *(asterisk symbol).

$("*").css("border", "5px dashed green");

</script>

Above code will select all elements of the web page and apply border width as 5 pixel, style as dashed and color as green.

How to select a particular element having a specific class? - Class Selector (“.class”)
To select an element with a specific class, class selector can be used. We need to prefix the class name with “.” (dot).

$(".class1").css("border", "5px solid green");

</script>

Above code will select all elements of the web page having class as “class1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select all elements of specific type? - Element Selector (“element”)
To select all elements of specific type, we can use element selector. We need to use the html tag name.

$("p").css("border", "5px solid green");

</script>

Above code will select all p (paragraph) elements of the web page and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element having a specific id - ID Selector (“#id”)
To select an element having a specific id, id selector can be used. We need to prefix the id with “#” (hash symbol).

$("#p1").css("border", "5px solid green");

</script>

Above code will select all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select multiple elements at a time? Multiple Selector (“selector1, selector2, selectorN”)
To select multiple elements having different attributes, multiple selector can be used. We can mix the class selector, element selector, id selector all in this selector separated by “,” (comma).

$("p.class1, #p1").css("border", "5px solid green");

</script>

Above code will select all paragraph (p) having class attribute set as “class1” and all html elements having id attribute as “p1” and apply css style border width as 5 pixel, style as solid and color as green.

How to select an element based on its attribute - Attribute Selector (element[‘attribute$=“name”]’)
To select an element based on a particular attribute value, attribute selector can be used. For example, if we have multiple textboxes on the page but we want to select all the textboxes which ends with id as “txtName”, we can use attribute selector.

$('input[id$="txtName"]').val('My data');

</script>

Above code snippet will select the textboxes having id ending with “txtName” and set its value as “My data”.

Notice that as against all other selectors, this selector is written in the single quote (‘) instead of double quote (“) however the attribute value is written in the double quote (“).

How to select the first child of the parent element? - First child selector
To select first child of the parent element first child selector can be used.

$("#div2 p:first-child").css("background", "red");

</script>

Above code snippet will select the first paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select last child of the parent element? – Last child selector
To select the last child of the parent element last child selector can be used.

$("#div2 p:last-child").css("background", "red");

</script>

Above code snippet will select the last paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

How to select a specific child of the parent element? nth child selector
To select the specific child of the parent element nth child select can be used.

$("#div2 p:nth-child(2)").css("background", "red");

</script>

Above code snippet will select the 2nd paragraph (p) element that is inside the div element whose id is “div2” and will change the background color as red.

width() vs css('width') and height() vs css('height')

jQuery provides two ways to set width and height of any element. You can set using css or you can use jQuery provided methods. If you want to set width to 100px then

1	$('#dvText1').css('width','100px');

1	$('#dvText2').width(100);

Then what is the difference?

The difference lies in datatype. As its clear in code that with css method you need to append 'px' to the width value and with width you don't need to specify.

When you want to read width of any element then css method will return you string value like '100px' while width will return an integer value.

1	alert($('#dvText1').css('width'));

This return '100px'.

1	alert($('#dvText2').width());

This returns 100.

The same difference is with height and css('height').

 Is jQuery a library for client scripting or server scripting?
Ans: Client scripting

 Is jQuery a W3C standard?
Ans: No

 What are jQuery Selectors?
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.

 The jQuery html() method works for both HTML and XML documents?
Ans: It only works for HTML.

 Which sign does jQuery use as a shortcut for jQuery?
Ans: $(dollar) sign.

 What does $("div") will select?
Ans: It will select all the div element in the page.

 What does $("div.parent") will select?
Ans: All the div element with parent class.

 What is the name of jQuery method used for an

code-sample.com

Tuesday, December 27, 2011

jQuery concepts

No comments: