Learn jQuery from scratch (3) Manage jQuery packaging set

1. Summary
After using the jQuery selector to obtain the jQuery wrapper set, we need to operate it. This chapter first explains how to dynamically create elements, and then learns how to manage jQuery wrapper sets, such as adding , delete, slice, etc.

2. Introduction
There are too many APIs listed in the 2 and 3 articles of this series. I believe everyone will feel dizzy. But these are the basics. It must also be said that the foundation must be solid. In fact, you can skip these lists and look back at them or check the official API instructions when you use them later.

This chapter has very little content. It mainly explains the dynamic creation of elements and Operate various functions of the jQuery packaging set.

3. Dynamically create elements
1. Wrong programming method
We often use javascript to dynamically create elements, and there are many programmers By directly changing the HTML content of a container. For example:

Copy the code The code is as follows:

< ;html xmlns="http://www.w3.org/1999/xhtml"> 

Dynamic creation of objects

test layer

In the above example, I dynamically added a div element to the page by modifying the content of testDiv. But please keep in mind that this is the wrong approach!

Cause of error:

(1) The structure of the page is changed when the page is loaded. In IE6, it will appear if the network slows down or the page content is too large" Terminate operation" error. In other words, "Never change the DOM model of the page while the page is loading."

(2) Adding elements by modifying HTML content does not comply with the DOM standard. It is also encountered in actual work. After using this method to modify the content, the added elements cannot be displayed immediately in some browsers because the display engines of different browsers are different. But if we use Dom's CreateElement to create objects, in all browsers Almost everything is OK. But in jQuery, if a complete HTML string is passed in, innerHTML is also used internally. So the use of the innerHTML function is not completely negated.

So please abandon this from now on Old knowledge, use the correct method of programming introduced below.

2. Create new elements
The following introduces two correct ways to create elements.

(1) Create elements using HTML DOM
What is DOM?

With JavaScript, you can reconstruct your entire HTML document. You can add, remove, change, or rearrange items on the page.

To change something on the page, JavaScript needs access to all elements in the HTML document. This entry, along with the methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM).

In 1998, W3C released the first level DOM specification. This specification allows access and manipulation of every individual element in an HTML page.

All browsers have implemented this standard, so DOM compatibility issues are almost impossible to find.

DOM can be used by JavaScript to read and change HTML, XHTML and XML documents.

DOM is divided into different parts (Core, XML and HTML) and levels (DOM Level 1/2/3):
Core DOM
defines a set of standards for any structured Document objects
XML DOM
defines a standard set of objects for XML documents
HTML DOM
defines a standard set of objects for HTML documents.
This article will not go into detail about using HTML DOM to create elements. Here is a simple example:

Copy the code The code is as follows :

 
//Create elements using Dom standards
var select = document.createElement("select"); 
select.options[0] = new Option("Add-in 1" , "value1"); 
select.options[1] = new Option("add-in2", "value2"); 
select.size = "2"; 
var object = testDiv.appendChild (select); 

We can create Dom elements by using the document.createElement method, and then add them to the specified object through the appendChild method.
(2) Use the jQuery function to create elements
Created in jQuery Objects are simpler, such as creating a Div element:
$("

dynamically created div

")
We mainly use jQuery core classes A method in the library:

jQuery( html, ownerDocument )
Returns: jQuery

Dynamicly create Dom elements based on HTML original strings.

The html parameter is an HTML string. This function has been improved in jQuery 1.3.2:

When the HTML string is an element without attributes, document.createElement is used internally to create the element, for example: