Sharp Jquery confusing series (iii) ------ various selector parties and jquery parties
Note: When learning Jquery's selector for the first time, I only remember a few similar to those in the css selector. Here I will list all the selector entries in the book to facilitate future queries and current learning.
All examples are from books
Test screen:
I. Basic Selector
# Id, $ ("# test") Select the element whose id is test (unique)
. Class $ (". test") selects all elements whose class is test.
Element $ ("p") selects all <P> Elements
* $ ("*") Select all elements
Selector1, selector2 ,...., selectorN $ ("div, span, p. myClass) select all <div>, <span>, and a group of elements that have the <p> label whose class is myClass.
Demo1: changes the background color of an element whose id is one.
Demo2: change the background color of all elements whose class is mini.
Demo3: change the background color of all elements whose element name is <div>.
Demo4: change the background color of all elements
Demo5: changes the background color of all <span> elements and elements whose id is two.
2. Hierarchy Selector
Obtain specific elements through the hierarchical relationship between DOM elements, such as descendant elements, child elements, adjacent elements, and peer elements.
$ ("Ancestor descendant") $ ("div span") select all <span> elements in <div>
$ ("Parent> child") $ ("div> span") Select the child element whose element name is <span> under <div>.
The difference between the two lies in that the former Retrieves all future generations, and the latter only retrieves sons.
$ ("Prev + next") $ (". one + div") Select the next <div> peer element whose class is one.
$ ("Prev ~ Siblings ")$ ("# Two ~ Div ") select all <div> peer elements after the element whose id is two.
Demo1: changes the background color of <body> all <div> objects.
Demo2: changes the background color of the <body> <div> element.
Demo3: Change the class to the next <div> peer element background color of one.
Demo4: change the background color of all <div> peer elements after the element whose id is two
There are more convenient methods to replace the following two selectors:
$ (". One + div") == (". one"). next ("div") $ ("# prev ~ Div ") ==$ (" # prev "). nextAll (" div ");
$ ("Prev ~ The difference between siblings ") and siblings () is that the former can only match the peer <div> element after the" prev "element. The latter has nothing to do with the location, as long as it is a peer node.
3. Filter Selector
1) Basic filter Selector
: First $ ("div: first") Select the first <div> element from all <div> Elements
: Last $ ("div: last") Select the last <div> element of all <div> Elements
: Not (selector) $ ("input: not (myClass)") Select the <input> element whose class is not myClass.
: Even $ ("input: even") Select an index that is an even number. <input> element 0 is an even number.
: Odd $ ("input: odd") Select an <input> element with an odd index.
: Eq (index) $ ("input: eq (1)") Select the <input> element whose index is equal to 1
: Gt (indfex) $ ("input: gt (1)") Select the <input> element whose index is greater than 1.
: Lt (index) $ ("input: lt (1)") Select the <input> element whose index is smaller than 1
: Header $ (": header") select all
: Animated $ ("div: animated") Select the <div> element of the animation being executed.
: Focus $ (": focus") selects the elements that currently obtain the focus
Demo1: change the background color of the first <div> element.
Demo2: changes the background color of the last <div> element.
Demo3: change the background color of the <div> element whose class is not one.
Demo4: change the background color of the <div> element whose index value is an even number.
Demo5: change the background color of the <div> element with an odd index value
Demo5: change the background color of the <div> element whose index value is 3
Demo6: change the background color of the <div> element whose index value is greater than 3
Demo7: change the background color of the <div> element whose index value is less than 3
2) content filtering Selector
: Contains (text) $ ("div: contains (" ")") Select the <div> element containing the text ""
: Empty $ ("div: empty") Select an <div> empty element that does not contain child elements (including text elements)
: Has (selector) $ ("div: has (p)") Select <div> elements containing <p> Elements
: Parent $ ("div: parent") selects <div> elements with child elements (including text elements)
Demo1: change the background color of the <div element containing the text "di"
Demo2: changes the background color of the <div> Empty element that does not contain child elements.
Demo3: change the background color of the <div> element with the class as the mini element.
Demo4: change the background color of the <div> element containing child elements (including text elements)
3) Visibility filter Selector
: Hidden $ (": hidden") selects all invisible elements. Including <input type = "hidden"/>, <div> demo1: change the background color of all visible <div> Elements
Demo2: Display hidden <div> Elements
4) attribute filter Selector
[Attribute] $ ("div [id]") Select an element with an attribute id
[Attribute = value] $ ("div [title = test]") Select the <div> element whose attribute title is "test ".
[Attribute! = Value] $ ("div [title! = Test] ") Select the <div> element whose property title is not equal to" test "(The <div> element without the property title will also be selected)
[Attribute ^ = value] $ ("div [title ^ = test]") Select the <div> element whose attribute title starts with "test ".
[Attribute $ = value] $ ("div [title $ = test]") Select the <div> element whose attribute title ends with "test ".
[Attribute * = value] $ ("div [title * = test]") Select the <div> element whose attribute title contains "test ".
[Attribute | = value] $ ("div [title | = 'en']") select the <div> element whose attribute title is equal to en or whose prefix is en (followed by a hyphen '-').
[Attribute ~ = Value] $ ("div [title ~ = 'Uk '] ") Select the <div> element of the attribute title that is separated by spaces.
[Attribute1] [attribute2]... [attributeN] $ ("div [id] [title $ = 'test']") Select the <div> element with the property id ending with "test"
Demo1: change the background color of the <div> element containing the title attribute.
Demo2: change the background color of the <div> element whose attribute title value is equal to "test ".
Demo3: change the background color of the <div> element whose property value is not equal to "test"
Demo4: change the background color of the <div> element starting with "te ".
Demo5: change the background color of the <div> element whose attribute value title ends with "est ".
Demo6: changes the background color of the <div> element with "es" in the attribute title.
Dmeo7: changes the background color of the <div> element containing the property id and "es" in the property title.
Test Screen
Demo8: change the background color of an element whose attribute title is equal to en or whose prefix is en (followed by a hyphen '-').
Demo9: changes the background color of an element whose attribute title is separated by spaces and contains the English letter (uk ).
5) child element filter Selector
: Nth-child: eq (index) matches only one element, while nth-child matches the child element for each parent element and: nth-child (index) an index starts from 1, while an eq (index) starts from 0.
: Nth-child (even) can select an element with an even index value under each parent element.
: Nth-child (odd) can select an element with an odd index value under each parent Element
: Nth-child (2) can select an element with an index value equal to 2 under each parent Element
: Nth-child (3n) can select an element whose index value under each parent element is a multiple of 3 (n starts from 1)
: Nth-child (3n + 1) can select the element whose index value under each parent element is 3n + 1 (n starts from 1)
: First-child: first only returns a single element, and the first-child selector matches the first child element for each parent element, for example, $ ("ul li: first-child "); select the first <li> element in each <ul>
: Last-child: Similarly,: last only returns a single element, and the last-child selector matches the last child element for each parent element, for example, $ ("ul li: last-child ") Select the last <li> element in each <ul>.
: Only-child $ ("ul li: only-child") Select the <li> element that is the only child element in <ul>.
Demo1: change the background color of the 2nd child element under the parent element of <div> where each class is one.
Demo2: change the background color of the 1st child elements under the <div> parent element of each class with one
Demo3: change the background color of the last child element under the <div> parent element whose class is one.
Demo4: If the <div> parent element of the class is one has only one child element, the background color of the child element is changed.
6) form object attribute filter Selector
: Enabled $ ("# form1: enabled") select all available elements in the form with id "form1"
: Disabled $ ("# form2: disabled") select all unavailable elements in the form with id "form2"
: Checked $ ("input: checked") select all selected <input> elements (single-choice, check box)
: Selected $ ("select option: selected") select all selected option elements (drop-down list)
Test Screen
Demo1: change the value of the <input> element available in the form.
Demo2: change the value of the <input> element that is unavailable in the form.
Demo3: Get the number of selected multiple selection boxes
$ ("Input: checked"). length
Demo4: Get the content selected in the drop-down list
$ ("Select: selected"). text ();
Iv. Form Selector
: Input $ (": input") select all <input>, <textarea>, <select>, <button>
: Text $ (": text") select all single-line text boxes
: Password $ (": password") select all password boxes
: Radio $ (": radio") select all single-region
: Checkbox $ (": checkbox") select all check boxes
: Submit $ (": submit") select all submitted buttons
: Image $ (": image") select all image buttons
: Reset $ (": reset") select all reset buttons
: Button $ ("button") select all buttons
: File $ (": file") Select All upload Domains
: Hidden $ (": hidden") select all invisible elements
It's a bit late. I won't write any examples later !!!
Chapter 4 understanding jQuery
1.1 JavaScript and JavaScript Libraries
1.1.1 introduction to JavaScript
1.1.2 functions and comparison of JavaScript Libraries
1.2 add jQuery
1.2.1 jQuery Introduction
1.2.2 advantages of jQuery
1.3 compile jQuery code
1.3.1 configure the jQuery Environment
1.3.2 compile simple jQuery code
1.3.3 jQuery code style
1.4 jQuery object and DOM object
1.4.1 introduction to DOM objects and jQuery objects
1.4.2 mutual conversion between jQurey objects and DOM objects
1.4.3 instance research
1.5 solve conflicts between jQuery and other libraries
1.6 jQuery development tools and plug-ins
Conclusion 1.7
Chapter 2 jQuery Selector
2.1 What is the jQuery selector?
2.2 advantages of jQuery Selector
2.3 jQuery Selector
2.3.1 basic Selector
2.3.2 hierarchical Selector
2.3.3 filter Selector
2.3.4 form Selector
2.4 apply jQuery rewrite example
2.5 precautions in Selector
2.5.1 precautions for the selector containing special symbols
2.5.2 precautions when the selector contains spaces
2.6 case study-effects of a website brand list
2.7 other selectors
2.7.1 extension of selector provided by jQuery
2.7.2 other methods for using the CSS Selector
Conclusion 2.8
Chapter 2 DOM operations in jQuery
3.1 classification of DOM operations
3.2 DOM operations in jQuery
3.2.1 search nodes
3.2.2 create a node
3.2.3 insert a node
3.2.4 delete a node
3.2.5 copy a node
3.2.6 replace nodes
3.2.7 package nodes
3.2.8 attribute operations
3.2.9 style operations
3.2.10 set and obtain HTML, text, and values
3.2.11 traverse nodes
3.2.12 operation of CSS-DOM
3.3 case study-Hyperlink and image prompting effects of a website
Conclusion 3.4
Chapter 2 events and animations in jQuery
4.1 events in jQuery
4.1.1 load DOM
4.1.2 event binding
4.1.3 merging events
4.1.4 event bubbling
4.1.5 event object attributes
4.1.6 remove an event
4.1.7 simulated operations
......
Chapter 4 jQuery operations on forms and tables and more applications
Chapter 2 jQuery and Ajax applications
Chapter 3 Use and writing of plug-ins
Chapter 2 using jQuery to create a personalized website
Appendix
Reference: baike.baidu.com/view/2659670.htm
A question in sharp jquery
Not by subscript
Is based on the first few built-in counters
Select the div set in the figure.
From left to right in the upper left corner
Traverse from the outside to the inside to change the color even
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
