jquery Basic Note two

Source: Internet
Author: User

Creating elements dynamically


About creating elements with HTML DOM this article does not cover the details, here is a simple example:
Creating elements using the DOM standard
var select = Document.createelement ("select");
Select.options[0] = new Option ("Add-on 1", "value1");
SELECT.OPTIONS[1] = new Option ("Add-On 2", "value2");
Select.size = "2";
var object = testdiv.appendchild (select);
By using the Document.createelement method we can create DOM elements and then add them to the specified object through the AppendChild method.
So you will use this method call to modify the DOM function. Also pay attention to the difference between document.createelement and innerHTML.
If possible, create the object in the form of Document.createelement and $ ("<div/>").
or a $ (document) created dynamically using jquery. Ready (function) {
function () {testdiv.innerhtml = "<div style=\" border:solid 1px #FF0000 \ "> Using dynamically created $ (document). Ready (function) method </div> "; }
} method

Manage jquery Package Set elements

Now that you've learned to create elements dynamically, you'll want to put these elements into our jquery packaging set.

We can call these functions on the jquery wrapper set to change our original jquery wrapper set, and most of them return the filtered jquery package set.

jquery provides a series of functions to manage the package set:

1. Filter Filtering
Name Description Example
EQ (Index) Gets the nth element Gets the second element that matches: $ ("P"). EQ (1)
Filter (expr)

Filters out the collection of elements that match the specified expression.

Leave the element with the Select class: $ ("P"). Filter (". Selected")
Filter (FN)

Filters out the collection of elements that match the return value of the specified function

Each object is evaluated within this function once (as ' $.each '). If the called function returns false then this element is deleted, otherwise it will be preserved.

Preserve elements in child elements that do not contain OL:

$ ("div"). Filter (function (index) {return $ ("ol", this). Size () = = 0; });

Is (expr)
Note: This function returns not a jquery wrapper set but a Boolean value

An expression is used to examine the currently selected collection of elements, and returns true if at least one of the elements conforms to the given expression.

Returns ' false ' if no element is met, or if the expression is not valid. The function is actually called inside ' filter ', so the original rule of the filter () function is also applied here.

Because the input element's parent element is a FORM element, it returns true: $ ("input[type= ' checkbox ']"). Parent (). is ("form")
Map (callback)

Converts a set of elements to another array (whether or not an array of elements)

You can use this function to create a list, whether it's a value, a property, or a CSS style, or any other special form. This can be used ' $.map () ' to facilitate the establishment of

Create a list of values for each INPUT element in the form:

$ ("P"). Append ($ ("input"). Map (function () {return $ (this). Val (); }). Get (). Join (","));

Not (expr) To delete an element that matches a specified expression Removes the element with the ID of select from the P element: $ ("P"). Not ($ ("#selected") [0])

Slice (start, end)

Select a matching subset Select the first P element: $ ("P"). Slice (0, 1);
2. Find finding
Name Description Example
Add (expr)

Adds an element that matches an expression to a jquery object. This function can be used to concatenate the result set of an element that matches two expressions respectively.

Dynamically generates an element and adds it to the matching element: $ ("P"). Add ("<span>Again</span>")
Children ([expr])

Gets a collection of elements that contains all the child elements of each element in the matching element collection.

The matching child elements can be filtered by an optional expression. Note: parents () finds all ancestral elements, whereas children () considers only child elements regardless of all descendant elements.

Find each child element in the div: $ ("div"). Children ()
Closest ([expr]) Gets the most recent parent element that matches the expression

To change the style of the nearest parent class Li object for the event source:

$ (document). Bind ("click", Function (e) {$ (e.target). Closest ("Li"). Toggleclass ("Hilight"); });

Contents () Finds all child nodes (including text nodes) within a matching element. If the element is an IFRAME, find the document content Find all text nodes and bold: $ ("P"). Contents (). Not ("[nodetype=1]"). Wrap ("<b/>");
Find (expr)

Searches for all elements that match the specified expression. This function is a good way to find out the descendant elements of the element being processed.

All searches are done using jquery expressions. This expression can be written using Css1-3 's selector syntax.

Starting with all the paragraphs, search further for the following span element. Same as $ ("P span"): $ ("P"). FIND ("span")
Next ([expr])

Gets a collection of elements that contain the next sibling element immediately following each element in the matching element collection.

This function only returns the next sibling element, not all of the siblings behind it (you can use Nextall). You can filter with an optional expression.

Locate the sibling element that is immediately behind each paragraph: $ ("P"). Next ()
Nextall ([expr])

Finds all sibling elements after the current element.

can be filtered with an expression

Add a class to all elements after the first div: $ ("Div:first"). Nextall (). addclass ("after");
OffsetParent () Returns the first parent that has a location (for example (relative or absolute)).
Parent ([expr])

Gets a collection of elements that contain the unique parent element for all matching elements.

You can use an optional expression to filter.

Find the parent element for each paragraph: $ ("P"). Parent ()
Parents ([expr]) Gets a collection of elements containing the ancestor elements of all matching elements (without the root element). You can filter by an optional expression. Find all the ancestor elements of each span element: $ ("span"). Parents ()
Prev ([expr])

Gets a collection of elements that contain the first sibling element immediately adjacent to each element in the matching element collection.

You can filter with an optional expression. Only the immediate sibling elements are matched to, not all of the preceding sibling elements.

Find the previous sibling element that is adjacent to each paragraph: $ ("P"). Prev ()
Prevall ([expr])

Finds all sibling elements before the current element

can be filtered with an expression.

Add a class to the last div: $ ("Div:last"). Prevall (). addclass ("before");
Siblings ([expr]) Gets a collection of elements that contain all unique sibling elements of each element in the matching element collection. You can filter by using an optional expression. Find all the sibling elements of each div: $ ("div"). Siblings ()

3. Tandem Chaining

Name Description Example
Andself ()

Join the current element as previously selected

For elements that are filtered or found, it is useful to join the previously selected element.

Select All div and the internal p, plus the Border class: $ ("div"). Find ("P"). Andself (). addclass ("border");
End () Back to a recent "destructive" operation. That is, the list of matched elements changes to the previous state.
Returns an empty set if there were no previous destructive actions. The so-called "destructive" refers to any action that alters the matching jquery element. This includes any function that returns a JQuery object in traversing--' add ', ' andself ', ' children ', ' filter ', ' find ', ' map ', ' next ', ' Nextall ', ' not ', ' par ' Ent ', ' parents ', ' prev ', ' prevall ', ' siblings ' and ' slice '--plus ' clone ' in manipulation.
Select all the P elements, find and select the span child element, and then return to the P element:
$ ("P"). FIND ("span"). End ()

Reprint: http://www.cnblogs.com/engine1984/archive/2012/02/28/2371473.html

jquery Basic Note two

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.