jQuery实现添加“成绩单” 搜索功能和清除功能

最新推荐文章于 2021-06-23 21:22:32 发布

sdfujichao

最新推荐文章于 2021-06-23 21:22:32 发布

阅读量754

点赞数

分类专栏： jQuery 文章标签： jQuery事件监听 jQuery对元素节点的添加 jQuery元素的遍历

本文链接：https://blog.csdn.net/sdfujichao/article/details/51611637

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

遇到的问题有：

<span style="white-space:pre">	</span>最大的问题就是遇到了jQuery对象和DOM对象的转化。刚开始不知道有jQuery和dom之间的转化问题，就糊里糊涂的把jQuery对象转换成了DOM对象，然后在使用jQuery方法时就出问题了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.js"></script>
		<style type="text/css">
			
		</style>
		
	</head>
	<body>
		<input type="text" placeholder="请输入姓名" />
		<input type="text" placeholder="请输入年龄" />
		<input type="text" placeholder="请输入性别" />
		<input type="button" value="注册" />
		<input type="text" placeholder="请输入搜索内容" />
		<input type="button" value="搜索" />
		<input type="button" value="清除" />
	</body>
	<script type="text/javascript">
		$('input[value=注册]').click(function(){
			var name = $('input[placeholder=请输入姓名]').val();
			var age = $('input[placeholder=请输入年龄]').val();
			var man = $('input[placeholder=请输入性别]').val();
			//console.log( $('input[placeholder=请输入年龄]'))
			
			
			$('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>');
			$wrap.css({
				'border':'1px red solid ',
				width:'500px'
			})
			$name.text(name);
			$age.text(age);
			$man.text(man);
			
			$('body').append($wrap);
			$wrap.append($name);
			$wrap.append($age);
			$wrap.append($man);
			$('span').css('padding','10px 50px');
			$wrap.css('padding','20px 0');
			
			
			// 搜索功能
			
		})
		
		$('input[value=搜索]').click(function(){
			
			var content = $('input[placeholder=请输入搜索内容]').val();
			$('input[placeholder=请输入搜索内容]').val('');
			//alert($('span').first().text())
			$.each($('span'),function(index,value){
				//console.log(value.innerHTML)
				//console.log(content);
				if(content == value.innerText){
					$('span').eq(index).css('background','red')
				}
				
			})
		})
		
		$('input[value=清除]').click(function(){
			$.each($('span'),function(index,value){
				value.style.background  = '';
				
				
			})
			
		})
	</script>
</html>

<img src="https://img-blog.csdn.net/20160608110055990?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />