Postingan

Menampilkan postingan dengan label JQuery

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

Gambar
One of the best things about jQuery is there selectors, which gives the 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. One of the first things to know about Id and Class selector is that ID selector always returns one element because browser doesn't allow duplicate ID and two HTML element can't have the same ID, which means if you just need to find just one element in DOM tree than best selector is ID selector. The jQuery Id selector is also the fastest way to find elements in jQuery. Now, if you need ...

How to find all Checked checkboxes in jQuery? Example Tutorial

Gambar
Hello guys, suppose you have multiple checkboxes in your HTML page and you want to retrieve all checkboxes which are checked? How will you do that in jQuery? Well, you can use the pseudo selector like :checked to get all checked checkboxes. This selector checks for the checked property of checkbox and returns only those checkboxes which have this property. For example, following jQuery selector will return all the checkboxes which are checked: $('input[type=checkbox]:checked') In this, we are first selecting all input elements where type is a checkbox and then adding: checked to filter only those which are checked. On the other hand, If you just use: $('input[type=checkbox]') All checkboxes will be selected, I mean,  both checked and unchecked. Remember, this returns an array of elements, so you need to use each() jQuery function if you want to do something with them like printing their value. Btw, if you are new into Web Development or maintaining a legacy project whi...

How to Check/Uncheck CheckBoxes in a Page using jQuery? Example Tutorial

Gambar
In the last couple of articles, I have shared a couple of useful jQuery tips likereloading web page and working with tag selectors. Today, I'll show you how to check or uncheck a particular checkbox using jQuery, one of the most popular JavaScript framework. jQuery provides CSS like selectors which can make this kind of task trivial. If you remember, in HTML a checkbox is checked if the "checked" attribute is present and its value is not false, otherwise, it's unchecked. By using jQuery function prop() you can dynamically add this attribute or if present we can change its value i.e. checked=true to make the checkbox checked and checked=false to mark the checkbox unchecked. Though you should remember that prop() function is only available from jQuery 1.6 version and if you are running on lower jQuery version then you can also use attr() to check/uncheck a particular checkbox. Some of you might question that should you learn jQuery now, Well, I think you should. Though ...

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

Gambar
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. The prop() function was added in jQuery 1.6 and its the standard way to deal with properties but attr() function does the same job for jQuery 1.5 and lower version so you can use attr() for the same purpose in jQuery version lower than 1.6. Btw, you can also enable or disable any HTML element e.g. input text field using plain old JavaScript. All you need to do is get the element by id and set its ...

How to use multiple JQuery UI Date Picker or Datepicker in HTML or JSP page

Gambar
We often needs to use multiple JQuery date picker in one HTML or JSP page, classical example is online flight booking for return trips, where you need to pick departure date and arrival date from two separate datepickers. While designing HTML forms either statically or dynamically using JSP, you may want to associate date picker with multiple input text field, paragraph or any other HTML elements. By using JQuery UI and some help from CSS ID and class selector, we can easily use multiple datepicker in one HTML page. All you need to do is, declare a CSS class say .datepicker and apply that class to all HTML elements which needs date picker, for example we have associated date picker with 4 input text fields, which has .datepicker class. By using a class, it becomes extremely easy to select all those element using JQuery class selector, and once you got all those element, you can just call datepicker() methods. This method does all the hard-work and associate a date picker object with s...

Difference between jQuery Document Ready Method and JavaScript Window Onload Event

Gambar
Though both jQuery ready event and window onload event is used to perform task when page is loaded, there is 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 complete loaded, including DOM and all it's content e.g. images, audio and videos. Because of this reason, you may see that scripting code defined in jQuery $(document).ready() executes before code defined on window.onload event, especially if loading of images take long time. By the way difference between JavaScript window onload event and jQuery document.ready event is also one of the popular jQuery Interview Question, asked to both beginners and experienced web developers. In this article, we will explore some key differences between jQuery ready vs onload and...

Top 5 FREE eBooks to Learn jQuery Online or download PDF

Gambar
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. There is also too much advice to use this book, to use that book, but you don't need that. All you need is a couple of good books on jQuery to learn and master this useful library. If you c...

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

Gambar
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. So, to select all the unchecked checkboxes, you can use the following jQuery selector code: $('input[type=checkbox]:not(:checked)') It first gets all input elements with type as the checkbox and then those for which checked property is not defined, i.e. all the uncheck checked boxes. You can also use the jQuery selector: $("input:checkbox:not(:checked)") but using input[type=checkbox] is faster and you should st...

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

Gambar
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. After finishing my first book on jQuery, I am quite comfortable with jQuery magic, which means doing things like DOM Selection, traversal, DOM manipulation based on aCSS selector, animation, and cool effects, and responding to user actions (event handling) in a couple of lines. In short, jQuery is powerful, yet easy to understand, ve...