xiaotuzi 上海海事大学 2020年04月23日
。proxy()函数的疑问?
/******************************************************************************
Our plugin code comes first in this document. Normally, plugins would
appear in separate files named jquery.plugin-name.js, but for our examples
it's convenient to place this plugin code in the same JavaScript file as
the code that calls it.
******************************************************************************/

/******************************************************************************
$.sum()
Return the total of the numeric values in an array/object.
******************************************************************************/
(function($) {
$.mathUtils = {
sum: function(array) {
var total = 0;

$.each(array, function(index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;

total += value;
});
return total;
},
average: function(array) {
if ($.isArray(array)) {
return $.mathUtils.sum(array) / array.length;
}
return '';
}
};
})(jQuery);


/******************************************************************************
.swapClass()
Exchange one class for another on the selected elements.
******************************************************************************/
(function($) {
$.fn.swapClass = function(class1, class2) {
return this.each(function() {
var $element = $(this);
if ($element.hasClass(class1)) {
$element.removeClass(class1).addClass(class2);
}
else if ($element.hasClass(class2)) {
$element.removeClass(class2).addClass(class1);
}
});
};
})(jQuery);


/******************************************************************************
.shadow()
Create a shadow effect on any element by brute-force copying.
******************************************************************************/
(function($) {
$.fn.shadow = function(opts) {
var options = $.extend({}, $.fn.shadow.defaults, opts);

return this.each(function() {
var $originalElement = $(this);
for (var i = 0; i < options.copies; i++) {
var offset = options.copyOffset(i);
$originalElement
.clone()
.css({
position: 'absolute',
left: $originalElement.offset().left + offset.x,
top: $originalElement.offset().top + offset.y,
margin: 0,
zIndex: -1,
opacity: options.opacity
})
.appendTo('body');
}
});
};

$.fn.shadow.defaults = {
copies: 5,
opacity: 0.1,
copyOffset: function(index) {
return {x: index, y: index};
}
};
})(jQuery);


/******************************************************************************
.tooltip()
A simple jQuery UI tooltip widget.
******************************************************************************/
(function($) {
$.widget('ljq.tooltip', {
_create: function() {
this._tooltipDiv = $('<div></div>') //这里的this是什么呢
.addClass('ljq-tooltip-text ui-widget ui-state-highlight ui-corner-all')
.hide().appendTo('body');
this.element //这里的this又是什么呢?和上面是一个吗
.addClass('ljq-tooltip-trigger')
.on('mouseenter.ljq-tooltip', $.proxy(this._open, this))
.on('mouseleave.ljq-tooltip', $.proxy(this._close, this));
//alert(event.currentTarget.nodeName);
},

_open: function() {
var elementOffset = this.element.offset(); //这里的this 是什么,和_create里面的一样吗
this._tooltipDiv.css({
position: 'absolute',
left: elementOffset.left,
top: elementOffset.top + this.element.height()
}).text(this.element.data('tooltip-text'));

this._tooltipDiv.show(); ///这里的this 呢?有没有办法可以在什么调试的地方,可以显示出现在的this指得是什么呢?谢谢
//alert(event.currentTarget.nodeName);
},

_close: function() {
this._tooltipDiv.hide();
}
});
})(jQuery);


/******************************************************************************
End plugin code; begin custom script code.
******************************************************************************/
$(document).ready(function() {
var $inventory = $('#inventory tbody');
var quantities = $inventory.find('td:nth-child(2)')
.map(function(index, qty) {
return $(qty).text();
}).get();

var prices = $inventory.find('td:nth-child(3)')
.map(function(index, qty) {
return $(qty).text();
}).get();

var sum = $.mathUtils.sum(quantities);
var average = $.mathUtils.average(prices);
$('#sum').find('td:nth-child(2)').text(sum);
$('#average').find('td:nth-child(3)').text(average.toFixed(2));

$('table').click(function() {
$('tr').swapClass('one', 'two');
});

$.fn.shadow.defaults.copies = 10;
$('h1').shadow({
copyOffset: function(index) {
return {x: -index, y: index};
}
});

$('a').tooltip();
$('h1').tooltip();
});

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8">
<title>Developing Plugins</title>

<link rel="stylesheet" href="08.css" type="text/css" />
<link rel="stylesheet" href="ui-themes/smoothness/jquery-ui-1.10.0.custom.css" type="text/css" />

<script src="jquery.js"></script>
<script src="jquery-ui-1.10.0.custom.min.js"></script>
<script src="./listings/8.17.js"></script>
</head>
<body>
<div id="container">
<h1 data-tooltip-text="我是新加上的inventory的data-tooltip-text">Inventory</h1>
<table id="inventory">
<thead>
<tr class="one">
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
</tr>
</thead>
<tfoot>
<tr class="two" id="sum">
<td>Total</td>
<td></td>
<td></td>
</tr>
<tr id="average">
<td>Average</td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><a href="spam.html" data-tooltip-text="Nutritious and delicious!">Spam</a></td>
<td>4</td>
<td>2.50</td>
</tr>
<tr>
<td><a href="egg.html" data-tooltip-text="Farm fresh or scrambled!">Egg</a></td>
<td>12</td>
<td>4.32</td>
</tr>
<tr>
<td><a href="gourmet-spam.html" data-tooltip-text="Chef Hermann's recipe.">Gourmet Spam</a></td>
<td>14</td>
<td>7.89</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
代码如上图所示,问题都在js代码里面

...全文
214 点赞 收藏 5
写回复
5 条回复

还没有回复,快来抢沙发~

发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告