Java Web学习笔记（二）——jQuery基础

最新推荐文章于 2024-11-26 10:30:14 发布

Kismet11

最新推荐文章于 2024-11-26 10:30:14 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： javaWeb 文章标签： jQuery Java Web

本文链接：https://blog.youkuaiyun.com/Kismet11/article/details/84639562

javaWeb 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了jQuery的基础语法，介绍了如何通过选择符对HTML元素进行操作，详细讲解了常见的DOM事件，如鼠标、键盘、表单及文档事件。同时，文章提供了获取元素内容的三种方法：text()、html()和val()，并展示了如何使用jQuery实现首页广告的弹出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery语法是通过选取HTML元素对选取的元素进行某些操作。

基础语法：$(selector).action()

选择符(selector)查找HTML元素

action()执行对元素的操作

常见DOM事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblcclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

使用JQ完成首页广告弹出

<script>
			$(function(){
				//1.书写显示广告图片的定时操作
				time = setInterval("showAd()",3000);
			});
			
			//2.书写显示广告图片的函数
			function showAd(){
				//3.获取广告图片，并让其显示
				//$("#img").show(1000);
				//$("#img").slideDown(5000);
				$("#img").fadeIn(4000);
				//4.清除显示图片定时操作
				clearInterval(time);
				//5.设置隐藏图片的定时操作
				time = setInterval("hiddenAd()",3000);
			}
			
			function hiddenAd(){
				//6.获取广告图片，并让其隐藏
				//$("#img").hide();
				//$("#img").slideUp(5000);
				$("#img").fadeOut(6000);
				//7.清除隐藏图片的定时操作
				clearInterval(time);
			}
		</script>