文章目录
前言
一、操作DOM
1.1. 文档对象模型DOM
可以将html文档中的每个成分视为一个节点,节点的特点如下:
- 整个文档是一个文档节点
- 每个HTML标签是一个元素节点
- 包含在HTML元素中的文本是文本节点
- 每个HTML属性是一个属性节点
- 注释属于注释节点
- HTML文档中的节点彼此间都存在关系,如一张族谱。
节点可以有子节点。 同一棵树级别的节点称为兄弟姐妹。
下图展示了一个家族树。通过 jQuery 遍历,能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
摘要:
祖先是指父母,祖父母,曾祖父母等等。
后代是一个孩子,孙子,曾孙等等。
兄弟姐妹同享同一个父母。
1.2. 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. 删除元素
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
HTML:
<p style="color:red">Red</p>
<p style="color:green">Green</p>
<p style="color:blue">Blue</p>
JS:
$("p").eq(1).remove();
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 >部分的事件处理方法中。
例如,假设我们要处理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()方法用于将相同的处理函数绑定到多个事件中的时候很有用。 可以使用空格分隔多个事件名称, 例如 可以为点击和dblclick事件使用相同的事件处理程序。
$("p").on( "click dblclick", function() {
alert("clicked");
});
off() 方法通常用于移除通过 on() 方法添加的事件处理程序。
如需移除指定的事件处理程序,当事件处理程序被添加时,选择器字符串必须匹配 on() 方法传递的参数。
$("div").on("click", function() {
alert('Hi there!');
});
$("div").off("click");
2.2. 事件对象
- 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();
});
例如,可以触发一个点击事件,而不需要用户实际点击一个元素:
$("div").click(function() {
alert("点击了div!");
});
$("div").trigger("click");
2.3. 创建待办事件列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>我的To-Do列表</h1>
<input type="text" placeholder="新项目"/>
<button id="add">添加</button>
<ol id="mylist"></ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<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 = $("<li></li>").text(val);
$(elem).append("<button class='rem'>X</button>");
$("#mylist").append(elem);
$("input").val("");
$(".rem").on("click", function() {
$(this).parent().remove();
});
}
});
$(".rem").on("click", function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
三、效果
3.1. 显示/隐藏,淡入,淡出
toggle()方法用于在隐藏和显示元素之间切换。
hide / show / toggle方法可以带一个速度参数,以毫秒为单位指定动画速度。
HTML:
<p>点击我能切换显示div中的内容哟!</p>
<div>我是div中的内容</div>
JS:
$(function () {
$("p").click(function () {
$("div").toggle(1000);
});
});
HTML:
<p id="demo">点击我能切换显示div中的内容哟!</p>
<div id="demo2">我是div中的内容</div>
JS:
$(function (){
$("p#demo").click( function (){
$("div#demo2").fadeToggle(1000);
});
});
HTML:
<p id="demo5">点击我能切换显示div中的内容哟!</p>
<div id="demo6">我是div中的内容</div>
JS:
$(function () {
$("p#demo5").click(function () {
$("div#demo6").slideToggle(500);
});
});
3.2. 动画
//语法:
$(selector).animate({params},speed,callback);
params–必需,定义形成动画的 CSS 属性。属性定义为JSON格式的参数(“key”:“value”)
speed–规定效果的时长。它可以取以下值:“slow”、“fast” 或毫秒
callback --动画完成后所执行的函数名称
$("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() 方法用于在动画或效果完成前对它们进行停止。适用于所有 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();
});
});
这意味着如果你写了多个animate(),则jQuery会为这些方法创建一个“内部”队列。然后逐个运行动画。
3.3. callback
例子:$(“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>Title</title>
<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="#">选项1</a>
<a href="#">选项2</a>
<a href="#">选项3</a>
</div>
</div>
<script>
$("#item").click(function() {
$("#submenu").slideToggle(500);
});
</script>
</body>
</html>
总结
–2023-12-9