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

Editor to share with you what are the differences between jquery selector and CSS selector, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Differences: 1, the role of the two are different, CSS selector to find the element to set the style of the element, jQuery selector to find the element after adding behavior; 2, jQuery selector has better cross-browser compatibility; 3, CSS selector and jQuery selector efficiency is different.

We know that the writing of jQuery selector and CSS selector is very similar, both have the characteristics of implicit iteration, there is no need to loop through every element that meets the requirements of the selector, so it is relatively easy to use. In general, wrapping the css selector with $("") becomes a jQuery selector, such as

CSS selector jQuery selector ID selector # myID$ ("# myID") class selector. MyClass $(".myClass") tag selector p$ ("p") hierarchical selector p > strong$ ("p > strong") css is called pseudo-class selector

JQuery calls it a filter selector p:nth-child (3) $("p:nth-child (3)")

See the example below. CSS sets the text of each paragraph to 14px and the color is red. In jQuery, the text is set to 16px and the color is blue, because jquery sets the behavior after DOM is loaded, and all paragraphs are shown in blue and 16px.

Selector p {font-size: 14px; color:#F00} p:nth-child (3) {color:#690} $(document) .ready (function () {$("p"). Css ({"color": "# 00f", "font-size": "16px"}); $("p:nth-child (3)") .css ({"font-size": "24px"});})

The first paragraph

The second paragraph

The third paragraph

The fourth paragraph

So what's the difference between the two?

1. The functions of the two are different. After finding the element, the CSS selector sets the style of the element, and the jQuery selector finds the element and adds the behavior.

2. JQuery selector has better cross-browser compatibility.

3. The efficiency of the selector.

Efficiency of CSS selector

1. Id selector (# myid)

2. Class selector (.myclassname)

3. Tag selector (pmaeh2rep)

4. Adjacent selector (H2 selector)

5. Sub-selector (ul > li)

6. Offspring selector (li a)

7. Wildcard selector (*)

8. Attribute selector (a [rel = "external"])

9. Pseudo-class selector (aVH hover.liours nthmurchild)

The efficiency of the above nine selectors is from high to low, of which the efficiency of the ID selector is the highest and that of the pseudo-class selector is the lowest. For a detailed introduction, you can also see Writing efficient CSS selectors (address: http://csswizardry.com/2011/09/writing-efficient-css-selectors/).

Efficiency of jQuery selector

1. Id selector $('# id') and element tag selector $('form')

2. Class selector $('.className')

3. Attribute selector $('[attribute=value]') and pseudo-class selector $(': hidden')

These are all the contents of this article entitled "what are the differences between jquery selectors and CSS selectors". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more 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.