Question: What is jQuery?
Answer: jQuery is a fast, lightweight and feature-rich client-side JavaScript Library/Framework that helps in to traverse the HTML DOM, make animations, add Ajax interaction, manipulate the page content, change the style and provide cool UI effect. It is one of the most popular client-side libraries.
Question: How are JavaScript and jQuery different?
Answerwer: JavaScript is a language while jQuery is a library built in the JavaScript language that helps to use the JavaScript language.
Question: Which is the starting point of code execution in jQuery?
Answer: The starting point of jQuery code execution is $(document).ready () function that is executed when the DOM is loaded.
Question: Document Load Vs Window.Load() jQuery
Answer: Kindly have a look at the detailed video demonstration as shown below:
Document Load Vs Window.Load() jQuery
The $(document).ready() function is different from the body window.load() 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.
The document.ready() function is called as soon as the DOM is loaded where the body.onload() function is called when everything is loaded on the page that includes the DOM, images and all associated resources of the page.
Question: What is the difference between prop and attr?
Answer:
JQuery.attr()
Get the value of an attribute for the first element in the set of matched elements.
Whereas:
JQuery. Prop ()
Gets the value of a property for the first element in the set of matched elements.
What Attributes actually are
Attributes carry additional information about an HTML element and come in name=”value” pairs. You can set an attribute for a HTML element and define it when writing the source code.
For example:
<input id="txtBox" value="Jquery" type="text" readonly="readonly" />
As shown above, “id”, "type” and “value" are attributes of the input elements.
Property
Property is a representation of an attribute in the HTML DOM tree. Once the browser parses your HTML code, the corresponding DOM node will be created that is an object thus having properties.
In the above case, once the browser renders the input in the browser, other properties like align, alt, autofocus and baseURI are checked and so on, will be added as depicted in the following image.
![]()
Since attr() gives you the value of an element as it was defined in the HTML on page load. It is always recommended to use prop() to get the values of elements modified via JavaScript/jQuery in the browser at rumtime. It always keeps the current state value.
Here we'll have a look at the example that also states the difference between both of them.
I have a HTML text box with some attributes as shown below:
![]()
If I run the following jQuery syntax then it will produce such results.
![]()
Now I've slightly changed the code and removed the read-only attribute as shown below in the image:
![]()
I run the application and see some attribute and property to understand the difference on fly.
Initially after running the application we have these attributes and properties of input text type as depicted in the image below.
Note: Kindly scroll down when you run the attached sample application to see the Value property using the Firebug tool of the Firefox browser.
![]()
Now I changed the value at runtime and see the attributes and properties. I've put Welcome jQuery in the textbox. Now see that the attribute value is still jQuery while the value property has been changed to Welcome jQuery.
![]()
The property always represents the current state while the attribute (except in old versions of IE) represents the initial state or is meant for HTML attributes since they are strictly defined. The attribute tells you nothing about the current state.
Reference MSDN:
for a checkbox (jquery 1.6+)
<input id="check1" checked="checked" type="checkbox" />
.attr('checked') //returns checked
.prop('checked') //returns true
.is(':checked') //returns true
Prop() method returns Boolean value for checked, selected, disabled, readOnly..and so on while attr returns defined string. So, you can directly use .prop("checked") in if condition.
SelectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected..and so on should be retrieved and set with the .prop() method. These do not have corresponding attributes and are only properties.
.attr() calls .prop() internally so .attr() method will be slightly slower than accessing them directly through .prop().
Question: What is the difference between .js and .min.js and vsdoc.js?
Answer: The jQuery library comes in the 2 versions Production and Deployment. The deployment version is also known as the minified version. So .min.js is basically the minified version of the jQuery library file. Both the files are the same as far as functionality is concerned. but .min.js is quite small in size so it loads quickly and saves bandwidth.
![]()
Question: How to select id that contains Meta Character.
Answer: If any element id (<li id="first-li" class="list">Sachin Kalia</li>) contains a meta character between the id then it should be resolved using the two backslashes (\\) as the prefix in the ID selector.
![]()
Thanks.
Keep coding and Smile.