Found 766 Articles for JQuery

In this article, we are going learn how CSS classes can be manipulated in HTML using jQuery. Using jQuery, it is easy to manipulate the style of HTML elements. We have several jQuery methods that are used to manipulate the CSS. Let us discuss them one by one with suitable examples. jQuery addClass() Method The jQuery addClass() method is used to add one or more classes to the selected elements. Syntax Following is the syntax of jQuery addClass() method − $(selector).addClass(classname); The "classname" is a required parameter. It specifies one or more class names to be added. Example ... Read More

In this article, the task is to create a paragraph element with some text and append it to end of document body using jQuery. Using jQuery, it is easy to add new elements/content in a particular position inside an HTML document. We have four methods that are used to add new content: append() − This method adds the content at the end of selected elements. prepend() − This method adds the content at the beginning of selected elements. after() − This method adds the content after the selected elements. before() − This method adds the content before the selected ... Read More

In this article, we will learn how to dynamically set the height and width of a div element using jQuery and its methods such as height() and width(). In web development, there are often scenarios where you need to dynamically adjust the height and width of a element based on certain conditions or user interactions. We can do this easily using jQuery, a popular JavaScript library. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will dynamically set the height and width of a div container, when the document is ... Read More

In this article, we will learn how to dynamically add or remove table rows using jQuery, a popular JavaScript library, with the help of the click event listeners. Tables are a commonly used element in web development, especially when dealing with tabular data or dynamic content. Adding or removing table rows dynamically can be a powerful feature that allows users to interact with the data in real time. Let’s understand how to implement this with the help of some examples. Example 1 In this example, we will have an HTML table element with some row data in it. ... Read More

In this article, we will learn how to display the tag name of the clicked element using jQuery, and with the help of click event listeners. jQuery is a popular JavaScript library that makes it easy to manipulate HTML elements on a web page or listen to user actions like click events and do some operation based on that action.. Let’s understand how we can achieve the above with the help of some examples. Example 1 In this example, we will add a heading, some text, and a list of items to the HTML document. And to display the ... Read More

In this article, we will learn how to display child row information using jQuery DataTables plugin. We will also provide some HTML code examples to illustrate the usage of this feature. jQuery DataTables is a powerful plugin that provides an easy way to display tabular data on a web page. It has a lot of features such as pagination, sorting, searching, etc. It also provides us with the DataTables plugin, which gives us the ability to display child row information, and consequently shows additional data related to each row. Now, let’s understand the feature with the help of some examples. ... Read More

In this article, we will learn how to disable the form submit behavior with the press of enter button using jQuery, and its element selector feature and “keypress” event listener. Form submission disabling can be useful in cases where it requires some validation on some input fields. For example, a form with the name and email required should not ideally have the submit button enabled until those required fields are provided with some values. In these types of cases, we can disable the form submission dynamically to achieve the desired outcome. Here, we will disable the form submission flow specifically ... Read More

In this article, we will learn how to disable the browser autofill feature on input fields with the help of jQuery, and the “autocomplete” attributes provided by the “input” HTML tag. Browser autocomplete is a feature that suggests the past values entered and submitted into the forms. By default, autocomplete is enabled in the browsers, so when the user clicks on an input, the suggestions are visible for that input value, and the user can directly pick any of the suggestions to autofill the content. To disable this behavior, we will see 2 approaches that utilize the jQuery ... Read More

In this article, we will learn how to disable the ALT key using jQuery with the help of “keydown” and “keyup” event listeners, and the bind method. In web development, there might be scenarios where you want to disable certain keys on your web page. One such key is the ALT key, which is often used in combination with other keys to trigger specific actions or shortcuts. However, in certain cases, disabling the ALT key may be necessary to ensure the proper functioning of the application. Let’s understand this with the help of some examples − Example 1 In ... Read More

Making web pages mobile-friendly is a challenging task for the customs form control. jQuery gives us many options to perform the task conveniently. Since smartphones are very popular devices nowadays, it is important to be able to create custom form controls which visually appealing interfaces. jQuery library of JavaScript can help in building both responsive and engaging designs. In this article, we shall learn how to design form control for mobile using jQuery mobile Square-UI Theme plugin. Example This code demonstrates how to design mobile forms using the jQuery Query Mobile Square-UI Theme plugin. We first included the necessary libraries ... Read More