<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scriptsrc="js/jquery.js"></script>
<styletype="text/css">
</style>
</head>
<body>
<inputtype="text"placeholder="请输入姓名"/>
<inputtype="text"placeholder="请输入年龄"/>
<inputtype="text"placeholder="请输入性别"/>
<inputtype="button"value="注册" />
<inputtype="text"placeholder="请输入搜索内容"/>
<inputtype="button"value="搜索" />
<inputtype="button"value="清除" />
<divclass="divClass"></div>
</body>
<scripttype="text/javascript">
$('input[value=注册]').click(function(){
// 获取输入框中的内容
varname = $('input[placeholder=请输入姓名]').val();
varage = $('input[placeholder=请输入年龄]').val();
varman = $('input[placeholder=请输入性别]').val();
// 把输入框中的内容清空
$('input[placeholder=请输入姓名]').val('');
$('input[placeholder=请输入年龄]').val('');
$('input[placeholder=请输入性别]').val('');
// 创建新的控件
var$wrap = $('<div></div>');
var$name = $('<span></span>');
var$age = $('<span></span>');
var$man = $('<span></span>');
var$del = $('<input type="button" value="删除" />');
$wrap.css({
'border':'1px red solid ',
width:'700px'
})
$name.text(name);
$age.text(age);
$man.text(man);
// 添加控件到浏览器
$('.divClass').append($wrap);
$wrap.append($name);
$wrap.append($age);
$wrap.append($man);
$wrap.append($del);
$('span').css('padding','10px 50px');
$wrap.css('padding','20px 0');
})
// 搜索功能
$('input[value=搜索]').click(function(){
varcontent = $('input[placeholder=请输入搜索内容]').val();
$('input[placeholder=请输入搜索内容]').val('');
$.each($('span'),function(index,value){
if(content== value.innerText){
$('span').eq(index).css('background','red')
}
})
})
// 清除选中颜色的功能
$('input[value=清除]').click(function(){
$.each($('span'),function(index,value){
value.style.background = '';
})
})
// 删除功能
$('.divClass').on('click',function(event){
if(event.target.value== "删除"){
$(event.target).parent().remove();
}
})
</script>
</html>
768
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
