jQuery基础

写在前面

参考文献：莫振杰《从0到1：jQuery快速上手》

简介

与JS的关系：

JS是原料，JQ是半成品。

简单理解：JQ是基于JS的。

但是，JQ更加简洁高效。

JQ的优势：

代码简洁

完美兼容

轻量级

强大的选择器

完善的Ajax

丰富的插件

JQ的使用：

1.HTML文件里面，在head/body标签内，使用Script标签引入文件路径即可。

2.使用CDN链接，在JQ官网有提供 - 推荐

基础选择器

什么是选择器？

一个让你选择页面中内容的东西，这个内容一般都是元素

JQ选择器优势：

完全继承了CSS选择器，方便开发。

你可以忘记JS中的选择器，但是CSS选择器对于每一个页面开发人员来说都是必备的技能。

基础选择器分类：

基本选择器

层次选择器

属性选择器

基本选择器

基本选择器包含很多选择器内容，但是语法都是统一的。

注意，基本选择器，最后都是为了操作元素。

语法：

$("选择器")

解释：

$：相当于jQuery，此后的$都代表着jQuery的意思。

选择器：也就是下面的各种选择器。

元素选择器：

元素，即DOM节点中的DOM元素。

语法：$("div")，其中div就是DOM元素。

但是，获取到的结果是一个jQuery对象，jQuery对象跟DOM对象要区分开来，下同。

id选择器：

id选择器，即选中某个id的DOM元素。

语法：$("#id")，必须要加“#”。

class选择器：

class选择器，即选中某个class的DOM元素。

语法：$(".class")，必须要加“.”。

以上都是选择单个DOM元素的，下面就是选择多个DOM元素一起操作了。

群组选择器：

语法：$("div, p, span, .class, #id")，是上面三种的集合。

注意，里面可以是元素，也可以是class选择器，更可以是id选择器。

上面都是直接选择DOM元素的，下面就是通过关系选择元素了。

层次选择器

常见的层次：父子、后代、兄弟、相邻。

语法：$("层次选择器")

层次选择器：

M N：后代选择器，所有N元素，不看层级关系

M>N：子代选择器，所有第一级N元素，看层级关系

M~N：兄弟选择器，后面所有同级N元素

M+N：相邻选择器，相邻的下一个元素，M和N要同级

补充：这些方法都可以使用后续提到的查找方法替代。

例子：

$("div p")，div内部的所有P元素

$("div>p")，div内部的儿子P元素

$("div~p")，div后面所有同级P元素

$("div+p")，div的下一个同级P元素

补充：最后一个常用于做底部栏，比如说这种：

属性选择器

属性，即元素的属性。

属性选择器，即通过“元素的属性”来选择元素。

元素与属性的关系：

下面以E表示元素，以attr表示属性，value表示属性值

E[attr]：包含attr属性

E[attr = "value"]：包含attr属性，且属性值等于value

E[attr != "value"]：包含attr属性，且属性值不等于value

E[attr ^= "value"]：包含attr属性，且属性值以“value”开头

E[attr $= "value"]：包含attr属性，且属性值以“value”结尾

E[attr *= "value"]：包含attr属性，且属性值包含“value”

E[attr |= "value"]：包含attr属性，且属性值等于“value”或以“value”开头

E[attr ~= "value"]：包含attr属性，且属性值等于“value”或包含“value”

上面已经分开四大类了，按照类别去记忆即可。

例子：

$("div[class]")

$("input[type = 'checkbox']")

$("input[type != 'checkbox']")

注意，里面的属性值是用单引号，为啥？

$("div[class ^= 'nav']")

$("div[class $= 'nav']")

$("div[class *= 'nav']")

初次之外，你还可以：

$("div[id][class ^= 'nav']")

拼接使用，指的是带有id属性，并且class属性是以nav开头的div元素

选择器的作用之一：做CSS样式。

伪类选择器

复习：超链接伪类。

:link

:visited

:hover

:active

语法：

$("E:伪类选择器")

伪类选择器分类：

位置类

子元素

可见性

内容

表单

表单属性

位置类：

位置，一般都是在页面中出现的顺序。

但是，这个选择器一般都需要父元素。

语法及含义：

:first：第一个元素

:last：最后一个元素

:odd：奇数所有元素，从0开始

:even：偶数所有元素，从0开始

:eq(n)：选取第n个元素，从0开始

:lt(n)：选取小于n的所有元素，从0开始

:gt(n)：选取大于n的所有元素，从0开始

使用：$("元素E:伪类选择器")

例子：$("li:first")

子元素：

含义：选择某一个元素下的子元素，是最常用的操作

使用：$("E:子元素选择器")

类别：

:first-child、:last-child、:nth-child(n)、only-child

:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type

:first-child、:last-child、:nth-child(n)、only-child：

含义：第一个子元素、最后一个子元素、第n个子元素或奇偶元素（下面详细说）、唯一的子元素

注意：

nth-child(n)中的n有三种取值，分别是数字、odd、even。

但是，不管是什么取值，下标都是从1开始，而不是从0开始。

nth-of-child(n)同理。

使用场景：给每个li添加不同的样式。

如果我们给每一个li都加上class或者id，会影响页面的性能，也不利于后期维护。

而使用了“子元素”伪类选择器，可以使HTML结构更加清晰，并且使得结构与样式分离，更利于后期维护和SEO。

重点：“子元素”伪类选择器特别适合操作列表的不同样式。

:first-of-type、:last-of-type、:nth-of-type(n)、:only-of-type：

别看这两者看着很像，但其实两者还是有不小的区别的。

含义：第一个E类型的子元素、最后一个E类型的子元素、第n个E类型的子元素或者奇偶元素、唯一E类型的元素。

注意：

nth-of-type(n)的n有三种取值，分别是数字、odd、even。

但是，不管是什么取值，下标都是从1开始，而不是从0开始。

两者区别：

第一类选取的是child，也就是子元素，不区分类型。

第二类选取的是type，也就是类型，区分类型。

一般我们只用第一类。

可见性：

可见性只有两种：可见与不可见。

使用：$("E:可见性伪类选择器")

语法与含义：

:visible：选取所以可见元素

:hidden：选取所有不可见元素

不可见：定义了display: none的元素

内容：

什么是内容？

元素的内部，就是内容。

这里的内容包含了内部文本、子元素。

使用：$("E:内容伪类选择器")

语法与含义：

:contains(text)：选取包含指定文本的元素

:has(selector)：选取包含指定选择器的元素

:empty：选取不含有文本或子元素（即内容）的元素，即空元素

:parent：含有文本或子元素（即内容）的元素，即元素只要有内容或文本，就会被选中

表单：

含义：专门用于操作表单元素，其实主要还是操作input元素的。

使用：$("E:表单伪类选择器")

语法与含义：

:input：选取所有input元素

:button：选取所有普通按钮

:submit：选取所有提交按钮

:reset：选取所有重置按钮

:text：选取所有单行文本框

:textarea：选取所有多行文本框

:password：选取所有密码文本框

:radio：选取所有单选框

:checkbox：选取所有复选框

:image：选取所有图片域

:file：选取所有文件域

可以看到，一共是5类。

表单属性：

含义：根据表单元素的属性来选取的伪类选择器。

使用：$("E:表单属性伪类选择器")

语法与含义：

:checked：选中所有被选中的表单元素，一般是单选、复选框

:selected：选中被选中的表单元素的选项，一般是下拉列表

:enabled：选取所有可用的表单元素

:disabled：选取所有不可用的表单元素

:read-only：选取所有只读的表单元素

:focus：选取所有获得焦点的表单元素，注意这里没有:blur

其他伪类选择器：

含义：其他用途的伪类选择器。

使用：$("E:其他伪类选择器")

语法与含义：

:not(selector)：选取除了某个选择器之外的所有元素

:animated：选取所有正在执行动画的元素

:root：选取页面根元素，即html元素

:header：选取h1-h6的标题元素

:target：选取锚点元素（也就是a标签）

:lang(language)：选取特定语言的元素

注意：一般只用前面两个。

写在最后

OK，第一篇就写到这里。

下期讲DOM和事件操作。