蓝旭前端自学自讲——jQuery 选择器 + DOM操作 + jQuery 动画 + jQuery AJAX

jQuery 简介

jQuery 是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码。凭借简洁的语法和跨平台的兼容性，极大地简化了 JavaScrip 开发人员遍历 HTML 文档，操作 DOM，执行动画和开发 Ajax 的操作。

轻量的：代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架

jQuery 封装了很多预定义的对象和函数。

jQuery 的核心思想：write less,do more（“写的更少，但做的更多”）

常见的 js 库

Prototype：是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。

Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。

YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。

Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。

Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。

jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。

jQuery 版本区别

1.x 版本：能够兼容IE678浏览器【推荐使用】
2.x 版本：不兼容IE678浏览器
3.x 版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

jQuery 包含的功能

HTML 元素快速选取（给予css选择器，方便快速查询DOM文档中的元素）
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX

*jQuery 原理

js 的继承方式——原型链

prototype 原型对象 在 js 中，我们创建的每一个构造函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象，这个对象包含了通过调用该构造函数所创建的对象共享的属性和方法。【prototype就是通过该构造函数创建的某个实例的原型对象】

*原型链 如果我们让原型对象等于另一个类型的实例，此时的原型对象将包含一个指向另一个原型的指针，相应的，另一个原型中也包含一个指向另一个构造函数的指针

jQuery 中的 j 就是 JavaScript，query 就是查询，jquery 就是 JavaScript 查询语句。jQuery 就是 js 中 DOM 的封装体。

我们可以从下载的jQuery 源代码中发现这样一行代码：

jQuery = function( selector, context ) {
    // The jQuery object is actually just the init constructor 'enhanced'
    // jQuery 对象实际上只是“增强”的 init 构造函数
	// Need init if jQuery is called (just allow error to be thrown if not included)
    // 如果调用 jQuery ，则需要 init （如果未包含，则只允许抛出错误）
	return new jQuery.fn.init( selector, context );
};

jQuery 采用的是构造函数模式开发的，jQuery 是一个类，我们所使用的 jQuery 的方法实际都是在 jQuery 的原型上定义的，其中的 jQuery.fn 其实就是 jQuery.prototype 。

$() 是jQuery的选择器，是创造 jQuery 类的一个实例，即 jQuery 对象，它原型继承了 prototype 。此时，括号中的元素都是从 DOM 里面获得的，他必须通过选择器，去 DOM 树上寻找对应的元素，然后将获取的元素放到jQuery对象中。

jQuery 函数

jQuery 库只提供了一个叫 jQuery 的函数，该函数中以及该元素的原型中定义了大量的方法。

$ 是 jQuery 的别称，在代码中通常使用 $ 来代替 jQuery。

jQuery 函数具有四种参数：

选择器（字符串）

jQuery 函数通过该选择器获取对应的 DOM，然后将这些 DOM 封装到一个 jQuery 对象中并返回
```
var div = $('div');
//选取所有div元素节点并返回有这些DOM节点封装到一个jQuery对象中
```

DOM对象（即Node实例）

jQuery 函数将该 DOM 封装成 jQuery 对象并返回。

var div = document.getElementsByTagName('div');
var $div = $(div);    //将DOM对象转化为jQuery对象

HTML 文本字符串

jQuery 函数根据传入的文本创建好 HTML 元素并封装成 jQuery 对象并返回，参数 HTML 可以是单标签或者是多层标签之间的嵌套。
```
var div1 = $("<div>a<div>");
var div2 = $("<div>");
var div3 = $("<div><span>a</span></div>")
```

一个匿名函数

$(function(){...});    
//文档结构加载完毕后执行function函数中的代码
$(document).ready(function(){...});  
//将document节点转化为jQuery对象在调用对象ready()方法实现文档加载完毕后再执行函数内代码

jQuery 对象和 DOM 对象

DOM 对象：使用原生 js 获取的对象就是 DOM 对象。

jQuery 对象：使用 jQuery 方法获取的对象就是 jQuery 对象。本质是利用 $ 对 DOM 对象包装后产生的对象（用伪数组的形式存储）

DOM 对象不可使用 jQuery 中的方法，同样 jQuery 对象不可使用原生 js 的属性和方法。

DOM 对象转化为 jQuery 对象

直接用 jQuery 获取
用 $ 转换 $(DOM 对象)

jQuery 对象转换为 DOM 对象

$('div')[index] index 是索引号，从 0 开始
$('div').get(index) index 是索引号，从 0 开始

jQuery 选择器

基础选择器

$("选择器") 【其中直接写入 CSS 选择器即可，但是要记得加引号】

名称	代码
标签选择器	$(“标签”)
类别选择器	$(“.class”)
ID选择器	$(“#id”)
全选选择器	$(“*”)

选择器组

名称	组合选择器	含义
选择器组	$(“A,B”)	多个选择器组合使用，逗号分隔取并集
复合选择器	$(“AB”)	多个选择器组合使用，取交集
后代选择器	$(“A B”)	匹配B元素，B是A的后代节点
子选择器	$(“A>B”)	匹配B元素，B是A的直接子节点
相邻兄弟选择器	$(“A+B”)	匹配B元素，B是A的下一个兄弟节点
通用兄弟选择器	$(“A~B”)	匹配B元素，B是A之后的任意一个兄弟节点

jQuery 筛选器/过滤器

jQuery 的筛选器必须用在 jQuery 选择器后，表示对通过前面的 jQuery 选择器选择到的内容的筛选。是建立在前面选择器已经选择到的元素的基础之上。【与 CSS 中的伪类类似】

基础筛选器

语法	举例	含义
selector:first	$(“li:first”)	获取第一个元素
selector:last	$(“li:last”)	获取最后一个元素
selector:eq(index)	$(“li:eq(2)”)	获取到的元素中，选择索引号为 index 的元素，索引号 index 从 0 开始
selector:odd	$(“li:odd”)	获取到的元素中，选择索引号为奇数的元素
selector:even	$(“li:even”)	获取到的元素中，选择索引号为偶数的元素
selector:lt(num)	$(“li:lt(2)”)	获取所有已选择到的元素中的索引值小于 num 的元素
selector:gt(num)	$(“li:gt(2)”)	获取所有已选择到的元素中的索引值大于 num 的元素
selector1:not(selector2)	$(“input:not(:checked)”)	获取所有已选择到的元素中的除了 selector2 的元素
selector:header	$(“*:header”)	获取所有已选择到的元素中的标题元素（h1~h6）

子元素筛选器

语法	含义
selector:first-child	匹配所给选择器的第一个子元素，类似 `:first` ，但是 `:first-child` 可以匹配多个：即为每个父级元素匹配第一个子元素
selector:last-child	匹配所给选择器的最后一个子元素，类似 `:last` ，但是 `:last-child` 可以匹配多个：即为每个父级元素匹配最后一个子元素
selector:nth-child(n)	匹配所给选择器的第 n 个子元素，类似 `:eq(index)` ，但是 `:nth-child(n)` 可以匹配多个：即为每个父级元素匹配第 n 个子元素【n 可为表达式、odd、even、3n、数字（ $n\geq1$ )】
selector:only-child	如果某个元素是父元素中唯一的子元素，那将会被匹配。如果父元素中含有其他元素，那将不会被匹配。【其中不包含文本节点，如：`<p><img/>图片</p>`，用 `$('p img:only-child')` 是可以匹配的】
selector:first-of-type()	获取每个selector元素中每种类型子元素中的第一个
selector:last-of-type()	获取每个selector元素中每种类型子元素中的最后一个

更多筛选器

内容筛选器

$("selector:contains(text) ");  //获取所有已选择到的元素中文本包含text的元素
$("selector:empty");  //获取所有已选择到的元素中的空元素(没有子节点)

属性筛选器

$("selector[attrKey]");  //获取所有已选择到的元素中具有属性 attrKey 的元素
$("selector[attrKey=attrVal]");  //获取所有已选择到的元素中具有属性attrKey，并且属性值为attrVal的元素
$("selector[attrKey!=attrVal]");  //获取所有已选择到的元素中具有属性attrKey，并且属性值不为以attrVal的元素或者没有属性attrVal的元素

可见性筛选器

$("selector:hidden");  //匹配所有不可见元素，或type为hidden的元素
$("selector:visible");  //匹配所有可见元素

表单筛选器

$("selector:input");  //匹配所有 input, textarea, select 和 button 元素
$("selector:text");
//所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$("selector:password");  //所有密码框
$("selector:radio");  //所有单选按钮
$("selector:checkbox");  //所有复选框
$("selector:submit");  //所有提交按钮
$("selector:reset");  //所有重置按钮
$("selector:button");  //所有button按钮
$("selector:file");  //所有文件域

状态筛选器

$("selector:enabled");  // 匹配可用的元素
$("selector:disabled");  // 匹配不可用的元素
$("selector:checked");  // 匹配选中的元素
$("selector:selected");  // 匹配选中的元素

$(this) 用法

返回当前 jQuery 对象，与上下文相关

<head>
    <script>
        $(document).ready(function() {
            $("img").click(function() {
                alert($(this).attr("alt"));
            });
        });
    </script>
</head>
<body>
    <img src="images/1.png" alt="one">
    <img src="images/2.png" alt="two">
    <img src="images/3.png" alt="three">
    <img src="images/4.png" alt="four">
</body>

DOM 操作

节点操作

查找节点

通过 jQuery 选择器完成

创建节点

创建元素节点：var $node = $("<div></div>")

创建文本节点：var $node = $("<div>文本内容</div>")

创建属性节点：var $node = $("<div class='one'>one</div>");

插入节点

插入作为现有元素的子元素

$A.append(B) 将 B 追加到 A 的每一个元素的末尾处，作为它的每一个元素的最后一个子元素
$A.appendTo(B) 将 A 追加到 B 的每一个元素的末尾，作为它的每一个元素的最后一个子元素
$A.prepend(B) 将 B 追加到 A 的每一个元素的前面，作为它的每一个元素的第一个子元素
$A.prependTo(B) 将 A 追加到 B 的每一个元素的前面，作为它的每一个元素的第一个子元素

插入作为现有元素的兄弟元素

$A.after(B) 在 A 的每一个元素的后面追加B，作为它的每一个元素的兄弟元素
$A.insertAfter(B) 在B的每一个元素的后面追加A，作为它的每一个元素的兄弟元素
$A.before(B) 在A的每一个元素的前面追加B，作为它的每一个元素的兄弟元素
$A.insertBefore(B) 在B的每一个元素的前面追加A，作为它的每一个元素的兄弟元素

这些插入节点的方法不仅能将新创建的 DOM 元素插入到文档中，也能对原有的 DOM 元素进行移动。

删除节点

.remove() 将匹配元素集合从 DOM 中删除，同时移除元素上的事件及 jQuery 数据。
.detach() 从 DOM 中去掉所有匹配的元素，保存所有 jQuery 数据和元素上的事件。
.empty() 从 DOM 中移除集合中匹配元素的所有子节点和元素里的文本，但保留元素本身。

<body>
    <ul>
      <li>blue</li>
      <li>white</li>
      <li>red</li>
    </ul>
    <script>
        $(document).ready(function () {
            $("ul li").click(function () {
                alert($(this).html());
            });
            var $lib = $("ul li:eq(0)").remove(); //重新追加此元素,发现它之前绑定的事件失效
            var $liw = $("ul li:eq(0)").detach(); //重新追加此元素,发现它之前绑定的事件还在
            var $lir = $("ul li:eq(0)").empty();
            //清除此元素里的内容,元素仍然存在,返回值为元素本身
      });
    </script>
</body>

复制节点

.clone() 返回的是一个节点的引用。

默认参数为 false ，当参数为 true 时，在复制元素的同时复制元素中所绑定的事件。

替换节点

$B.replaceAll(A) 用 B 中匹配元素替换所有 A 中的元素，并且返回被替换的元素的集合。

【该方法会删除与节点相关联的所有数据和事件处理程序】
$A.replaceWith(B) 作用与 $B.replaceAll(A) 相同，但颠倒了目标和源的位置。

包裹节点

.wrap([wrappingElement]) 在每个匹配的元素外层包上一个html元素
.warpAll([wrappingElement]) 将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构
.wrapInner([wrappingElement]) 每个匹配元素里面内容(子元素)都会被这种结构包裹

遍历节点

children() 获取所匹配的所有的直接子元素
find() 获取所匹配的所有的后代元素
parent() 获取所匹配的所有的直接父元素
parents() 获取所匹配的所有的祖先元素

【$( "html" ).parent() 方法返回一个包含 document 的集合】
next() 获取所匹配的每一个元素紧邻的后面同辈元素
nextAll() 获取所匹配的当前元素之后所有的兄弟元素
prev() 获取所匹配的每一个元素紧邻的前一个同辈元素
prevtAll() 获取所匹配的当前元素之前所有的兄弟元素
siblings() 获取所匹配的所有的兄弟元素

属性操作

获取元素属性

获取元素固有属性 $(selector).prop("属性名")

获取元素自定义属性 $(selector).attr("属性名")
设置元素属性

设置元素固有属性 $(selector).prop("属性名","属性值")

设置元素自定义属性 $(selector).attr("属性名","属性值")
删除元素属性

删除元素固有属性 $(selector).removeProp("属性名")

删除元素自定义属性 $(selector).removeAttr("属性名")

prop 和 attr 的区别

prop() 为 jQuery 1.6 新增的方法。

在返回值上，如果有相应的属性，两者均返回指定属性值；如果没有相应的属性，prop() 的返回值是空字符串，attr() 的返回值是 undefined。

因此，

对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

具有 true 和 false 两个属性的属性，如 checked、selected 或者 disabled 使用 prop 方法

类操作

添加类 $(selector).addClass("类名");

删除类 $(selector).removeClass("类名");

切换类【无类添加，有类删除】 $(selector).toggleClass("类名");

判断类 判断有没有指定的类，有，返回true，否则返回false $(selector).hasClass("类名")

设置和获取 HTML、文本和值

html() 方法

获取集合中第一个匹配元素的 HTML 内容 $(selector).html()

设置每一个匹配元素的 html 内容 $(selector).html("HTML语句")

类似于原生 JavaScript 中的 innerHTML 属性
text() 方法

得到匹配元素集合中每个元素的文本内容结合，包括他们的后代 $(selector).text()

设置匹配元素集合中每个元素的文本内容为指定的文本内容 $(selector).html("文本内容")

类似于原生 JavaScript 中的 innerText属性
val() 方法

获取匹配的元素集合中第一个元素的当前值 $(selector).val()

设置匹配的元素集合中每个元素的值 $(selector).val("值")

类似于 JavaScript 中的 value属性

.val() 方法主要用于获取表单元素的值，比如 input, select 和 textarea。

对于 <select multiple="multiple"> 多选框元素, .val() 方法返回一个包含每个选择项的数组，如果没有选择性被选中，它返回 null

jQuery 事件

事件

on() 在选定的元素上绑定一个或多个事件处理程序【bind()、delegate()、live()】1.8后不推荐使用

$(selector).on(event,[selector],[data],[function])

event：必须写，一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。 “click” “blur”

其余参数可以省略

selector：一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的 null或省略，当它到达选定的元素，事件总是触发。

data：传递到函数的额外数据

function：当事件发生时运行的函数
off() 用于移除通过 on() 方法添加的事件处理程序

$(selector).off(event,[selector],[function],[map])

event：必须写，一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。

其余参数可以省略

selector：规定添加事件处理程序时最初传递给 on() 方法的选择器

function：当事件发生时运行的函数

map：事件映射 ({event:function, event:function, ...})，包含要添加到元素的一个或多个事件，以及当事件发生时运行的函数

常见鼠标事件

click() 单击
dblclick() 双击
hover() 悬停
mousedown() 按下
mouseup() 抬起
mouseout() 离开
mouseover() 进入
mousemove() 移动
focus() 获得鼠标焦点
blur() 失去鼠标焦点

jQuery 动画/效果

jQuery 隐式迭代

遍历内部的 DOM 元素（以伪数组的形式存储）的过程叫做隐式迭代

jQuery 会对匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化操作，方便调用。

jQuery 链 （chaining）

通过 jQuery，可以把动作/方法链接在一起，jQuery 链允许我们在一条语句当中运行多个 jQuery 方法。
$("div").css("color","red").slideUp(1000).slideDown(1000);
$("div").css("color","red")
 .slideUp(1000)
 .slideDown(1000);

事件切换

hover([over,]out)

over：鼠标移到元素上要触发的函数

out：鼠标移出元素要触发的函数

如果只写一个函数，则鼠标经过和离开都会触发这个函数

显示和隐藏效果

通过改变元素的 height 、 width 、 opacity 来实现显示和隐藏。

【两者切换时 display 属性会在 none 和block 间切换】

显示 show([speed,[easing],[fn]])

隐藏 hide([speed,[easing],[fn]])

切换在显示和隐藏间切换 toggle([speed,[easing],[fn]])

参数都可以省略，全省略表示无动画直接显示

speed：三种预定速度之一的字符串（“slow”、“normal”、“fast”）或表示动画时长的毫秒数值（如：1000）

easing：用来指定切换的效果，默认为 “swing” （慢快慢），可用参数 “linear”（匀速的）

fn：回调函数，在动画完成时执行的函数，每个元素执行一次

滑动效果

通过改变元素的 height 来实现显示和隐藏。

【两者切换时 display 属性会在 none 和block 间切换】

下滑效果 slideDown([speed,[easing],[fn]])

上滑效果 slideUp([speed,[easing],[fn]])

滑动切换效果 sildeToggle([speed,[easing],[fn]])

参数都可以省略，全省略则按照默认的速度和效果进行

淡入淡出效果

通过改变元素的 opacity 来实现显示和隐藏。

【两者切换时 display 属性会在 none 和block 间切换】

淡入效果 fadeIn([speed,[easing],[fn]])

淡出效果 fadeOut([speed,[easing],[fn]])

淡入淡出切换效果 fadeToggle([speed,[easing],[fn]])

参数都可以省略，全省略则按照默认的速度和效果进行

渐进方式调整到指定的不透明度 fadeTo(speed,opacity,[easing],[fn]])

opacity：透明度，必须写，取值在 0~1 之间

speed：三种预定速度之一的字符串（“slow”、“narmal”、“fast”）或表示动画时长的毫秒数值（如：1000）必须写

其余参数可省略

动画队列及其停止排队的方法

动画或效果一旦触发就会执行，如果多次触发，就造成给多个动画或效果排队执行

停止排队 $(selector).stop([stopAll],[goToEnd]);

参数都可以省略

stopAll：参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行

goToEnd：参数规定是否立即完成当前动画。默认是 false。

stop() 方法用于停止动画或效果

stop() 写到动画或者效果的前面，相当于停止结束上一次的动画

自定义动画

animate(params,[speed],[fn])

params：想要更改的样式属性，以对象形式传递，必须写。

对象形式：属性名和属性值用冒号隔开，属性名可以不用加引号，属性值若不是数字必须加引号，属性值如果时数字可以不用跟单位和引号。如是复合属性则需采用驼峰命名法（如：marginLeft ）

其余参数可省略

注：

默认地，所有 HTML 元素都有一个静态位置，且无法移动。因此，如需对位置进行操作，需要先把元素的 CSS position 属性设置为 relative、fixed 或 absolute
params 中的数值也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=
params 中可以把属性的动画值设置为 “show”、“hide” 或 “toggle”
默认地，jQuery 提供针对动画的队列功能。这意味着如果在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
animate() 动画效果无法操控背景色改变，色彩动画并不包含在核心 jQuery 库中，如果需要生成颜色动画，需要从 jquery.com 下载 Color Animations 插件

jQuery AJAX

load() 方法

$(selector).load(URL,[data],[callback]);

URL：希望加载的 URL，必须写

data：规定与请求一同发送的查询字符串键/值对集合。

callback：load() 方法完成后所执行的函数名称，回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$.ajax 方法

$.ajax({});

参数：

type：请求方式GET/POST
url: 请求地址 url
async：是否异步，默认是 true 表示异步
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
contentType：设置请求头
success：请求成功时调用此函数
error：请求失败时调用此函数

$.get 方法

$.get(URL,[data],[callback]);

用于较为简单的 GET 请求，请求成功时可调用回调函数，如果需要在出错时执行函数，需使用 $.ajax

$.post 方法

$.post(URL,[data],[callback]);

$.post 与 $.get用法一模一样，唯一的区别在于这是发送了一个 post 请求

同样，请求成功时可调用回调函数，如果需要在出错时执行函数，需使用 $.ajax

蓝旭前端自学自讲——jQuery 选择器 + DOM操作 + jQuery 动画 + jQuery AJAX

jQuery 简介

jQuery 包含的功能

*jQuery 原理

jQuery 函数

jQuery 对象和 DOM 对象

jQuery 选择器

jQuery 选择器

基础选择器

选择器组

jQuery 筛选器/过滤器

基础筛选器

子元素筛选器

$(this) 用法

DOM 操作

节点操作

查找节点

创建节点

插入节点

删除节点

复制节点

替换节点

包裹节点

遍历节点

属性操作

设置和获取 HTML、文本和值

jQuery 事件

事件

常见鼠标事件

jQuery 动画/效果

事件切换

显示和隐藏效果

滑动效果

淡入淡出效果

动画队列及其停止排队的方法

自定义动画

jQuery AJAX

load() 方法

$.ajax 方法

$.get 方法

$.post 方法

相关推荐