Shulou(Shulou.com)06/03 Report--

Editor to share with you how to choose elements in jquery, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. Introduction of the elements in the web page

1.1 understanding DOM

One of the biggest features of JQUERY is that it simplifies the task of selecting elements in DOM

DOM acts as an interface between web pages and javascript, representing html code in the form of object networks rather than plain text

Is the ancestor element in the web page.

Find out the relationship between Chu son elements, parent elements and peer elements.

2. How to find elements in a page through the CSS selector

2.1 use the $() function

The set of results obtained by the various selectors and methods of jquery will be wrapped in the jquery object

The $() function is required to create a jquery object

This object accepts the CSS selector as a parameter, acts as a factory, and returns the jquery that contains the corresponding elements in the page.

Object

All selectors that can be used in the stylesheet can be passed to this function, which we can then apply to the matching set of elements.

Jquery method

2.2 three basic selectors

-- signature selector, ID selector, class selector

When you attach a method to the $() factory function, the elements wrapped in the jquery object are automatically and implicitly looped

Traversing. In other words, this avoids using display iterations such as for loops, which are used in dom scripting

Very common)

2.3CSS selector

Jquery supports almost all selectors from CSS specification 1 to CSS specification 3, so you don't have to ignore that kind of browser.

Worry about solving some selector that is not commonly used, as long as the browser is enabled with javascript

2.3.1 add styles based on the level of the list item

$(document) .ready (function () {$('# selected-plays > li'). AddClass ('horizontal');})

The selector in the $() function means to find the child of an element (# selected-plays) whose ID is selected-plays

All list items in prime (>) (li)

$(document) .ready (function () {$('# selected-plays > li'). AddClass ('horizontal'); $(' # selected-plays > li:not ('horizontal')'). AddClass ('sub-lev');})

There are many ways to add styles to other items (non-top-level items). Because horizontal has been added to the top-level item

Class, so one way to get all the non-top-level items is to use a negative pseudo-class selector to identify that there is no horizontal

All list items for the class.

2.4 attribute selector

The attribute selector is a particularly useful selector in the CSS selector, which is selected by the attribute of the HTML element

Selective element

Attribute selectors use a syntax borrowed from regular expressions

^ indicates that the value is at the beginning of the string

$indicates that the value is at the end of the string

* indicates that the value is anywhere in the string

2.4.1 add styles to links

$(document) .ready (function () {$('a [href^ = "mailto"]') .addClass ('mailto');})

Select the element whose value of the href attribute of the A tag begins with mailto

$(document) .ready (function () {$('a [href $= ".pdf"]') .addClass ('mailto');})

Select the element whose value ends in .pdf for the href attribute of the A tag

$(document) .ready (function () {$('a [href^ = "http"] [href*= "henry"]') .addClass ('mailto');})

Select the value of the href attribute of the A tag that begins with http, and the element of henry appears anywhere

2.5 Custom selector (the custom selector here refers to the selector defined by jquery)

This type of selector usually follows the CSS selector and selects elements based on the location of the set of elements that have been selected

$('div.horizontal:eq (1))'

Select the second item in the collection with the horizontal class style

$(document) .ready (function () {$('tr:even'). AddClass (' alt');})

Add the style class alt to all odd numbers in dom, and even numbers use odd

: nth-child this selector is evaluated relative to the parent element of the element, ending the number, with odd,even as the parameter

Is the only selector in jquery that counts from 1

$(document) .ready (function () {$('td:contains (Henry)') .addClass ('highlight');})

Select the element that contains Henry in the content of any cell, and add the highlight style class: contains () is case-sensitive

Form selector

: input input elements of the class

: button button element or element whose type is button

Enabled enabled form elements

: form elements disabled by disabled

Radio button or check box checked by checked

: option elements selected by selected

2.6DOM traversal method

The .filter () method iterates over all matching elements and calls the incoming function soldier for each element to test the function.

True retains the return value of the number, and false removes the corresponding element from the matching set

$('tr'). Filter (': even'). AddClass ('alt')

.Next selects the last element that matches the element

$(document) .ready (function () {$('td:contains (Henry)'). Next (). AddClass ('highlight');})

.nextAll selects all subsequent elements that match the element

$(document) .ready (function () {$('td:contains (Henry)'). NextAll (). AddClass ('highlight');})

.prev selects the money that matches the element.

$(document) .ready (function () {$('td:contains (Henry)'). Prev (). AddClass ('highlight');})

.match all selects all the preceding elements that match the element

$(document) .ready (function () {$('td:contains (Henry)'). PrevAll (). AddClass ('highlight');})

.sliblings selects all other elements in the same DOM hierarchy

$(document) .ready (function () {$('td:contains (Henry)'). Sliblings (). AddClass ('highlight');}); $(document) .ready (function () {$(' td:contains (Henry)'). NextAll (). AddBack (). AddClass ('highlight');})

.addBack () contains the original element in the selected element

$(document) .ready (function () {$('td:contains (Henry)'). Parent (). Children (). AddClass ('highlight');})

Trace back to the next level in DOM through .parent (), and then select the line's

All cells

2.7 access to DOM elements

Why access DOM: all selector expressions and most jquery methods return a jquery object, which is usually

What we expect is that the jquery object can provide implicit iteration capabilities; but sometimes we may need to re-code

Directly access DOM elements in the

Var myTag = $('# my-element'). Get (0) .tagName; abbreviated: var myTag = $('# my-element') [0] .tagName

Select the tag name of the element whose id is my-element

The above is all the content of the article "how to choose elements in jquery". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.