Postingan

Menampilkan postingan dengan label HTML and JavaScript

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

10 Things Every Front-end Developers Should Learn in 2020

Gambar
Hello guys, first of all, I wish you all a very Happy New Year. May God bless you with wisdom, wealth, and health. If you are like me and many others, then you might be thinking about your goals and how to achieve them. If you are a web developer and wondering what you should learn in 2020 or someone who aspires to become a frontend developer in 2020 , but not sure about which technologies, tools, framework, languages, and libraries to learn, then you have come to the right place. In this article, I am going to share some of the most essential things a web developer should know. I often receive questions like what tools and technologies should a web developer learn? Which programming languages are suitable for web development, and what skills are necessary? I am going to answer all those questions from my reader in a series of blog posts, and this is the first one of them. In this article, I am going to share the most essential things a web developer should know , which obviously inclu...

Top 5 Books to Learn JavaScript in depth - Best of Lot, Must Read

Gambar
JavaScript is the most popular programming language in Web, way ahead of popular ones like Perl, Ruby, and Python. It is also one of the essential skills for any Web developer. It is even true for Java developers. If you have JavaScript in your resume or LinkedIn profile, you will likely receive many Job opportunities. Everybody wants polyglots, programmers who know multiple programming languages because most of the real-world projects are developed with multiple technologies, you will always found some component is written in Java, some in C++, then you have JSP, Server, jQuery, JavaScript, etc. for web pages and so on. In short, it's essential to learn JavaScript in today's competitive world. There are tons of books available to learn JavaScript in the market, you can even find a lot of free ebooks, PDFs that claim to teach JavaScript, but many of them are either not up-to-date or just contain necessary information without focusing on essential concepts required for developin...

Top 5 HTML 5 and CSS 3 Courses for Frontend Developers - Best of Lot

Gambar
Hello guys, if you are learning Web Development or thinking about becoming a Web Developer, then you have come to the right place. Earlier, I have shared the 2020 Web Developer RoadMap, and today, I'll talk about HTML and CSS and share some useful resources to learn them in depth. There are three pillars of Web Development, HTML, CSS, and JavaScript. HTML provides structure, CSS provides the style and JavaScript provides the interactiveness. The HTML stands for HyperText Markup Langauge, and it's one of the oldest technology I know. I first come to know about HTML in my college day, good 20 years back, when we are happy to see a list of heading in different colors. HTML has come a long way since then with HTML 5 bringing some of the cool features. The same goes for CSS, the stylish part of your web. It is as old as HTML but improved a lot. Nowadays, people prefer to use a CSS framework like Bootstrap rather than writing their own stylesheet from scratch. However, still, a goo...

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

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

Top 5 Programming Language to Learn in 2020 for Job, Career, and Future

Gambar
Hello guys, If you are thinking about which programming languages to learn in 2020 to get a job in a startup or doing some freelance work online as a developer, then you have come to the right place. In this article, I am going to list down some of the best programming languages for freelancers and programmers looking to get a Software developer job in startups. I have compiled this list by my own experience as a freelancer and also about reading many stories and recommendations of freelancers. These are also some of the best programming languages to get a job in startups where a quick turnaround is expected, and eventually on companies like Google, Facebook, and Microsoft. If you follow me, then you will be surprised to see that Java is not included in this list. Being a die-hard Java fan and having done more than 10 years of programming in Java, it was hard, but the ugly truth is that Java is not for freelancers and startups. Java is best if you want to get a job in big organizations...