JQuery tutorial (from Beginner to Master)

[TOC]

JQuery selector

1. Selector

instructions

Selectors are the most important part of jQuery learning, which is to use the core functions of jQuery

• The selector itself is just a string with a specific syntax rule and has no real use
• Its basic syntax rules use the CSS selector syntax and extend the base
• Only a callThe $()And pass a selector as a parameter to make it work
• $(selector)Function: according to the selector rule to find all matching labels in the entire document array (pseudoarray), and encapsulated intojQueryobject

classification

Basic selector

• ID selector:#id
• Label selector:element
• Property selector:.class
• Universal selector:*
• Union selector:selector1,selector2,selectorN
• Intersection selector:selector1selector2selectorN

Hierarchy selector

• Descendant element selector:ancestor descendant
• Child element selector:parent > child
• Sibling selector:prev + next,prev ~ siblings

Filter selector

A selector that further filters the elements matched by the original selector

Most of the selector syntax is filter selectors

• basic
• content
• visibility
• attribute

Form selector

• The form
• Form object properties

Below, we study the commonly used selectors one by one

2. Basic selector

Basic selector	describe
#id	Matches an element based on the given ID
element	Matches all elements based on the given element name
.class	Matches elements based on the given class
*	Match all elements
selector1,selector2,selectorN	Combine the elements matched by each selector and return them together

The HTML code

<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span>
<br>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB(title="hello")</li>
    <li class="box">CCCCC(class="box")</li>
    <li title="hello">DDDDDD(title="hello")</li>
</ul>
Copy the code

The ID selector

// 1. Select the element with id div1
$('#div1').css('background-color'.'red');
Copy the code

Label selector

// 2. Select all div elements
$('div').css('background-color'.'red');
Copy the code

Property selector

// 3. Select all elements whose class attribute is box
$('.box').css('background-color'.'red');
Copy the code

Union selector

// 4. Select all div and SPAN elements
$('div,span').css('background-color'.'red');
Copy the code

Intersection selector

// 5. Select all div elements whose class attribute is box
$('div.box').css('background-color'.'red');
Copy the code

Universal selector

// 6. Select all elements
$(The '*').css('background-color'.'red');
Copy the code

3. Hierarchy selector

Selectors for finding child, descendant, and sibling elements

Hierarchy selector	describe
ancestor descendant	Matches all descendant elements under the given ancestor element
parent > child	Matches all child elements under the given parent element
prev + next	Matches all next elements immediately after prev elements
prev ~ siblings	Matches all siblings elements after the prev element

The HTML code

<ul>
	<li>AAAAA</li>
	<li class="box">CCCCC</li>
	<li title="hello"><span>BBBBB</span></li>
	<li title="hello"><span class="box">DDDD</span></li>
	<span>EEEEE</span>
</ul>
Copy the code

Descendant element selector

// 1. Select all spans under UL
$('ul span').css('background'.'red');
Copy the code

Child element selector

// 2. Select all subelements span under ul
$('ul > span').css('background'.'red');
Copy the code

Sibling selector

// 3. Select the next li whose class is box
$('.box + li').css('background'.'red');
Copy the code

// 4. Select all siblings of the element whose class is box under ul
$('ul .box ~ *').css('background'.'red');
Copy the code

4. Filter selector

A selector that further filters the elements matched by the original selector

classification	Filter selector	describe
basic	:first	Gets the first element
	:last	Gets the last element
	:eq(index)	Matches an element with a given index value
	:gt(index)	Matches all elements greater than the given index value
	:lt(index)	Matches all elements less than the given index value
	:even	Matches all elements with an even index value, counting from 0
	:odd	Matches all elements with an odd index value, counting from 0
	:not(selector)	Removes all elements that match the given selector
content	:contains(text)	Matches the element that contains the given text
	:has(selector)	Matches the element that contains the element matched by the selector
	:empty	Matches all empty elements that do not contain child elements or text
	:parent	Matches elements that contain child elements or text
visibility	:hidden	Matches all invisible elements, or elements of type hidden
	:visible	Matches all visible elements
attribute	[attribute]	Matches the element that contains the given attribute
	[attribute=value]	Matches an element whose given attribute is a particular value
	[attribute!=value]	Matches all elements that do not have a specified attribute, or whose attribute is not equal to a specific value
	[attribute*=value]	Matches a given attribute to an element that contains some value
	[selector1][selector2][selectorN]	Compound property selector, used when more than one condition needs to be met simultaneously

The HTML code

<div id="div1" class="box">Class is box div1</div>
<div id="div2" class="box">Class is box div2</div>
<div id="div3">div3</div>
<span class="box">Class is the span of box</span>
<br/>
<ul>
    <li>AAAAA</li>
    <li title="hello">BBBBB</li>
    <li class="box">CCCCC</li>
    <li title="hello">DDDDDD</li>
    <li title="two">BBBBB</li>
    <li style="display: none">I was hidden</li>
</ul>
Copy the code

:first

1. Select the first div
$('div:first').css('background'.'red');
Copy the code

:last

// 2. Select the element whose last class is box
$('.box:last').css('background'.'red');
Copy the code

:not

// 3. Select all divs whose class attribute is not box
$('div:not(.box)').css('background'.'red');
Copy the code

:eq, :gt, :lt

Multiple selectors are executed sequentially, not simultaneously

// 4. Select the second and third li elements
// $('li:eq(1),li:eq(2)').css('background', 'red');
// $('li:gt(0):lt(2)').css('background', 'red');
$('li:lt(3):gt(0)').css('background'.'red');
Copy the code

:contains

// 5. Select li whose content is BBBBB
$('li:contains("BBBBB")').css('background'.'red');
Copy the code

:hidden

// 6. Select hidden li
$('li:hidden').show().css('background'.'red');
Copy the code

[attribute]

// 7. Select the li element with the title attribute
$('li[title]').css('background'.'red');
Copy the code

[attribute=value]

// 8. Select all li elements whose title is Hello
$('li[title=hello]').css('background'.'red');
Copy the code

:odd

$('#data tbody > tr:odd').css('backgroundColor'.'#ccf');
Copy the code

5. Form pickers

Form and form object properties

Form selector	describe
:input	Matches all input, Textarea, SELECT, and Button elements
:text	Matches all single-line text boxes
:password	Matches all password boxes
:radio	Matches all radio buttons
:checkbox	Matches all check boxes
:submit	Matches all submit buttons
:reset	Matches all reset buttons
:button	Match all buttons
Form object properties	describe
:enabled	Matches all available elements
:disabled	Matches all unavailable elements
:checked	Matches all selected elements (checkboxes, checkboxes, etc., excluding options in select)
:selected	Matches all selected option elements

The HTML code

<form>User name:<input type="text"/><br>Password:<input type="password"/><br>Hobbies:<input type="checkbox" checked="checked"/>basketball<input type="checkbox" checked="checked"/>football<input type="checkbox" checked="checked"/>badminton<br>Gender:<input type="radio" name="sex" value='male'/>male<input type="radio" name="sex" value='female'/>female<br>Email address:<input type="text" name="email" disabled="disabled"/><br>Location: I<select>
        <option value="1">Beijing</option>
        <option value="2" selected="selected">tianjin</option>
        <option value="3">hebei</option>
    </select><br>
    <input type="submit" value="Submit"/>
</form>
Copy the code

: : text, disabled

// 1. Select an unavailable text input box
$(':text:disabled').css('background-color'.'red');
Copy the code

:submit: :checkbox: Checked

// 3. Display the selected city name
$(':submit').click(function () {
    alert($('select>option:selected').html());
});
Copy the code