Home > Developer > JavaScript
CSS selector Usage Analysis in Jquery, jquery Selector
This document describes the CSS selector usage in Jquery. Share it with you for your reference. The details are as follows:
JQuery uses a set of css selectors. There are five types of selectors: Tag selector, ID selector, class selector, General selector, and group selector:
1. Tag Selector
Used to select an existing Tag element in an HTML page, also known as an element selector. Format: $ ("element"), for example, $ ("div"), same as getElementByTagName
2. ID Selector
Used to obtain an element with the id attribute. The format is as follows: $ ("id"), same as getElementById
Copy codeThe Code is as follows: <input id = "users" type = "text" value = "abc"/>
$ ("# Users"). val ();
3. class selector
Used to obtain an element with the class attribute. Format: $ ("class ")
Copy codeThe Code is as follows: <input id = "txt" type = "text" class = "t"/>
Add a border style to this text box. First, bind the text box with the class attribute.
Copy codeThe Code is as follows: $ (". t" ).css ("border", "2px solid blue ");
4. General Selector
The general selector (*) matches all elements and is mostly used to search by context, that is, to find all tags on the HTML page. $ ("*")
5. Group Selector
It is also called the multi-element selector. It is used to select the results of all the specified selector combinations. The syntax is as follows:
Copy codeThe Code is as follows: $ ("selector1, seletor2, selector3 ")
For example:Copy codeThe Code is as follows: $ ("div, span, p. styleClass" ).css ("border", "1px solid red ");
Example:
Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> css selector </title>
<Script type = "text/javascript" src = "jquery-1.7.min.js"> </script>
<Style type = "text/css">
. One {border: 1px solid # 03F; float: left; margin: 1em; padding: 1.5em; width: pixel ;}
. Two {background-color: # FC0 ;}
. Three {background-color: # FCF ;}
</Style>
<Script type = "text/javascript">
$ (Document). ready (function (){
$ ("*" ).Css ("font-size", "12px ");
$ ("Div"). addClass ("one ");
$ ("# Div1"). addClass ("two ");
$ ("# Div2, # div3"). addClass ("three ");
$ ("H3, p" ).css ("color", "red"). attr ("align", "center ");
$ ("# Span1" ).html ("A total of elements that apply one class at the same time in this webpage" + $ (". one "). length + "+", and the elements of one class and three class are applied simultaneously. "+ $ (". one. three "). length + "count ");
});
</Script>
</Head>
<Body>
<H3> This is the text in the title. <P> <span id = "span1"> </span> </p>
<Div id = "div1"> div element: the id attribute is div1. </div>
<Div id = "div2"> div element: the id attribute is div2. </div>
<Div id = "div3"> div element: the id attribute is div3. </div>
</Body>
</Html>
As follows:
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
