学习周记7——JQuery

最新推荐文章于 2023-02-09 11:06:43 发布

。淡沫

最新推荐文章于 2023-02-09 11:06:43 发布

阅读量130

点赞数 2

文章标签： jquery

本文链接：https://blog.csdn.net/qq_48999927/article/details/116023517

版权

简介

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

JQuery选择器

$(this).hide()演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。

$(“p”).hide()演示 jQuery 的 hide() 函数，隐藏所有

元素。

$(".test").hide()演示 jQuery 的 hide() 函数，隐藏所有 class=“test” 的元素。

$("#test").hide()演示 jQuery 的 hide() 函数，隐藏 id=“test” 的元素。
实例演示：

<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果你点我，我就会消失。</p>
<p>继续点我!</p>
<p>接着点我!</p>
</body>
</html>

点击哪行文本，那行文本就会消失。

jQuery 事件

常见 DOM 事件：
在这里插入图片描述

click()

click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。

dblclick()

当双击元素时，会发生 dblclick 事件。

mouseenter()

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseleave()

当鼠标指针离开元素时，会发生 mouseleave 事件。

mousedown()

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mouseup()

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

hover()

hover()方法用于模拟光标悬停事件。

focus()

当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
该方法通常与 blur() 方法一起使用。

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>

浏览器显示结果如下
在这里插入图片描述
点击输入框，框会变颜色
点击非框的空白处时，框会变回原来的白色。

blur()

当元素失去焦点时，发生 blur 事件。

jQuery 效果

隐藏和显示

JQuery选择器实例的改动：

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
	 $("h2").click(function(){
    $("p").show();
  });
});
</script>
</head>

<body>
<h2>结束游戏</h2>
<p>愤怒</p>
<p>沮丧</p>
<button>坏心情清零！</button>
</body>

浏览器显示结果如下：
在这里插入图片描述

点击那个“坏心情清零！”按钮，然后会发现第二、三行隐藏了，然后点击“结束游戏”的文本，之前隐藏的两行又恢复显示。

淡入淡出

jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script>
		$(document).ready(function(){
		  $("button").click(function(){
		    $("#div1").fadeIn();
		    $("#div2").fadeIn("slow");
		    $("#div3").fadeIn(3000);
		  });
			
			 $("p").click(function(){
		    $("#div1").fadeOut(3000);
		    $("#div2").fadeOut("slow");
		    $("#div3").fadeOut();
		  });
		});
		</script>
	</head>
	<body>
		<p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
		<button>点击淡入 div 元素。</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
		<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
		<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

	</body>
</html>

浏览器显示结果如下：
在这里插入图片描述

点击按钮”点击淡入 div 元素“，会出现三个不同颜色的正方形，分别以我设置的不同速度淡入。
在这里插入图片描述

再点击上述文本，这三个正方形会以设置的速度淡出。

滑动

jQuery 拥有以下滑动方法：

jQuery slideDown() 方法：用于向下滑动元素。
jQuery slideUp() 方法：用于向上滑动元素。
jQuery slideToggle() 方法：可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
	padding:5px;
	text-align:center;
	background-color:#e5eecc;
	border:solid 1px #c3c3c3;
}
#panel
{
	padding:50px;
	display:none;
}
</style>
</head>
<body>
 
<div id="flip">五一假期不放了！<点击查看></div>
<div id="panel">没这回事，洗洗睡吧。</div>

</body>
</html>

浏览器显示结果如下：

在这里插入图片描述
点击这个框：

再点击第一行这个框，又恢复第一幅图的样子。

动画

jQuery animate() 方法用于创建自定义动画。
jQuery animate() - 操作多个属性

用 animate() 方法来操作所有 CSS 属性。不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right。

jQuery animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

jQuery animate() - 使用预定义的值
可以把属性的动画值设置为 “show”、“hide” 或 “toggle”：
jQuery animate() - 使用队列功能

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<script> 
		$(document).ready(function(){
		  $("button").click(function(){
		    $("div1").animate({left:'+=25px',height:'+=15px',width:'+=15px'});
		  });
		});
		</script> 
	</head>
	<body>
		<button>开始动画</button>
		<p>绿色方块正在一点一点地进步。
		<div1 style="background:#98bf21;height:100px;width:100px;position:absolute;">
		</div1>
	</body>
</html>

浏览器结果显示如下：
在这里插入图片描述

jQuery 操作 CSS

addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").css("background-color","yellow");
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p style="background-color:#ff0000">红</p>
<p style="background-color:#00ff00">绿</p>

<p>普通</p>
<button>统一黄色 </button>
</body>
</html>

浏览器显示结果如下：
在这里插入图片描述
点击“统一黄色”按钮：

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

。淡沫

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记7——JQuery

简介jQuery 是一个 JavaScript 库。jQuery 极大地简化了 JavaScript 编程。JQuery选择器$(this).hide()演示 jQuery 的 hide() 函数，隐藏当前的 HTML 元素。$(“p”).hide()演示 jQuery 的 hide() 函数，隐藏所有元素。$(".test").hide()演示 jQuery 的 hide() 函数，隐藏所有 class=“test” 的元素。$("#test").hide()演示 jQuery 的 hi
复制链接

扫一扫