頁面元素為div->table->tr->td，對於td中的圖片，鼠標懸停上則顯示大圖片，鼠標離開則大圖片消失：
首先需要知道jq創建dom元素語法；$(html標簽)，例如這裡創建了一個img標簽var img = $("<img class='changePhoto'></img>");
其次鼠標的懸停與離開這裡使用的是hover方法，語法為$(selector).hover(inFunction,outFunction)，
規定當鼠標指針懸停在被選元素上時要運行的兩個函數。其中inFunction是必須的，outFunction是可選的。
該方法觸發 mouseenter 和 mouseleave 事件。
注意：如果只規定了一個函數，則它將會在 mouseenter 和 mouseleave 事件上運行。
這裡定義inFunction為確定大圖片的位置，outFunction為remove創建的img節點。
1）只創建對象是不夠的，還需要將創建的對象添加到文檔節點中去，jq中使用的方法為
append() - 在被選元素的結尾插入內容
prepend() - 在被選元素的開頭插入內容
after() - 在被選元素之後插入內容
before() - 在被選元素之前插入內容
應用在這裡則為先給該img賦值，再append：
img.attr("src", $element.find(".prePhoto").attr("src"));
$element.append(img);
2）確定大圖片位置的時候，需要三個參數，第一個是參照元素，這裡選的是td的parents元素，tr：var $element = $(this).parents("tr")。
第二個是本次創建的目標元素，這裡是img，第三個是目標元素可以出現的區域元素，一般是一個很大的元素，這裡是table的父元素div，$(".fatherDiv")
因此，具體的方法為，
function getPosition($element, img, $(".fatherDiv"){
var top = $element.position().top + $element.height();//得到top：參照元素的top + 參照元素本身的height。
var maxBottom = $(".fatherDiv").height();//得到區域元素的height。
var minTop = 40;
if (top + img.height() > maxBottom) {
top = $element.position().top - img.height();
}
if (top < minTop) {//兩個if判斷，保證無論怎麼劃動鼠標的滑輪，目標元素始終出現在屏幕上。
top = minTop;
}
var $firstElement = $($(".fatherDivtbody tr")[0]);
img.css('top',top - $firstElement.position().top + 40);
}
3）remove創建的對象；$element.remove();
4) 目標元素的css需要滿足一些條件：position:absolute
.changePhoto {
position: absolute;
width: 120px;
height: 160px;
left: 300px;
right: 10px;
float: right;
z-index: 9;
}