一. jQuery实现简单加法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple addition</title>
</head>
<body>
<input type="text" value="" /> +
<input type="text" value="" />
<input type="button" value="=" />
<label></label>
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("input[type='button']").click(function(){
var i = 0;
$("input[type='text']").each(function(){
i += parseInt($(this).val());
});
$('label').text(i);
});
$("input:lt(2)")
.add('label')
.css('border','none')
.css('borderBottom','solid 1px navy')
.css('textAlign','center')
.css('width','3em')
.css({'width':'30px'});
});
</script>
</html>
二. jQuery扩展函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Extended interface</title>
</head>
<body>
<input type="radio" />
<input type="radio" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="checked" />
</body>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript">
// 调用扩展函数
jQuery.fn.extend({
check: function(){
return this.each(function(){this.checked=true;});
},
uncheck: function({
return this.each(function(){this.checked=false;});
})
})
// 应用扩展函数
$(function(){
$("input[type=checkbox]").check().css("border","solid 1px red");
$("input[type=radio]").uncheck().css("border","solid 1px blue");
});
</script>
</html>
搜索
复制
时间： 2024-12-11 04:20:35