87,997
社区成员
发帖
与我相关
我的任务
分享trim get()函数不明白
<!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.3.js"></script>
</head>
<body>
<div id="container">
<h1>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>
8.3.js 的内容
/******************************************************************************
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($) {
$.sum = function(array) {
var total = 0;
$.each(array, function(index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;
total += value;
});
return total;
};
})(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 sum = $.sum(quantities);
$('#sum').find('td:nth-child(2)').text(sum);
});
老师好，这里的 .trim() 和 .get()是什么意思呢？谢谢老师大大
<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.3.js"></script>
</head>
<body>
<div id="container">
<h1>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>
8.3.js 的内容
/******************************************************************************
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($) {
$.sum = function(array) {
var total = 0;
$.each(array, function(index, value) {
value = $.trim(value);
value = parseFloat(value) || 0;
total += value;
});
return total;
};
})(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 sum = $.sum(quantities);
$('#sum').find('td:nth-child(2)').text(sum);
});
老师好，这里的 .trim() 和 .get()是什么意思呢？谢谢老师大大
...全文
请发表友善的回复…
发表回复
xiaotuzi 2020-04-20
- 打赏
- 举报
谢谢各位帮助，结贴送分
天际的海浪 2020-04-17
- 打赏
- 举报
如果带参数，.get() 会返回jq集合中指定位置的DOM元素
如果不带参数， .get() 会返回包含所有的DOM元素的js数组
详细的去看https://www.html.cn/jqapi-1.9/get/
x=$("p").get(); 这样x就是数组了。
数组对象没有nodeName和innerHTML属性，就会返回 undefined
对数组的访问应该是：
$("div").text(x[0].nodeName + ": " + x[0].innerHTML);
Coder-F 2020-04-17
- 打赏
- 举报
get: function( num ) {
// Return all the elements in a clean array
if ( num == null ) {
return slice.call( this );
}
// Return just the one element from the set
return num < 0 ? this[ num + this.length ] : this[ num ];
},xiaotuzi 2020-04-17
- 打赏
- 举报
谢谢楼上，想知道为什么在 w3school里面，是 x=$("p").get(0); 我试着去掉0 ，成为 x=$("p").get(); 点击后浏览器报错undefined: undefined，而我上面贴出来的源代码有 get()却不报错，这是为什么呢？
Coder-F 2020-04-17
- 打赏
- 举报
建议不要用jquery，.trim()是去首尾空格，.get参考这个链接https://www.w3school.com.cn/jquery/dom_element_methods_get.asp
