JQuery learning notes (2)-Selector usage, jquery learning notes

JQuery learning notes (2)-Selector usage, jquery learning notes
I. What is a selector?

With the jQuery selector, we can obtain almost any one or a group of objects on the page.

Ii. Dom object and jQuery package set 1. Dom object

How to obtain Dom objects in JavaScript

<div id="divMsg">Hello World</div><script>    var div = document.getElementById("divMsg");    console.log(div);    var divs = document.getElementsByTagName("div");    console.log(divs);</script>

Output result

<Div id = "divMsg"> Hello World </div> <script >$ (function () {var div =$ ("# divMsg"); console. log (div); var divs =$ ("div"); console. log (divs) ;}) </script>

Output result

<Div id = "divMsg"> Hello World </div> <script> // Step 1: Obtain the Dom Element Object var div = document. getElementById ("divMsg"); // Step 2: use $ () to convert var $ div = $ (div); console. log ($ div); </script>

(2) convert jQuery package set to Dom object

Note: The returned result by the indexer is not a jQuery package set, but a Dom object.

<Div id = "divMsg"> Hello World </div> <script> // Step 1: obtain an element var div =$ ("# divMsg") from the package set using the indexer [0]; console. log (div); </script>

Iii. selector Classification

1. The jQuery selector is divided into "select" and "filter" by function ". You can also combine them into a selector string. The main difference is that the Selector Used by "filter" is to specify conditions to be filtered from the content that matches the previous one. The "filter" selector can also be used independently to indicate that all "*" are handsome. For example

$ (": [Title]") is equivalent to $ ("*: [title]")

The selector of the "select" function does not have a default range, because the function is "select" rather than "filter ";

2. Basic selector Basics

1 $ ("# divId") Select the divId element 2 $ ("a") select all <a> elements 3 $ (". bgRed ") Select element 4 $ (" * ") of class bgRed select all elements 5 $ (" # divId,. (bgRed ") Select the elements whose ID is divId and whose class is. <a> element of bgRed

3. Hierarchical Selector

1 $ (". bgRed div ") select all <div> element 2 $ (". myList> li ") Select class as the direct sub-node in the myList element <li> Object 3 $ (" # hibiscus + img ") select the img object 4 $ ("# someDiv ~ [Title] ") select all the elements with the title attribute after the object whose id is someDiv

4. Basic filter: Basic Filters

1 $ ("tr: first") Select the first <tr> element 2 $ ("tr: last") Select the last <tr> element 3 $ ("input: not (: checked) ") Select <input> element 4 $ (" tr: odd ") from the unselected <input> element 5 $ (" tr: eq (1) ") select 2nd <tr> elements (index starts from 0) 6 $ (" tr: gt (0 )") select <tr> element 7 $ ("tr: lt (2)") with an index greater than or equal to 1 and select <tr> element 8 $ (": header") with an index less than 2 ") select all titles on the page

5. Content filter Content Filters

1 $ ("div: contains ('kimisme')") Select <div> element 2 $ ("td: empty") containing "Kimisme ") select <td> elements that do not contain child elements or text

3 $ ("div: has (p)") Select <div> element 4 with <p> elements $ ("td: parent ") select <td> elements containing child elements or text

6. Visibility filter Visibility Filters

1 $ ("tr: hidden") Select an invisible <tr> element: 2 $ ("tr: visible") Select a visible <tr> element:

7. Attribute filter Attribute Filters

1 $ ("div [id]") Select <div> element 2 $ ("input [name = 'newsletter ']") containing the id attribute. select the <input> element 3 $ ("input [name! = 'Newsletter '] ") Select the <input> element 4 $ (" input [name ^ = 'News'] ") Where the name attribute is not newsletter. select the <input> element 5 $ ("input [name $ = 'letter']") Starting with news in the name attribute and select the <input> element whose name ends with a letter: 6 $ ("input [name * = 'man']") select the <input> element 7 $ ("input [id] [name $ = 'man']") whose name contains man, and its name attribute is a <input> element ending with man.

8. Child Filters

1 $ ("ul li: nth-child (2)") Search for 2nd <li> elements in <ul> 2 $ ("ul li: first-child ") search for 1st <li> elements 3 $ ("ul li: last-child") in <ul> Elements ") find the last <li> element 4 $ ("ul li: only-child") in the <ul> element ") find the <li> element that is the only child element in the <ul> element

9. Form selector Forms

1 $ (": input") select all <input> elements 2 $ (": text") select all types = "text" text box 3 $ (": password ") select all passwords Box 4 $ (": radio") select all radio buttons 5 $ (": checkbox") select all check boxes 6 $ (": submit ") select all submit button 7 $ (": image") select all image domains 8 $ (": reset") select all reset buttons 9 $ (": button ") select All buttons 10 $ (": file") select all file Fields

10. Form Filter Form Filters

1 $ ("input: enabled") select all available input elements: 2 $ ("input: disabled") select all unavailable input elements: 3 $ ("input: checked ") select all selected check box elements: 4 $ (" select option: selected ") select all selected <select> elements:

Iv. References

Http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html

V. Remarks

If the style cannot be sent out, you still need to use the table. If you have time, change it.