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中的筛选方法很方便的实现我们想要实现的一些效果。
持续更新…