Conversation

Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!

Join the discussion and share your insights now!

Comments 0

Sharpen your coding skills—try JavaScript challenges on TOOLX now!

advertisement

Why jQuery and jQuery Mobile Are Still Game-Changers in 2024

Profile Image

Zia

2 Followers

Aug 30, 2024
-
0 sec read
455
0
0
0

Introduction to jQuery❌

Find out why jQuery and jQuery Mobile are still important in 2024. These tools offer simple solutions and are perfect for making web development easier and faster.


JQuery

JQuery is a short and fast Javascript library developed by John Resig in 2006 with a wonderful slogan: Write less and do more. It simplifies the client-side scripting of HTML.

JQuery also simplifies HTML file animation, event handling, traversing, and developing AJAX-based Web applications. It helps with rapid Web application development. JQuery is designed to simplify several tasks by writing less code. The following are the key features supported by JQuery:

  1. Event Handling: jQuery has a smart way of capturing a wide range of events, such as a user clicks a link, without making the HTML code complex with event handlers.

  2. Animations: JQuery has many built-in animation effects that users can use while developing their websites.

  3. DOM Manipulation: jQuery easily selects, traverses, and modifies DOM using the cross-browser open-source selector engine Sizzle.

  4. Cross-Browser Support: jQuery has support for cross-browsers and works well with the following browsers:
    Internet Explorer 6 and above
    Firefox 2.0 and above
    Safari 3.0 and above
    Chrome
    Opera 9.0 and above

  5. Lightweight: jQuery has a lightweight library of 19 KB size.

  6. AJAX Support: jQuery helps you to develop feature-rich and responsive websites by using AJAX technologies.

  7. Latest Technology: jQuery supports basic XPath syntax and CSS3 selectors.


1. Using the jQuery Library:

There is an easy way to use the JQuery library. To work with JQuery perform the following steps:

  • Download the jQuery library from the http://jquery.com/ Website (Select jquery-3.7.1.min.js)
  • Place the jquery-3.7.1.min.js file in the current directory of the Website
  • Include the jQuery library in your code

How to use the JQuery library.

<!DOCTYPE HTML>
<html>
<head>
<script src="jquery-3.7.1.min.js"></script>
</head>
<body>
</body>
</html>



2. Calling jQuery Library Functions

Users can do many tasks while JQuery is reading or manipulating the DOM object. Users can add events only when the DOM object is ready. If the user wants the event on their page then the user has to call the event in the $(document).ready() function. All the content inside the event will be loaded as soon as the DOM is loaded but before the contents of the page are loaded. Users also register the ready event for the document. Place the jquery-3.7.2.min.js file in the current directory and specify the location of this file in the SRC attribute.

How to call the jQuery library function and ready events in the DOM.

<!DOCTYPE HTML>
<html>
<head>
<title>The jQuery Example</title>
<script src="jquery-3.7.2.min.js"></script>
<script>
$(document).ready(function() {
    $("div").click(function() {
        alert("Welcome to the jQuery world!");
    });
});
</script>
</head>
<body>
<div id="firstDiv">
Click on the text to view a dialog box.
</div>
</body>
</html>




jQuery Mobile


JQuery mobile is a Web User Interface (UI) development framework that allows the user to build mobile Web applications that work on tablets and smartphones. The jQuery mobile framework provides many facilities that include XML DOM and HTML manipulation and traversing. Performing server communication, handling events, image effects, and animation for Web pages. The basic features of jQuery Mobile are as follows:

  1. Simplicity: This framework is easy to use and allows developing Web pages by using markup driven with minimal or no JavaScript.

  2. Accessibility: The framework supports Accessible Rich Internet Applications (ARIA) that help to develop Web pages accessible to visitors with disabilities.

  3. Enhancements and degradation: The jQuery mobile is influenced by the latest HTML5, JavaScript, and CSS3.

  4. Themes: This framework provides themes that allow the user to provide their styling.

  5. Smaller size: The size of the JQuery mobile framework is smaller. For CSS, it is 6 KB and for the JavaScript library, it is 12 KB.


To create the jQuery mobile scripts, you have to download the library files from https://jquerymobile.com. Select the jquery.mobile-1.4.5.min.js file from the link.


<!DOCTYPE html>
<html>
<head>
<title>Car Rental</title>
<link rel="stylesheet" href="jquery.mobile-1.4.5.min.css" />
<script src="jquery-2.1.min.js"></script>
<script src="jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>Car Rental</h1>
    </div>
    <div data-role="content">
        <p>Choose from the listed car models:</p>
        <ul data-role="listview" data-inset="true">
            <li><a href="#">Ford</a></li>
            <li><a href="#">Ferrari</a></li>
            <li><a href="#">BMW</a></li>
            <li><a href="#">Toyota</a></li>
            <li><a href="#">Mercedes-Benz</a></li>
        </ul>
    </div>
    <div data-role="footer">
        <h4>&copy; Drive Cars 2021</h4>
    </div>
</div>
</body>
</html>

The jQuery mobile application should have the following three files:

  • CSS file
  • JQuery library
  • JQuery Mobile library

In the code, three files are included namely CSS (jguery.mobile-1.4.5.min.css), jQuery library (jquery-2.1.min.js), and the jQuery mobile library (jquery.mobile-1.4.5.min.js).

JQuery Mobile takes HTML tags and renders them on mobile devices. To work with this, HTML has to make use of data attributes. JQuery uses these attributes as indicators for rendering them on Web pages. JQuery also looks for div using particular data-role values such as page, content, header, and footer are used in this code. There are multiple div blocks added to the code for page, content, header, and footer. Similarly, to display different car models, a data-role list view is added to enhance the look and feel of the mobile Web page.

Users can test jQuery mobile code by using the Chrome Devtools feature of the Google Chrome browser.

Steps to view the output of jQuery mobile code on Chrome are as follows:

  • Launch the Website in the Google Chrome browser.
  • Open DevTools by pressing F12. You will see different tools available.
  • Click the Toggle Device toolbar icon present in the Tools list.
  • Click the Responsive drop-down on the left of the screen to choose a mobile device to simulate.


jquery jquery mobile features of jquery using the jquery library calling jquery library functions what is jquery mobile features of jquery mobile what is jquery and jquery mobile what is jquery in web development why jquery and jquery mobile are still game changer in 2024

advertisement

Profile Image

Published by: 

2 Followers

Zia

Zia, founder and CEO of Texvn and Toolx, is a passionate entrepreneur and tech enthusiast. With a strong focus on empowering developers, he creates innovative tools and content, making coding and idea generation easier.

More From: 
Zia
pacakges in dart
Packages and their usage in...

A package in Dart is a set of organized files that can ...
Profile Image
Zia
Jun 11, 2024
547
0
0
0
datepicker and timepicker in flutter
The DatePicker and TimePicker Widget...

This is a Material widget in a Flutter that allows the user ...
Profile Image
Zia
Aug 26, 2024
346
0
0
0
AJAX
What is AJAX and Working...

AJAX Asynchronous JavaScriptand XML is not a new technologybut a new approachto ...
Profile Image
Zia
Mar 26, 2024
315
0
0
0
Git Branching
What is Git Branching -...

One of the most remarkable and significant features of the Git versioncontrol ...
Profile Image
Zia
Feb 14, 2024
349
0
0
0
Recomended
collections in c#
Collections in C Sharp(C#) Programming

A collection is a set of related data that may not necessarily ...
Profile Image
Zia
May 1, 2024
430
0
0
0
CSS3 Animation
Animation in CSS - CSS3...

CSS3 animations can animate transitions from one CSS style configuration to another. ...
Profile Image
Zia
Jun 22, 2024
510
0
0
0
The hungry lion and the jackal
The Hungry Lion & The...

A hungry lion ran hither and thither in search of prey. Despite ...
Profile Image
Story Link
Jun 16, 2024
439
0
0
0
Flutter Form Widget
How to Validate Forms in...

Form validation and form submission are two things that the form widget ...
Profile Image
Zia
Sep 25, 2024
318
0
0
0