The location of jquery

1, offset () Gets the offset of the matching element in the relative browser window that returns an object, including two properties. Left: the distance from the opposite side of the browser window. Top: The distance relative to the top of the browser.

$ ("#div1"). Offset (). Left; Returns the distance from the leftmost ID of div1 relative to the browser window

$ ("#div1"). Offset (). Top; Returns the distance of ID div1 relative to the top of the browser window

The following example shows a date div displayed below when the text box is clicked. Tightly stick to the text box above. And does not need to adjust the div CSS position, regardless of the above text box position if changes, can tightly as healthcare worker the above text box, remembers in the previous few days to love the wheels off registration system JS simulation drop-down list when is the CSS to paste the above text box, so once changed the text box position, Emulate the drop-down list of the Div's CSS also to keep up with the tune, in fact this is very SB's. The following method is good.

function Showdiv (obj) {jquery ("#divShow"). CSS ("left", jquery (obj). Offset (). left);　　Sets the distance between the #divshow and the left of the browser as the text box distance from the left side of the browser.　　jquery ("#divShow"). CSS ("Top", JQuery (obj). Offset (). Top + jQuery (obj). Outerheight ());　　Set the distance at the top of the #divshow distance to the distance from the top of the text box and its height. JQuery ("#divShow"). Show ();} <input type= "text" value= "OK" onclick= "showdiv (This)," style= "margin-left:100px;"/><div id= "Divshow" style= "Display:none;position:absolute;" >2010-03-22</div>

2, Position () gets the match element at the offset of the relative parent element that returns an object, including two properties. Left: The leftmost distance relative to the parent element. Top: The rightmost distance relative to the parent element. Valid only for visible elements.

The above code is equivalent to javascript:
        function fun1 () {            var left = document.getElementById ("Div2"). offsetleft;　　　            var top = document.getElementById ("Div2"). OffsetTop;            alert (the distance from the top of the parent element is: "+ Left +"; Distance from the left side of the parent element is: "+ Top";        }
JavaScript is a little bit different than jquery is that it outputs an integer 21, 33, but with a CSS set to a pixel, jquery can also be used in math method to restore, but JavaScript does not know how to do.
3. ScrollTop () Gets the distance from the top of the scroll bar of the matching element, which is plainly the top of the border and the topmost distance currently displayed.
ScrollTop (val) sets the distance of the matching element from the top of the scroll bar
This property is often used in conjunction with the scroll () event to enable elements to scroll with the scroll bar, similar to the floating ad effect.
$ (this). Scroll (function () {
$ ("#div1"). CSS ("Top", $ (document). ScrollTop ()); Note that the DIV with ID div1 is set to absolute positioning. If the bottom is floating, only $ (document) is required. ScrollTop () plus the corresponding vertical distance is available.
})
4. ScrollLeft () Gets the distance from the top of the scrollbar to match the element, which is plainly the leftmost distance from the left edge of the bounding box and the current display.
ScrollLeft (val) sets the distance of the matching element from the top of the scroll bar
5, height () Gets the height value of the matching element//does not include the padding, not including the border Val can be the string "300px", can also be the number 300, can also be a function, return the value as a parameter
Height (val) sets the altitude value of the matching element
6. Width () Gets the value of the matching element//does not include the padding, excluding the border
Width (val) Sets the value of the matching element
7. Innerheight () Gets the height value of the matching element//including padding but not border
Innerhenght (val) sets the height value of the matching element
8. Innerwidth () Gets the width value of the matching element//including padding but not border
Innerwidth (val) sets the width value of the matching element
The above main jquery is equivalent to the code (JavaScript version):
function fun1 () {var innerwidth = document.getElementById ("Div1"). clientwidth;　　var innerheight = document.getElementById ("Div1"). clientheight; Alert ("The width of the DIV1 is:" + innerwidth + "The height of the Div1 is:" + innerheight);}
9, Outerheight () Gets the height value of the element//including padding and border
Outerheight (val) sets the height value of the element
You can also accept a parameter that represents whether the margin is calculated, or true to calculate the margin.
10, Outerwidth () Gets the width value of the matching element//(including padding and border)
Outerwidth () Sets the width value of the matching element
You can also accept a parameter that represents whether the margin is calculated, or true to calculate the margin.
In the case that jquery's parameters are not true, the main code for jquery above is the equivalent of:
        function fun1 () {            var outerwidth = document.getElementById ("Div1"). offsetwidth;            var outerheight = document.getElementById ("Div1"). offsetheight;            Alert (the width of the DIV1 is: "+ Outerwidth +"; The height of the Div1 is: "+ outerheight);        }
If the argument is true, it is equivalent to javascript:
        function fun1 () {            var div1 = document.getElementById ("Div1");            var outerWidth1 = div1.offsetwidth + parseint (div1.style.marginLeft) + parseint (div1.style.marginRight);            var outerHeight1 = div1.offsetheight + parseint (div1.style.marginTop) + parseint (div1.style.marginBottom);            Alert (the width of the DIV1 is: "+ outerWidth1 +"; The height of the Div1 is: "+ outerHeight1);        }
Here may not write very well, there should be a better way, I am still in the beginner JavaScript.