jQuery
一、jQuery概述
1、jQuery 的概念:jQuery 是一个快速、简洁的 JavaScript 库,其宗旨是 “write Less,Do More”,即写更少的代码,做更多的事情。j 就是 JavaScript,Query 是查询,把 JS 中的 DOM 操作做了封装,我们可以快速查询使用里面的功能。jQuery 封装了 JavaScript 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。学习 jQuery 本质就是学习调用这些函数。
2、特点:
- 轻量级、核心文件才几十KB,不会影响页面的加载速度
- 跨浏览器兼容,基本兼容现在的主流浏览器
- 链式编程、隐式迭代
- 对事件、样式、动画支持,大大简化了DOM操作
- 支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图
- 免费、开源
二、jQuery 的基本使用
1、基本使用
1、jQuery 的下载:
- 官网地址:https://jquery.com
2、版本:
- 1X:兼容 IE 678 等低版本浏览器,官网不再更新
- 2X:不兼容 IE 678 等低版本浏览器,官网不再更新
- 3X:不兼容 IE 648 等低版本浏览器,是官方主要更新维护的版本
- 下载地址:https://code.jquery.com
3、jQuery 的使用步骤:
- 引入 jQuery 文件
- 使用即可
2、jQuery 的入口函数
1、入口函数:
$(function () {
... //此处是页面DOM加载完成的入口
});
$(document).ready(function () {
... //此处是页面DOM加载完成的入口
});
2、说明:
- 等 DOM 结构渲染完毕即可执行内部代码,不必等到所有的外部资源加载完成,jQuery 磅我们完成了封装
- 相当于原生 js 中的 DOMContentLoaded
- 不同于原生的 js 中的 load 事件是等页面文档、外部的 js 文件、css 文件、图片加载完成之后才执行内部代码
- 更推荐使用第一种方式
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入jQuery文件 -->
<script src="./jquery.min.js"></script>
</head>
<body>
<h1>标题1</h1>
<div>页面加载完毕之后会隐藏上面的h1标题</div>
<script>
/* // 方式1:等页面 DOM 加载完毕之后执行 js 代码
$(document).ready(function() {
$('h1').hide();
}) */
// 方式2:等页面 DOM 加载完毕之后执行 js 代码,推荐使用
$(function() {
$('h1').hide();
})
</script>
</body>
</html>
###3、jQuery 的顶级对象 $
1、介绍:
1、$ 是 jQuery 的别称,在代码中可以使用 jQuery 代替 $,但是为了方便,通常直接使用 $
2、$ 是 jQuery 的顶级对象,相当于原生 JavaScript 中的 window,把元素利用 $ 包装成 jQuery对象,就可以使用 jQuery 的方法
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>测试</div>
<script>
// $ 是 jQuery 的别名,也是 jQuery 的顶级对象
/* jQuery(function() {
jQuery('div').hide();
}) */
jQuery(document).ready(function() {
jQuery('div').hide();
})
</script>
</body>
</html>
3、jQuery 对象和 DOM 对象
1、DOM 对象和 jQuery 对象之间是可以相互转换的,因为原生的 js 比 jQuery 更大,原生的一些属性和方法 jQuery 没有给我们封装,要想使用这些属性和方法,需要把 jQuery 对象转换为 DOM 对象才能使用。
2、DOM 对象转换为 jQuery 对象:$(DOM对象)
$('div')
3、jQuery 对象转换为 DOM 对象(两种方式)
// 方式1:index是索引号,从0开始
$('div')[index]
// 方式2:index是索引号,从0开始
$('div').get(index)
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
// 使用原生的 js 获取的对象就是 js 对象
var myDiv = document.querySelector('div'); //DOM对象
var mySpan = document.querySelector('span'); //DOM 对象
console.log('DOM对象:' + myDiv); // [object HTMLDivElement]
$('div'); //jQuery对象
$('span'); //jQuery对象
console.log('jQuery对象:' + ('div')); // jQuery对象:div
// jQuery 对象只能使用 jQuery 的方法,
// DOM 对象可以使用原生的JavaScript的属性和方法
myDiv.style.display = 'none';
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<video src="./mov.mp4" muted></video>
<script>
// 使用原生 js 操作 DOM 对象
var myVideo = document.querySelector('video');
// myVideo.play();
// jQuery 对象没有 play 方法,将其转换为 DOM 对象
// $('video')[0].play();
$('video').get(0).play();
</script>
</body>
</html>
三、jQuery 选择器
1、基础选择器
1、原生的 JS 获取元素的方式很多,很杂,而且兼容性情况不一致,因此 jQuery 给我们做了封装,使获取元素统一标准。
$("选择器") //里面的选择器直接写CSS的选择器即可,但是要加引号
名称 | 用法 | 描述 |
---|---|---|
ID选择器 | $(“#id”) | 获取指定 id 的元素 |
全选选择器 | $(“*”) | 匹配所有元素 |
类选择器 | $(“.class”) | 获取同一类的 class 元素 |
标签选择器 | $(“标签名”) | 获取同一类标签的所有元素 |
并集选择器 | $(“div,p,li”) | 选取多个元素 |
交集选择器 | $(“li.current”) | 交集元素 |
2、层级选择器
1、jQuery 设置样式:
$('div').css('属性', '值')
名称 | 用法 | 描述 |
---|---|---|
子代选择器 | $(“ul>li”) | 使用 > 号,获取儿子层级的元素,并不会获取孙子层级的元素 |
后代选择器 | $(“ul li”) | 使用空格,代表后代选择器,获取 ul 下的所有 li 元素,包括孙子 |
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="box">测试代码</div>
<ul>
<li class="ul_li">我是ul的</li>
<li class="ul_li">我是ul的</li>
<li class="ul_li">我是ul的</li>
<li>
<ol>
<li>我是ol的,是ul的孙子li</li>
<li>我是ol的,是ul的孙子li</li>
<li>我是ol的,是ul的孙子li</li>
</ol>
</li>
</ul>
<script>
// 元素选择器
$('.box').css('color', 'red');
// 子代选择器,不包括孙子
$('ul>.ul_li').css('backgroundColor', 'pink');
// 后代选择器,包括孙子
$('ul li').css('color', 'skyblue');
</script>
</body>
</html>
3、隐式迭代
1、遍历内部的 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代,简单理解就是给匹配到的所有元素进行循环遍历,执行相应的方法,而不是我们再进行循环,简化我们的操作,方便调用。
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>隐式迭代测试</div>
<div>隐式迭代测试</div>
<div>隐式迭代测试</div>
<div>隐式迭代测试</div>
<ul>
<li>相同操作</li>
<li>相同操作</li>
<li>相同操作</li>
<li>相同操作</li>
</ul>
<script>
// 获取4个 div 元素
console.log($('div'));
$('div').css('color', 'pink');
// 隐式迭代就是把所有匹配到的元素在内部进行循环变量,给每一个元素添加css这个方法
$('ul li').css('color', 'orange');
</script>
</body>
</html>
4、筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $(“li:first”) | 获取第一个 li 元素 |
:last | $(“li:last”) | 获取最后一个 li 元素 |
:eq(index) | $(“li:eq(2)”) | 获取到的 li 元素中,选择索引号为2的元素,索引号index从0开始 |
:odd | $(li:odd) | 获取到的 li 元素中,选择索引号为奇数的元素 |
:even | $(“li:even”) | 获取到的 li 元素中,选择索引号为偶数的元素 |
parent() | $(“li”).parent() | 查找父级 |
children(selector) | $(“ul”).children(“li”) | 相当于 $(“ul>li”) ,最近的一级,亲儿子 |
find(selector) | $(“ul”).find(“li”) | 相当于 $(“ul li”),后代选择器,包括孙子 |
siblings(selector) | $(.first).siblings(“li”) | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(“.first”).nextAll() | 查找当前元素之后的所有同辈元素 |
prevAll([expr]) | $(“.last”).prevtAll() | 查找当前元素之前的所有同辈元素 |
hasClass(class) | $(“div”).hasClass(“class”) | 检查当前元素是否包含有某个特定的类,如果有则返回 true |
eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”),index从0开始 |
1、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
</ul>
<ol>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
<li>多个筛选几个</li>
</ol>
<script>
// 筛选第一个
$('ul li:first').css('color', 'red');
// 筛选最后一个
$('ul li:last').css('color', 'blue');
// 根据索引筛选
$('ul li:eq(2)').css('color', 'orange');
// 筛选奇数
$('ol li:odd').css('color', 'pink');
// 筛选偶数
$('ol li:even').css('color', 'skyblue');
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dffz86tN-1653722614303)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648904123511.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div class="grandFather">
<div class="parent">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>我是p标签</p>
<div>
<p>我是里面的p标签</p>
</div>
</div>
<script>
$(function() {
// parent() :返回最近一级的父元素
console.log($('.son').parent());
$('.son').parent()[0].innerHTML = "通过DOM添加的父元素内容";
// children() :亲儿子,类似于子代选择器 ul>li
$('.nav').children('p').css('color', 'red');
// find() :可以选择所有的孩子,包括儿子和孙子,类似于后代选择器 ul li
$('.nav').find('p').css('backgroundColor', 'pink');
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yJ6Q7NfT-1653722614305)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648904036873.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
// 鼠标经过
$('.nav>li').mouseover(function() {
// $(this):jQuery当前元素,this 不要加引号
// show() :显示元素
$(this).children('ul').show();
})
// 鼠标离开
$('.nav>li').mouseout(function() {
// hide() :隐藏元素
$(this).children('ul').hide();
})
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7a09JI6e-1653722614306)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648904576225.png)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ol>
<li>我是ol里面的li</li>
<li>我是ol里面的li</li>
<li class="item">我是ol里面的li</li>
<li>我是ol里面的li</li>
<li>我是ol里面的li</li>
<li>我是ol里面的li</li>
</ol>
<ul>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
<li>我是ul里面的li</li>
</ul>
<div class="current">我有current</div>
<div>我没有current</div>
<script>
// 注意:都是方法,需要带括号
$(function() {
// 兄弟元素 siblings 是除了自身之外的所有亲兄弟
$('ol .item').siblings('li').css('color', 'orange');
// 第 N 个元素
var index = 2;
/* // 利用选择器的方式选择1
$('ul li:eq(1)').css('color', 'pink');
$("ul li:eq("+index+")").css('color', 'red'); */
// 利用选择器的方式选择2:更推荐
$('ul li').eq(1).css('color', 'pink');
$('ul li').eq(index).css('color', 'red');
// 判断是否有某个类名
console.log($('div:first').hasClass('current'));
console.log($('div:last').hasClass('current'));
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ILLzf8RA-1653722614306)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648905419915.png)]
5、jQuery 里面的排他思想
1、想要实现多选一的效果,即排他思想:当前元素设置样式,其余的兄弟元素清除样式
$(this).css("color", "red"); //当前元素设置样式
$(this).siblings().css("color", ""); //其余兄弟元素去除样式
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<script>
$(function() {
// 隐式迭代,给所有按钮都绑定点击事件
$('button').click(function() {
// 当前元素变化背景颜色
$(this).css("background", "pink");
// 其余兄弟元素去除隐式,隐式迭代
$(this).siblings().css("background", "");
})
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jkMjlrtK-1653722614307)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648906063317.png)]
###6、链式编程
1、链式编程是为了节省代码,看起来更简洁优雅。使用链式编程一定要注意是那个对象执行样式。
$(this).css('color', 'red').siblings().css('color', '');
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>
我是div中的元素
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
</div>
<script>
$(function() {
// 隐式迭代,给所有元素绑定点击事件
$('button').click(function() {
/* // 链式编程:我自身变颜色,兄弟元素不变色
$(this).css('color', 'red').siblings().css('color', ''); */
// 链式编程:我不变颜色,兄弟元素变色
// $(this).siblings().css('color', 'red');//第一次点击正常,再次点击兄弟元素,所有元素有颜色
$(this).css('color', '').siblings().css('color', 'red'); //推荐
// 为兄弟元素的父元素变化颜色
$(this).siblings().parent().css('color', 'orange');
})
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0od4rSCE-1653722614308)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648906789544.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ssr4zIKm-1653722614309)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648906926170.png)]
四、jQuery 样式操作
1、操作 CSS 的方法
1、jQuery 可以使用 css 的方法来修改简单元素样式,也可以操作类,修改多个样式
2、参数只写属性名,则返回属性值
$(this).css('color');
3、参数是属性名、属性值、逗号分隔,是设置一组样式,属性必须加引号,如果是数字,可以不用跟单位和引号。
$(this).css('color', 'red');
4、参数是对象形式,方便设置多组样式,属性名和属性值使用冒号隔开,属性可以不用加引号。
$(this).css(
{
"color":"white",
"font-size":"20px"
}
);
5、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 操作CSS 方法
$(function() {
console.log($('div').css('width'));
$('div').css('backgroundColor', 'skyblue');
$('div').css({
width:300,
height:300,
// 如果是复合属性则必须采取驼峰命名法,如果值不是数字必须加引号
backgroundColor:'gray'
})
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ATGp1ZAH-1653722614309)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648907753196.png)]
2、设置类样式方法
1、作用等同于以前的classList,可以操作类样式,注意操作类里面的参数不要加点。
2、添加类:
$('div').addClass('current');
3、移出类:
$('div').removeClass('current');
4、切换类:
$('div').toggleClass('current')
5、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
transition: all 0.5s;
}
.current {
background-color: red;
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="current"></div>
<script>
$(function() {
/* // 添加类
$('div').click(function() {
$(this).addClass('current');
})
// 移除类
$('div').click(function() {
$(this).removeClass('current');
}) */
// 切换类
$('div').click(function() {
$(this).toggleClass('current');
})
})
</script>
</body>
</html>
6、切换tab栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价(50000)模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
<script>
$(function() {
// 点击上部的 li ,当前的 li 添加 current 类,其余的兄弟移出类
$('.tab_list li').click(function() {
// 链式编程
$(this).addClass('current').siblings().removeClass('current');
// 点击的同时,获取当前的索引号
var index = $(this).index();
console.log(index);
// 让下部里面的相应的索引号的 item 显示,其余的 item 隐藏
$('.tab_con .item').eq(index).show().siblings().hide();
})
})
</script>
</div>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k0EDeVCv-1653722614310)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648908920308.png)]
3、类操作和className的区别
1、原生的 JS 中的 className 会覆盖原生原先里面的类名,jQuery 里面的类操作只是对指定类进行操作,不会影响原先的类名。
2、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
.two {
width: 200px;
height: 200px;
background-color: blue;
transform: rotate(720deg);
}
.one {
width: 200px;
height: 200px;
background-color: pink;
transition: all .3s;
}
</style>
</head>
<body>
<div class="one"></div>
<script>
var one = document.querySelector('div');
// one.className = 'two'; //设置之后div的样式变为了two的样式
// 使用jQuery 添加类名,不影响之前的类名,样式没有变化,下面的样式会覆盖上面的样式
$('.one').addClass('two');
</script>
</body>
</html>
五、jQuery 效果
1、常见动画
1、显示隐藏:show() hide() toggle()
2、滑动:slideDown() slideUp() slideToggle()
3、淡入淡出:fadeIn() fadeOut() fadeToggle() fadeTo()
4、自定义动画:animate()
2、显示隐藏效果
1、显示语法规范
1、语法:
show([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,五动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
2、隐藏语法规范
1、语法:
hide([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,五动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、切换语法规范
1、语法:
toggle([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
- 建议:平时一般不带参数,直接显示隐藏即可
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 150px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div></div>
<script>
$(function() {
$('button').eq(0).click(function() {
$('div').show(1000,function(){
alert("显示");
})
});
$('button').eq(1).click(function() {
$('div').hide(1000,function() {
alert('隐藏了');
})
});
$('button').eq(2).click(function() {
$('div').toggle(1000,function() {
alert('已切换');
})
})
})
</script>
</body>
</html>
3、滑动效果
1、下滑效果
1、语法:
slideDown([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,五动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
2、上滑效果
1、语法:
slideUp([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,五动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、滑动切换效果
1、语法:
slideToggle([speed, [easing], [fn]])
2、参数说明:
- 参数都可以省略,五动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>下拉滑动</button>
<button>上拉滑动</button>
<button>切换滑动</button>
<div></div>
<script>
$(function() {
$('button').eq(0).click(function() {
$('div').slideDown(100);
});
$('button').eq(1).click(function() {
$('div').slideUp(500);
});
$('button').eq(2).click(function() {
$('div').slideToggle(1000);
});
})
</script>
</body>
</html>
4、事件切换
1、语法:
hover([over], out)
2、参数说明:
- over:鼠标移到元素上要触发的函数,相当于 mouseenter
- out:鼠标移出元素要触发的函数,相当于 mouseleave
- 如果只写一个函数,则鼠标经过和离开都会触发它
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
// 鼠标经过
// $(".nav>li").mouseover(function() {
// // $(this) jQuery 当前元素 this不要加引号
// // show() 显示元素 hide() 隐藏元素
// $(this).children("ul").slideDown(200);
// });
// // 鼠标离开
// $(".nav>li").mouseout(function() {
// $(this).children("ul").slideUp(200);
// });
// 1. 事件切换 hover 就是鼠标经过和离开的复合写法
// $(".nav>li").hover(function() {
// $(this).children("ul").slideDown(200);
// }, function() {
// $(this).children("ul").slideUp(200);
// });
// 2. 事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
$(".nav>li").hover(function() {
$(this).children("ul").slideToggle();
});
})
</script>
</body>
</html>
4、动画队列及其停止排队方法
1、简介
1、动画获取效果队列:动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。
2、停止排队:stop()
- stop():用于停止动画或效果
- stop() 方法写到动画或者效果的前面,相当于停止结束上一次的动画
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
}
.nav>li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav>li>a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #FECC5B;
border-right: 1px solid #FECC5B;
}
.nav ul li {
border-bottom: 1px solid #FECC5B;
}
.nav ul li a:hover {
background-color: #FFF5DA;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<script>
$(function() {
$('.nav>li').hover(function() {
// stop() 方法写到动画的前面
$(this).children('ul').stop().slideToggle();
})
})
</script>
</body>
</html>
2、淡入效果
1、语法:
fadeIn([speed], [easing], [fn])
2、参数说明:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、淡出效果
1、语法:
fadeOut([speed], [easing], [fn])
2、参数说明:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
4、淡入淡出切换效果
1、语法:
fadeToggle([speed], [easing], [fn])
2、参数说明:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
5、渐进方式调整到指定的不透明度
1、语法:
fadeTo([speed], opacity, [easing], [fn])
2、参数说明:
- opacity:透明度必须写,取值范围是0 ~ 1之间
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 300px;
background-color: pink;
display: none;
}
</style>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换效果</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$('button').eq(0).click(function() {
$('div').fadeIn(100);
});
$('button').eq(1).click(function() {
$('div').fadeOut(500);
});
$('button').eq(2).click(function() {
$('div').fadeToggle(1000);
});
$('button').eq(3).click(function() {
$('div').fadeTo(1000,0.5);
})
})
</script>
</body>
</html>
6、自定义动画
1、语法:
animate(params, [speed], [easing], [fn])
2、参数说明:
- params:想要更改的样式属性,以对象形式传递,必须写,属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法 borderLeft,其余的参数都可以省略
- speed:三种预定速度之一的字符串(“slow”、“normal”、“fast”),或者动画时长的毫秒值,比如:1000
- easing:用来指定切换效果,默认是swing,可用参数linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
position: absolute;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button>动起来</button>
<div></div>
<script>
$(function() {
$('button').click(function() {
$('div').animate({
left: 500,
top: 300,
opacity: .4,
width: 500
},1000);
})
})
</script>
</body>
</html>
六、jQuery 属性操作
1、设置或获取元素的固有属性 prop()
1、所谓元素的固有属性就是元素本身自带的属性,比如 a 元素里面的 href 属性,input 里面的type 属性。
2、获取属性的语法:prop(“属性”)
3、设置属性的语法:prop(“属性”,“属性值”)
2、设置或获取元素的自定义属性 attr()
1、用户自己给元素添加的属性,我们称之为自定义属性,比如 div 添加的 index=“1”
2、获取属性的语法:attr(“属性”),类似于原生的 getAttribute()
3、设置属性的语法:attr(“属性”,“属性值”),类似于原生的 setAttribute()
3、数据缓存 data()
1、data() 方法可以在指定的元素上获取数据,并不会修改 DOM 元素结构,一旦页面刷新,之前存放的数据将被移出。
2、附加数据方法:
data('name', 'value') //向被选中元素附加数据
3、获取数据:同时,还可以读取 HTML5 自定义属性 data-index ,得到的是数字型
data('name') //向被选中元素获取数据
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<a href="http://www.itcast.cn" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
// prop("属性名"):获取元素固有属性
console.log($('a').prop('href'));
$('a').prop('title', '主题');
$('input').change(function() {
console.log($(this).prop('checked'));
});
console.log($('div').attr('index'));
// 元素的自定义属性
$('div').attr('index',4);
console.log($('div').attr('data-index'));
// 数据缓存 data() : 这个里面的数据存放在元素的内存里面
$('span').data('uname', 'ztt');
console.log($('span').data('uname'));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($('div').data('index'))
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UyyYG9SY-1653722614312)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648949125549.png)]
4、正则表达式在 js 中的应用
1、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 利用 RegExp 对象来创建正则表达式
var regexp = new RegExp(/123/);
console.log(regexp); // /123/
// 利用字面量创建正则表达式
var rg = /123/;
// 使用 test() 方法来检测字符串是否符合正则表达式的要求规范
console.log(rg.test(123)); //true
console.log(rg.test('abc')); //false
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
// 边界符 ^ $
var rg = /abc/; // 正则表达式里面不需要加引号 不管是数字型还是字符串型
// /abc/ 只要包含有abc这个字符串返回的都是true
console.log(rg.test('abc'));
console.log(rg.test('abcd'));
console.log(rg.test('aabcd'));
console.log('---------------------------');
var reg = /^abc/;
console.log(reg.test('abc')); // true
console.log(reg.test('abcd')); // true
console.log(reg.test('aabcd')); // false
console.log('---------------------------');
var reg1 = /^abc$/; // 精确匹配 要求必须是 abc字符串才符合规范
console.log(reg1.test('abc')); // true
console.log(reg1.test('abcd')); // false
console.log(reg1.test('aabcd')); // false
console.log(reg1.test('abcabc')); // false
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery.min.js"></script>
</head>
<body>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
console.log($(".four").parents());
console.log($(".four").parents(".one"));
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
//var rg = /abc/; 只要包含abc就可以
// 字符类: [] 表示有一系列字符可供选择,只要匹配其中一个就可以了
var rg = /[abc]/; // 只要包含有a 或者 包含有b 或者包含有c 都返回为true
console.log(rg.test('andy'));
console.log(rg.test('baby'));
console.log(rg.test('color'));
console.log(rg.test('red'));
var rg1 = /^[abc]$/; // 三选一 只有是a 或者是 b 或者是c 这三个字母才返回 true
console.log(rg1.test('aa'));
console.log(rg1.test('a'));
console.log(rg1.test('b'));
console.log(rg1.test('c'));
console.log(rg1.test('abc'));
console.log('------------------');
var reg = /^[a-z]$/; // 26个英文字母任何一个字母返回 true - 表示的是a 到z 的范围
console.log(reg.test('a'));
console.log(reg.test('z'));
console.log(reg.test(1));
console.log(reg.test('A'));
// 字符组合
var reg1 = /^[a-zA-Z0-9_-]$/; // 26个英文字母(大写和小写都可以)任何一个字母返回 true
console.log(reg1.test('a'));
console.log(reg1.test('B'));
console.log(reg1.test(8));
console.log(reg1.test('-'));
console.log(reg1.test('_'));
console.log(reg1.test('!'));
console.log('----------------');
// 如果中括号里面有^ 表示取反的意思 千万和 我们边界符 ^ 别混淆
var reg2 = /^[^a-zA-Z0-9_-]$/;
console.log(reg2.test('a'));
console.log(reg2.test('B'));
console.log(reg2.test(8));
console.log(reg2.test('-'));
console.log(reg2.test('_'));
console.log(reg2.test('!'));
</script>
</body>
</html>
七、jQuery 文本属性值
1、主要针对元素的内容和表单的值
2、普通元素的内容 html() ,相当于原生的 innerHTML
html() //获取元素内容
html("内容") //设置元素内容
3、普通元素文本内容 text() ,相当于原生的 innerText
text() //获取元素的文本内容
text("文本内容") //设置元素的文本内容
4、表单的值 val(),相当于原生的 value
val() //获取表单的值
val("内容") //设置表单的值
5、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// html() :获取元素内容
console.log($('div').html()); //<span>我是内容</span>
// 设置元素内容
// $('div').html('我是新设置的内容');
// 获取元素的文本内容
console.log($('div').text()); //我是内容
// 设置元素文本内容
$('div').text('我是新设置的文本内容');
// 获取元素表单的值
console.log($('input').val());
// 设置表单元素的值
$('input').val('00000');
</script>
</body>
</html>
八、jQuery 元素操作
1、遍历元素
1、jQuery 隐式迭代是对同一类元素做同样的操作,如果想要给同一类元素做不同的操作,就要用到遍历。
2、语法1:
$('div').each(function(index, domEle) {xxx;})
3、参数说明:
- each() :此方法遍历匹配的每一个元素,主要用 DOM 处理,each 每一个元素
- 里面的回调函数有2个参数,index 是每个元素的索引号,domEle 是每个 DOM 元素对象,不是 jQuery 对象
- 所以要想使用 jQuery 方法,需要将这个 DOM 元素先转换为 jQuery 对象,即 $(domEle)
4、语法2:
$.each(object, function(index, element) {xxx;})
5、参数说明:
- $.each():此方法可用于遍历任何对象,主要用于数据处理,比如数组、对象
- 里面的函数有2个参数,index 是每个元素的索引号,element 是遍历的内容
6、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果针对于同一类元素做不同操作,需要用到遍历元素(类似for,但是比for强大)
var sum = 0;
// each() 方法遍历元素
var attr = ['red', 'green', 'blue', 'yellow', 'orange'];
$('div').each(function(i, domEle){
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称
// console.log(index);
// console.log(i);
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom对象没有css方法
$(domEle).css('color', attr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum); //15
// $.each() 主要用于遍历数据、处理数据
/* $.each($('div'), function(i, ele) {
console.log(i);
console.log(ele);
}) */
/* $.each(attr, function(i, ele) {
console.log(i);
console.log(ele);
}) */
$.each({
name: 'ztt',
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 ztt 18 属性值
})
})
</script>
</body>
</html>
2、创建元素
1、语法:
$('<div></div>') //动态创建一个 li 元素
3、添加元素
1、内部添加
// 把内容放入匹配元素内部最后面,类似于原生的 appendChild
element.append("内容")
// 把内容放入匹配元素内部的最前面
element.prepend('内容')
2、外部添加
// 把内容放到目标元素后面
element.after("内容")
// 把内容放到目标元素前面
element.before("内容")
3、注意:
- 内部添加元素,生成之后,他们是父子关系
- 外部添加元素,生成之后,他们是兄弟关系
4、删除元素
1、语法:
element.remove() //删除匹配的元素本身
element.empty() //删除匹配的元素集合中的所有子节点
element.html("") //清空匹配的元素内容
2、注意点:
- remove 删除元素本身。
- empty() 和 html(‘’‘’) 作用等价,都可以删除元素里面的内容,只不过 html 还可以设置内容。
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 创建元素
var li = $('<li>我是后来创建的li</li>');
// 添加元素,内部添加
// $('ul').append(li); //内部添加并且放到内容的最后面
$('ul').prepend(li); //内部添加并且放到内容的最前面
// 添加元素,外部添加
var div = $('<div>我是后面添加的div</div>');
// $('.test').after(div); //外部添加,添加到最后面
$('.test').before(div); //外部添加,添加到最前面
// 删除元素
// $('ul').remove(); //可以删除匹配的元素,自杀,元素本身都被删除了
// $('ul').empty(); //可以删除匹配元素的子节点,即孩子 li 都被删除了
$('ul').html(''); //可以删除匹配元素的子节点,即孩子 li 都被删除了
})
</script>
</body>
</html>
九、jQuery 尺寸、位置操作
1、jQuery 尺寸
1、语法:
语法 | 用法 |
---|---|
width() / height() | 取得匹配元素宽度和高度值,只算 width/height |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值,包含 padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值,包含 padding、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值,包含padding、border、margin |
2、说明:
- 以上参数为空,则是获取相应的值,返回的是数字型
- 如果参数为数字,则是修改相应值
- 参数可以不必写单位
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
// width() / height() :获取或设置元素的 width height 大小
console.log($('div').width());
// $('div').height(300);
// innerWidth() / innerHeight() : 获取设置元素 width和height + padding 大小
console.log($('div').innerWidth());
// $('div').innerHeight(300);
// outerWidth() / outerHeight() : 获取设置元素 width和height + padding + border 大小
console.log($('div').outerWidth());
// $('div').outerHeight(400);
// outerWidth(true) / outerHeight(true) :获取设置 width和height + padding + border + margin
console.log($('div').outerHeight(true));
console.log($('div').outerWidth(800));
})
</script>
</body>
</html>
2、jQuery 位置
1、offset() :设置或获取元素的偏移:
- offset() 方法设置戒返回被选元素相对于文档的偏移坐标,跟父级没有关系。
- 该方法有2个属性 left、top 。offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
- 可以设置元素的偏移:offset({ top: 10, left: 30 });
2、position() :获取元素偏移:
- position() 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
- 该方法有2个属性 left、top。position().top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
- 该方法只能获取。
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.father {
width: 400px;
height: 400px;
background-color: pink;
margin: 100px;
overflow: hidden;
position: relative;
}
.son {
width: 150px;
height: 150px;
background-color: purple;
position: absolute;
left: 10px;
top: 10px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 获取设置距离文档的位置
console.log($('.son').offset());
console.log($('.son').offset().top);
/* $('.son').offset({
top:200,
left:200
}); */
// 2. 获取距离带有定位父级位置(偏移) position 如果没有带有定位的父级,则以文档为准
// 这个方法只能获取不能设置偏移
console.log($('.son').position());
/*
// 以下代码不生效,只能获取,不能设置
$('.son').position({
top:200,
left:200
});
*/
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fXYiFfAZ-1653722614313)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648953959510.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fnStyMsB-1653722614314)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648954088114.png)]
4、scrollTop() / scrollLeft():设置或获取被卷去的头部和左侧:
- scrollTop() 方法设置或返回被选元素被卷去的头部。
- 不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
5、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
</head>
<body>
<div class="back">返回顶部</div>
<div class="container"></div>
<script>
$(function() {
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
$(document).scrollTop(100);
// 页面滚动事件
var boxTop = $('.container').offset().top;
$(window).scroll(function() {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
})
})
</script>
</body>
</html>
十、jQuery 事件
1、jQuery 事件注册
1、单个事件注册语法:
element.事件(function() {})
$('div').click(function() {事件处理程序})
2、其他事件和原生的基本一致,比如:mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
// 单个事件处理
$('div').click(function() {
$(this).css('background', 'purple');
})
$('div').mouseenter(function() {
$(this).css('background', 'orange');
})
})
</script>
</body>
</html>
2、jQuery 事件处理
1、事件处理 on() 绑定事件
1、on():此方法在匹配的元素上绑定一个或者多个事件的事件处理函数
2、语法:
element.on(events, [selector], fn)
2、参数说明:
- events:一个或多个空格分隔的事件类型,比如:“click” 或 “keydown”
- selector:元素的子元素选择器
- fn:回调函数,即绑定在元素身上的监听函数
3、on() 方法的优势:
- 可以绑定多个事件,多个处理事件的处理程序
$('div').on({
mouseenter: function() {},
click: function() {},
mouseleave: function() {}
})
- 如果处理程序相同
$('div').on('mouseenter mouseleave', function() {
$(this).toggleClass('current');
})
- 可以委托事件,即把原来加给子元素身上的事件绑定到父元素身上,就是把事件委派给父元素,在此之前有bind(), live() delegate()等方法来处理事件绑定戒者事件委派,最新版本的请用on替代他们。
$('ul').on('click', 'li', function() {
alert(123);
})
- 动态创建的元素,click() 没有办法绑定事件,on() 方法可以给动态生成的元素绑定事件
$('ol').on('click', 'li', function() {
alert(123);
});
$('ol').append($('<li>我是动态创建的li元素</li>'));
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.current {
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
/* // 单个事件处理
$('div').click(function() {
$(this).css('background', 'purple');
})
$('div').mouseenter(function() {
$(this).css('background', 'orange');
}) */
// 处理事件:on(),可以绑定一个或者多个事件处理程序
/* $('div').on({
mouseenter: function() {
$(this).css('background', 'skyblue');
},
click: function() {
$(this).css('background', 'purple');
},
mouseleave: function() {
$(this).css('background', 'blue');
}
}) */
$('div').on('mouseenter mouseleave', function() {
$(this).toggleClass('current');
})
// on() : 可以实现事件委托/委派
// click 事件是绑定在 ul 上面的,但是触发的对象却是 li 元素
$('ul').on('click', 'li', function(){
alert(11);
})
// on() :可以给未来动态创建的元素绑定事件
$('ol').on('click', 'li', function() {
alert(22);
})
var li = $('<li>我是动态创建的li</li>');
$('ol').append(li);
})
</script>
</body>
</html>
5、微博发布效果案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
* {
margin: 0;
padding: 0
}
ul {
list-style: none
}
.box {
width: 600px;
margin: 100px auto;
border: 1px solid #000;
padding: 20px;
}
textarea {
width: 450px;
height: 160px;
outline: none;
resize: none;
}
ul {
width: 450px;
padding-left: 80px;
}
ul li {
line-height: 25px;
border-bottom: 1px dashed #cccccc;
display: none;
}
input {
float: right;
}
ul li a {
float: right;
}
</style>
</head>
<body>
<div class="box" id="weibo">
<span>微博发布</span>
<textarea name="" class="txt" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul>
</ul>
</div>
<script>
$(function() {
// 1.点击发布按钮, 动态创建一个小li,放入文本框的内容和删除按钮, 并且添加到ul 中
$('.btn').on('click', function() {
var li = $('<li></li>');
li.html($('.txt').val() + '<a href="javascript:;">删除</a>');
$('ul').append(li);
li.slideDown();
$('.txt').val('');
})
// 点击删除按钮,可以删除当前的微博留言
$('ul').on('click', 'a', function() {
$(this).parent().slideUp(function() {
$(this).remove();
console.log($(this).parent());
})
})
})
</script>
</body>
</html>
2、事件处理 off() 解绑事件
1、off():可以移除通过 on() 方法添加的事件处理程序
$('p').off() //解绑p元素所有的事件处理程序
$('p').off('click') //解绑p元素上面的点击事件,后面的
$('ul').off('click', 'li') //解绑事件委托
2、如果有的事件只想触发一次,可以使用 one() 来绑定事件
$('p').one('click', function() {
alert(222);
})
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是p</p>
<script>
$(function() {
$('div').on({
click: function() {
console.log('我点击了');
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$('ul').on('click', 'li', function() {
alert(111);
});
// 解除绑定的事件
// $('div').off(); //解除div 身上绑定的所有事件
$('div').off('click'); //解除 div 身上的点击事件
$('ul').off('click', 'li'); //解除 li 身上的点击事件
// one():只能触发事件一次
$('p').one('click', function() {
alert(222);
})
})
</script>
</body>
</html>
3、自动触发事件 trigger()
1、有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件,不必鼠标点击触发。
element.click() //第一种简写形式
element.trigger('type') //第二种自动触发模式
$('p').on('click', function() {
alert('Hi~');
});
$('p').trigger('click'); //此时自动触发点击事件,不需要鼠标点击
element.triggerHandler(type) //第三种自动触发模式
2、triggerHandler模式不会触发元素的默认行为,这是和前面两种的区别。
3、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<script>
$(function() {
$('div').on('click', function(){
alert(11);
});
// 自动触发事件
// $('div').click(); //会触发元素默认行为
// $('div').trigger('click'); //会触发元素默认行为
$('input').trigger('focus');
// 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$('div').triggerHandler('click');
// $("input").triggerHandler("focus");
$('input').on('focus', function() {
$(this).val('Hi~');
})
})
</script>
</body>
</html>
###3、jQuery 事件对象
1、事件被触发,就会有事件对象的产生
element.on(events, [selector], function(event) {})
2、阻止默认行为:event.preventDefault() 或者 return false
3、阻止冒泡:event.stopPropagation()
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
$(function() {
$(document).on('click', function() {
console.log('点击了document')
})
$('div').on('click', function(event) {
console.log('点击了div');
event.stopPropagation();
})
})
</script>
</body>
</html>
十一、jQuery 的其他方法
1、jQuery 拷贝对象
1、如果想要把某个对象拷贝/合并给另一个对象使用,可以使用 $.extend() 方法
2、语法:
$.extend([deep], target, objec:1, [objectN])
3、参数说明:
- deep:如果设为true,是深拷贝,默认是 false,即浅拷贝
- target:要拷贝的目标对象
- object1:待拷贝到第一个对象的对象
- objectN:待拷贝到第N个对象的对象
- 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
- 深拷贝,前面加true, 完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象。
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<script>
$(function() {
/* var targetObj = {};
var obj = {
id: 1,
name: 'ztt'
};
$.extend(targetObj,obj); //把 obj 对象拷贝到 targetObj 对象中
console.log(targetObj); */
var targetObj = {
id: 0,
msg: {
sex: '男'
}
};
var obj = {
id: 1,
name: 'ztt',
msg: {
age: 18
}
};
/* $.extend(targetObj, obj); //会覆盖原来 targetObj 中的数据
console.log(targetObj);
// 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
targetObj.msg.age = 12;
console.log(targetObj); //age 变为了12
console.log(obj); //age 变为了12 */
// 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起
$.extend(true, targetObj, obj);
console.log(targetObj); //会覆盖原来 targetObj 中的数据
targetObj.msg.age = 12;
console.log(targetObj); //age变为了12
console.log(obj); //age没有变化
})
</script>
</body>
</html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tdXqYbtU-1653722614316)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648968445276.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfu38oll-1653722614316)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1648968649061.png)]
2、多库共存
1、jQuery使用 作 为 标 示 符 , 随 着 j Q u e r y 的 流 行 , 其 他 j s 库 也 会 用 这 作为标示符,随着jQuery的流行,其他 js 库也会用这 作为标示符,随着jQuery的流行,其他js库也会用这作为标识符, 这样一起使用会引起冲突。
2、需要一个解决方案,让jQuery 和其他的js库不存在冲突,可以同时存在,这就叫做多库共存。
3、jQuery 解决方案:
1、把里面的 $ 符号 统一改为 jQuery。 比如 jQuery(''div'')
2、jQuery 变量规定新的名称:$.noConflict() var xx = $.noConflict();
4、示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.min.js"></script>
</head>
<body>
<div></div>
<span></span>
<script>
$(function() {
function $(ele) {
return document.querySelector(ele);
}
console.log($('div'));
// 如果 $ 符号冲突,就是 jQuery
jQuery.each();
// 让 jQuery 释放对 $ 的控制权,让我们自己决定
var suibian = jQuery.noConflict();
console.log(suibian('span'));
suibian.each();
})
</script>
</body>
</html>
3、jQuery 插件
1、jQuery 功能比较有限,想要更复杂的特效效果,可以借劣于 jQuery 插件完成。注意: 这些插件也是依赖于jQuery来完成的,所以必须要先引入jQuery文件,因此也称为 jQuery 插件。
2、jQuery 插件常用的网站:
-
jQuery 插件库 http://www.jq22.com/
-
jQuery 之家 http://www.htmleaf.com/
3、jQuery 插件使用步骤:
-
引入相关文件。(jQuery 文件 和 插件文件)
-
复制相关html、css、js (调用插件)。
tp-equiv=“X-UA-Compatible” content=“IE=edge”>
```
[外链图片转存中…(img-tdXqYbtU-1653722614316)]
[外链图片转存中…(img-pfu38oll-1653722614316)]