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

This article mainly introduces how to use the jQuery selector, the article is very detailed, has a certain reference value, interested friends must read it!

The jQuery selector is similar to the CSS selector, which is used to select elements in a web page. For example:

$("h4"). Css ("background-color", "red")

Description:

Gets and sets the background color of all elements in the page.

"h4" is the selector syntax and must be placed in $().

$("h4") returns the jQuery object.

1. JQuery selector

JQuery selectors are powerful and varied, classified as follows:

1. CSS-like selector

Basic selector

Hierarchical selector

Attribute selector

2. Filter selector

Basic filter selector

Visibility filter selector

3. Form selector

4. Content filter

Basic selector

The basic selector syntax is shown below:

Example:

Example of jQuery basic selector # box {background-color: # ffffff; border: 2px solid # 000000; padding: 5px } $(function () {/ / id selector $("# btn") .click (function () {/ / tag selector select h4 tag and add it to the background color $("h4") .css ("background-color", "red") / / the class selector selects and sets the background color of all elements whose class is title. Css ("background-color", "# 09F"); / / id selector selects and sets the background color of elements whose id is box $("# box"). Css ("background-color", "# 09F") / / Union selector is equivalent to the group selector in css to select and set the background color of all elements whose h3, dt, and class are title / /. Css ("background-color", "# 09A") / / the intersection selector is equivalent to the specified tag selector in CSS to select and set class to the background color of the h4 tag of title $("h4.title"). Css ("background-color", "yellow"); / / the global selector changes the font color of all elements $("*") .css ("color", "blue") });}); id is box; div class is title h3 tag class is title h4 tag popular list

Fighting landlords casual game QQ fighting landlords is the largest number of board games online at the same time.

Effect:

3. Hierarchical selector

The hierarchical selector acquires elements through the hierarchical relationship between DOM elements. The syntax is as follows:

See the following example

Requirement description: click the title and use the hierarchical selector to select different elements to make their background color blue, as shown in the following figure:

Code:

Demonstration example of hierarchical selector * {margin: 0px; padding: 0px; line-height: 30px;} body {margin: 10px;} # menu {border: 2px solid # 0033cc; padding: 10px;} a {text-decoration: none; margin-right: 5px } span {font-weight: bold; padding: 3px;} h3 {margin: 10px; cursor: pointer / * the mouse is hand-shaped * /} $(function () {/ / change the background color $("h3") .click (function () {/ / descendant selector) get and set the background color of the span element under # menu $("# Menu span ") .css (" background-color ") "blue") / / the sub-selector gets and sets the background color of element a under # travel $("# travel > a") .css ("background-color", "red") / / the adjacent selector will only select the first adjacent element / / get and set the background color of the first an element under # ticket $("# ticket+a") .css ("background-color", "red") / / the peer selector selects all elements / / gets and sets the background color of all an elements under # rest $("# rest~a") .css ("background-color", "yellow");});}) Classification of all tourism products: special prices for tourism around Beijing according to the number of days, seaside tourism, grassland attractions, tickets and scenic spots More categories of summer parks, landscapes and weekend gardens

Effect:

Fourth, attribute selector

The attribute selector selects the element through the attributes of the HTML element. The syntax is as follows:

Example:

Property selector demo example # box {background-color: # ffffff; border: 2px solid # 000000; padding: 5px;} h3 {cursor: pointer } $(function () {$("h3") .click (function () {/ / change the background color of the h3 element containing the title attribute $("h3 [title]") .css ("background-color", "blue") / / change the background color containing the class attribute to the odds element $("[class='odds']") .css ("background-color", "red"); / / change the font color containing the class attribute that is not equal to the odds element / / $("[classically colored odd]") .css ("color", "green") / / change the font color of the element that contains the title attribute beginning with h is case-sensitive $("[title ^ = h]") .css ("color", "green"); / / change the font color of the element that contains the title attribute ending in jp $("[title$=jp]") .css ("color", "yellow") / / change the font color of the element containing s in the title attribute to be case-sensitive $("[title*=s]") .css ("color", "pink") / / change the font color of the li element with class attribute and y in title attribute is case-sensitive $("liclass] [title*=y]") .css ("color", "violet");});}) The animation list is named Detective Conan Naruto, the tail of the leprechaun of death, the silver soul of the black cat sheriff.

Effect:

Fifth, filter selector

The filter selector brushes the elements through specific filtering rules.

Grammar is characterized by the use of ":", for example:

$("li:first")

Indicates that the first li element is selected.

1. Basic filter selector

The basic filter selector can select the first element, the last element, and elements with an odd or even index. The syntax is as follows:

The basic filter selector can also select elements based on the value of the index

The basic filter selector also supports some special selections

Example:

Basic filter selector h3 {cursor: pointer;} $(function () {$("h3") .click (function () {/ / select the first li tag and set the background color / / $("li:first") .css ("background-color", "blue") / / Select the first li tag and set the background color / / $("li:last") .css ("background-color", "red"); / / select the li tag of even rows and set the background color / / $("li:even") .css ("background-color", "green") / / Select the li tag of the odd line and set the background color / / $("li:odd"). Css ("background-color", "pink"); / / change the background color of the li tag with an index value of 1 / ("li:eq (1)"). Css ("background-color", "pink") / / change the background color of li tags whose index value is greater than 4 / $("li:gt (4)"). Css ("background-color", "green"); / / change the background color of li tags whose index value is less than 4 / $("li:lt (4)") .css ("background-color", "red") / / Select elements whose class is not three and set the background color $("li:not (.three)") .css ("background-color", "green"); / / select all title elements and set the background color $(": header") .css ("background-color", "red");}) Click (function () {/ / sets the background color of the element currently in focus $(": focus") .css ("background-color", "yellow");});}) The Princess of the Internet novel is not good as a fatal deal the love of the staggered time of the Kalan Temple Zhang Zhen tells ghost stories for the first time.

Results:

2. Visibility filter selector

The visibility filter selector can select an element by its display state, and the syntax is as follows:

For example:

Example:

Visibility element selector demo example p {display: none;} $(function () {$("# show") .click (function () {$("p:hidden") .show ();}) $("# hidden") .click (function () {$("p:visible") .hide ();})

Hi, how are you?

Effect:

Click to show:

Click hide:

3. Content filter

The content filter selects elements based on the content. The syntax is as follows:

Example:

Content filter demo example .title {background-color: gray;} $(function () {/ / change the background color of the table containing "sneakers" to blue $("td:contains ('sneakers"). Css ("background-color", "blue") / / the background color of the cell without content is set to red $("td:empty"). Css ("background-color", "red"); / / the background color of the linked cell is set to green $("td:has ('a')"). Css ("background-color", "green") / / the background color of a table with child nodes or text is set to gray $("td:parent") .css ("background-color", "gray");}) Serial number, order number, commodity name, price (yuan) 1 10035900 Nike breathable shock absorber sports shoes 231.00 2 10036114 Tianmei Sun Umbrella 51.00 3 10035110 Halloween Children's Spider Man suit 4 10035120 Peak Basketball shoes 231.00 5 10032900 jQuery authoritative Guide

Effect:

Form selector

The form selector is selected according to different types of form elements, with the following syntax:

Example:

Form selector demo example $(function () {/ / Click submit button, if empty, set the border to red $(": submit") .click (function () {/ / get user name var username= $(": input [name = 'username']")) / / get the password var pwd= $(": password [name = 'pwd']"); / / get the confirmation password var repwd= $(": password [name =' repwd']"); / / get the nickname var nickname= $(": input [name = 'nickname']") / / get the selected radio button var radio=$ (": radio:checked"); / / get the selected check box var chk=$ (": checkbox:checked") / / get the selected drop-down box var sel=$ (": selected"); redSet (username) RedSet (pwd); redSet (repwd); redSet (nickname); redSet2 (radio); redSet3 (chk); redSet4 (sel);}) Function redSet (obj) {if (obj.val () = = "") {obj.css ("border", "1px solid red");} else {obj.css ("border", "1px solid yellow");}} Function redSet2 (obj) {if (obj.length==0) {$(": radio"). Parent (). Css ("border", "1px solid red")} else {$(": radio"). Parent (). Css ("border", "1px solid yellow")}} Function redSet3 (obj) {if (obj.length==0) {$(": checkbox"). Parent (). Css ("border", "1px solid red")} else {$(": checkbox"). Parent (). Css ("border", "1px solid yellow")}} Function redSet4 (obj) {if (obj.val () = = "") {$("select") .css ("border", "1px solid red")} else {$("select") .css ("border", "1px solid yellow")}};}) Registration form

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.