信息管理创新实践

清欢、一笑

于 2021-04-29 13:26:34 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/weixin_51714215/article/details/116018763

版权

学习周记9–jQuery

< 基础知识 >
----jQuery 是一个 JavaScript 函数库。
----jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。
----jQuery 库包含以下功能：
HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities
----jQuery 语法：
所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

–美元符号定义 jQuery
–选择符（selector）“查询"和"查找” HTML 元素
–jQuery 的 action() 执行对元素的操作

<!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(){
  $("#p2").click(function(){
    $(this).hide();
  });
	 $("h1").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p id="p1">如果你点我，我就会消失。</p>
<p id="p2">继续点我!</p>
<p id="p3">接着点我!</p>
	<h1>再点点试试！</h1>
</body>
</html>

【运行前】
在这里插入图片描述
【点击“继续点我！”----此段落隐藏】

【点击“再点点试试！”----此段落隐藏】

【此实例中通过使用jQuery #id 选择器（通过 HTML 元素的 id 属性选取指定的元素。），指定id=“p2”来通过点击来处理事件$(this).hide() - 隐藏当前元素。此外，也通过基于元素名选取元素的元素选择器来隐藏标题h2。】
—选择器还包括.class 选择器，jQuery 类选择器可以通过指定的 class 查找元素。

----jQuery 事件：
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
1、click()
click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
2、focus()
当元素获得焦点时，发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
3、blur()
当元素失去焦点时，发生 blur 事件。

<!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(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

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

</body>
</html>

【当鼠标未点击选中元素或通过 tab 键未定位到元素时】
在这里插入图片描述
【当鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点，触发事件focus（）发生】

jQuery 效果 - 淡入淡出
----jQuery fadeIn() 用于淡入已隐藏的元素

$(selector).fadeIn(speed,callback);

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

$(selector).fadeOut(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。

<!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(){
  $("#hide").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
	 $("#show").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeIn()和fadeOut() 使用了不同参数的效果。</p>
<button id="hide">点击淡入 div 元素。</button>
<button id="show">点击淡出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元素后运行结果】

【点击淡出div元素后运行结果】