jQuery如何通过点击按钮实现图片的切换，和超链接地址的跳转？

最新推荐文章于 2024-07-14 03:40:57 发布

清如许.

最新推荐文章于 2024-07-14 03:40:57 发布

阅读量2.5k

点赞数

分类专栏：前端技术 JavaWeb入门编程文章标签： jQuery如何通过点击按钮实现图片的切换使用jquery使button实现页面跳转

本文链接：https://blog.csdn.net/MacWx/article/details/95100508

版权

JavaWeb入门编程同时被 2 个专栏收录

38 篇文章 1 订阅

订阅专栏

前端技术

18 篇文章 0 订阅

订阅专栏

点击一张图片更换为另一张图片：

<!-- jquery引入到这个jsp里面 -->
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<!-- 我们的jquery代码 -->
	<script type="text/javascript">
	$(function(){
		$("img").click(function(){
			//prop方法是设置属性
			$("img").prop("src","${pageContext.request.contextPath }/img/2.jpg");
		});
	});
	</script>
  </head>
  
  <body>
  <!-- ${pageContext.request.contextPath } 是使用二楼表达式获取当前项目名-->
    <img src="${pageContext.request.contextPath }/img/1.jpg" />
  </body>
</html>

jquery使用button按钮实现页面跳转程序如下：

	<!-- jquery引入到这个jsp里面 -->
	<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	<!-- 我们的jquery代码 -->
	<script type="text/javascript">
	//等页面加载完毕
	$(function(){
		//选择到value='点我'的input标签，给这个元素添加click事件
		$("input[value=点我]").click(function(){
			/*$("a").html("新浪");
			$("a").prop("href","http://www.sina.com");*/
			//链式写法
			$("a").html("新浪").prop("href","http://www.sina.com");
		});
	});
	</script>
  </head>
  
  <body>
    <a href="http://www.baidu.com">百度</a>
    <input type="button" value="点我"/>
    <input type="text"/>
  </body>
</html>