jQuery详解

【38】

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的 “写的少，做的多” 的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities

提示： 除此之外，Jquery 还提供了大量的插件。

基础jQuery 语法

jQuery 中$的含义

作用 1：$(function)

1.相当于 window.onload=function(){}

2.功能比window.onload更强大

1) window onload一个页面只能写一个,但是可以写多个$() 而不冲突

2) window onload要等整个页面加载完后再执行（包括图片、超链接、音视频等），

但是$的执行时间要早

3.完整形式是$(document).ready(…….);

作用 2：$(selector) 选择器，jQuery具有强大的选择器功能

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行 “操作”（actions）。

基础语法： $(selector).action()

美元符号定义 jQuery 选择符（selector）“查询” 和 “查找” HTML 元素 jQuery 的 action () 执行对元素的操作

所有 jQuery 函数位于一个 document ready 函数中：

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

提示：简洁写法（与以上写法效果相同）:

jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等 “查找”（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。

选择器学习 A（基本选择器）

对象之间的转换

DOM对象：直接使用JavaScript获取的节点对象

className， innerHTML， value

jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法

addClass()， html()， val()

DOM对象和jQuery对象分别拥有一套独立的方法，不能混用

1、DOM对象转换成jQuery对象

$(DOM对象)

2、jQuery对象转换成DOM对象

jQuery对象[index]

jQuery对象.get(index)

基本选择器

标签选择器 $(“a”) ID选择器 $(“#id”) $(“p#id”) 类选择器 $(“.class”) $(“h2.class”)通配选择器 $("*")

选择器学习 B（普通选择器）

并集选择器$("elem1,elem2,elem3") 后代选择器$(ul li) 父子选择器 $(ul>li) 后面第一个兄弟元素 prev + next

后面所有的兄弟元素 prev ~ next

选择器学习 C（子选择器）

选择器学习 D（属性选择器）

选择器学习 E（表单选择器）

总结：

1） 基本选择器和层级选择器，即js的直接获取和间接获取。（最重要）

2） 以下的选择器都是在基本和层级选择器的后面追加：

简单选择器(比如：$(“li：first”)或 $(li).first())内容选择器(比如：$("div:contains(John)"))可见性选择器(比如：$("tr:visible"))属性选择器(比如：$("input[name^=news]"))子元素选择器(比如：$("ul li:nth-child(2)"))

以上除了属性选择器是“[]”表示，其他都是“:”表示

3） 表单选择器:唯一不需要在基本和层级选择器后追加，而独立使用的选择器。

比如：$(":input")

(1)匹配所有的表单元素标签。

(2)即匹配所有 input, textarea, select 和 button 元素

操作页面的样式 A

操作页面的样式 B

如果当页面中的css样式比较多的时候可以通过添加类的方式添加样式，方法如下：

两种

获得页面元素的属性

操作页面元素的属性

想要操作元素的属性有几种方式，请列举。

对象名.attr(“属性名”，“属性值“)。 对象名.attr({属性名1：“属性值1“，属性名2：“属性值2“…})。 对象名.prop(“属性名”，布尔值)。(限于checked、selected、disabled属性) 对象名.addClass(“class属性值”)

对象名.removeClass(“class属性值”)

对象名.toggleClass(“class属性值”)// 如果存在（不存在）就删除（添加）一个类

获得页面的文本和值

操作页面的文本和值

jQuery操作元素属性：

1）获取:

对象名.attr("属性名") //返回当前属性值注意此种方式不能获取value属性的实时数据，使用对象名.val()进行获取。

2）修改

Ø 对象名.attr("属性名","属性值");

总结表单标签的checked、selected、disabled、onsubmit属性：

1）表单标签有input, textarea, select 和 button 元素

2）checked和selected意思一样，都是是否被选中。

（1）checked只属于input元素。

（2）selected只属于select元素。

3）disabled(无效的)，所有的表单元素都拥有。

4）onsubmit(可提交的)，所有的表单元素都拥有。(一般直接使用form上的)

5）checked、selected、disabled都能被DOM和JQ以boolean值的形式获取和操作。

6）onsubmit=“return 函数()”,特殊书写，由此种方式从监听函数获取返回的boolean值。

事件处理 A

事件处理 B

1. 操作页面元素的属性2

(1) 想要操作元素的属性有几种方式，请列举。

1） 对象名.attr(“属性名”，“属性值“)。

2） 对象名.attr({属性名1：“属性值1“，属性名2：“属性值2“…})。

3） 对象名.prop(“属性名”，布尔值)。(限于checked、selected、disabled属性)

4） 对象名.addClass(“class属性值”)

对象名.removeClass(“class属性值”)

对象名.toggleClass(“class属性值”)// 如果存在（不存在）就删除（添加）一个类

(2) attr("checked")和prop("checked")这两个操作方式有什么区别？使用场景是什么？

1、区别：

1）attr("checked")：获取的是原生的字符串类型的值。

2）prop("checked")：获取去的是对应的boolean类型的值。

2、使用场景：

1）attr可以操作所有的属性。

2）prop当操作checked、selected、disabled等属性，返回的boolean值，非常适合作为条件判断。

(3) prop("checked",true) 这句代码是什么意思。

把使用该方法的对象的checked属性值设定为“checked“。

2. 操作页面的文本和值1

(1) 请写出html()和text()在获得值得时候两者的区别,和使用的场景。

类比于js的对象名.innerHTML和对象名.innerText。

1、区别：

1） 对象名.html()//返回当前对象的所有内容，包括HTML标签

2） 对象名.text()//返回当前对象的所有标签，不包括HTML标签

2、使用场景：

1）html()用于查看该对象的内包含的所有元素信息。

2）text()用于查看该对象的纯文本信息。

(2) 请说出val()和html()在获得值得时候两者的差异。

1） Val()获取的是该对象的属性value值。

2） Html()获取的是该对象中所有的内容。(包含其中的标签元素和纯文本)

3. 操作页面的文本和值2

(1) 请写出html()和text()在赋值得时候两者的区别,和使用的场景。

1、区别：

1） 对象名.html(“新的内容)//新的内容会将原有内容覆盖，HTML标签会被解析执行

2） 对象名.text(“新的内容”)//新的内容会将原有内容覆盖，HTML标签不会被解析。

2、使用场景：

1）html()用于修改html文档对象的结构。

2）text()用于单纯修改文档对象的显示文本内容。

(2) 请说出val()和html()在赋值得时候两者的差异。

1) 对象名.val(“value属性的值”)。

2) 对象名.html(“对象中包含的所有内容”)。

3）赋值没有什么区别，都是使用字符串赋值。

4）注意select、textarea两个标签不是通过html赋值，而是通过val()赋值。

5. 操作页面的元素2

(1) 请问replaceAll("div p:nth-child(5)");代码是什么意思？

使用该对象替换掉每个div内的第5个p元素对象。

(2) 请问replaceWith()和replaceAll()方法之间的区别是什么?

1)区别:

对象名.replaceWith():将所有匹配的元素替换成指定的HTML或DOM元素。 对象名.replaceAll():用匹配的元素替换掉所有 selector匹配到的元素。

(1)replaceWith()的参数是newContent: String

(可以是HTMLString或Selector)，如下两种形式：

(2)replaceAll()的参数是target: Selector

(3) 请问 remove()和empty()之间的区别是什么？

1) empty():删除匹配的元素中所有的子节点(子元素)。

2) remove():删除所有匹配的元素。

6. 事件处理1

(1) 请说出 bind() 事件的作用和使用场景是什么？请列举

1) 作用：为每个匹配元素的特定事件绑定事件处理函数。

2) 使用场景：为指定元素绑定指定事件。

3) 比如：给id为but的元素绑定单击和双击事件的处理函数。

(2) one()事件的使用的场景是什么？

使用场景：绑定只触发一次的事件处理函数。

7. 事件处理2

(1) 请说出trigger()这个事件的作用和使用，我们可以在什么位置来使用这个标签？

1）作用：

Ø 在事件绑定的函数中声明，触发其他事件处理函数。

Ø 把已经绑定在元素上的事件处理函数，直接拿来用。

Ø 不需要再写重复的函数代码，减少了代码量。

2）使用：

3）位置：处理事件的函数内部。

(2) 在JQ中如何可以解绑一个对象上的所有事件，如何解绑一个对象上的单个事件？

1) 对象名.unbind();

2) 对象名.unbind(“事件类型”);

(3) live这个方法是解决什么问题的，现在还继续使用吗？

解决：

1）使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。

2）而使用.live()时，不管是现在还是后来添加的元素都会附加事件处理函数。

使用情况：

1）在1.7版本后的jQuery无法使用，必须是版本是1.7或其之前的版本才能使用

动画功能 A

动画功能 B

jQuery DOM 操作

三个简单实用的用于 DOM 操作的 jQuery 方法：

text () - 设置或返回所选元素的文本内容 html () - 设置或返回所选元素的内容（包括 HTML 标记） val () - 设置或返回表单字段的值

实例：

jQuery 操作 CSS

addClass () - 向被选元素添加一个或多个类 removeClass () - 从被选元素删除一个或多个类 toggleClass () - 对被选元素进行添加 / 删除类的切换操作 css () - 设置或返回样式属性

实例

例如：

jQuery 遍历

什么是遍历？

jQuery 遍历，意为 “移动”，用于根据其相对于其他元素的关系来 “查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

遍历 DOM 树

这些 jQuery 方法很有用，它们用于遍历 DOM 树：

parent() ：方法返回被选元素的直接父元素。 parents()：方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 parentsUntil()：方法返回介于两个给定元素之间的所有祖先元素。 children () 方法返回被选元素的所有直接子元素。 find () 方法返回被选元素的后代元素，一路向下直到最后一个后代。

下面的例子返回介于 <span>与<div> 元素之间的所有祖先元素：

实例

下面的例子返回属于 <div>后代的所有 <span>元素：

实例

jQuery - AJAX 简介

AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。

jQuery load () 方法jQuery load () 方法是简单但强大的 AJAX 方法。load () 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法:

必需的 URL 参数规定您希望加载的 URL。

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

可选的 callback 参数是 load () 方法完成后所执行的函数名称。

可选的data (Map) 是 发送至服务器的 key/value 数据。

实例：

可选的 callback 参数规定当 load () 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容 statusTXT - 包含调用的状态 xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load () 方法完成后显示一个提示框。如果 load () 方法已成功，则显示 “外部内容加载成功！”，而如果失败，则显示错误消息：

实例

jQuery - AJAX get () 和 post () 方法

jQuery get () 和 post () 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求 - 响应的常用方法是：GET 和 POST。

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

jQuery $.get () 方法

$.get () 方法通过 HTTP GET 请求从服务器上请求数据。

语法：

必需的 URL 参数规定您希望请求的 URL。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.get () 方法从服务器上的一个文件中取回数据：

实例

jQuery $.post () 方法

$.post () 方法通过 HTTP POST 请求向服务器提交数据。

语法:

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post () 连同请求一起发送数据：

实例

$.post函数会从页面传信息到php页面，PHP页面通过

$.get () 和 $.post () 方法是 jQuery 中的全局函数，而在此之前讲的 load () 是对 jQuery 对象进行操作的。

1. jQuery封装原理

(1) 请问jQuery的底层是如何封装的？

使用闭包

(2) 请问闭包原理的作用是什么？

把函数使用局部变量存储，而不会被覆盖和重名。然后通过匿名自调用，把window作为参数传递，把所有的功能(jQuery)挂载到window下。

(3) 请简述闭包的优点？

减少了全局变量的过多声明，导致难以维护。 防止变量被修改，因为内部变量外部是无法访问的，安全。 通过匿名函数自调用的方式把变量挂在到window属性下，使得该局部变量能一直存在内存中。

参考网址：

js的闭包原理理解 - 夜雨声烦丶 - 博客园