JQuery学习二
JQuery学习二
文章目录
- 前言
- 一、操作DOM
-
- 1.1. 文档对象模型DOM
- 1.2. DOM遍历
- 1.3. 删除元素
- 二、事件
-
- 2.1. 事件处理
- 2.2. 事件对象
- 2.3. 创建待办事件列表
- 三、效果
-
- 3.1. 显示/隐藏，淡入，淡出
- 3.2. 动画
- 3.3. callback
- 3.4. 创建下拉菜单
- 总结
前言
一、操作DOM
1.1. 文档对象模型DOM
DOM(Document Object Model)仅关注浏览器所载入的文档。DOM将html文档视为由元素、属性和文本组成的一棵DOM树。
可以将html文档中的每个成分视为一个节点，节点的特点如下：
- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
- HTML文档中的节点彼此间都存在关系，如一张族谱。
DOM表示文档作为树结构，其中HTML元素是树中的相关节点。
节点可以有子节点。 同一棵树级别的节点称为兄弟姐妹。
jQuery遍历是用于描述移动DOM的过程，并根据其与其他元素的关系来查找（选择）HTML元素的术语。
下图展示了一个家族树。通过 jQuery 遍历，能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
摘要:
祖先是指父母，祖父母，曾祖父母等等。
后代是一个孩子，孙子，曾孙等等。
兄弟姐妹同享同一个父母。
1.2. DOM遍历
jQuery 提供了多种遍历 DOM 的方法，最常用的遍历方法如下：
- 向上遍历 DOM 树：
parent()方法返回被选元素的直接父元素。
parents()方法返回被选元素的所有祖先元素。
下面的代码选择了段落的父元素，并为其设置了一个红色边框。
HTML：
<div> div 元素
<p>段落p>
div>
JS:
var e = $("p").parent();
e.css("border", "2px solid red");
- 向下遍历 DOM 树：
children()方法返回被选元素的所有直接子元素。
find()方法返回被选元素的后代元素，一路向下直到最后一个后代。
例如下面的例子返回每个 < div > 元素的所有直接子元素：
HTML:
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)span>
p>
<p>p (儿子元素)
<span>span (孙子元素)span>
p>
div>
CSS：
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
JS：
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
-
DOM 树进行水平遍历：
siblings()方法返回被选元素的所有同胞元素。
next()方法返回被选元素的下一个同胞元素，该方法只返回一个元素。
nextAll()方法返回被选元素的下面的所有同胞元素。
prev()方法返回被选元素的上一个同胞元素，该方法只返回一个元素。
prevAll()方法返回被选元素的上面的所有同胞元素。 -
eq()方法
eq() 方法返回被选元素中带有指定索引号的元素。
例如，如果页面包含多个div元素，并且我们要选择第三个元素：
$("div").eq(2);
1.3. 删除元素
通过 jQuery，可以很容易地删除已有的 HTML 元素。 如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
HTML：
<p style="color:red">Redp>
<p style="color:green">Greenp>
<p style="color:blue">Bluep>
JS:
$("p").eq(1).remove();
mpty()方法用于删除所选元素的子元素。
例如：这将删除div的所有三个子元素。
HTML：
<div>
<p style="color:red">红p>
<p style="color:green">绿p>
<p style="color:blue">蓝p>
div>
JS:
$("div").empty();
二、事件
2.1. 事件处理
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。
通常会把 jQuery 代码放到 < head >部分的事件处理方法中。
jQuery 事件处理方法是 jQuery 中的核心函数。当用户执行操作（例如单击元素，移动鼠标或提交表单）时，会发生事件。
当目标元素发生事件时，执行处理函数。
例如，假设我们要处理id="demo"的元素上的点击事件，并在点击按钮时显示当前日期。 使用纯JavaScript，代码如下：
var x= document.getElementById("demo");
x.onclick = function(){
document.body.innerHTML = Data();
}
可以使用jQuery与以下代码来处理相同的事件：
$("#demo").click(function() {
$("body").html(Date());
});
常见事件：
下面的代码处理 id="name"的元素的keydown事件，并将id="name"获取到的值赋给 id ="msg"的元素中。
HTML：
<input type="text" id="name" />
<div id="msg">div>
JS:
$("#name").keydown(function() {
$("#msg").html($("#name").val());
});
on()方法绑定事件
on()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 可以使用空格分隔多个事件名称, 例如 可以为点击和dblclick事件使用相同的事件处理程序。
$("p").on( "click dblclick", function() {
alert("clicked");
});
off()解除事件绑定
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
如需移除指定的事件处理程序，当事件处理程序被添加时，选择器字符串必须匹配 on() 方法传递的参数。
$("div").on("click", function() {
alert('Hi there!');
});
$("div").off("click");
2.2. 事件对象
jQuery事件对象，下面使用event代替：
每个事件处理函数都可以接收一个事件对象，其中包含与该事件相关的属性和方法：
- event.type：获取事件的类型
- event.pageX和event.pageY：获取鼠标当前相对于页面的坐标（X和Y坐标）
- event.preventDefault()方法： 阻止默认行为
- event.stopPropagation()方法： 阻止事件冒泡。
- event.which： 获取在鼠标单击时，单击的是鼠标的哪个键
- event.data 数据绑定事件时传入的任何数据。
- event.currentTarget： 在事件冒泡过程中的当前DOM元素
- event.result： 包含由被指定事件触发的事件处理器返回的最后一个值。
下面的代码在点击时提醒鼠标位置，并阻止打开链接。
HTML:
<a href="https://www.baidu.cn" id="a1">点击我a>
JS:
$("a#a1").click(function(event) {
alert(event.pageX);
event.preventDefault();
});
trigger() 方法触发被选元素的指定事件类型。
例如，可以触发一个点击事件，而不需要用户实际点击一个元素：
$("div").click(function() {
alert("点击了div!");
});
$("div").trigger("click");
2.3. 创建待办事件列表
“待办事项”列表可以将新项目添加到列表中，也可以删除现有项目。
首先，我们创建HTML：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<h1>我的To-Do列表h1>
<input type="text" placeholder="新项目"/>
<button id="add">添加button>
<ol id="mylist">ol>
body>
html>
现在，准备HTML，可以开始编写我们的jQuery代码。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">script>
head>
<body>
<h1>我的To-Do列表h1>
<input type="text" placeholder="新项目"/>
<button id="add">添加button>
<ol id="mylist">ol>
<script>
$(function() {
$("#add").on("click", function() {
var val = $("input").val();
if(val !== '') {
var elem = $("").text(val);
$(elem).append("");
$("#mylist").append(elem);
$("input").val("");
$(".rem").on("click", function() {
$(this).parent().remove();
});
}
});
$(".rem").on("click", function() {
$(this).parent().remove();
});
});
script>
body>
html>
三、效果
3.1. 显示/隐藏，淡入，淡出
使用 hide() 和 show() 方法来隐藏和显示 HTML 元素：
toggle()方法用于在隐藏和显示元素之间切换。
hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。
HTML：
<p>点击我能切换显示div中的内容哟!p>
<div>我是div中的内容div>
JS：
$(function () {
$("p").click(function () {
$("div").toggle(1000);
});
});
fadeIn / fadeOut 方法，它将一个元素淡入和淡出显示。
和 toggle() 方法在隐藏和显示之间切换一样，fadeToggle()方法可以在淡入淡出中进行切换。
HTML：
<p id="demo">点击我能切换显示div中的内容哟!p>
<div id="demo2">我是div中的内容div>
JS:
$(function (){
$("p#demo").click( function (){
$("div#demo2").fadeToggle(1000);
});
});
slideUp() 和 slideDown() 方法用于在元素上创建滑动效果。
slideToggle() 方法提供在滑动效果之间切换，一样也有两个可选参数：速度和回调函数。
HTML：
<p id="demo5">点击我能切换显示div中的内容哟!p>
<div id="demo6">我是div中的内容div>
JS:
$(function () {
$("p#demo5").click(function () {
$("div#demo6").slideToggle(500);
});
});
3.2. 动画
animate() 方法用于创建自定义动画
//语法：
$(selector).animate({params},speed,callback);
params–必需，定义形成动画的 CSS 属性。属性定义为JSON格式的参数（“key”:“value”）
speed–规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒
callback --动画完成后所执行的函数名称
例如，以下代码将div的width属性在1秒内改变到250px：
$("div").click(function() {
$("div").animate({width: '250px'}, 1000);
});
可以使用上述语法对任何CSS属性进行动画处理，但有一个重要的事情要记住：当与animate() 方法一起使用时，所有属性名称都必须是camel-cased（camelCase是写复合词或短语的做法， 每个单词或缩写以大写字母开头，第一个单词以小写形式显示）。
您将需要编写paddingLeft而不是padding-left，marginRight，而不是margin-right等等。
多个属性可以通过用逗号分隔来同时动画化。也可以定义相对值（该值相对于元素的当前值）。 通过将 += 或 -= 放在值的前面完成：
$("div").animate({
width: '+=250px',
height: '+=250px'
}, 1000);
停止动画stop()
stop() 方法用于在动画或效果完成前对它们进行停止。适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
//语法：
$(selector).stop(stopAll,goToEnd);
- stopAll –可选，规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
- goToEnd --规定是否立即完成当前动画。默认是 false。
HTML：
<button id="stop">停止滑动button>
<div id="flip">点我向下滑动面板div>
<div id="panel">Hello world!div>
CSS
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
JS：
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
动画队列。默认情况下，jQuery带有动画的队列功能。
这意味着如果你写了多个animate()，则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。
3.3. callback
Callback 函数在当前动画 100% 完成之后执行。 许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子：$(“p”).hide(“slow”)
speed 或 duration 参数可以设置许多不同的值，比如 “slow”, “fast”, "normal" 或毫秒。
HTML：
<button>隐藏button>
<p>我们段落内容，点击“隐藏”按钮我就会消失p>
JS：
$(document).ready(function(){
$("button").click(function(){
$("p").hide("slow",function(){
alert("段落现在被隐藏了");
});
});
});
3.4. 创建下拉菜单
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js">script>
<style>
a{
text-decoration: none;
color: black;
font-size: 20px;
}
#item {
display: inline-flex;
padding: 2px;
border: 1px solid #666;
border-radius: 2px;
cursor: pointer;
background: #efefef;
}
style>
head>
<body>
<div class="menu">
<div id="item">下拉菜单div>
<div id="submenu">
<a href="#">选项1a>
<a href="#">选项2a>
<a href="#">选项3a>
div>
div>
<script>
$("#item").click(function() {
$("#submenu").slideToggle(500);
});
script>
body>
html>
总结
–2023-12-9