Do you think the Jquery selector look like?

$ ( "# myELement") equal to the value of the element myElement select id, id, value can not be repeated in a document can have only one id value myElement So get is the only element  
$ ( "div") select all elements div tags, return div element in the array  
$ ( ". myClass") choose to use css myClass class of all elements  
$ ( "*") select all elements in the document, you can use a variety of ways to select the joint selection: for example, $ ( "# myELement, div, .myclass ")  
 
laminated selector:  
$ (" form input ") to select all of the input element form elements  
$ (" # main> * " ) select all the main sub-element id value of  
$ (" label + input ") to select the next input element node all the label elements, the test selector returns back label labels directly followed by an input label all input tag element  
$ (" # prev ~ div " ) compatriots selector, All tags div id is returned to the prev tag selector element belonging to the same parent element of the  
 
basic filter selector:  
$ ( "tr: first") selects the first element of all tr  
$ ( "tr: last "  ) Select the last all tr elements
$ ( "input: not (:     checked) + span")
 
to filter out: checked selector of all input elements  
 
$ ( "tr: even") select all elements of the first tr ... 0,2,4 ... elements (note: if several elements selected because of an array, so the number is zero)  
 
$ ( "tr: odd") select all elements tr ... 1,3,5 ... elements  
$ ( "td: eq (2 )") select all elements td td 2 of the serial number element  
$ ( "td: gt (4)") to select all the td element td elements in a number greater than 4  
$ ( "td: LL (4)") select all the td element td element number is less than 4  
$ ( ": header ")  
$ (" div: Animated ")  
content filter selector:  
 
$ (" div: the contains ( 'John') ") selected element contained John text of all the div  
$ (" td: empty ") to select all of empty (not including text nodes) array td elements  
$ ( "div: has (p )") select all elements containing div p tag  
$ ( "td: parent") to select all td parent node elements an array of  
visual filter selector:  
 
$ ( "div: hidden"  ) Select all the hidden div element
$ ( "div: visible") to select all of the visualization div element  
attribute filter selectors:  
 
$ ( "div [id]" ) select all div elements containing id attribute  
$ ( "input [name = ' newsletter']") to select all of the name attribute is equal to 'newsletter' input element  
 
$ ( "input [name! = 'newsletter'] ") to select all of the name attribute is not equal to 'newsletter' input element  
 
$ (" input [name ^ = 'news'] ") to select all of the name attribute to 'news' input elements at the beginning  
$ (" input [name $ = 'news'] ") to select all of the name attribute to 'news' end of the input element  
$ (" input [name * = 'man'] ") to select all of the name attribute contains the 'news' input element  
 
$ ( "input [id] [name $ = 'man']") may be combined using a plurality of attribute selection, which is obtained containing all of the id attribute and attribute it to the end of the element man  
 
subelements filter selector:  
 
$ ( "ul li: Nth-Child (2)"), $ ( "ul li: Nth-Child (the ODD)"), $ ( "ul li: Nth-Child (3N + 1)")  
 
$ ( "div span :  "array) returns all of the div element first child of first-child
an array of last-child") returns all of the div element of the last node: $ ( "div span  
Array: ( "only-child div button ") returns all of the div there is only one child node of all child nodes $  
 
form element selector:  
 
$ ( ": the INPUT") select all form input elements, including input, textarea , select and the Button  
 
$ ( ": text") to select all the text input elements  
$ ( ": password") select all password input element  
$ ( ": radio") select all radio input elements  
$ ( ": checkbox") select all checkbox input elements  
$ ( ": submit") select all submit input element  
$ ( ": image") to select all of the image input elements  
$ ( ": reset") to select all of the reset input elements  
$ ( ": button ') select all button input element  
$ ( ": file") to select all of the file input element  
$ ( ":  hidden ") select all the input elements hidden type or hidden form fields
 
filter selector form element:  
 
$ ( ": enabled") operable to select all of the form elements  
$ ( ": disabled") Select All form elements inoperable  
$ ( ": checked") are checked to select all of the form elements  
$ ( "select option : selected ") to select child elements of the select elements is selected to  
 
   
 
select a name for the" "on a td of the text value INPUT text box S_03_22
$ (" INPUT [@ name = S_03_22] ") parent (). .prev (). text ()  
 
name to "S_" begins, and not to "_R" end
$ ( "input [@ name ^ = 'S _']"). not ( "[@ name $ = '_ R' ] ")  
 
value of the selected radio named radio_01 of
$ (" INPUT [@ name = radio_01] [the checked @] ") Val ();.  
 
   
 
   
 
$ (" AB ") Find all child nodes of the following elements a, comprising non-direct child node
$ ( "a> B") to find the a element following direct child node
$ ( "a + B") to find sibling nodes behind the a elements, including a non-direct child node
$ ( "a ~ B") to find a behind the sibling elements, excluding non-direct child node  
 
1. $ ( "a B"  ) Find all child nodes of the following elements A, including indirect child nodes
 
example: Find all of input elements in the form  
 
of HTML code:  
 
<form>
<label> the Name: </ label>
<INPUT name = "name" />
<the fieldset>
      <label> Newsletter: </ label>
      <INPUT name = "newsletter" />
</ the fieldset>
</ form>
<INPUT name = "none" />  
the jQuery Code:  
 
$ ( "INPUT form")  
results:  
 
[<INPUT name = "name" />, <INPUT name = "newsletter" />]  
 
2. $ ( "A> B") to find a direct child element of the following  
examples: matching form elements of all the sub-level input.  
 
HTML code:  
 
<form>
<label> the Name: </ label>
<INPUT name = "name" />
<the fieldset>
      <label> Newsletter: </ label>
      <




 

Results:  
 
[<input name = "name" />]  
 
3. $ ( "A + B") A look behind the sibling elements, including a non-direct child node  
examples: Match all input elements behind the label  
 
HTML code:  
 
<form>
<label> the name: </ label>
<INPUT name = "name" />
<the fieldset>
      <label> newsletter: </ label>
      <INPUT name = "newsletter" />
</ the fieldset>
</ form>
<INPUT name = "none" />  
the jQuery Code:  
 
$ ( "label INPUT +")  
results:  
 
[<INPUT name = "name" />, <INPUT name = "newsletter" />]  
 
 
4. $ ( "A ~ B ") a look behind the sibling elements, excluding non-direct child node  
example: find all peers with the form input elements  
 
HTML code:   
 
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
</fieldset>
</form>
<input name="none" />  
jQuery 代码:  
 
$("form ~ input")  
结果:  
 
[ <input name="none" /> ]






一、获取父级元素

1、 parent([expr]):

获取指定元素的所有父级元素
<div id="par_div"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></div>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</ span> . 1, Next ([expr]):two, obtaining sibling elements:Firebug effect view jquery parent});$ ( "A") parent (). addClass ( 'a_par');..
$ (Document) .ready (function () {







Gets the next brother element of the element (note the next sibling element oh)

<! DOCTYPE HTML>
<HTML>
<head>
  <Script type = "text / JavaScript" the src = "/ jQuery / jquery.js"> </ Script>
</ head>

<body>
<UL>
   <Li> List Item. 1 </ Li>
   <Li> List Item 2 </ Li>
   <Li class = "THIRD-Item"> List Item. 3 </ Li >
   <Li> List Item. 4 </ Li>
   <Li> List Item. 5 </ Li>
</ UL>

<Script>
$ ( 'li.third-Item'). Next (). CSS ( 'background-Color' , 'red');
</ Script>

</ body>
</ HTML>

the results of this example, only the background color of list item 4 red

 
2, nextAll ([expr]) :

Get all the specified element sibling elements behind
the Hello

the Hello Again
<div> <span> And Again </ span> </ div>
var p_nex $ = ( "P") nextAll ().;
p_nex.addClass ( 'p_next_all');

firebug_jq_nextall
Note the last "<p & gt" tag Oh, was also added 'p_next_all' class name oh ~ ~

 
. 3, andSelf ():

Get the specified element behind all sibling elements and then add the specified element

I feel this is the most interesting function of a function, and what does that mean? Literal translation is "And I," "there is myself," Yes, well as their own.
<P> the Hello </ P> <P> the Hello Again </ P> <div> <span> And Again </ span> </ div>
var p_nex = $ ( "P"). nextAll (). andSelf () ;
p_nex.addClass ( 'p_next_all');

Note the first "<p>" tag ah, this means to select all of the peer label on the back of the label p, and themselves. . .
firebug_jq_andself

 

both of the following specific examples do not move, in fact, is next () and nextAll () opposite myself

4, prev (): Get the specified element on a sibling element (is on a oh).

5, prevAll (): Gets the specified element in front of all the sibling elements.

Third, the acquisition sub-elements

1, Embodiment 1 to find the sub-elements:>

example: var aNods = $ ( "ul > a");







1> children and find methods are used is used to obtain sub-elements of the element, both of which will not return text node, like most of jQuery methods.
2> children only way to get what grade a child element, namely: immediate children.
3> find a method to obtain all subordinate elements, namely: Calls the descendants of THESE The Elements in the DOM Tree
. 4> parameter selector Children method is optional (OPTIONALLY), sub-elements for filtration,

but the parameter selector methods find methods must be selected of.
5> find methods can in fact be achieved by using jQuery (selector, context). I.e., $ ( 'li.item-ii') . Find ( 'li') is equivalent to $ ( 'li', 'li.item -ii').

 


Guess you like

Origin www.cnblogs.com/hualiuliu/p/11453726.html