JQuery小练习

最新推荐文章于 2022-07-14 09:53:08 发布

instanceof.

最新推荐文章于 2022-07-14 09:53:08 发布

阅读量156

点赞数

分类专栏： java学习文章标签： jquery

本文链接：https://blog.csdn.net/qq_44804494/article/details/100097253

版权

java学习专栏收录该内容

39 篇文章 0 订阅

订阅专栏

JQuery

直接上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>	
	<script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script>
	<script type="text/javascript">
		
		$(function() {
			
		alert('hello...');
	
       //点击show按钮后产生的事件
       
		$('#but_show').click(function(){
			//js取值
			var putVal=document.getElementById('text_01').value;
			//jquery取值
			var $putVal=$('#text_01').val();
			 
			//赋值
			$('#span_show').text(putVal+'<----->'+$putVal);
	
			$('#text_02').val(putVal+'<----->'+$putVal);
			
		})
		
		//点击ok按钮后产生的事件
		$('#but_ok').click(function(){
		//三种不同的样式格式设置
	   $('.css1').css({'border':'1px solid red','background-color':'blue',
								'width':'800px','height':'150px'});
				
				$('.css2').attr('style','border:1px solid red;background-color:gray;width:800px;height:100px;');
				
				$('#css3').css('border','1px solid red').css('bacckground-color','pink').css('width','800px').css('height','150px').css('margin-top','50px');
								
			    $('#text_02').css({'display':'block'})
			
		})
		
		
		});
			
	</script>
	</head>

	
	<body>
		
		<form action="" method="post">
			
			<input type="text"  name="userName" value="小白" id="text_01"/>

			<div class="css1">
			              外部div
			<div class="css2">
			              内部div
		    </div>
		   </div>
		    <div id="css3" >
			               外部同级div   
			               <span id="span_show">
			      	
			               </span>
			               <input type="" name="text_02" id="text_02" value="" style="display:none" />
		    </div>
		        
			<input type="button" value="ok" id="but_ok"/>
			<input type="button" value="show" id="but_show"/>
		</form>

	</body>
</html>

instanceof.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery小练习

JQuery直接上代码<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="../js/jquery-3.3.1.min.js" >&lt...
复制链接

扫一扫

专栏目录