jQuery快速入门

认识jQuery

jQuery是一个快速，小巧，功能丰富的JavaScript库。它带有大量的易于使用的API，使得HTML文档遍历和操作，事件处理，动画和Ajax更加简单。

另外，它只是封装了js的DOM的操作和ajax，其它的未封装，所以js是包含jQuery的。使用jQuery，可以更加方便的操作DOM。

jQuery兼容多个浏览器的，你在使用jQuery的时候就不需要考虑浏览器兼容问题。

jQuery的宗旨是：write less, do more

jQuery是js的一个库因此使用jQuery之前需要先导入jQuery。

jQuery本质上就是一个js文件，我们从官网https://jquery.com/download/下载该文件后，在我们的HTML代码中，通过script标签的src属性引入即可

jQuery选择器

jQuery选择器跟css选择器相似类似CSS的基本选择器：id选择器、class选择器、标签选择器

基本选择器

#id选择器

概述
根据给定的ID匹配一个元素。
使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\。 参见示例。
参数
id String V1.0
用于搜索的，通过元素的 id 属性中给定的值
示例
描述:
查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

element

概述
根据给定的元素标签名匹配所有元素
参数
element String V1.0
一个用于搜索的元素。指向 DOM 节点的标签名。
描述
查找一个 DIV 元素。

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

.class

概述
根据给定的css类名匹配元素。
参数
class String V1.0
一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
示例
描述:
查找所有类是 “myClass” 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

*

概述
匹配所有元素
多用于结合上下文来搜索。
示例

描述:

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

selector1，selector2，selectorN

概述
将每一个选择器匹配到的元素合并后一起返回。
你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

参数

selector1 Selector

一个有效的选择器

selector2 Selector

另一个有效的选择器

selectorN Selector

任意多个有效选择器

示例

描述:

找到匹配任意一个类的元素。

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass"><p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")

结果:

[ <div>div</div>, <p class="myClass"><p class="myClass"</p>, <span>span</span> ]

层级

ancestor descendant

parent > child

prev + next

prev ~ siblings