🚀jQuery入门精修(我超细，快来看🚀)
//注释
"作为一个在编程学习路上的赶路来说，我不喜欢在网上查阅的资料内容太过冗余，看着累，学者也难。所以写的这一篇关于jQuery的文档，我想用最直接的方法告诉大家，它的使用方法以及底层逻辑原理。如果有哪些知识点有错误还望各位大佬，多多包涵指教…
一、什么是jQuery
在我们认识什么jQuery以前，我们先了解一下JavaScript库的概念。生活中有仓库这个概念，仓库里面可以放很多的东西，我们用的时候去仓库里找这些东西就能够使用。同理JavaScript库也是类似这个原理，我们把封装好的函数和方法放到这个库中，用的时候从库里面调用过来就行了(其原理是类似调用方法)，比如说我们用的弹窗，它其实就是JavaScript库里面已经写好的一个方法函数。我们还可以把它简单理解为是一个js文件，里面已经封装了许多的方法和函数。我们用的时候直接调用就可以了，这样大大提高了我们的开发效率，而jQuery就是JavaScript库里面的其中一种，除此之外，JavaScript库里面还有许许多多的js库例如:Prototype, YUI ，Dojo，移动端的zepto等。这些库是对原生JavaScript的封装，内部都是用JavaScript实现的。
总结------(什么是js库? js库就是一个js文件里面存放着许许多多的函数，这些函数都为了满足某些功能)
二、如何使用引入jQuery
1.第一步下载jquery
官方网址 : https://jquery.com/
第一步 点击下载
第二步 进入该页面后，点击第一个版本 (压缩版) 在个人工作中常用这个 因为比较小一些。
第三步 进入该页面后 复制该页面的全部内容
复制页面全部内容
第四步 打开编译软件 (在这里我用的是vscord)，新建一个js文件 这里我新建了一个"jq.js"的文件(文件名字随便)，然后把刚才复制的全部内容复制到这个文件中并且保存。此时就完成了一个jQury的js文件
第五步 为防止之我们的jQuery 没有引入成功，我们可以做一个小测试 新建一个html的文件 在里面放一个div盒子 我们在 中引入刚才的jQuery文件
然后我们放一个div 给他修饰一下大小 然后在下面的写入jQuery代码(看不懂也没关系，只是做一个测试，时所要达到的效果就是用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>
<script src="jq.js"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div></div>
//注意如果<script> $('div').hide(); </script> 这行代买写在div上面则会运行不成功
<script>
$('div').hide();
</script>
</body>
</html>
注意: 如果 这行代买写在div上面则会运行不成功
回顾javascript原生里面有两方法去解决:一种是等待页面全部加载完了再执行: 一种是等待页面主要的加载完了再执行。
而在jQuery里面也有两种入口函数解决方法
//第一种方法
$(function () {
... // 此处是页面 DOM 加载完成的入口
}) ;
//第二种方法
$(document).ready(function(){
... // 此处是页面DOM加载完成的入口
});
很明显我们的第一种更简单使用的时候，所以我们推荐使用第一种。
2.jQuery的基本使用
2.1jQuery的顶级对象 $
常见的 $ 符号到底代表什么呢
//1$是jQuery的别称也即是它等同于jQuery
<script>
$('div').hide();
</script>
//以上代码也等同于
<script>
jQuery('div').hide(); //开发中我们更愿意用 $
</script>
//2 $也是jQuery的顶级对象
2.2 jQuery对象 和DOM对象
1用原生的js获取来的对象就是DOM对象
2用jQuery获取来的对象就是jQuery对象
3他们两个是不一样的，jQuery的本质是利用$对DOM对象包装后产生的对象用的是伪数组来存储的
<div></div>
<span></span>
<script>
//这是一个DO没对象
var divl = document.querySelector('div');
//这是一个jQuery对象
var spanl = document.querySelector('span');
$('div');
</script>
注意: jquery对象只能用jQuery方法，DOM对象则是用原生的的javascript实行和方法。
//例如
$('span').style.display='none';//这样写就错了 因为span是jQuery对象 里面没有style属性
2.3 jQuery对象 和DOM对象可以相互转换
因为原生js 比jQuery更大，一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把原生的jQuery对象转换为DOM对象才能使用。
1 DOM对象转为jQuery对象 : $(‘DOM对象’);
2 jQuery对象转为DOM对象（两种方法） :
方法一: $ (‘div’) [index] index是伪数组号 因为获得jQuery对象是以伪数组存储的
方法二: $ (‘div’).get (index) index是伪数组号 因为获得jQuery对象是以伪数组存储的
$('video')[0].play()
$('video').get(0).play()
<body>
<video src="mov.mp4" muted></video>
<script>
// 1. DOM对象转换为 jQuery对象
// (1) 我们直接获取视频，得到就是jQuery对象
// $('video');
// (2) 我们已经使用原生js 获取过来 DOM对象
var myvideo = document.querySelector('video');
// $(myvideo).play(); jquery里面没有play 这个方法
// 2. jQuery对象转换为DOM对象
// myvideo.play();
$('video')[0].play()
$('video').get(0).play()
</script>
</body>
3.jQuery常用的API
3.1 jQuery选择器
jQuery常规选择器
在原生的js里面获取元素的方式有很多，而且很杂乱并且还讯在兼容性问题，而在jQuery里面将他们都做了封装使得获取元素得到了统一。
$(“选择器”) //这就是jQuery里面的获取元素的方式。
| 名称 | 用法以及描述 |
|---|---|
| id选择器 | $("#id")--------获取指定id元素 |
| 全选选择器 | $("*")--------获取匹配所有蒜素 |
| 类选择器 | $(".class")--------获取同一类元素 |
| 标签选择器 | $(“div”)--------获取同一标签类元素 |
| 并集选择器 | $(“div,p,li”)--------获取多个元素 |
| 交集选择器 | $(“li,current”)--------获取交际元素 |
| 子代选择器 | $(“ul>li”)--------获取亲儿子元素 |
| 后代选择器 | $(“ul li”)--------获取指定元素的后代元素 |
<body>
<div>我是div</div>
<div class="nav">我是nav div</div>
<p>我是p</p>
<ol>
<li>我是ol 的</li>
<li>我是ol 的</li>
<li>我是ol 的</li>
<li>我是ol 的</li>
</ol>
<ul>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
<li>我是ul 的</li>
</ul>
<script>
$(function() {
console.log($(".nav"));
console.log($("ul li"));// 获取的是一种伪数组的存储
})
</script>
</body>
jQuery筛选选择器
<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>
jQuery筛选方法
| 语法 | 用法 | 说明 |
|---|---|---|
| parent() | $(“li”).parent(); | 查找父级 |
| children(selector) | $(“ul”).children(“li”); | 查找亲儿子 |
| find(selector) | $(“ul”).find(“li”) | 查找后代元素 |
| siblings(selector) | $(".first").siblings(“li”); | 查找兄弟节点不包含自己 |
| nextAll([exper]) | $(".first").All(); | 查找当前元素的同辈元素 |
| hasclass(class) | $(“div”).hasclass(“protected”) | 检测当前元素是否含有某个特定的类，如果是返回true |
| eq(index) | $(“li”).eq(2); | 相当于$（“li : eq(2)”）,index从0开始 |
<body>
<div class="yeye">
<div class="father">
<div class="son">儿子</div>
</div>
</div>
<div class="nav">
<p>我是屁</p>
<div>
<p>我是p</p>
</div>
</div>
<script>
// 注意一下都是方法 带括号
$(function() {
// 1. 父 parent() 返回的是 最近一级的父级元素 亲爸爸
console.log($(".son").parent());
// 2. 子
// (1) 亲儿子 children() 类似子代选择器 ul>li
// $(".nav").children("p").css("color", "red");
// (2) 可以选里面所有的孩子 包括儿子和孙子 find() 类似于后代选择器
$(".nav").find("p").css("color", "red");
// 3. 兄
});
</script>
</body>
案例
新浪下拉菜单
<script>
$(function() {
// 鼠标经过
$(".nav>li").mouseover(function() {
// $(this) jQuery 当前元素 this不要加引号
// show() 显示元素 hide() 隐藏元素
$(this).children("ul").show();
});
// 鼠标离开
$(".nav>li").mouseout(function() {
$(this).children("ul").hide();
})
})
</script>
1 jquery 设置样式
$(‘div’).css(‘属性’,‘值’);
2 隐式迭代
遍历内部DOM元素(伪数组的形式)，的过程叫做隐式迭代
3 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
<body>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<ul>
<li>相同的操作</li>
<li>相同的操作</li>
最低0.47元/天 解锁文章
405
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
