<script type="text/javascript">
$("input[type='buon']").click(func4on(){
var i = 0;
$("input[type='text']").each(func4on(){
i += parseInt($(this).val());
});
$('label').text(i);
});
$('input:lt(2)')
.add('label')
.css('border','none')
.css('borderBoom','solid 1px navy')
.css({'width':'30px'});
</script>
</body>
</html>
运行效果如下:
代码分解:
$("input[type='buon']")用于找到 type 属性为 buon 的 input 元素(此为 CSS 表达式,IE7
才开始支持,所以在 IE6 中通常用 jQuery 的这种表达式代替 CSS 代码设置样式)。click()函
数为 buon 添加 click 事件处理函数。
在 buon_click 时,$("input[type='text']")找出所有输入框,each()函数遍历找出来的数组中
的对象的值,相加后设到 label 中。
$('input:lt(2)')
.add('label')
两行代码意为:所有 input 中的前面两个(lt 表示序号小于)再加上 label 对象合并成一个
jQuery 对象。
.css('border','none')
.css('borderBoom','solid 1px navy')
.css({'width':'30px'});
以上三行代码都是针对之前的 jQuery 对象设置 CSS 样式,如果一次需要设置多个 CSS 值,
可用另一种形式,如:
.css({'border':'none','borderBoom':'solid 1px navy','width':'30px'});
css()函数如果只传一个字符串参数,则为取样式值,比如 css('color')为取得当前 jQuery 对
象的样式属性 color 的值。jQuery 对象有多种这样的函数,比如,val('')为设 value,val()为
取 value,text('text')为设 innerText,text() 为取得 innerText,此外还有 html(),用于操作
innerHTML,而 click(fn)/click(),change(fn) /change()……系统函数则为事件的设置处理函数与触