jQuery 框架学习笔记（基础）

What

jQuery 是一种快速、简洁跨游览器的 JavaScript 函数库，其宗旨是“Write less, Do more”，它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

注意：jQuery 不是将所有的 JS 封装，只是有选择性的封装

特点：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对 css 选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

Why

各种游览器获取异步对象的方式不尽相同（AJAX），而 jQuery 能屏蔽掉这些不兼容的东西以达到一种统一。这就是使用它的理由之一：兼容能力

回顾 JavaScript 上，它定位 HTML 控件的方式有三种：

1. 通过 ID 属性：document.getElementById()
2. 通过 NAME 属性：document.getElementsByName()
3. 通过标签名：document.getElementByTagName()

明显可见，JavaScript 的方法名有够长的，不易书写...... 发现规律：

• 传入参数是以“#”开头的字符串 = ID 属性
• 传入参数不以“#”开头且也没有前缀修饰的字符串 = 标签名属性（剩下那个就不用说了吧）

How

jQuery 对象与 JavaScript 对象之间的关系

	jQuery	JavaScript
对象  =	数组	this 代表当前对象
转为 JavaScript / jQuery	其数组索引的结果就是 JavaScript 对象	$(JS 对象 )

注意：jQuery 和 JavaScript 都只能去调用各自的 API

jQuery提供定位 HTML 控件的九个选择器

选择器名称	描述
基本选择器	直接定位 id、类修修饰器、标签
层次选择器	有父子，兄弟关系的标签
增强基本选择器	大于、小于、等于、奇偶数的标签
内容选择器	定义内容为 XXX、内容中是否有标签器、含有子元素或者文本的标签
可见性选择器	可见或不可见的标签
属性选择器	与属性的值相关
子元素选择器	匹配父标签下的子标签
表单选择器	匹配表单对应的控件属性
表单对象属性选择器	匹配表单属性具体的值

jQuery API

DOM 分类	DOM-HTML DOM 操作 html 标签中的内容，如： document.creteElement("img")
	DOM-CSS DOM 操作 css 样式，如： imgElement.style.visbility = "hidden"
	核心 DOM 该 DOM 不只操作 JS 语言，如： dom4j 解析 xml 标签

追加

append()	追加到父元素之后
prepend()	追加到父元素之前
after()	追加到兄弟元素之后
before()	追加到兄弟元素之前

查询层次关系

children()	只查询子节点，但不含后代节点
next()	下一个相邻兄弟节点
prev()	上一个相邻兄弟节点
siblings()	所有兄弟节点

css 样式

addClass()	增加已存在的样式
removeClass()	删除已存在的样式
hasClass()	判断标签是否有指定的样式，true 表示有样式，false 表示无样式
toggleClass()	如果标签有样式就删除，否则增加样式

动画效果

show()	显示对象
hide()	隐藏对象
fadeIn()	淡入显示对象
fadeOut()	淡出隐藏对象
slideUp()	向上滑动
slideDown()	向下滑动
slideToggle()	上下切换滑动，速度快点

迭代

each()	是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象

更多 DOM API 就不列举了

JavaScript 一大特性就是事件驱动，当用户用了执行了某些动作以后，JavaScript 就会响应事件，在事件的方法上，我们就可以对用户的动作“回馈”一些信息给用户！

jQuery也对 JavaScript 事件进行了封装，我们看一下以下的API：

• window.onload：在浏览器加载 web 页面时触发，可以写多次 onload 事件，但后者覆盖前者

• ready：在浏览器加载 web 页面时触发，可以写多次 ready 事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化

（注意！ready 和 onload 同时存在时，二者都会触发执行，ready 快于 onload）

• change：当内容改变时触发

• focus：焦点获取

• select：选中所有的文本值

• keyup/keydown/keypress：演示在IE和Firefox中获取event(事件)对象的不同

• mousemove：在指定区域中不断移动触发

• mouseover：鼠标移入时触发

• mouseout：鼠标移出时触发

• submit：在提交表单时触发，true 表示提交到后台，false 表示不提交到后台

• click：单击触发

• dblclick：双击触发

• blur：焦点失去

鼠标 / 键盘事件

属性	描述
altKey	返回当事件被触发时，"ALT"是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，"CTRL"键是否被按下。
metaKey	返回当事件被触发时，"meta"键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，"SHIFT"键是否被按下。

我们在开始使用JavaScript学习AJAX的时候，创建异步对象时，需要根据不同的浏览器来创建不同的对象….装载XML文件的时候，也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题，不需要考虑浏览器兼容的问题，这是非常非常方便我们开发的。以下是 jQuery 在 AJAX 技术中常用的 API

• $.ajax([options])

• load(url, [data], [callback])

• $.get(url, [data], [fn], [type])

• $post(url, [data], [callback], [type])

• serialize()

就不作解析了，看看总结吧！

1. load() 方法是使用 jQuery 的对象来进行调用的，得到服务器的结果自动会把结果嵌套到所在的标签中。

2. get() 方法不是使用 jQuery 对象来调用，因此需要手动把结果放在想要放的位置

3. post() 方法是用来把参数带过去给服务器的，因此我们需要在 Servlet 上手动设置编码。用法与 get() 方法一样

4. serialize() 是非常好用的一个方法，不需要我们手动去拼接参数，会自动把 form 表单的参数封装成 JSON 格式的数据

5. 至于 $.ajax() 方法，实际上就是集合了 get() 和 post() 方法