Home > front end >  JavaScript jQueryDOM node operation
JavaScript jQueryDOM node operation

Time:12-27

//1.0 jQuery attribute
/*
Each element has one or more features, these features of purpose is to give additional information or its content of relevant elements,
Such as: in the img element, the SRC is the characteristics of the element, which is used to mark the picture address
Operation features in JavaScript DOM methods mainly have three,
1. The getAttribute () to obtain feature
2. The setAttribute () sets the properties
Remove features 3. RemoveAttribute ()
Operation features in jQuery jQuery methods:
1. The attr () to get/set property
2. RemoveAttr remove attributes ()
In using a jQuery attr () and removeAttr () can be done entirely,
Used in jQuery attr () method to get and set properties element, attr attribute is the abbreviation of (property), often can be used in the operation of the jQuery DOM attr ()
*/
//1.1 attr () and removeAttr () the use of the
/*
Attr () method of usage:
1. $(element). Attr (" attribute name ");//get the property name attribute values
2. $(element). Attr (" property ", "attribute value");//attribute value to use as attributes for
3. $(element). Attr (" attribute name ", "function value");//function value to use as attributes for
4. $(element). Attr ({" attribute name ":" attribute value ", "attribute name" : "attribute value"});//to the specified element to set up multiple attribute values
RemoveAttr () method of usage:
1. $(element). RemoveAttr (" attribute name ");//removed from the corresponding attribute

//1.0 jQuery selector
/*
Any operation needs the support of the node of the page, how fast and efficient developers find specified node was one of the front-end development focus,
JQuery provides a series of selector to help developers to achieve this goal, let developers can choose less complex process and performance optimization, more focus on business logic written,
JQuery support mainstream css1 almost ~ the range selector method and we start from the simplest and most commonly used in English:
*/
//1.1 ID selector $(" # ID ");
/*
Id selector is also the basic selector, jQuery internal use JavaScript function document. The getElementById () to handle id,
Native syntax support is always very efficient, so on the operation of the DOM, if can use id always consider using the selector
Note: the id is unique, each id value can be used only once in a page, if multiple elements are assigned the same id,
Will match the id only choice set first DOM elements, but this should not happen; Have more than one element of the page using the same id is invalid
*/


//1.0 jQuery attribute. HTML () and text () method
/*
Read, modify the HTML structure element or elements of the text is a common DOM manipulation,
JavaScript to provide innerHTML with the innerText attribute
JQuery on the processing provides two convenient method. The HTML () with the text ()
*/
//$1.1 (element). The HTML () method
/*
Access to set the HTML contents of the first matched element or set the HTML content of every matched element.
1. $(element). The HTML element () to obtain elements of HTML content
2. $(element). The HTML (" htmlString ") for each matched element to add HTML content

Important note: $(element). The HTML () method for internal use of the DOM is innerHTML attributes to deal with,
So attention should be paid to in setting up and get one of the most important problems of this operation is for the entire HTML content (more than just text content)
*/
//1.0 jQuery attribute dynamic operations class
/*
1. $(element). The addClass ();//for each of the matched elements to increase by one or more of the style name
- method does not replace a style class name, it simply add a style class name to the element
2. $(element). RemoveClass ();//remove every matched element of one or more separated by a space style name
3. $(element). ToggleClass ();
//on each element in the set of matched elements to add or remove one or more of the style class,
Depends on whether the style classes exist or switch value attributes, i.e., if there is (no) is removed (add) a class
*/
/*
JavaScript in dynamic operating through the className attribute class class
*/

//jQuery style operation $1.0 (element).
CSS () method/*
Obtained through JavaScript DOM elements on the style attribute, we can dynamically given style attributes to elements,
We to dynamic changes in the jQuery as long as we use CSS style attributes () method can be realized:
: $(element). The CSS () method to obtain the calculated value of style attributes or elements set CSS properties of the element
*/
//$1.1 (element). The CSS () method to use
/*
1. $(element). The CSS (" attribute name ")//get the first element of a set of matching elements of the calculated value of style properties
2. $(element). The CSS ([1 "attribute name", "the property name 2"])//pass an array, returns an object the results
3. $(element). The CSS (" property ", "attribute value")//set the CSS class of element
4. $(element). The CSS ({" attribute 1 ":" attribute value 1 ", "property 2" : "attribute value 2"})//can pass an object, at the same time set up multiple style
5. $(element). The CSS ({property name, the function})//can pass in a callback function that returns to the corresponding value for processing
*/

//1.2 note
/*
Browser properties in different ways, have certain values for jQuery adopts unified processing, such as color USES RBG, size the px
$(element). The CSS () method to support the hump writing and case mix method and internal did fault-tolerant processing
When a number is only as the value (value), the jQuery will transform it into a string, and at the end of the string to add px,
For example, CSS (" width ", 50}) with the CSS (" width ", "50 px"}) as
  • Related