Document element selector for jquery_jquery-JS Tutorial-php.cn

Document element selector for jquery_jquery

WBOY

Release： 2016-05-16 19:01:43

Original

1182 people have browsed it

1. Start with $
For those who are familiar with prototype, the $ symbol should be familiar,

prototype: var element = $('eleId')
jquery: var element = $('#eleId ')
DOM: var element = document.getElementById('eleId')
The above three selection methods are equivalent. Compared with prototype, jquery has an extra # sign
Example:

$('#j1′).html()

Hello, jQuery!

2. Get what you want through xpath css...
1).
The HTML code we need to use in this example

Warning! Warning! Warning! Warning!

I am in the first paragraph

The second paragraph, hey, the Rockets lost 0-33! The Rockets bench has been put on the pillar of shame Yao Maihas no one around anymore People who make frequent mistakes become Yao Ming's fatal poison. The disappearance of the bench is the main reason for the Rockets' lagging behind

jquery code:

//Get the p mark array length under div.contentToChange
alert($('div.contentToChange p').size())

//Show/hide all matching elements by adjusting the height. The matching element here is p.firstParagraph
$ ('div.contentToChange p.firstParagraph').slideToggle('slow');

//Find the p element that matches all the css under all div.contentToChange that is not alert, and add text after it
$('div.contentToChange p:not(.alert)').append('This is the newly added text');

//Find all strong elements and css is the element of addText, and then deletes
$('strong.addText').remove();

//Find the element whose css is secondParagraph under the P mark, and then fade out
$(' div.contentToChange p.secondParagraph').hide('slow');

//Find all em elements under div.contentToChange, and then change their color and font through the css method in jquery
$ ('div.contentToChange em').css({color: "#993300",fontWeight: "bold"});

//Add css style
$('div.contentToChange p.secondParagraph ').addClass('new')

//Delete css style
$('div.contentToChange p.secondParagraph').removeClass('new');

2) .

The HTML code we need to use in this example:

This paragraph includes some css attributes with "groof" Text, which also has an outer link, some $(代码), and a hyperlink attribute starting with #.

silly.pdf

list item 2 with class="groof"

SURPRISE!

list item 4 with silly link to silly.pdf silly.pdf

Support Rockets, support MM!

jquery code

//Get the first list item
$('#jqdt ol li:eq(0)')
//Equivalent to
$(' #jqdt').find('li:eq(0)') //The following is the same as

//Get the list item of all even-numbered rows
$('#jqdt ol li:even')

//Get list items with index less than 3
$('#jqdt ol li:lt(3)')

//Get all list items in li whose css is not groove
$('#jqdt ol li:not(.groof)')

//Get all elements with hyperlink attribute values starting with '#' under the P tag
$('p a [@href*=#]')

//Get the collection of all code elements and li elements whose css is groof
$('#jqdt code, li.groof')

//First get A with the css attribute of groof under ol, and then find the strong element of the first-level child node under node A
$('#jqdt ol .groof > strong')

//First Find all list item elements that have list item as their previous node (so the first list item will not be selected because there is no list item node in front of it). Then find the hyperlink attribute value in these elements as ' The first-level child node at the end of pdf'
$('#jqdt ol li li > a[@href$=pdf]')

//Find all hidden span elements
$( 'span:visible')

//Find the element containing the word rocket in the hyperlink
$('li a:contains("Rocket")')

Note :
$('#jqdt ol.groof > strong') where > represents only accessing elements containing strong in the next level child node,
if changed to $('#jqdt ol.groof strong') Then access the strong elements in all subordinate child nodes, including child nodes of child nodes, etc.

3).
Commonly used custom selectors
:eq(0) The selection index is equal to 0, which is the first element

:gt(4) Select all elements with index greater than 4
:lt(4) Select all elements with index less than 4
:first is equivalent to :eq(0)
:last select the last element
:parent select All elements containing child nodes (including text).
:contains('test') Selects elements containing the specified text
:visible Selects all visible elements (including: display:block|inline, or visibility is visible Elements, but not including form elements (type hidden)
:hidden Selects all hidden elements (including: display:none, or elements with visibility of hidden, including form elements (type hidden)

Example:

$('p:first').css('fontWeight','bold')
$('div:hidden').show();
$("div :contains('test')").hide();

$('input[@name=bar]').val() //Get the value of the input form named bar
$('select[@name=slt]').val() //Get the median selection value of the drop-down menu named slt
$('input[@type=radio][@checked]') // Get all selected radio forms

Form Selector

:input Selects all form elements (input, select, textarea, button).
:text Selects all text fields (type="text").
:password Selects all password fields (type="password").
:radio Selects all radio fields (type="radio").
:checkbox Selects all checkbox fields (type="checkbox").
:submit Selects all submit buttons (type="submit").
:image Selects all form images (type="image").
: reset Selects all reset buttons (type=”reset”).
:button Selects all other buttons (type=”button”).

Example:

$(' myForm:input')
$('input:radio',myForm)
//:radio is equivalent to [@type=radio]