$ ( "# 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').
Do you think the Jquery selector look like?
Guess you like
Origin www.cnblogs.com/hualiuliu/p/11453726.html
Recommended
Ranking