jQuery
jQuery 是一套兼容多浏览器的 javascript 脚本库. 核心理念是写得更少，做得更多，
使用 jQuery 将极大的提高编写 javascript 代码的效率,帮助开发者节省了大量的工作,让
写出来的代码更加优雅, 更加健壮，“如虎添翼”. 同时网络上丰富的 jQuery 插件也让我
们的工作变成了"有了 jQuery,一切 soeasy."--因为我们已经站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布，吸引了来自
世界各地的众多 JavaScript 高手加入，由 Dave Methvin 率领团队进行开发。如今，
jQuery 已经成为最流行的 javascript 框架，在世界前 10000 个访问最多的网站中，有超
过 55%在使用 jQuery。
一、jQuery 的下载和安装
1. 官网
http://jquery.com/ 下载
2. 版本
jQuery 2.x has the same API as jQuery 1.x, but does not support
Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下载 1.X)
（1）完整版 : jquery-2.1.4.js -->学习版本(学习源码 想高手学习是最好学习方法)
（2）压缩版 : jquery-2.1.4.min.js -->开发版本(压缩版，减少传输)
3. 优点
（1）提供了强大的功能函数
（2）解决浏览器兼容性问题
（3）实现丰富的 UI 和插件
（4）纠正错误的脚本知识
太多了! 等待我们一一去发现...............
4. 安装
在页面引入即可
二、jQuery 核心
"$"符号在 jQuery 中代表对 jQuery 对象的引用, "jQuery"是核心对象，通过该对象
可以获取 jQuery 对象，调用 jQuery 提供的方法等。只有 jQuery 对象才能调用 jQuery 提供
的方法。
$ <==> jQuery
三、DOM 对象和 jQuery 包装集对象
明确 Dom 对象和 jQuery 包装集的概念, 将极大的加快我们的学习速度。原始的 Dom 对
象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery
获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提
供的方法。
1. Dom 对象
javascript 中获取 Dom 对象，Dom 对象只有有限的属性和方法:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
2. jQuery 包装集|对象
可以说是 Dom 对象的扩充.在 jQuery 的世界中将所有的对象, 无论是一个还是一组,
都封装成一个 jQuery 包装集,比如获取包含一个元素的 jQuery 包装集:
var jQueryObject = $("#testDiv");
3. Dom 转 jQuery 对象
Dom 对象转为 jQuery 对象，只需要利用$()方法进行包装即可
var domDiv = document.getElementById('mydiv'); // 获取 Dom 对象
mydiv = $(domDiv);
4. jQuery 对象转 Dom 对象
jQuery 对象转 Dom 对象，只需要取数组中的元素即可
//第一种方式 获取 jQuery 对象
var jqueryDiv = jQuery('#mydiv');
//第二种方式 获取 jQuery 对象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0];//将以获取的 jquery 对象转为 dom
通过遍历 jQuery 对象数组得到的对象是 Dom 对象，可以通过$()转为 jQuery 对象
$('#mydiv').each(function() {//遍历
var jquery = $(this);
})
案例
四、jQuery 选择器
和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提
供了简便的方式供我们查找|定位元素，称为 jQuery 选择器，选择器可以说是最考验一个人
jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只
要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形
式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。
基础选择器掌握即可 ,其他用到再查阅。
1. 基础选择器 Basics（掌握即可）
选择器 名称 举例
id 选择器 #id $("#testDiv")选择 id 为 testDiv 的元素
元素名称选择器 element $("div")选择所有 div 元素
类选择器 .class $(".blue")选择所有 class=blue 的元素
选择所有元素 * $("*")选择页面所有元素
组合选择器 selector1,
selector2,
selectorN
$("#testDiv,span,.blue")同时选中这几个选
择器匹配的元素
样式选择器
dom：innerHTML="...."，innerText="....."
jquery： .html("...")，.text("......")
2. 层次选择器 Hierarchy
选择器 名称 举例
后代选择器 ancestor descendant $("#parent div")选择 id 为 parent 的元素的所有 div 元素
子代选择器 parent > child $("#parent>div")选择 id 为 parent 的直接 div 子元素
相邻选择器 prev + next $(".blue + img")选择 css 类为 blue 的下一个 img 元素
同辈选择器 prev ~ sibling $(".blue ~ img")选择 css 类为 blue 的之后的 img 元素
width="270" height="129" />
width="270" height="129" />
选择器 2
3. 表
单选择
器
Forms j/x 选 择器
名称 举例
表单选择器 :input 查找所有的 input 元素：$(":input")；注意：会匹配所
有的 input、textarea、select 和 button 元素。
文本框选择器 :text 查找所有文本框：$(":text")
密码框选择器 :password 查找所有密码框：$(":password")
单选按钮选择器 :radio 查找所有单选按钮：$(":radio")
复选框选择器 :checkbox 查找所有复选框：$(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮：$(":submit")
图像域选择器 :image 查找所有图像域：$(":image")
重置按钮选择器 :reset 查找所有重置按钮：$(":reset")
按钮选择器 :button 查找所有按钮：$(":button")
文件域选择器 :file 查找所有文件域：$(":file")
五、jQuery DOM 操作
jQuery 也提供了对 HTML 节点的操作，而且在原生 js 的基础之上进行了优化，使用起来
更加方便。
常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节
点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动
画操作等。注意：以下的操作方式只适用于 jQuery 对象。
1. 操作元素的属性
获取属性
方法 说明 举例
attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回
checked，没有选中返回 undefined。
attr('checked')
attr('name')
prop(属性名称) 获取具有 true 和 false 两个属性的属性值 prop('checked')
设置属性
方法 说明 举例
attr(属性名称，属性值) 设置指定的属性值，操作 checkbox
时选中返回 checked，没有选中返
回 undefined。
attr('checked',’checked’)
attr('name',’zs’)
prop(属性名称，属性值) 设置具有 true 和 false 两个属性的
属性值
prop('checked',’true’)
移除属性
方法 说明 举例
removeAttr(属性名) 移除指定的属性 removeAttr('checked')
1.attr()
:设置或者返回元素的属性 ;2.prop()
:设置 具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled。
全选
2. 操作元素的样式
对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理
外还可以有专门的方法进行处理。
方法 说明
attr(“class”) 获取 class 属性的值，即样式名称
attr(“class”,”样式名”) 修改 class 属性的值，修改样式
addClass(“样式名”) 添加样式名称
css() 添加具体的样式
removeClass(class) 移除样式名称
增加元素的具体样式，格式：
1）css({‘样式名’:’样式值’,’样式名 2’:’样式值 2’})
例：css({"background-color":"red","color":"#fff"});
2）css(“样式名”,”样式值”)
例：css('color','white')
css()方法设置元素样式
3. 操作元素的内容
对于元素还可以操作其中的内容，例如文本，值，甚至是 html。
方法 说明
html() 获取元素的 html 内容
html("html 内容") 设定元素的 html 内容
text() 获取元素的文本内容，不包含 html
text("text 内容") 设置元素的文本内容，不包含 html
val() 获取元素 value 值
val(‘值’) 设定元素的 value 值
html()和 text()方法设置元素内容
4. 创建元素
在 jQuery 中创建元素很简单，直接使用核心函数即可
$(‘元素内容’)
$(‘
this is a paragraph!!!
’)5. 添加元素
方法 说明
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以
是字符、HTML 元素标记。
$(content).prependTo(
selector)
把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以
是字符、HTML 元素标记。
$(content).appendTo(s
elector)
把 content 元素或内容插入 selector 元素内，默认是在尾部
before() 在元素前插入指定的元素或内容:$(selector).before(content)
after() 在元素后插入指定的元素或内容:$(selector).after(content)
prepend()方法前追加内容
prependTo()方法前追加内容
append()方法后追加内容
appendTo()方法后追加内容
男神
偶像
小鲜肉
before() 和 after()方法在元素之前后插入内容
财大气粗
6. 删除元素
方法 说明
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
删除元素
jquery删除
javase
http 协议
servlet
7. 遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element 是当前的元素，此时是 dom 元素。
遍历元素 each()
jquery
javase
http 协议
servlet
六、Jquery 事件
1. ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
页面载入时触发 ready()事件
aaa
bbbb
ccc
dddd
2. bind()绑定元素事件
为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
$(selector).bind( eventType [, eventData], handler(eventObject))
eventType ：是一个字符串类型的事件类型，就是你所需要绑定的事件。这类类型可
以包括如下：
blur, focus, focusin, focusout, load, resize, scroll, unload, click,
dblclick,mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
mouseleave,change, select, submit, keydown, keypress, keyup, error 。
[, eventData]：传递的参数，格式：{名:值,名 2:值 2}
handler(eventObject)：该事件触发执行的函数
简单的 bind()事件
bind()方简单的绑定事件
绑定多个事件
bind()方法绑多个事件
自学 jQuery 动画