JQuery总结1

最新推荐文章于 2022-12-05 17:34:01 发布

qq_67507026

最新推荐文章于 2022-12-05 17:34:01 发布

阅读量399

点赞数

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/qq_67507026/article/details/127488902

版权

运用js文件中的js/jquery.min.js方法和$字符，用function方法进行调用

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				var q=$("#a")
				console.log(q)
				
				var w=$(".b")
				console.log(w[0].innerText)
				
				var e=$("p")
				console.log(e)
				
			})
		</script>
	</head>
	<body>
		<div id="a">
			第一
		</div>
		<div class="b">
			第二
		</div>
		<p>p标签1</p>
		<p>p标签2</p>
		<p>p标签3</p>
	</body>
</html>

用click点击事件进行一个盒子(Div)的各种显示与修改

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#cont{
				width: 200px;
				height: 200px;
				background-color: aqua;
				}
		</style>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		
		
	</head>
	<script>
			$(function(){
				$("#cont").click(function(){
					$(this).css("color","#000000")
				})
				//宽
				$("#k").click(function(){
					$("#cont").css("width","500px")
				})
				//高
				$("#g").click(function(){
					$("#cont").css("height","500px")
				})
				//隐藏
				$("#y").click(function(){
					$("#cont").fadeOut(2000)
				})
				//显示
				$("#x").click(function(){
					$("#cont").fadeIn(2000)
				})
				//切换
				$("#q").click(function(){
					$("#cont").slideToggle(2000)
				})
			})
		</script>
	<body>
		
		<button id="k">变宽</button>
		<button id="g">变高</button>
		<button id="y">隐藏</button>
		<button id="x">显示</button>
		<button id="q">切换</button>
		<div id="cont">
			
		</div>
	</body>
</html>