Get the App
SLTechnology News&Howtos  ›  Development  › 

How to use the jQuery selector

Shulou Source: shulou.com Published: 2022-06-02 13:46:34 10月06日 Update

This article introduces the knowledge of "how to use jQuery selector". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First introduce the jquery file provided by google and the plug-in firejspt for testing into the head of each test page.

1. The most commonly used id selector and class selector, copy the following code 200 times and place it in the body tag.

Compare id selector and class selector compare id selector and class selector

The JS code for this test is as follows:

Function ilianTest01 () {$('# ilian') .click (function () {alert ('Hello World');});} function ilianTest02 () {$(' Lian') .click (function () {alert ('Hello World');});} / * call 2 functions to test * / $(function () {jspt.test (function () {ilianTest01 ();}); jspt.test (function () {ilianTest02 ()) );})

The test results are as follows:

From the diagram, we can see that the efficiency advantage of id selector over class selector is very great.

two。 The hierarchical selector is also used frequently when selecting tags, this time by comparing the child tag symbol ">" with children.

Put the following code into the body tag and copy the li tag 500 times.

Compare direct child tag symbols ">" and children compare direct child tag symbols ">" and children compare direct child tag symbols ">" and children

The JS code for this test is as follows:

Function ilianTest01 () {$('# ilian > li') .click (function () {alert ('Hello World');});} function ilianTest02 () {$(' # ilian'). Children ('li') .click (function () {alert (' Hello World');});} / * call 2 functions to test * / $(function () {jspt.test (function () {ilianTest01 ();}); jspt.test (function () {ilianTest02 ()) );})

Test results:

It can be seen that the children selector is better than the direct child tag symbol selector.

That's all for "how to use the jQuery Selector". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Tags: Select label test symbol code content function more knowledge result practical frequent learned next advantage dilemma reality hierarchy common use situation Apple Docker Huawei Linux macOS MariaDB Microsoft MySQL NVidia OPPO Reno vpn macOS Redmi Microsoft Linux