碎碎念

是的，很多人认为jQuery并不是一个好用的框架，像什么Vue啊，React啊，Angular啊，这些才算的上一个高大上的框架。但是，存在还是有一定的道理的，就像是没有jQuery这样的简化JavaScript的框架，当作前浪，vue等后面框架的面世，还是需要一点变革的。

那么我为什么会开始学习jQuery？这个问题问得好，因为学校要求学🤣。就像学校现在还要求我们学习在现在的互联网公司不会用的过时了的jsp一样。嘛~，我这不是抱怨，算是一种考古哈哈。就比如说哪一天，突然间出现了一个十分强大的前端框架，直接把我上面刚刚所说的架构全部给代替了，那么我们现在所学的，所认为的前沿框架在那个时候的人看来，不也是过时之物么？技术永远是在发展的，这里呢，我就抱着一颗虔诚之心🧡，好好的把学校里安排的知识给稍微美化整理一下。那么，开始嘻嘻！
=================我是分界线==============

jQuery入门

1. 环境安装

安装环境是使用jQuery的第一步，如果你需要在本地运行jQuery，可以查看官网来安装jQuery库。这里推荐使用官方定制的CDN进行引入，当然，这在网上是可以搜寻到的。

2. 第一个程序

在<div id="box"></div>里填充内容hello,jquery。实现的效果。
1

这里用javascript先实现一下：

1
2
var box = document.getElementById("box");
box.innerHTML = "hello,jquery";

用jQuery实现会更简单，下面每一步都和上面的相对应，实现如下：

1
2
var box = $("#box");
box.html("hello,jquery");

从上面可以看出：

  • $("#box")是获取到id="box"的div

  • html()方法是获取元素的内容（包括HTML标记）， ()里面没有内容表示获取，有内容表示赋值。

基本语法：

 $(selector).action()

说明:
+ jQuery用美元符号$定义；
+ selector表示要操作的dom元素； 

  • `action`表示要执行的操作。

3. 基本选择器

和CSS一样，jQuery也有基本选择器，我们先来看一下源码：

1
2
3
4
<div id="box1">我是id选择器</div>
<p class="box2"></p>
<span></span>

id选择器

对于上面 id="box1"的 div，用jquery实现如下：

1
2
var box1 = $("#box1");
box1.html();

效果如下（下面div获取上面div的内容）：
2
从上面可以看出，id选择器语法： 

$("# + idName")

这里再提醒一下：
html()：里的 ()里有内容，表示往该元素添加内容，没有内容，表示获取内容。

类选择器

对于上面 class="box2"的 p， 用jQuery 实现如下：

1
2
var box2 = $(".box2");
box2.html("我是类选择器");

效果如下：
3
从上面可以看出,类选择器语法：

$(". + className")

元素选择器

对于上面 <span></span>， 用jQuery实现如下：

1
2
var box3 = $("span");
box3.html("我是元素选择器");

效果如下：
4

从上面可以看出,元素选择器语法：

$("tagName")

过滤选择器(重点)

例如，现有代码如下：

1
2
3
4
5
6
7
8
<ul>
    <li>第一个li</li>
	<li>第二个li</li>
	<li>第三个li</li>
    <li>第四个li</li>
    <li>第五个li</li>
	<li>第六个li</li>
</ul>

基础效果图如下：

现在分别获取获取指定的li元素，并添加相应的背景色。

  • 获取第一个li标签，添加背景色orange：
    1
    $("li:first").css("background","orange")
  • 获取最后一个li标签，添加背景色green :
    1
    $("li:last").css("background","green")；
    效果图如下：

  • 获取下标为偶数的li标签，添加背景色#ccc：
    1
    $("li:even").css("background","#eee");
  • 获取下标为奇数的li标签，添加背景色#ccc:
    1
    $("li:odd").css("background","#ccc");
    效果图如下：

注：下标是从0开始的，li标签第一个下标是0，是偶数，所以背景色是”#eee”。

:eq选择器

  • 获取指定序号的元素
    例如，现有一下代码：
1
2
3
4
5
<ul>
       <li>第一个li</li>
       <li>第二个li</li>
       <li>第三个li</li>
</ul>

实现第二个li标签背景色为红色.

1
2
3
4
5
6
7
$("li:eq(1)").css("background","red");

//或者

$("li").eq(1).css("background","red");

 //eq 选择器的下标是从0开始

:not选择器

倘若我们要实现这样的效果：

第四个li标签的右侧没有外边距,not选择器，它选取除了指定元素以外的所有元素:

1
$("li:not(:last)").css("margin-right","20px");

效果如下：

层次选择器

有如下代码：

1
2
3
4
5
6
7
8
9
10
<div class="container">
    <p>
       <span>第一个p标签下的span</span>
       <span>第一个p标签下的第二个span</span>
    </p>
    <p>
       <i>i标签</i>
       <span>第二个p标签下的span</span>
    </p>
</div>

若想要获取到上面第一个p标签下所有的span标签,可以按照以下步骤：

  1. 获取到类container：$(".container");

  2. 获取到container下第一个p标签：$(".container p:first");

  3. 获取到第一个p标签下所有的span标签：$(".container p:first span")。

层次选择器和Dom结构是相匹配的.

show()与hide()

有如下代码：

1
2
<p class="toggle">错误提醒</p>
<p>展示的内容</p>

对于类toggle，有错误时需要出现，解决了错误需要隐藏。

  • 出现：$(".toggle").show()

    相当于css中的 display:block;

  • 隐藏：$(".toggle").hide()

    相当于css中的 display:none;

类的添加和删除

有如下代码：

1
2
3
4
<div id="box"></div>
   //假如要给div添加类active和btn
   active{ background: orange;}
btn{}

假如要给div添加类active和btn,这里用addClass()方法：

1
$("#box").addClass("active btn");

现在要删除一个类btn，这里用removeClass()方法：

1
2
3
4
5
6
7
8
$("#box").removeClass("btn");
````

## 4. 设置css属性

### 设置单个属性
```js
<div id="single">设置单个属性</div>

如果给上面的div标签添加css属性：background：orange;对于div标签，用jQuery可以这样写：

1
$("#single").css("background","orange");

效果如下：

4

这是设置单个属性常用的方法。语法总结如下：

$(selector).css(attr,value);

设置多个属性

1
<p class="more">设置多个属性</p>

如果给上面的p标签添加css属性：

1
2
3
"background":"#ccc";
"text-align":"center";
"line-height":"40px";

对于p标签，用上面的方法一条一条的写，也是可以的，但是比较麻烦，下面是设置多个css属性的方法：

1
2
3
4
5
$(".more").css({
"background":"#ccc",
"text-align":"center",
"line-height":"40px"
})

效果如下：

5

可以看出，设置多个css属性是用对象的方式来实现的。语法总结如下:

$(selector).css({
attr1: value1,
attr2: value2,
...
})