jQuery学习目标 TARGET
- 什么是jQuery
- jQuery的优点
- 简单使用jQuery
- DOM对象和jQuery对象的区别
- 能够写出常用的jQuery选择器
- 能够操作jQuery样式
- 能够写出常用的jQuery动画
- 能够操作jQuery属性
- 能够操作jQuery元素
- 能够操作jQuery元素尺寸，位置
一、jQuery概述
1. 什么是jQuery
1.1 JavaScript库
我们先了解一个概念 仓库，仓库是可以把很多东西放到里面，找东西就可以去仓库直接找就可以了，而JavaScript库就是一个封装好的JS方法和函数的集合，也就是一个仓库，我们所需要的功能直接调用这个仓库中函数或方法就可以。
简单理解就是一个JS文件里对原生JS代码进行封装，这样我们就可以快速而高效的使用这些封装好的功能。
而jQuery刚好就是一个JavaScript库，里面封装好了很多预先定义好的函数，比如动画animate，hide，show，获取元素等。
1.2 常见的JavaScript库
- jQuery
- prototype
- YUL
- Dojo
- Ext JS
- 移动端的zepto
2. jQuery的优点
优点
- 轻量级，核心文件几十kb，不会影响页面的加载速度
- 跨浏览器兼容，基本兼容了现在主流的浏览器
- 链式编程，隐式迭代
- 对事件，样式，动画支持，大大简化了DOM操作
- 支持插件扩展开发，有着丰富的第三方插件，例如：树形菜单，日期控件，轮播图等
- 免费，开源
二、jQuery的基本使用
1. jQuery 的下载
官网地址 ：https://jquery.com
版本：
- 1X：兼容 IE678等低版本浏览器，官网不在更新
- 2X：不兼容IE678等低版本浏览器，官网不在更新
- 3X：不兼容IE678等低版本浏览器，是官方主要更新维护的版本
2. jQuery 的使用
在官网下载所需的jQuery版本将其联入页面中
<!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库 -->
<link rel="stylesheet" href="https://code.jquery.com/jquery-3.6.0.js" />
</head>
<body></body>
</html>
测试jQuery是否链入成功
<!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.js"></script>
<style>
div {
width: 300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script>
$("div").hide();
</script>
</body>
</html>
当页面中没有出现任何元素时证明jQuery已经链入成功，script标签中的意思是将页面中div元素隐藏，在后面的学习中会逐步加深。
三、jQuery的顶级对象
1.jQuery的顶级对象是jQuery对象 ， 也可以用$代替。
- 使用jQuery对象
jQuery(function () {
alert("jQuery链入成功");
});
- 使用 $ 符号代替(在开发中一般使用 $ 符号)
$(function () {
alert("jQuery链入成功");
});
四、jQuery对象和DOM对象的区别
1.DOM对象
什么是dom对象，利用原生js获取过来的对象就是dom对象
例如下面这样的获取方式：
let obj=document.querySelector('body');
2.jQuery对象
什么是jQuery对象，利用原生jQuery获取过来的对象就是jQuery对象，本质就是通过jQuery对象把DOM元素进行了包装。
例如下面这样的获取方式：
$('body');
3.对比二者的区别
我们将这两个对象输出到控制台上
$(function () {
let obj = document.querySelector("body");
console.dir(obj);
console.dir($("body"));
});
可以看到jQuery获取的对象是以伪数组的形式存储的，注意：jQuery对象只能使用jQuery中的方法，DOM对象也只能使用原生js中的属性和方法
五、jQuery对象和DOM对象之间的相互转换
1.为什么要转换jQuery对象和DOM对象
因为原生js的方法始终是比jQuery中的方法更多，jQuery只是给我们封装了一些原生js中常用的属性和方法，还有一些属性和方法没有给我们封装，所以要想使用原生js中的属性和方法需要把jQuery对象转换成为DOM对象才能使用。
2.DOM对象转换为jQuery对象
let myvideo=document.querySelector('video');
$(myvideo);
3.jQuery对象转换为DOM对象
- 第一种方式：
$('video')[0];
- 第二种方式：
$('video').get[0];
六、jQuery选择器
原生JS获取元素的方式繁杂，而且兼容性不一致，jQuery给我们做了封装，使获取元素统一标准
- 下面这些就是原生js获取原生对象的方式，看起来是不是头很大
通过ID获取（getElementById）
通过name属性（getElementsByName）
通过标签名（getElementsByTagName）
通过类名（getElementsByClassName）
获取html的方法（document.documentElement）
获取body的方法（document.body）
通过选择器获取一个元素（querySelector）
通过选择器获取一组元素（querySelectorAll）
- 让我们在来看一看jQuery选择器的使用
语法规则：$(“选择器名称”)
$("div");
这么短短一行代码就可以选择一个元素，跟之前的js选择元素对象的方式相比方便了很多。
- 下面是我们常用的jQuery选择器
| 名称 | 用法 | 描述 |
|---|---|---|
| ID选择器 | $("#id") | 获取指定ID元素 |
| 全选选择器 | $("*") | 匹配所有元素 |
| 类选择器 | $(".class") | 获取同一类class的元素 |
| 标签选择器 | $(“div”) | 获取同一类标签的所有元素 |
| 并集选择器 | $(“div ，.p， .li”) | 选取多个元素 |
| 交集选择器 | $(“li .current”) | 交集元素 |
七、jQuery的隐式迭代
- 隐式迭代的概念
jQuery遍历DOM元素以伪数组的形式存储的过程就叫做 隐式迭代，简单理解，就是给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作。
我们通过一个案例来加深理解一下什么是隐式迭代
案例要求：获取四个div元素，给四个div设置背景颜色为蓝色
原生js的写法
let div = document.querySelectorAll("div");
for (let i = 0; i <= div.length - 1; i++) {
div[i].style.backgroundColor = "blue";
}
可以看到，利用原生js的方法设置背景颜色还需要把获取到的元素对象全部都循环出来，然后在为每一个div添加背景颜色。
我们再看一下jQuery的写法
$("div").css("background", "blue");
jQuery只需要一行代码就可以把案例完成。
在上面已经提及，jQuery将我们常用的功能都封装为函数，我们在使用函数时，这个函数的底层已经将循环的功能写好，我们就不需要在写遍历对象的功能，只需要调用即可，这就是隐式迭代。
八、jQuery筛选选择器
| 语法 | 用法 | 描述 |
|---|---|---|
| :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元素中，选择索引号为偶数的元素 |
九、jQuery筛选方法
| 语法 | 用法 | 描述 |
|---|---|---|
| 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() | 查找当前元素之后的所有同辈元素 |
| prevtAll([expr]) | $(".first").prevtAll() | 查找当前元素之前的所有同辈元素 |
| hasClass(class) | $(“div”).hasClass(‘protected’) | 检查当前的元素是否有某个特定的类，如果有，则返回true |
| eq(index) | $(“li”).eq(2) | 相当于$(“li:eq(2)”)，index从0开始 |
新浪下拉菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jquery.js"></script>
<style>
ul .noe {
float: left;
list-style: none;
}
a {
text-decoration: none;
color: black;
}
li {
list-style: none;
}
.tow {
margin-left: -45px;
display: none;
}
.tow li {
border: 1px solid orange;
}
.tow li {
border-top: none;
}
ul li {
padding: 5px;
}
</style>
</head>
<body>
<ul class="nav">
<li class="noe">
<a href="#">微博</a>
<ul class="tow">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li class="noe">
<a href="#">微博</a>
<ul class="tow">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li class="noe">
<a href="#">微博</a>
<ul class="tow">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
<li class="noe">
<a href="#">微博</a>
<ul class="tow">
<li><a href="#">私信</a></li>
<li><a href="#">评论</a></li>
<li><a href="#">@我</a></li>
</ul>
</li>
</ul>
<script>
// var nav = document.querySelector(".nav");
// var lis = nav.children;
// for (var i = 0; i < lis.length; i++) {
// lis[i].onmouseover = function () {
// this.children[1].style.display = "block";
// };
// lis[i].onmouseout = function () {
// this.children[1].style.display = "none";
// };
// }
$(function () {
$(".nav>li").mouseover(function () {
$(this).children("ul").show();
});
$(".nav>li").mouseout(function () {
$(this).children("ul").hide();
});
});
</script>
</body>
</html>
排他思想
1. 什么是排他思想
就是在监听成立时，先把所有的样式清除为空，随后按照需求添加需要的样式。Tab栏效果切换是常见的功能需求，它运用的就是JS的排他思想。
2. 排他思想的应用
在没有jQuery之前，原生js写出来的tab栏步骤比较繁琐
像这样：
var tab_list = document.querySelector(".tab_list");
var lis = tab_list.querySelectorAll("li");
var items = document.querySelectorAll(".item");
for (var i = 0; i < lis.length; i++) {
lis[i].setAttribute("index", i);
lis[i].onclick = function () {
for (var i = 0; i < lis.length; i++) {
lis[i].className = "";
}
this.className = "current";
var index = this.getAttribute("index");
for (var i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
items[index].style.display = "block";
};
}
而jQuery写出来的tab栏
是这样的：
$(function () {
$("button").click(function () {
let index = $(this).index();
$(this).css("background", "red");
$(this).siblings("button").css("background", "");
$(".content div").eq(index).siblings().hide();
$(".content div").eq(index).show();
$(".content").addClass("yellow");
});
});
从这几个案例，我们可以看出，jQuery中的筛选方法很方便的实现我们想要实现的一些效果。
持续更新…
扫一扫
275
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
