jquery基础学习笔记

最新推荐文章于 2022-09-07 00:07:26 发布

π大新

最新推荐文章于 2022-09-07 00:07:26 发布

阅读量1k

点赞数 1

分类专栏： jQuery 文章标签： jquery

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.jQuery是什么：

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需要定义id即可。

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery是免费、开源的，使用MIT许可协议。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外，jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery，顾名思义，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库。

2.jQuery的下载：

jQuery的项目下载放在了Google Code上, 下载地址:

http://code.google.com/p/jqueryjs/downloads/list

上面的地址是总下载列表, 里面有很多版本和类型的jQuery库, 主要分为如下几类:

min: 压缩后的jQuery类库, 在正式环境上使用.如:jquery-1.3.2.min.js

vsdoc: 在Visual Studio中需要引入此版本的jquery类库才能启用智能感知.如：jquery-1.3.2-vsdoc2.js

release包: 里面有没有压缩的jquery代码, 以及文档和示例程序. 如:jquery-1.3.2-release.zip

3.jQuery能做什么：

取得文档中的元素
修改页面的外观
改变文档的内容
相应用户的交互操作
为页面添加动态效果
无需刷新页面从服务器获取信息 ---AJAX
简化常见的JavaScript任务

引入jQuery库文件的<script>标签，必须放在引用自定义脚本文件的<script>标签之前。否则，编写代码的时候将引用不到jQuery。

4.jQuery对象：

工厂函数 ${} ——

在jQuery中美元符号$只不过是jQuery的“别名”

jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象

jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法:

$(“#persontab”).html();

看书的时候发现了单双引号的问题， jquery中$()中$( ' ')单引号和$( " " )双引号，只要是成对出现的，使用上没有区别，如果是嵌套的话就必须是单双间隔成对出现。

jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法

注意：$("#pid")获取的永远是对象，即使网页上不存在pid元素，所以用jQuery判断某个元素是否存在的话不能写为

if($("#pid")){} 而要根据元素的长判断 if($("#pid").length>0){}

约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.

var $variable = jQuery 对象

var variable = DOM 对象

dom对象和jQuery对象的区别：

var domObj = document.getElementById("id"); //获取dom对象

${"#foo"}.html 等同于 document.getElementById("foo").innerHTML;

在jQuery对象中无法使用DOM对象的任何方法

jQuery对象和DOM对象可以相互转换。

4.1 jQuery 对象转成 DOM 对象

jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM 对象的时候, 有如下两种处理方法:

(1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.

var $cr = $("#cr");

var cr = $cr[0];

(2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象

var $cr = $("#cr")

var cr = $cr.get(0);

4.2 DOM 对象转成 jQuery 对象

对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.

var cr = document.getElementById("cr"); //不需要#

var $cr = $(cr);

转换后就可以使用 jQuery 中的方法了

5.jQuery选择器：

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器；

编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何元素的对象；

如果之前了解过CSS的话，就会发现其实jQuery选择器和CSS选择器很相似。利用jQuery选择器可以很方便快速的找到特定的DOM元素，并为其添加相应的行为，重要的是它都不需要考虑浏览器的感受，反正没有兼容性问题。

5.1 基本选择器

基本选择器是 jQuery 中最常用的选择器, 也是最简单的选择器, 它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

5.2 层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则需要使用层次选择器.

•注意: (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery中的方法 siblings()与前后位置无关, 只要是同辈节点就可以选取

5.3 过滤选择器

•过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头

•按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

5.3.1基本过滤选择器

5.3.2 内容过滤选择器

• 内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上

5.3.3 可见性过滤选择器

• 可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

• 可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素 , 也包含文本隐藏域 (<input type=“hidden”>) 和 visible:hidden 之类的元素

5.3.4 属性过滤选择器

• 属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

5.3.5 子元素过滤选择器

•nth-child() 选择器详解如下：

–(1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

–(2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

–(3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数的元素

–(4):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

5.3.6表单对象属性过滤选择器

•此选择器主要对所选择的表单元素进行过滤

5.4表单选择器

选择器中含有特殊字符的情况需要进行转义： (W3C规定，属性值中的不能含有特殊字符的，如果遇到的话要转义)

eg: <div id="id#b">bb<div> 需要写成 $('#id\\#b')

<div id="id[1]">bb<div> 需要写成 $('#id\\[1\\]')

6.jQuery中的DOM操作：

•DOM(Document Object Model—文档对象模型)：一种与浏览器, 平台, 语言无关的接口, 使用该接口可以轻松地访问页面中所有的标准组件

•DOM 操作的分类:

–DOM Core: DOM Core 并不专属于 JavaScript, 任何一种支持 DOM 的程序设计语言都可以使用它. 它的用途并非仅限于处理网页, 也可以用来处理任何一种是用标记语言编写出来的文档, 例如: XML

–HTML DOM: 使用 JavaScript 和 DOM 为 HTML 文件编写脚本时,　有许多专属于 HTML-DOM 的属性

–CSS-DOM:针对于 CSS 操作, 在 JavaScript 中, CSS-DOM 主要用于获取和设置 style 对象的各种属性

6.1 查找节点

–查找属性节点: 通过 jQuery选择器完成.

–操作属性节点: 查找到所需要的元素之后, 可以调用 jQuery 对象的 attr() 方法来获取它的各种属性值

–操作文本节点：通过 text() 方法

6.2 创建节点

• 创建节点 : 使用 jQuery 的工厂函数 $(): $(html) ; 会根据传入的 html 标记字符串创建一个 DOM 对象 , 并把这个 DOM 对象包装成一个 jQuery 对象返回 .

• 注意 :

– 动态创建的新元素节点不会被自动添加到文档中 , 而是需要使用其他方法将其插入到文档中 ;（可以使用append()等方法）

– 当创建单个元素时 , 需注意闭合标签和使用标准的 XHTML 格式 . 例如创建一个 <p> 元素 , 可以使用 $(“<p/>”) 或 $(“ <p ></p> ”), 但不能使用 $(“<p>”) 或 $(“< P >”)

• 创建文本节点就是在创建元素节点时直接把文本内容写出来 ;

•创建属性节点也是在创建元素节点时一起创建

6.3 插入节点

• 动态创建 HTML 元素并没有实际用处 , 还需要将新创建的节点插入到文档中 , 即成为文档中某个节点的子节点

appendTo 和 append: 主语和宾语的位置不同:

prependTo 和 prepend: 主语和宾语的位置不同:

6.4 删除节点

•remove(): 从 DOM 中删除所有匹配的元素, 传入的参数用于根据 jQuery 表达式来筛选元素. 当某个节点用 remove() 方法删除后, 该节点所包含的所有后代节点将被同时删除. 这个方法的返回值是一个指向已被删除的节点的引用.

•empty(): 清空节点 – 清空元素中的所有后代节点(不包含属性节点).

6.5 复制节点

•clone(): 克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

•clone(true): 复制元素的同时也复制元素中的的事件

6.6 替换节点

•replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素

•replaceAll(): 颠倒了的 replaceWith() 方法.

•注意: 若在替换之前, 已经在元素上绑定了事件, 替换后原先绑定的事件会与原先的元素一起消失

6.7 包裹节点

•wrap(): 将指定节点用其他标记包裹起来. 该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义.

•wrapAll(): 将所有匹配的元素用一个元素来包裹. 而 wrap() 方法是将所有的元素进行单独包裹.

•wrapInner(): 将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来.

6.8 属性操作

•attr(): 获取属性和设置属性

–当为该方法传递一个参数时, 即为某元素的获取指定属性

–当为该方法传递两个参数时, 即为某元素设置指定属性的值

•jQuery中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等.

•removeAttr(): 删除指定元素的指定属性

6.9 样式操作

•获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成.

•追加样式: addClass()

•移除样式:removeClass() --- 从匹配的元素中删除全部或指定的 class

•切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它.

•判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false

6.10 CSS-DOM操作

•获取和设置元素的样式属性: css()

•获取和设置元素透明度: opacity 属性

•获取和设置元素高度, 宽度: height(), width(). 在设置值时, 若只传递数字, 则默认单位是 px. 如需要使用其他单位则需传递一个字符串, 例如 $(“p:first”).height(“2em”);

•获取元素在当前视窗中的相对位移: offset(). 其返回对象包含了两个属性: top, left. 该方法只对可见元素有效

6.11 设置和获取HTML、文本和值

•读取和设置某个元素中的 HTML 内容: html() . 该方法可以用于 XHTML, 但不能用于 XML 文档

•读取和设置某个元素中的文本内容: text(). 该方法既可以用于 XHTML 也可以用于 XML 文档.

•读取和设置某个元素中的值: val() --- 该方法类似 JavaScript 中的 value 属性. 对于文本框, 下拉列表框, 单选框该方法可返回元素的值(多选框只能返回第一个值).如果为多选下拉列表框, 则返回一个包含所有选择值的数组

6.12 常用遍历节点方法

•取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

•取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next()

•取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev()

•取得匹配元素前后所有的同辈元素: siblings()

7.jQuery事件：

1加载DOM

以浏览器装载文档为例，在页面加载完后，浏览器会通过JavaScript为DOM添加事件。在常规的JavaScript代码中，通常使用window.onload方法。在jQuery中使用的是$(document).ready()方法。

虽然$(document).ready()和onload方法有类似的效果，但还是有细微的差异的(参看《锋利的jQuery》)：

①.执行时机不同：window.onload()方法是在网页中的所有元素(包括元素的所有关联文件)完全加载到浏览器后才执行，即js此时才可以访问网页中的任何元素。而用jQuery的方法，在DOM完全就绪的时候就可以被调用。这并不意味着关联的文件都已经下载完毕。使用jQuery中的页面加载方法onload(),该方法会在元素的onload时间中绑定一个处理函数，如果处理函数绑定给window对象，则会在所有内容加载完之后触发，绑定给某个元素对象，就在该元素加载之后触发。

$(window).load(function(){

//编写代码

})

等价于js中的

wondow.onload = function(){

//编写代码

}

②.多次使用：js的onload事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前边的函数。每次调用$(document).ready()方法都会向内部的行为队列中添加一个新函数。

③.简写方式：

$(document).ready(function(){

//编写代码

})

可以简写为这样：

$().ready(function(){

//编写代码

})

或者是这样：

$(function(){

//编写代码

})

事件绑定

bind(type, [data] , fn)：第一个参数是事件类型，click、blur、mousedown、keyup等，也可以是自定义名称；

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象。

第三个参数是用来绑定的处理函数。

jQuery中的时间绑定类型和JavaScript中的事件绑定类型少了“on”,JavaScript中的onclick，在jQuery中成了click。

《锋利的jQuery》中有很多例子，可以简单练习下

合成事件

•hover(): 模拟光标悬停事件. 当光标移动到元素上时, 会触发指定的第一个函数, 当光标移出这个元素时, 会触发指定的第二个函数.

•toggle(): 用于模拟鼠标连续单击事件. 第一次单击元素, 触发指定的第一个函数, 当再一次单击同一个元素时, 则触发指定的第二个函数, 如果有更多个函数, 则依次触发, 直到最后一个.

•toggle() 的另一个作用: 切换元素的可见状态.

事件冒泡

•事件会按照 DOM 层次结构像水泡一样不断向上只止顶端

•解决: 在事件处理函数中返回 false, 会对事件停止冒泡. 还可以停止元素的默认行为.

移除事件

•移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”)

•移除某按钮上的所有事件: $(“btn”).unbind();

•one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.

$("a").one("click",function(){

alert("click me just once");

return false;

});

事件对象的属性

•事件对象: 当触发事件时, 事件对象就被创建了. 在程序中使用事件只需要为函数添加一个参数. 该事件对象只有事件处理函数才能访问到. 事件处理函数执行完毕后, 事件对象就被销毁了.

•event.pageX, event.pageY: 获取到光标相对于页面的 x, y 坐标.

jQuery中的

AJAX

AJAX即“ A synchronous J avascript And X ML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它并不是一种单一的技术。

优势: ①. 不需要插件支持；

②. 优秀的用户体验；

③. 提高WEB程序的性能；

④. 减轻服务器的带宽负担；

不足: ①. 浏览器对XML HttpRequest对象的支持度不足；

②. 破坏浏览器前进、后退按钮的正常功能；

③. 对搜索引擎的支持不足；

④. 开发和调试工具的缺乏；

jQuery对Ajax进行了封装，在jQuery中$.ajax()方法属于醉底层的方法。第二层是load()、$get()、$post()方法，第三层是$.getScript()和$.getJSON()方法。

8.1. load( url, [data], [callback] )

load方法能够载入远程 HTML 文件代码并插入至 DOM 中。

默认使用 GET 方式, 如果传递了data参数则使用Post方式.（根据参数自动指定）

参数名称	类型	说明
url	String	请求HTML页面的URL地址
data(可选)	Obect	发送至服务器的key/value数据
callback(可选)	Function	请求完成时的回调函数，无论请求成功或失败，只要请求完成就触发该函数

参考例子： Ajax的load()方法实例

8.2. jQuery.get( url, [data], [callback], [type] 和 jQuery.post( url, [data], [callback], [type] )

参数名称	类型	说明
url(可选)	String	请求的HTML页的URL地址
data(可选)	Obect	发送至服务器的key/value数据会作为QueryString附加到请求的URL中
callback(可选)	Function	载入成功时回调函数（只有当Response的返回状态为success时调用该方法）自动将请求结果和状态传递给该方法
type(可选)	String	服务器端返回内容的格式，包括xml、html、script、json、text和_defalut