jQuery
1. 什么是jQuery
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装并存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数。- jQuery 是一个快速、简洁的 JavaScript 库，里面封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
- 学习jQuery本质： 就是学习调用这些函数（方法）。
- jQuery 的优点
2. jQuery的使用
下载
- 进入官网地址：
https://jquery.com/，点击右边下载。
- 选择这个代码，点击，全选复制。
- 在
vscode中新建文件，命名为jquery.min.js，并把代码粘贴保存。
使用
在需要使用的文件中引入<script src="./jquery.min.js"></script>即可使用
3. jQuery 的入口函数
<!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>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<script>
// 1. 等着页面DOM加载完毕再去执行js 代码
// $(document).ready(function() {
// $('div').hide();
// })
// 2.等着页面DOM加载完毕再去执行js 代码(简单更推荐)
$(function() {
$('div').hide();
})
</script>
<div></div>
</body>
</html>
4. 顶级对象 $
$是jQuery的别称，在代码中可以使用jQuery代替$。为了方便，通常都直接使用$。$是jQuery的顶级对象， 相当于原生JavaScript中的 window。
5. jQuery 对象和 DOM 对象
区别
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
注意：只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
<script>
// 1. DOM 对象： 用原生js获取过来的对象就是DOM对象
var myDiv = document.querySelector('div'); // myDiv 是DOM对象
console.dir(myDiv);
// 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
$('div'); // $('div')是一个jQuery 对象
console.dir($('div'));
// 3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 属性和方法
// myDiv.style.display = 'none';
// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法
// $('div').style.display = 'none'; 这个$('div')是一个jQuery对象不能使用原生js 的属性和方法
</script>
相互转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为jQuery对象
var myvideo = document.querySelector('video');// 使用原生js 获取过来 DOM对象
$(myvideo).方法 //已经转化为jQuery对象 调用jQuery里的方法
// 2. jQuery对象转换为DOM对象
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
6. jQuery常见API
6.1 选择器
基础选择器
注意：单引号和双引号都可以。
筛选选择器
<!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>
<ul>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ul>
<ol>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
<li>多个里面筛选几个</li>
</ol>
<script>
$(function() {
$("ul li:first").css("color", "red");
$("ul li:eq(2)").css("color", "blue");
$("ol li:odd").css("color", "skyblue");
$("ol li:even").css("color", "pink");
})
</script>
</body>
</html>
筛选方法（重点）
注意：parents(‘选择器’) 可以返回指定祖先元素
使用示例：
// 1. 父 parent() 返回的是最近一级的父级元素亲爸爸
$(".son").parent();
// 2. 子
// (1) 亲儿子 children() 类似子代选择器 ul>li
$(".nav").children("p").css("color", "red");
// (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器
$(".nav").find("p").css("color", "red");
// 3. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
$("ol .item").siblings("li").css("color", "red");
//4. 相同功能，不过第二个更推荐
// $("ul li:eq(2)").css("color", "blue");
// $("ul li").eq(2).css("color", "blue");
var index = 2;
$("ul li").eq(index).css("color", "blue");
// 5. 判断是否有某个类名
console.log($("div:first").hasClass("current"));
console.log($("div:last").hasClass("current"));
案例——新浪下拉菜单
<!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").show();
});
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</script>
</body>
</html>
6.2 设置样式
$('div').css('属性', '值')
举例：
$("div").css("background", "pink");
6.3 隐式迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
<!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>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
<li>相同的操作</li>
</ul>
<script>
// 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
$("ul li").css("color", "red");
</script>
</body>
</html>
6.4 排他思想
思想：当前元素设置样式，其余的兄弟元素清除样式。
<script>
$(function() {
// 1. 隐式迭代 给所有的按钮都绑定了点击事件
$("button").click(function() {
// 2. 当前的元素变化背景颜色
$(this).css("background", "pink");
// 3. 其余的兄弟去掉背景颜色 隐式迭代
$(this).siblings("button").css("background", "");
});
})
</script>
注意：jQuery得到当前元素索引号 $(this).index()
$(function() {
// 1. 鼠标经过左侧的小li
$("#left li").mouseover(function() {
// 2. 得到当前小li 的索引号
var index = $(this).index();
// 3. 让我们右侧的盒子相应索引号的图片显示出来就好了
$("#content div").eq(index).show();
// 4. 让其余的图片（就是其他的兄弟）隐藏起来
$("#content div").eq(index).siblings().hide();
})
})
6.5 链式编程
链式编程是为了节省代码量，看起来更优雅。
$("#content div").eq(index).show().siblings().hide();
6.6 样式操作
操作 css 方法
<body>
<div></div>
<script>
$(function() {
console.log($("div").css("width")); //返回200px
// $("div").css("width", "300px"); 设置属性 正确
// $("div").css("width", 300); 数字可以不用带单位 正确
// $("div").css(height, "300px"); 属性名一定要加引号！！
$("div").css({
width: 400, //复合属性可以不用加引号，比如width
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
console.log($("div").css("width")); //返回200px
})
</script>
</body>
设置类样式方法
注意：
- 切换类指的是没有的时候添加，有的时候删除。
- 原生 JS 中
className会覆盖元素原先里面的类名。jQuery 里面类操作只是对指定类进行操作，相当于追加类名，不影响原先的类名。
6.6 动画效果
show()
hide()
toggle()
slideDown()
slideUp()
slideToggle()
hover([over,]out)事件切换
// 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();
});
动画或效果队列
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
停止排队stop()
$(".nav>li").hover(function() {
// stop 方法必须写到动画的前面
$(this).children("ul").stop().slideToggle();
});
fadeIn()
fadeOut
fadeToggle()
fadeTo()
<!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>
div {
width: 150px;
height: 300px;
background-color: pink;
display: none;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<button>淡入效果</button>
<button>淡出效果</button>
<button>淡入淡出切换</button>
<button>修改透明度</button>
<div></div>
<script>
$(function() {
$("button").eq(0).click(function() {
// 淡入 fadeIn()
$("div").fadeIn(1000);
})
$("button").eq(1).click(function() {
// 淡出 fadeOut()
$("div").fadeOut(1000);
})
$("button").eq(2).click(function() {
// 淡入淡出切换 fadeToggle()
$("div").fadeToggle(1000);
});
$("button").eq(3).click(function() {
// 修改透明度 fadeTo() 这个速度和透明度要必须写
$("div").fadeTo(1000, 0.5);
});
});
</script>
</body>
</html>
自定义动画 animate
<!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>
<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
}, 500);
})
})
</script>
</body>
</html>
6.7 属性操作
固有属性操作
自定义属性操作
数据缓存 data()
示例
<body>
<a href="http://www.baidu.com/" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("属性名") 获取元素固有的属性值
console.log($("a").prop("href")); // http://www.baidu.com/
$("a").prop("title", "我们都挺好"); // title="我们都挺好"
$("input").change(function() {
console.log($(this).prop("checked")); //检测复选框的变化输出 true/false
});
// 2. 元素的自定义属性 我们通过 attr()
console.log($("div").attr("index")); // 1
$("div").attr("index", 4); //index = 4
console.log($("div").attr("data-index"));
// 3. 数据缓存 data() 这个里面的数据是存放在元素的内存里面
$("span").data("uname", "andy"); //Elements里看不见
console.log($("span").data("uname"));
// 这个方法获取data-index h5自定义属性 第一个 不用写data- 而且返回的是数字型
console.log($("div").data("index"));
})
</script>
</body>
</html>
两个全选键，三个复选框
$(function() {
// 1. 全选 全不选功能模块
// 就是把全选按钮（checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
// 因为有两个全选键 所有当其中一个变化时 小按钮和另外一个全选键也要变化
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
});
// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上，否则全选按钮不选。
$(".j-checkbox").change(function() {
// $(".j-checkbox").length 这个是所有的小复选框的个数
//$(".j-checkbox:checked").length等于被选中的复选框的个数
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
});
6.8 内容文本值
<body>
<div>
<span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
// 1. 获取设置元素内容 html()
console.log($("div").html()); // <span>我是内容</span>
// $("div").html("123"); <div>123</div>
// 2. 获取设置元素文本内容 text()
console.log($("div").text()); //我是内容
$("div").text("123"); //<div>123</div>
// 3. 获取设置表单值 val()
console.log($("input").val()); //请输入内容
$("input").val("123"); // 输入框内容变成123
</script>
</body>
注意：最后计算的结果如果想要保留2位小数 通过 toFixed(2) 方法
var price = (p * n).toFixed(2);
6.9 元素操作
遍历元素
<div>1</div>
<div>2</div>
<div>3</div>
<script>
// 如果针对于同一类元素做不同操作，需要用到遍历元素（类似for，但是比for强大）
var sum = 0;
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回调函数第一个参数一定是索引号 可以自己指定索引号号名称 比如为i、index
// 回调函数第二个参数一定是 dom元素对象 也是自己命名
$(domEle).css("color", arr[i]); //需要转化为jQuery对象才能使用其方法
sum += parseInt($(domEle).text());
})
console.log(sum); // 6
</script>
var arr = ["red", "green", "blue"];
$.each(arr, function(i, ele) {
console.log(i);
console.log(ele);
})
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 输出的是 name age 属性名
console.log(ele); // 输出的是 andy 18 属性值
})
注意：遍历标签用第一种语法比较方便，遍历数组和对象用第二种语法比较方便
创建元素
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
添加元素
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 创建元素
var li = $("<li>我是后来创建的li</li>");
// 2. 添加元素
// (1) 内部添加
// $("ul").append(li); 内部添加并且放到内容的最后面
$("ul").prepend(li); // 内部添加并且放到内容的最前面
// (2) 外部添加
var div = $("<div>我是后妈生的</div>");
// $(".test").after(div);
$(".test").before(div);
删除元素
6.10 尺寸操作
<!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>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>
<div></div>
<script>
$(function() {
// 1. width() / height() 获取设置元素 width和height大小
console.log($("div").width()); // 200
// $("div").width(300); //修改为300
// 2. innerWidth() / innerHeight() 获取设置元素 width和height + padding 大小
console.log($("div").innerWidth()); // 220
// 3. outerWidth() / outerHeight() 获取设置元素 width和height + padding + border 大小
console.log($("div").outerWidth()); // 250
// 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
console.log($("div").outerWidth(true)); // 290
})
</script>
</body>
</html>
6.11 位置操作
console.log($(".son").offset()); //返回的是一个Object{top:100 , left:100}
console.log($(".son").offset().top); //100
$(".son").offset({
top: 200,
left: 200
});
// 被卷去的头部 scrollTop() / 被卷去的左侧 scrollLeft()
$(document).scrollTop(100); //每次刷新后页面是滚动100px的页面
var boxTop = $(".container").offset().top;
$(window).scroll(function() { // 页面滚动事件
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 返回顶部: 不能是文档而是 html和body元素做动画
$(".back").click(function() {
$("body, html").stop().animate({
scrollTop: 0
});
电梯导航案例
$(function() {
// 当我们点击了小li 此时不需要执行 页面滚动事件里面的 li 的背景选择 添加 current
// 节流阀 互斥锁
var flag = true;
// 1.显示隐藏电梯导航
var toolTop = $(".recommend").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function() {
toggleTool();
// 3. 页面滚动到某个内容区域，左侧电梯导航小li相应添加和删除current类名
if (flag) {
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top) {
console.log(i);
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 点击电梯导航页面可以滚动到相应内容区域
$(".fixedtool li").click(function() {
flag = false;
console.log($(this).index());
// 当我们每次点击小li 就需要计算出页面要去往的位置
// 选出对应索引号的内容区的盒子 计算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 页面动画滚动效果
$("body, html").stop().animate({
scrollTop: current
}, function() {
flag = true;
});
// 点击之后，让当前的小li 添加current 类名 ，姐妹移除current类名
$(this).addClass("current").siblings().removeClass();
})
})
7. jQuery 事件
事件注册（单个）
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
事件处理（on）
优势一：绑定多个事件
// 2. 事件处理on
// (1) on可以绑定1个或者多个事件处理程序
$("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");
});
优势二：事件委托
注意：事件是绑定在ul身上，只有ul元素添加了点击事件，但是触发对象是li，点击li会有事件冒泡，会冒泡到父亲ul身上，会执行程序。
优势三：动态绑定
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
案例：微博发布
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<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>
<script src="jquery.min.js"></script>
<script>
$(function() {
// 1.点击发布按钮， 动态创建一个小li，放入文本框的内容和删除按钮， 并且添加到ul 中
$(".btn").on("click", function() {
var li = $("<li></li>");
li.html($(".txt").val() + "<a href='javascript:;'> 删除</a>");
$("ul").prepend(li);
li.slideDown();
$(".txt").val("");
})
// 2.点击的删除按钮，可以删除当前的微博留言li
// $("ul a").click(function() { // 此时的click不能给动态创建的a添加事件
// alert(11);
// })
// on可以给动态创建的元素绑定事件
$("ul").on("click", "a", function() {
console.log($(this));
$(this).parent().slideUp(function() {
$(this).remove();
});
})
})
</script>
</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>
</body>
</html>
事件解绑（off）
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
$("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); // 这个是解除事件委托
注意：如果有的事件只想触发一次， 可以使用 one() 来绑定事件。触发一次后自动解绑
$("p").one("click", function() {
alert(11);
})
自动触发事件
//1. 元素.事件()
$("div").click(); //会触发元素的默认行为
// 2. 元素.trigger("事件")
$("div").trigger("click");//会触发元素的默认行为
// 3. 元素.triggerHandler("事件") //就是不会触发元素的默认行为(表单光标不会显示)
$("div").triggerHandler("click");
事件对象
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation(); //阻止冒泡
})
})
2926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
