JavaScript manipulation dom vs. Jquyer manipulation Dom

1. The object that is wrapped by the jquery method is a class array object . It's completely different from Dom objects, and the only similarity is that they all work with the DOM.

2. The object that is wrapped by the jquery method is a class array object. It's completely different from Dom objects, and the only similarity is that they all work with the DOM. Working with the DOM through jquery allows developers to focus more on the development of business logic without needing to know exactly which DOM node has those methods, and does not need to be concerned with the compatibility of different browsers, and we develop through the API provided by jquery, and the code is much shorter.

3.jQuery is a class array object, and the DOM object is a separate DOM element.

4. The index of the array is starting from 0 , that is, the first element subscript is 0

Example:

The jquery object itself provides a . Get () method that allows us to directly access the related DOM nodes in the jquery object, providing an index of an element in the Get method:

v ar $div = $ (' div ')//jquery object

var div = $div. Get (0)//Convert to DOM object by Get method

5. After the normal DOM object is processed into a jquery object through the $ (DOM) method, we can invoke the jquery method.

jquery selector: element selector ID Selector class Selector * Selector level selector Property selector ( child element descendant element sibling element neighbor element )

Attention:

1. IE will implement the annotation node as an element, so calling getElementsByTagName in IE will include a comment node, which is usually not expected
2. getElementById parameters are case-insensitive in IE8 and lower versions
3. IE7 and lower versions, in form elements, if the Name property name of form a uses the ID name of another element B and a before B, then getElementById will select a
4. IE8 and lower versions, browsers do not support Getelementsbyclassname

Native acquisition:

Get all the elements in the page
var elements1 = document.getelementsbytagname (' * ');

JQ Access:

Get all the elements in the page
var elements2 = $ ("*")?;
= = = data and type are equal
if (elements2.length = = = Elements1.length) {
Elements2.css ("Border", "1px solid Red");
}

Child Selector
$ (' div > P ') Select all DIV elements inside the child element p

Descendant Selector
$ (' div p ') select the P element inside all DIV elements

Adjacent sibling selector
$ (". Prev + div") Select the first div sibling node after prev

General Neighbor Selector
$ (". Prev ~ div") Select all the div sibling nodes that follow prev

There are several ways to hide an element:

1. The value of CSS display is none.
2. Type= the form element for "hidden".
3. Both width and height are explicitly set to 0.
4. An ancestor element is hidden and the element is not displayed on the page
5. The value of CSS visibility is hidden
6. CSS opacity refers to the 0

1. : Nth-child (Index) starts at 1 and EQ (index) starts at 0
2. The difference between Nth-child (n) and: Nth-last-child (n) is calculated from the former, the latter from the backward

There are 3 main DOM methods for operation characteristics, getattribute method, setattribute method and RemoveAttribute method.

attr () has 4 expressions

1. attr (incoming property name): Gets the value of the property
2. Attr (property name, property value): Sets the value of the property
3. Attr (property name, function value): Sets the function value of the property
4. attr (attributes): Sets multiple attribute values for the specified element: {attribute name one: attribute value one, property name two: ' Property value two ', ...}

Removeattr () Delete method

. Removeattr (AttributeName): Removes an attribute (attribute) for each element in the matching element collection

Advantages:

attr and Removeattr are jquery. For attribute manipulation encapsulation, call the method directly on a JQuery object, it is easy to manipulate the property, and do not need to deliberately understand the browser's property name of the different problems

Note the issue:

There is a conceptual distinction in DOM: attribute and property are translated as "attributes", and "JS Advanced Programming" is translated into "attributes" and "attributes". Simply understood, attribute is the property of the DOM node's own

To get attribute, you need to use attr to get the property you need to use prop

JavaScript manipulation dom vs. Jquyer manipulation Dom