Top 5 jQuery books for Beginners and Web developers - Best of lot

jQuery is an open-source JavaScript library, which has completely changed the way, client-side web development was done using HTML, CSS, and JavaScript. With the growing popularity of jQuery, it becomes imperative for web developers to learn and take advantage of jQuery, and books are one of the best ways to learn jQuery. In this article, I am going to share your top 5 jQuery books from my personal collection, which I have looked at and researched before purchasing my first book on jQuery, Head First JQuery. Since I like to follow one book at a time, I didn't bother to look into another must-read book, JQuery in Action, until I have finished formerly.

Top 5 FREE eBooks to Learn jQuery Online or download PDF

Hello guys, Everybody loves free resources, don't you? Well, I do and that's why I am always in search of good free resources like eBooks and training courses. In the last article, I have shared some of the free JavaScript books and this time I am sharing a couple of good free eBooks to learn jQuery. JQuery is one of the most important skills in today's internet world. It is the JavaScript library that has changed the face of websites, they are now more interactive and smooth than ever before. The Internet is also not short of free resources and when it comes to learning jQuery, you will find thousands of articles and tens of eBooks, but not all resources are good. Some of them are not up-to-date and many of them contain incorrect information, hence choosing a good resource is vital.

3 Ways to Solve jQuery - Uncaught ReferenceError: $ is not defined Error

If you are using jQuery, Angular JS, or plain old JavaScript and getting "Uncaught ReferenceError: $ is not defined" error which means $ is either a variable or a method that you are trying to use before declaring it using the var keyword. In jQuery, it's a short name of jQuery() function and most commonly used in $(document).ready(function()). If you are doing some jQuery stuff when DOM is loaded and getting this error it means your browser has a problem loading jQuery library either from the internet or local file system.

6 ways to get the selected text from html drop down list in jQuery?

One of the common task in web development is retrieving the selected text from a drop down list, which is nothing but HTML select element. This allows users to choose one of the options presented, each text is enclosed in option tag. how can we retrieve the selected text using jQuery? Well, there are multiple ways but core is first find the select element than the selected option by using :selected pseudo class selector. 

How to get the selected radio button on click using jQuery? Example

In last couple of articles, you have learned how to get all checked checkbox and how to find the unchecked checkbox using jQuery, let's see another similar example, this time with radio button. Suppose, in form you have two radio buttons to select the gender i.e. male and female. How do you find which radio button was selected when user clicked on them? well, we will use the jQuery selector to find that. In fact, its not much different than what you have used to find the checked checkbox i.e. $("input[type=radio]:checked") will give the selected radio button. In order to find the chosen radio button when user click, you need to bind a click handler. Let's see an example. 

How to enable/disable form elements using jQuery? Examples

In last couple of tutorials you have learned how to get all selected checkbox and radio buttons, and in this tutorial, you will learn how to enable/disable form elements using jQuery. A form element e.g. a textfield, radio buttons and checkbox, all represented using input tag can be enabled or disabled by adding an attribute called "disabled". It's similar to "checked" attribute we have seen for checkbox and radio buttons. If this attribute is not present then element is enable, but if this attribute is present then you can use disabled=true to disable the form element and disabled=false to enable the form elements as shown in our example. 

How to get the selected radio button on click using jQuery? Example Tutorial

In last couple of articles, you have learned how to get all checked checkbox and how to find the unchecked checkbox using jQuery, let's see another similar example, this time with radio button. Suppose, in form you have two radio buttons to select the gender i.e. male and female. How do you find which radio button was selected when user clicked on them? well, we will use the jQuery selector to find that. In fact, its not much different than what you have used to find the checked checkbox i.e. $("input[type=radio]:checked") will give the selected radio button. In order to find the chosen radio button when user click, you need to bind a click handler.

How to show and hide a div using jQuery? show(), hide(), and toggle() function Example

So, you have a div element and you want to show or hide them may be on a click or during page load, how do you do that in jQuery? Well, jQuery provides convenient show() and hide() methods which can show or hide an element, including div. All you need to do is, write a jQuery selector to find the div you want to show or hide and then call jQuery function show() or hide() depending upon your requirement. You can also use the toggle() function to switch between showing and hiding. This method will make element visible if its hidden and vice-versa. To select the div you can use either element, id or class selector but I recommend to use the ID selector because it will work even if you have multiple div in your page. 

Top 20 jQuery Interview Questions and Answers for 1 to 3 Years Experienced

Without a doubt, jQuery has given a much-needed boost to JavaScript, a language so useful but equally underrated at times. Before jQuery comes into the picture, we used to write lengthy JavaScript code not just for bigger but even for smaller functions. Those codes were at times both difficult to read and maintain. Having written JavaScript before using this excellent library, I realized the true power of jQuery, just after using it for a month. Given its huge popularity, jQuery interview questions are increasingly asked in any web developer interview, not just beginners but also experienced developers, including HTML and JavaScript.

How to dynamically create a div in jQuery? Example

Many times you need to create an HTML element and dynamically add that into DOM without reloading the page. The traditional way of doing this is by using JavaScript's innerHtml() function but jQuery provides better ways to achieve the same effect. You can use jQuery DOM manipulation methods like append(), appendTo() or html() to add new HTML elements like div, paragraph, headings, image into DOM without reloading the page again. In this tutorial, I will show you how to dynamically create a div and add that into a page by using pure jQuery.

How to enable/disable an element using jQuery and JavaScript? Example

Sometimes we need to enable and disable input elements like text box, radio buttons, or checkboxes, but every time you make a change you need to reload the HTML? The question is, how can we do it dynamically without loading the page? Well, we can use JavaScript, particularly jQuery to do this. An element can be disabled in HTML by setting disable property to true and enabled again by setting disabled=false. By using jQuery, you can grab the element you want to enable or disable and change this property by using the prop() or attr() function, depending upon the version of jQuery you are using.

Difference between jQuery Document Ready Method and JavaScript Window Onload Event

Though both jQuery ready event and window onload event is used to perform task when page is loaded, there is a subtle difference between them. jQuery document.ready method, which is not method but a jQuery event is fired, when DOM is ready i.e. all elements of DOM is available, but not necessarily all contents e.g. images and video, on the other hand, JavaScript built-in window.onload event is fired when the HTML document is completely loaded, including DOM and all it's content e.g. images, audio and videos.

How to check if Checkbox is checked in JQuery? Example Tutorial

Hello guys if you are wondering how to check if a checkbox is checked using jQuery then you have come to the right place. Earlier, I have shared, how to check/uncheck checkbox or how to find all unchecked checkboxes using jQuery and in this article, I will share how to check if a particular checkbox is checked or not. While working in Java web application front end, written using JSP, HTML, CSS, and JavaScript, we often need to check status of checkbox e.g. whether a particular checkbox is checked or not? One example of this is checking is checking, whether user has accepted terms and conditions before submitting form. Thankfully, JQuery provides a nice and easy way to find status of checkbox. 

How to use jQuery Class and Id Selector to find DOM elements? Example

One of the best things about jQuery is there selectors, which gives jQuery enormous power to find and select DOM elements so easily. If you are coming from JavaScript background then you might love those classical methods to find DOM elements like getElementById() and getElementByName(). They have served very well in the old days of JavaScript coding,  but once you start using jQuery selector, which is quite similar to CSS selector, I am sure you will forget them. Searching and finding HTML elements using jQuery selectors are natural, intuitive, and super easy and that's why I love them.

How to reload/refresh a page using JavaScript and jQuery? Example

Hello guys, if you are wondering how to reload or refresh a web page then don't worry JavaScript provides several ways to reload or refresh an HTML page but the standard way to do this job is by using window.location object. This object provides a reload() method which instructs the browser to reload the page. The browser can do it from its cache or from the server, which depends upon optional parameter i.e. reload(true) will reload the page from the server but reload(false) will only reload the page from the browser's cache, which may or may not represent the current version at the server.

How to redirect a page or URL using JavaScript and JQuery - Example

Redirecting a web page means, taking the user to a new location. Many websites uses redirects for many different reasons, e.g. Some websites redirect users from the old domain to new domain, some redirect from one page to another e.g. a more relevant page. If you are a Java programmer and worked previously with Servlet and JSP, then you might be familiar with SendRedirect and Forward methods, which are used to redirect users in web applications. Actually, there are two kinds of redirect, Server side redirect, and client-side redirect. In Server side redirect, the server initiates redirection, while in a client-side redirect, the client code does the redirection. Redirecting a web page using JavaScript and JQuery is a client-side redirection.

jQuery Tutorial - How to modify multiple HTML elements in one line? Example

jQuery allows you to modify multiples elements in one go, you can modify attributes, text, or color of multiple HTML elements by executing just one line of jQuery code. In this jQuery tutorial, I will show you how to modify multiple <li> elements in one go. In our example, we have a couple of <li> tags to display sub-headings, now we will change them in one go using jQuery. If you look at our HTML, we have an ordered list <ol> to display the top 10 programming languages, each of them is an <li> item. We also have one button, "Click Me", which will when clicked, change all <li> item's text to "jQuery is the new Boss". Here is the jQuery code, which does that.

7 jQuery Selectors Examples for Beginners - Tutorial

jQuery selectors are like CSS Selectors, which allow you to find or select an element from the DOM tree. When HTML pages loaded in a browser like Chrome, Firefox, or Internet Explorer, the browser creates a tree-like structure is known as Document Object Model or DOM. JavaScript and jQuery allow you to play with this DOM i.e. selecting elements from DOM, traversing through DOM, going from one element to another, selecting a list of elements from DOM, adding or removing elements from DOM, etc.

How to find all unchecked checkboxes from a page using jQuery? Example Tutorial

Hello guys, In the last tutorial, you have learned how to get all the checked checkboxes from a page using jQuery, but sometimes you also need all the checkboxes which are not selected. In this tutorial, you will learn that. If you remember, we have used the:checked pseudo selector to get all checked checkboxes, but, unfortunately, there is nothing like the :unchecked selector in jQuery, so using that will result in the syntax error. Even the!:checked or :!checked will not work, instead, you need to use not() jQuery selector, which does the negation job.

How to get Id of an HTML and DOM object in jQuery? Example Tutorial

As a page author, the id of an HTML element is something you should know. Still, there are scenarios when the page is automatically generated, or maybe some form elements are generated by using frameworks like JSF. In that case, what do you do if you want to find an id attribute of some elements in the page programmatically? How do you find those ids using jQuery? There are several ways to solve this problem, a couple of them in this article itself.  The jQuery API provides many methods to get any attribute or property, including the id of an HTML element programmatically.