The first parameter of all functions is: element, which represents the reference of the element to be operated. This is for the sake of adding these methods to the DOM object, using the methodize function. There is no need to enter the first parameter when calling, such as:
var b=$('div1').visible();
In addition, almost all functions will return themselves. Note that the type of extended element is: HTMLElement. One advantage of this is that it is convenient to write code continuously, such as:
$('div1').update().insert('This is the newly inserted');
This way of writing code has one advantage, it is highly readable and easy to write.
The following is the function introduction:
visible(element):Boolean
Is the element visible (relying on)
toggle(element)：HTMLElement
When an element is visible, it is invisible; when an element is not visible, it is invisible. Returns the reference to the element itself. (rely on)
hide(element)：HTMLElement
Hide elements. (rely on)
show(element)：HTMLElement
Show elements. (rely on)
remove(element)：HTMLElement
Delete the element itself (returns the deleted element after deletion).
update(element, content)：HTMLElement
Similarly, processing scripts and other functions are added. It inserts the content first, and then executes the script in the content.
replace(element, content)：HTMLElement
Replace the current element. and return the replaced element.
insert(element, insertions)：HTMLElement
Insert content at the specified location of the element, the value of insertions is as follows:
string/number/element, for example: 'this is the string to insert!!', by default, is inserted into the bottom position of the element.
{top:xxxxx,bottom:yyyy,before:zzzz,after:aaaa}, for example: {top:'this the content you will insert!'}.
The return value is element.
wrap(element, wrapper, attributes)：HTMLElement
Cover another element outside the element. Usually used for masking.
wrapper: elementId, element, tagName, attributes (when the created cover is a div, the tag settings can be omitted)
attributes: A JSON object used to set the style of elements, such as: {color:"red",backgroundImage:"url()"}
$('win1').wrap('div1',{color:“#666”});
$('win1').wrap('span',{font-size:12});
$('win1').wrap({color:“#666”});
Returns the reference to the created mask.
inspect(element)：string
Generate a string representing the current element, for example: <div id='xxx' class='xxx'>, which only needs two attributes, which are not equal to toHTML().
recursivelyCollect(element, property)：HTMLElement[]
It's hard to describe, for example: $('div1').recursivelyCollect('firstchild'), which returns all elements in div1 that are the eldest child identity.
ancestors(element)：HTMLElement[]
Returns all the original ancestors of this element, for example: if there is an element div1, its father is div2, div2, and its father is div3, and it keeps calling it.
descendants(element)：HTMLElement[]
Returns an array of nodes of all descendant elements. equal('*').
firstDescendant(element)：HTMLElement
Return to the first son. All sons (excluding grandchildren, great-grandchildren...oh).
immediateDescendants(element)：HTMLElement[]
Return to all sons (excluding grandchildren, great-grandchildren...oh).
previousSiblings(element)：HTMLElement[]
Return to all brothers.
nextSiblings(element)：HTMLElement[]
Return to all younger brothers.
siblings(element)：HTMLElement[]
Returns all brothers and sorts in order of "big to small" (the order of occurrence in html).
match(element, selector)：Boolean
Whether the element satisfies the specified selector
up(element, expression, index)：HTMLElement
In (), the index element in the array that satisfies the expression expression, the example is as follows:
$('div1').up('div',1) returns a reference to an element in the direct ancestor with a div label and a sequence number of 1.
down(element, expression, index)：HTMLElement
Return to the index element among descendants that satisfies the selection expression.
previous(element, expression, index)：HTMLElement
previous(element, expression, index)：HTMLElement
There is no suspense about these two, return to the previous one, the next one, the first n and the last n.
select(element,selector1,selector2,……)：HTMLElement[]
Returns an array of elements that satisfy the selector among descendants, and the union relationship between multiple selectors.
adjacent(element,selector)：HTMLElement[]
Return all brothers that satisfy the selection symbol, not including themselves.
identify(element)：string
If there is an id, return an id, and if there is no id, take an id. and return.
readAttribute(element, name)：string
Read properties
writeAttribute(element, name, value)：HTMLElement
Write properties
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
The above functions are used for querying and chores, and the following functions are generally used to obtain and set various coordinates. In a web page, there are several common coordinates of an element, but the following:
1. Relative to the upper left corner of the document
2. Relative to the upper left corner of the viewing area
3. Relative to a certain element
Looking at the code in each framework, these three types of coordinates are all used. A brief description is given below.
getHeight(element) and getWidth(element), which are equivalent to finding clientHeight and clientWidth.
classNames(element)：
hasClassName(element, className)：Boolean
addClassName(element, className)：HTMLElement
removeClassName(element, className)：HTMLElement
toggleClassName(element, className)：HTMLElement
cleanWhitespace(element): HTMLElement, delete blank text node
empty(element): Boolean, whether the content of the element is blank
descendantOf(element, ancestor): Boolean, determines whether an element is a descendant of a certain element, and the ancestor is an id or an element reference.
scrollTo(element): HTMLElement, scroll to this element, and return a reference to this element.
getStyle(element, style): The type is not determined, returns the value of a certain style of the element.
getOpacity(element): Float, return transparency.
setStyle(element, styles): HTMLElement, sets the style of the element, styles is a JSON object.
setOpacity(element, value): HTMLElement, set the transparency of the element.
getDimensions(element): {width:x,height:y}. Return clientWidth, clientHeight.
makePositioned(element): HTMLElement, set position to relative. Do not set the position to the current position.
undoPositioned(element): HTMLElement, set the position of the element to the default value.
makeClipping(element): HTMLElement, sets the overflow of elements.
undoClipping(element): HTMLElement, clear overflow.
cumulativeOffset(element): Element._returnOffset, get the offset relative to the entire page.
positionedOffset(element): Element._returnOffset, obtains the offset that is not static relative to the first position. If it is all static, it is relative to the page.
absolute(element): HTMLElement, set position to absolute, and set position to current position.
relative(element): HTMLElement, set position to ralative, and set position to current position.
cumulativeScrollOffset(element): Element._returnOffset, relative to the sum of scrollOffsets of the top-level container, it is not necessarily a document, because there is an iframe on the page.
getOffsetParent(element): HTMLElement, it's easy to say if you have studied css, no need to say more.
viewportOffset(element): Element._returnOffset, find the offset relative to the upper left corner of the viewport.
clonePosition(element, source): HTMLElement, clone the location attribute from source to itself.
var b=$('div1').visible();
In addition, almost all functions will return themselves. Note that the type of extended element is: HTMLElement. One advantage of this is that it is convenient to write code continuously, such as:
$('div1').update().insert('This is the newly inserted');
This way of writing code has one advantage, it is highly readable and easy to write.
The following is the function introduction:
visible(element):Boolean
Is the element visible (relying on)
toggle(element)：HTMLElement
When an element is visible, it is invisible; when an element is not visible, it is invisible. Returns the reference to the element itself. (rely on)
hide(element)：HTMLElement
Hide elements. (rely on)
show(element)：HTMLElement
Show elements. (rely on)
remove(element)：HTMLElement
Delete the element itself (returns the deleted element after deletion).
update(element, content)：HTMLElement
Similarly, processing scripts and other functions are added. It inserts the content first, and then executes the script in the content.
replace(element, content)：HTMLElement
Replace the current element. and return the replaced element.
insert(element, insertions)：HTMLElement
Insert content at the specified location of the element, the value of insertions is as follows:
string/number/element, for example: 'this is the string to insert!!', by default, is inserted into the bottom position of the element.
{top:xxxxx,bottom:yyyy,before:zzzz,after:aaaa}, for example: {top:'this the content you will insert!'}.
The return value is element.
wrap(element, wrapper, attributes)：HTMLElement
Cover another element outside the element. Usually used for masking.
wrapper: elementId, element, tagName, attributes (when the created cover is a div, the tag settings can be omitted)
attributes: A JSON object used to set the style of elements, such as: {color:"red",backgroundImage:"url()"}
$('win1').wrap('div1',{color:“#666”});
$('win1').wrap('span',{font-size:12});
$('win1').wrap({color:“#666”});
Returns the reference to the created mask.
inspect(element)：string
Generate a string representing the current element, for example: <div id='xxx' class='xxx'>, which only needs two attributes, which are not equal to toHTML().
recursivelyCollect(element, property)：HTMLElement[]
It's hard to describe, for example: $('div1').recursivelyCollect('firstchild'), which returns all elements in div1 that are the eldest child identity.
ancestors(element)：HTMLElement[]
Returns all the original ancestors of this element, for example: if there is an element div1, its father is div2, div2, and its father is div3, and it keeps calling it.
descendants(element)：HTMLElement[]
Returns an array of nodes of all descendant elements. equal('*').
firstDescendant(element)：HTMLElement
Return to the first son. All sons (excluding grandchildren, great-grandchildren...oh).
immediateDescendants(element)：HTMLElement[]
Return to all sons (excluding grandchildren, great-grandchildren...oh).
previousSiblings(element)：HTMLElement[]
Return to all brothers.
nextSiblings(element)：HTMLElement[]
Return to all younger brothers.
siblings(element)：HTMLElement[]
Returns all brothers and sorts in order of "big to small" (the order of occurrence in html).
match(element, selector)：Boolean
Whether the element satisfies the specified selector
up(element, expression, index)：HTMLElement
In (), the index element in the array that satisfies the expression expression, the example is as follows:
$('div1').up('div',1) returns a reference to an element in the direct ancestor with a div label and a sequence number of 1.
down(element, expression, index)：HTMLElement
Return to the index element among descendants that satisfies the selection expression.
previous(element, expression, index)：HTMLElement
previous(element, expression, index)：HTMLElement
There is no suspense about these two, return to the previous one, the next one, the first n and the last n.
select(element,selector1,selector2,……)：HTMLElement[]
Returns an array of elements that satisfy the selector among descendants, and the union relationship between multiple selectors.
adjacent(element,selector)：HTMLElement[]
Return all brothers that satisfy the selection symbol, not including themselves.
identify(element)：string
If there is an id, return an id, and if there is no id, take an id. and return.
readAttribute(element, name)：string
Read properties
writeAttribute(element, name, value)：HTMLElement
Write properties
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
The above functions are used for querying and chores, and the following functions are generally used to obtain and set various coordinates. In a web page, there are several common coordinates of an element, but the following:
1. Relative to the upper left corner of the document
2. Relative to the upper left corner of the viewing area
3. Relative to a certain element
Looking at the code in each framework, these three types of coordinates are all used. A brief description is given below.
getHeight(element) and getWidth(element), which are equivalent to finding clientHeight and clientWidth.
classNames(element)：
hasClassName(element, className)：Boolean
addClassName(element, className)：HTMLElement
removeClassName(element, className)：HTMLElement
toggleClassName(element, className)：HTMLElement
cleanWhitespace(element): HTMLElement, delete blank text node
empty(element): Boolean, whether the content of the element is blank
descendantOf(element, ancestor): Boolean, determines whether an element is a descendant of a certain element, and the ancestor is an id or an element reference.
scrollTo(element): HTMLElement, scroll to this element, and return a reference to this element.
getStyle(element, style): The type is not determined, returns the value of a certain style of the element.
getOpacity(element): Float, return transparency.
setStyle(element, styles): HTMLElement, sets the style of the element, styles is a JSON object.
setOpacity(element, value): HTMLElement, set the transparency of the element.
getDimensions(element): {width:x,height:y}. Return clientWidth, clientHeight.
makePositioned(element): HTMLElement, set position to relative. Do not set the position to the current position.
undoPositioned(element): HTMLElement, set the position of the element to the default value.
makeClipping(element): HTMLElement, sets the overflow of elements.
undoClipping(element): HTMLElement, clear overflow.
cumulativeOffset(element): Element._returnOffset, get the offset relative to the entire page.
positionedOffset(element): Element._returnOffset, obtains the offset that is not static relative to the first position. If it is all static, it is relative to the page.
absolute(element): HTMLElement, set position to absolute, and set position to current position.
relative(element): HTMLElement, set position to ralative, and set position to current position.
cumulativeScrollOffset(element): Element._returnOffset, relative to the sum of scrollOffsets of the top-level container, it is not necessarily a document, because there is an iframe on the page.
getOffsetParent(element): HTMLElement, it's easy to say if you have studied css, no need to say more.
viewportOffset(element): Element._returnOffset, find the offset relative to the upper left corner of the viewport.
clonePosition(element, source): HTMLElement, clone the location attribute from source to itself.