Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to use the common selector in jQuery. It is very detailed and has certain reference value. If you are interested, you must finish it.

Introduction to jQuery

JQuery is another excellent JavaScript library after Prototype. It is an open source project created by John Resig in January 2006. Today's jQuery team mainly includes developers such as core libraries, UI, plug-ins and jQuery Mobile, as well as promotional and website design and maintenance personnel.

With its concise syntax and cross-platform compatibility, jQuery greatly simplifies the operations of JavaScript developers to traverse HTML documents, manipulate DOM trees, handle events, perform animations, and develop AJAX. Its unique and elegant code style has changed the way JavaScript programmers design and write programs. In short, whether web designers, background developers, business enthusiasts or project managers, whether they are JavaScript beginners or JavaScript experts, there are plenty of reasons to learn jQuery.

The core features of jQuery can be summarized as follows: unique chain syntax and short and clear multi-function interface; efficient and flexible css selector, which can be extended to CSS selector; convenient plug-in extension mechanism and rich plug-ins. JQuery is compatible with a variety of mainstream browsers, such as IE 6.0 +, FF 1.5 +, Safari 2.0 +, Opera 9.0 + and so on.

JQuery advantage

JQuery emphasizes the idea of writing less and doing more (write less,do more). JQuery's unique selector, chained operation, event handling mechanism and well-packaged AJAX are unmatched by other JavaScript libraries. To sum up, jQuery has the following advantages:

1. Lightweight (those who say that the jQuery is bloated, and the big gods who customize their own libraries will forget it.) JQuery is very lightweight compared to other libraries, and with UglifyJS compression, the latest version of the compressed size is about 85KB (this number may vary from version to version).

(beside the point: in order to make jQuery lightweight, jQuery has been looking for the best compression tools, so jQuery's compression tools have been changing, from Packer, which was originally written in Dean Edward, to Google Compiler, and finally to the current use of UglifyJS. )

two。 A powerful selector. JQuery allows developers to use almost all selectors from CSS1 to CSS3, as well as advanced and complex selectors created by jQuery. In addition, plug-ins can be added to support XPath selectors, and developers can even write their own selectors. Because jQuery supports selectors, developers with some CSS experience can easily jump into jQuery learning.

3. Excellent encapsulation of DOM operations. JQuery encapsulates a large number of commonly used DOM operations, making it easy for developers to write programs related to DOM operations. Through jQuery, you can easily complete a variety of very complex operations, so that novice JavaScript can also write excellent programs.

4. Reliable event handling mechanism. JQuery's event handling mechanism absorbs the quintessence of event handlers written by JavaScript expert Dean Edward, making jQuery quite reliable in handling event bindings. JQuery also does a great job of setting aside graceful degradation, step-by-step, and non-Unobtrusive programming ideas.

5. Perfect AJAX. JQuery encapsulates all AJAX operations in a function $.ajax (), allowing developers to concentrate on business logic when dealing with AJAX without worrying about complex browser compatibility and the creation and use of XMLHttpRequest objects.

6. Does not pollute the top-level variables. JQuery creates only one object called jQuery, and all its function methods are under this object. Its alias $can also hand over control at any time and will never pollute other objects. This feature allows jQuery to coexist with other JavaScript libraries and can be safely referenced in the project without considering possible conflicts later.

7. Excellent browser compatibility. As a popular JavaScript library, browser compatibility is one of the necessary conditions. JQuery can run normally under browsers such as IE6.0+, FF3.6+, Safari5.0+, Opera and Chrome. JQuery also fixes some browser-to-browser differences so that developers don't have to build browser compatibility libraries before starting a project.

8. Chain mode of operation. The most characteristic of jQuery is its chained operation, that is, for a set of actions that occur on the same jQuery object, it can be written directly without having to get the object repeatedly. This feature is that jQuery's code is extremely elegant.

9. Implicit iteration. When you use jQuery to find all the elements with the ".myClass" class and then hide them, you don't have to loop through each of the returned elements. Instead, the methods in jQuery are designed to automatically manipulate collections of objects rather than individual objects, which makes a large number of loop structures unnecessary, thus greatly reducing the amount of code.

10. The separation of behavior layer and structure layer. Developers can use the jQuery selector to select the element and then add events directly to the element. This idea of completely separating the behavior layer from the structure layer allows jQuery developers and HTML or other page developers to do their job separately, getting rid of past development conflicts or individual development patterns. At the same time, post-maintenance is also very convenient, there is no need to find some functions in the HTML code and repeatedly fix the HTML code.

11. Rich plug-in support. The extensibility of jQuery attracts developers from all over the world to write jQuery extensions. At present, hundreds of official plug-ins are supported, and new plug-ins are coming out all the time.

twelve。 Perfect documentation. JQuery has a wealth of documentation, whether in English or Chinese.

13. Open source. JQuery is an open source product that anyone is free to use and suggest improvements.

Note: the above is from the book "sharp jQuery"

Configure the jQuery environment

The environment configuration of jQuery is very simple, you only need to download a .js file from the official website and put it in the project.

Download address on the official website: https://jquery.com/download/

The Download the compressed in the figure, production jQuery 3.2.1 is a minimized version of the compressed code that is generally used in production environments.

Download the uncompressed, development jQuery 3.2.1 is an uncompressed version, the code has not been compressed, can be read, generally used in the development environment.

Download completed:

When you open the compressed version of jQuery, you can see that there are few spaces and line breaks in the code except comments, which can save resources in a production environment:

The uncompressed version of jQuery code is in normal format. If you encounter some special problems during development, you can refer to the source code to find a solution:

Note: although there are compressed and uncompressed versions, there is no difference between the two versions except in code compression. The compressed version does not delete the jQuery function, and the uncompressed version does not add any functionality.

Select a version of jQuery and import it into the project. I chose the min version:

Then introduce jQuery into the HTML file:

Use the following statement to test whether jQuery is working properly:

Function test () {alert ('Hello jQuery');} $(document) .ready (test ())

Use the browser to access the page, and the following dialog box pops up to indicate no problem:

Selector using jQuery

Before you start using jQuery, you should first make it clear that in the jQuery library,\ $is an abbreviated form of jQuery, for example,\ $("# foo") is equivalent to jQuery ("# foo"), and\ $.ajax is equivalent to jQuery.ajax. Unless otherwise specified, the\ $symbol in the program is an abbreviated form of jQuery. Since it's shorthand, let's take a look at how jQuery is defined in the source code:

/ / Define a local copy of jQuery jQuery = function (selector, context) {/ / The jQuery object is actually just the init constructor 'enhanced' / / Need init if jQuery is called (just allow error to be thrown if not included) return new jQuery.fn.init (selector, context);}, / / The following code is omitted.

As you can see from the above source code, jQuery is defined by function expressions, so it is a function (function) object.

Knowing how jQuery is defined, let's take a look at how the alias $is defined, and by the way, how jQuery prevents variable conflicts, which is the last paragraph of the jQuery source code:

/ /. The above code is omitted .var / / Map over jQuery in case of overwrite _ jQuery = window.jQuery, / / Map over the $in case of overwrite _ $= window.$ / / the above two private variables map window's jQuery and $objects to prevent variables from being forcibly overwritten / / this is an important function to prevent variable conflicts and is used to release control of variables. Deep is an optional Boolean parameter that determines whether to hand over the jQuery object itself while handing over the $reference. Once the noConflict method is called, the transfer of control is determined by the difference between _ jQuery, _ $, jQuery, and $. JQuery.noConflict = function (deep) {/ / default processing $if (window.$ = jQuery) {window.$ = _ $;} / / when deep is set to true, _ jQuery overrides window.jQuery, and both $and jQuery will be invalidated. If (deep & & window.jQuery = jQuery) {window.jQuery = _ jQuery;} / / returns the jQuery object to jQuery.noConflict return jQuery;} anyway / / Expose jQuery and $identifiers, even in AMD// (# 7102#comment:10, https://github.com/jquery/jquery/pull/557)// and CommonJS for browser emulators (# 13566) / / noGlobal function gives the jQuery object to jQuery and $if (! noGlobal) {window.jQuery = window.$ = jQuery;} return jQuery;} in window without being called)

When using jQuery, you wrap and simplify the operation with $(), which passes either the name of the selector or the DOM object in parentheses. If you pass the DOM object, you are wrapping the passed DOM object directly. The name of the passing selector wraps the DOM object that uses the selector. No matter what is passed, the wrapper generates a jQuery object, and the jQuery object cannot call the methods or properties of the DOM object, such as innerHTML, checked, and so on. JQuery objects can only call their own methods, such as html, attr, and so on. And we need to know that every node or tag in the DOM tree is an object.

The following demonstrates several commonly used selectors:

1. Tag selector. If you pass in the name of the tag, you can control all tags that match that name. Example:

$("p") .html ('hello'); / / write hello to all p tags

Running result:

Hello

Hello

Hello

Hello

Hello

two。 Class selector. Pass in the name of the class selector defined in css to control all the tags that contain the selector, for example:

.test {}

$(".test") .html ('hello'); / / write hello to tags containing this type of selector

Running result:

Hello

Hello

Hello

3.id selector. Pass in the id value of the tag, and then precede the value with # (the same as the selector in css). This can be used regardless of whether the id selector is defined in css or not. Example:

/ write hello $("# test") .html ('hello'); $("# test1") .html (' hello1'); $("# test2") .html ('hello2') to tags containing the test2

Running result:

Hello

Hello1

Hello2

The property selector is also used in the same way as in CSS:

All you need is the titile attribute in the p [title] p tag

P [title='1'] as long as you write the class title attribute and equal to 1

P [title*='1'] as long as the attribute contains 1

P [title ^ ='1'] as long as the attribute begins with 1

P [title$=1] as long as the attribute ends with 1

Example:

$("pre [title]"). Html ('hello'); $("p [title =' test2']"). Html ('hello1'); $("p [title * =' 86']"). Html ('hello2'); $("p [title ^ =' 0']"). Html ('hello3'); $("p [title $=' 0']"). Html ('hello4')

Running result:

Hello

Hello1

Hello2

Hello3

Hello4

The above is just a demonstration of some common selector usage. For other selector usage, please refer to the following jQuery Chinese documentation:

Https://www.jquery123.com/

Simple event registration:

The object searched through the selector is wrapped into a jQuery object, so you can't use the event registration method in DOM, you need to use the event registration method of the jQuery object. Example:

Hi / / when the object is clicked, the code in the function is executed, which is the same as the onclick event $(".test") .click (function () {alert ('hello');}). This is all the content of the article "how to use common selectors in jQuery". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.