JQuery FAQS

What is the significance of val() method and text() method using jQuery?

The text() method as the name suggests, returns string that contains the text contents of all matched elements.
This method can be applied for both HTML and XML documents.

Note : text() cannot be used for input elements. For input field text , we need to use the val() method.
It is also used to Set the text contents of all matched elements.
$(“#ddlID”).text() – gets text of all the items inside the dropdown id ddlID
$(“.classdefine”).text() = gets text of all elements with clas classdefine
$("p").text() – gets text inside element Paragraph. It can be same applied to all elements except input text field.

What is the significance of jQuery.NoConflict?

If we are referring any other script files along with jQuery you may get conflicts in the namespace. Some times if we use jQuery with any other libraries, we may get clash between two libraries and we encounter situations like neither of the functionality works.

Important thing to keep in mind is , when we call .noConflict() jQuery will return $() to it’s previous owner .So we need to use jQuery() instead of $() function.

The following example illustrated how to use no conflict . This can be used in cases “where one script works with out the other and will not work when both the scripts are combined”.

<html>
<head>
   <script src="xxx.js"></script>
   <script src="jquery.js"></script>
   <script>
   jQuery.noConflict();

   // Use jQuery via jQuery(...)
   jQuery(document).ready(function(){
   jQuery("div").hide();
   });

   //can Use Prototype with $(...), etc.
   $('id').hide();
   </script>
</head>
<body></body>
</html>

The jQuery library and all plugins are within the jQuery namespace. But "global" objects are stored inside the jQuery namespace . so It is usual to get namespace clash between jQuery and any other library or plug-in. $ is just short cut for jQuery. Hence overriding $ function will work.

You can also assign in another variable and use it in the application like this as shown below.

<html>
<head>
   <script src="xxx.js"></script>
   <script src="jquery.js"></script>
   <script>
   var $j = jQuery.noConflict();

   // Use jQuery via $j(...)
   $j(document).ready(function(){
   $j("div").hide();
   });

   // Use Prototype with $(...), etc.
   $('someid').hide();
   </script>
</head>
<body></body>
</html>

How can you select various HTML Elements using jQuery?

jQuery can be used to select HTML elements using element selector. Below are some of the examples of how to use selectors.

$(<’element>’) - Selects all elements with the given tag name.
$(‘p’) – Selects all Paragraph Elements
$(‘a’) – Selects all Anchor tags in side a web page
$(‘I’) - Selects all Italic tags in the webpage
$(‘input[type=text]’) – Selects all textboxes in side a webpage

After selection we can call methods .

Selecting multiple elements
$(‘p,a,div,span’) – Selects all p, a, div, span elements in the web page.
<script>$("p").after( $("b") );</script>
The above script selects all p and makes the content after <p> tag as bold.

Selecting all the elements
$(‘*’) – This will select all html elements in web form

What are jQuery Class Selectors and ID selectors Explain them?

Class Selector (.)

A class selector is to identify class to search for. An element can have multiple classes. There is no restriction. Operations are applied based on the class that matches.

$(.demo) – Selects all elements in side a web page with the class demo

Example of using class Selector

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div class="beyondrelational"> This is Div using class selector </div>
<p class="beyondrelational"> This is P using class selector </p>

<script>$(".beyondrelational").css("border","8px solid blue");</script>
</body>

</html>

ID Selector (#)

An element can be selected or indentified based on id. It Matches a single element with the given id attribute.

$('#EmpNo) - Selects an element with the ID EmpNo in the web page.

Example of using ID Selector

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>

<body>
<div id="beyondrelational"> This is Div class using ID selector </div>
<script>$("#beyondrelational").css("border","8px solid blue");</script>
</body>
</html>

Selecting class and ID Selectors at a time (Multiple selectors)

$("#SelectId, .ClassName")

The above selector syntax selects all elements with id SelectId and the class ClassName.

We can also select elements in webform directly using jQuery

What are jQuery Selectors? Explain them?

A Selector identifies an HTML element tag that is used to manipulate with jQuery code.

Selectors allow page elements to be selected. $ is the symbol used for it.
$ can also be called as jQuery selector. Selectors are the most important part of the jQuery , we can say that heart of jQuery.

We can select single (using id selectors) or multiple elements using class or element selectors
Selectors find DOM Elements to manipulate based on CSS Selector syntax
Selectors can find the elements by ID, class, Element Name and hierarchical positioning .
Selectors can return sequence of DOM elements , and we can use methods or logic on every matched element.

Selectors syntax can be in either of following 2 ways :

$(Selector Expression)

or

jQuery(Selector Expression)

jQuery has different types of selectors
1. Class Selectors
2. ID Selectors
3. Element Selectors

What is difference between jQuery and Microsoft Ajax? When do you use Ajax and When do you use jQuery? What is the significance of each?

jQuery is like the ASP.NET AJAX Client Framework (MicrosoftAjax.js), with selectors, DOM selections/ manipulations, plug-ins, and better animation support. jQuery is more powerful than MS AJAX on the client side due to its light weight nature . This is the reason Microsoft integrated jQuery with Visual Studio. JQuery is integrated for post VS versions 2008, no explicit download of jQuery file is required for the versions above VS2010.
Ajax is a Technology for Asynchronous Data Transferring. AJAX is a technique to do an XMLHttpRequest from a web page to the server and send or receive data to be used on the web page.

jQuery can be used
If you love and comfortable with JavaScript
Most interaction is client-side only
If a custom solution is required
For stunning look and feel of client side UI
If animations ,DOM Selection are required

Ajax can be used
If you are using ASP.NET & VS
When server side Integration is required.
If you need json and WCF Support
Conclusion

jQuery and Ajax often used in conjunction with each other for better results.
jQuery is used to modify data on the webpage dynamically and it can use AJAX to retrieve data that needs without changing the current state of the displayed page through partial post backs

Playing with CSS in jQuery – How to work with CSS in jQuery?

How can we apply css to elements using JQuery library.

The below example is to apply css on div element that has id itself as DivId.

$(”#DivId “).css(”border”,”4px red”);

To apply css in odd childs of parent node using JQuery library.

$(”tr:odd”).css(”background-color”, “#bbbbff”);

To apply css in even childs of parent node using JQuery library.

$(”tr:even”).css(”background-color”, “#bbbbff”);

To apply css in last child of parent using JQuery library.

$(”tr:last”).css({backgroundColor: ‘yellow’, fontWeight: ‘bolder’});

Now How can we modify css class using JQuery library?

Suppose that Css class has following definition

.class

{

font-size:10px;

font-weight:normal;

color:#000000;

}

Now if we are interested to add border property on above class, so we should follow below code.

$(“.class”).css(“border”,”1px solid blue”);

Where $(“.class”) name of css class. Now .class will automatically add border property in his class definition.