What are the ways to extend jquery?

Source: Internet
Author: User
Keywords Program Ape
Tags ajax animation applied change class code collection plug-in create

Just as the core library of jquery provides many features, developers can extend jquery in a variety of ways. These approaches are described in the next few sections.

Selectors and filters

jquery selectors and filters allow developers to identify and collect the elements they want to manipulate on a Web page. Although jquery has built-in standard selectors for node names, IDs, and classes, developers can also add pseudo class (Pseudo-class) selectors (extended CSS-defined pseudo classes) to provide a consistent and concise way to filter the previous selection results. Developers can also add collection filters that get the entire set of previous selectors and the placement of each element in the collection. The 3rd chapter will describe how to create these selectors.

By creating a custom selector, the developer can unify the logic of the entire selection in one place, making it easier to reuse elsewhere and ensuring a consistent implementation throughout the project. These selectors are also easier to maintain. When modifying a defect or adding functionality, the results of the modification can be applied to each instance immediately.

Collection Plug-in

A collection plug-in is a function that can be applied to the collection of elements returned by the selector. This function is what most people call jquery plug-ins, and they are the largest component of Third-party Plug-ins. Collection Plug-ins provide functionality from simple attribute modifications, to changing behavior by listening to events on elements, and then replacing the entire component with a new implementation. There is nothing that can be imagined.

The 4th chapter will explain a series of plug-in development principles. The 5th chapter will explain the plugin development framework that the author uses and how it implements these principles. These principles outline some of the best practices for developing plug-ins, enabling Plug-ins to better integrate with jquery when reducing the degree of coupling with other code.

An important part of plug-in development is testing its functionality, and using unit test tools makes it easier and more consistent for developers to test the code to ensure they are running as scheduled. When the developer's code is ready to be released, it needs to be packaged so that it is easier for others to acquire and integrate into their projects. Developers also need to provide a Web page to demonstrate the functionality of the plug-in so that the target user can see what it does and how it works. In order for others to know more about their plug-ins, developers must also provide documentation for each aspect of the plug-in. The 7th chapter will introduce these aspects.

function Plug-ins

A function plug-in is a tool function that does not directly manipulate the collection of elements. They provide additional functionality on the jquery framework, and typically use jquery native functionality to do their job. The 6th chapter will detail how to add a tool function.

Examples of these function plug-ins include sending debug information to the console to monitor the operation of the code, or getting and setting the page cookie value. Making these features a jquery plug-in can provide users with a familiar code invocation and reduce the likelihood of interacting with external code. Some of the previously mentioned principles are also applied to such plug-ins as testing, packaging, demonstrating, and writing documents.

JQuery UI Widget (widget)

The jquery UI is a collection of user interface interactions, effects, widgets, and themes built on the jquery JavaScript library (http://jqueryui.com/). It defines a widget development framework that allows developers to create plug-ins in a consistent way, and can design interface styles with ready-made themes. The 8th chapter describes the widget framework and how to use it to create your own components.

The jquery UI widget framework also follows the plug-in development principles in chapter 4th and provides common functionality for all jquery UI widgets in a consistent manner. When developing plug-ins based on this framework, developers automatically acquire these built-in features, which only need to focus on the features unique to the development plug-in. If the developer applies the theme defined in Themeroller to its widget, it will immediately integrate with other jQuery UI components. If developers reapply a theme, their appearance will change.

Many jquery UI widgets rely on mouse drag to accomplish their functions, and the jquery UI team is aware of the importance of this interaction. Instead of starting from scratch, developers simply need to make their widgets expand the jquery UI mouse module and set some custom conditions to support mouse drag, so you can focus on the development of the widget itself. The 9th chapter describes how to use the mouse module to create widgets that rely on mouse actions.

JQuery UI Effects

The JQuery UI also provides a set of effects that can be applied to page elements. Developers can use some of these to hide or visualize elements, such as extrudes (hidden), clip (cropping), fold (folding), and slide (slides). Some can be used to attract attention, such as highlight (highlighting) and pulsate (beats). Developers can also define their own special effects and use it as a built-in special effect. The 10th chapter describes how to create a new UI effect.

Animation properties

jquery provides an animation framework that developers can apply to element attributes of any numeric type. It allows developers to change attributes from one value to another and to control the duration and length of the process. However, if the developer wants to animate a property that is not a simple numeric type, it needs to implement the feature itself. For example, the JQuery UI provides an animated module that can change colors. The 11th chapter creates an animation for the properties of a complex type.

Ajax processing

The Ajax feature of jquery is one of its obvious advantages, making it easy to load and process remote data. Developers can specify the type of data they expect to return when Ajax calls: Simple text, HTML, XML, JSON. When a remote call returns a result, a conversion process in the background converts the byte stream to the format expected by the developer. Developers can add their own transformation logic to convert directly by identifying specific formats specified by the developer. The 12th chapter will detail how to extend AJAX processing to directly handle a common file format.

Event handling

The jquery event-handling feature allows developers to attach multiple event handlers to the element to respond to user interactions, system events, and custom triggers. jquery provides several hooks for developers to create their own event definitions and trigger points, making the code consistent with existing functionality. The 13th chapter describes how to implement a new event to make it easier to interact with the mouse.

Validation rules

The validation plug-ins developed by Jörn Zaefferer are widely used to authenticate user input before the client is committed to the server. Although this plugin is not part of the jquery kernel feature, it also provides some extension points that you can use to create custom validation rules and apply them to existing processes. The 14th chapter describes how to create your own validation rules and integrate them with built-in behavior.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.