jQuery
1、什么是JQuery
1.1 JQuery 的介绍
jQuery 是一个 JavaScript 库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法。 它的作者是 John Resig，于 2006 年创建的一个开源项目，随着越来越多开发者的加入，jQuery 已经集成了 JavaScript 、 CSS 、 DOM 和 Ajax 于一体的强大功能。 它可以用最少的代码， 完成更多复杂而困难的功能，从而得到了开发者的青睐。
主旨： 以更少的代码、实现更多的功能；
1.2 jquery 作用
jQuery 是 JavaScript 库，所以jQuery 在使用上要比原生的JavaScript 要简单，但是对于网页编程来说
有些通用的基础知识是必备的：
1.XHTML 或 HTML5 (含 CSS ，网页必备的基础技术）
2.JavaScript
3.服务器语言如：Nodejs,java,php
2、JQuery 的发展史
2.1jquery 发展史
从 2005 年 8 月开始，进入公共开发阶段，随之而来的新框架于 2006 年 1 月 14 日正式 以 jQuery 的名称发布。
8 月发布了 jQuery1.0，第一个稳定版本，具有对 CSS 选择符、事件处理和 Ajax 交 互的支持。
2007 年 1 月发布了 jQuery1. 1 ，极大的简化 API 。合并了许多较少使用的方法。7 月发布了 jQuery1. 1.3 ，优化了 jQuery 选择符引擎执行的速度。9 月发布了 jQuery1.2 ，去掉了 XPath 选择器，新增了命名空间事件。
2008 年 5 月发布了 jQuery1.2.6 ，引入了 Dimensions 插件到核心库中。
2009 年 1 月发布了 jQuery1.3 。
2010 年 1 月发布了 jQuery1.4 ，进行大更新，提供了 DOM 操作，增加了很多 新的方法或是增强了原有的方法。 2 月发布了 jQuery1.4.2 ，添加了.delegate()和.undelegate()两个新方法，提升了灵活 性和浏览器一致性，对事件系统进行了升级。
3、JQuery 的优点
jQuery 的功能和优势
jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。 主要功能有以下几点：
1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8. 自行扩展功能插件
jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM ，比原生的 JavaScript 要 方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到 单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼 着考虑不同浏览器的兼容问题
轻量级
强大的选择器
出色的DOM操作
可靠的事件处理机制
完善的Ajax
出色的浏览器兼容性
链式操作方式
丰富的插件支持
完善的文档
开源
jquery是一个快速、小且功能丰富的JavaScript库。它使HTML文档的遍历和操作、事件处理、动画和Ajax等操作变得更加简单，它提供了一个易于使用的API，可以跨多种浏览器工作（兼容性比较好）。结合了多功能性和可扩展性，jquery改变了数百万人编写JavaScript的方式。
4、JQuery 的使用
获取jQuery类库
进入jQuery官网，下载jQuery文件。
2.0及之后的版本，不兼容IE6 7 8
在页面中引入jQuery
和其他JS文件引入一样：
代码及注意事项
注意：
1、 在jQuery库中，$ 就是jQuery的一个简写形式 例如： $(“#nan”)==jQuery(“#nan”)
2、当浏览器解析完document后，执行ready小括号内的函数
和window.onload的区别
区别一：书写个数不同 Js入口函数只能出现一次，出现多次会存在事件覆盖的问题。 jQuery的入口函数，可以出现任意多次，并不会存在事件覆盖问题。
区别二：执行时机不同
Js入口函数是在所有的文件资源加载完成后，才执行。这些文件资源包括：页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数，是在文档加载完成后，就执行。文档加载完成指的是：DOM树加载完成后，就可以操作DOM了，不用等到所有的外部资源都加载完成。
ready与onload的简单区别
执行时机
编写个数
下面分别有两组代码，思考一下运行结果会有什么不同
简写
$(document).ready( function () { …} ) 可以简写为：$(function () {…} )5、JQuery 的选择器
JQuery 的选择器分为：
1.基本选择器
2.层次选择器
3.基础过滤选择器
4.内容过滤选择器
5.属性过 滤选择器
6.子元素过滤选择器
7.表单选择器
8.表单属性过滤选择器
基本选择器
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $(“#test”)选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(“.test”)选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $(“p”)选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $(“*”)选取所有的元素 |
| Selector1,selector2,…，selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $(“div,span,p.myClass”)选取所有<div>，<span>和拥有class为myClass的<p>标签的一组元素 |
层次选择器
| 选择器 | 描述 | 返回值 | 示例 |
| $(“ancestor desendant”) | 选取ancestor元素里的所有descendant(后代)元素 | 集合元素 | $(“div span”)选取<div>里的所有的<span>元素 |
| $(“parent>child”) | 选取parent元素下的子元素 | 集合元素 | $(“div>span”)选取<div>元素下元素名是<span>的子元素 |
| $(“prev+next”) | 选取紧接在prev元素后的next元素 | 集合元素 | $(“.one+div”)选取class为one的下一个<div>同辈元素 |
| $(“prev~siblings”) | 选取prev元素之后的所有siblings元素 | 集合元素 | $(“#two~div”)选取id为two的元素后面的所有<div>同辈元素 |
基础过滤 选择器
| 选择器 | 描述 | 返回值 | 示例 |
| ：first | 选取第一个元素 | 单个元素 | $(“div :first”)选取所有<div>元素中第1个<div>元素 |
| ：last | 选取最后一个元素 | 单个元素 | $(“div:last”)选取所有<div>元素中最后一个<div>元素 |
| ：not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $(“input:not(.myClass)”)选取class不是myClass的<input>元素 |
| ：even | 选取索引是偶数的所有元素，索引从0开始 | 集合元素 | $(“input:even”)选取索引是偶数的<input>元素 |
| ：odd | 选取索引是奇数的所有元素，索引从0开始 | 集合元素 | $(“input:odd”)选取索引是奇数的<input>元素 |
| ：eq(index) | 选取索引等于index的元素(index从0开始) | 单个元素 | $(“input:eq(1)”)选取索引等于1的<input>元素 |
| ：gt(index) | 选取索引大于index的元素(index从0开始) | 集合元素 | $(“input:gt(1)选取索引大于1的<input>元素 |
| ：lt(index) | 选取索引小于index的元素(index从0开始) | 集合元素 | $(“input:lt(1)选取索引小于1的<input>元素 |
内容过滤 选择器
| 选择器 | 描述 | 返回值 | 示例 |
| ：contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $(‘div:contains(“测试”)’)选取包含文本“测试”的<div>元素 |
| ：empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $(‘div:empty’)选取不包含子元素和文本的空元素<div> |
| ：has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $(‘div:has(p)’)选取含有<p>元素的<div>元素 |
| ：parent | 选取含有子元素或者文本的元素(非空元素) | 集合元素 | $(“div:parent”)选取拥有子元素或文本元素的<div>元素 |
属性过滤 选择器
| 选择器 | 描述 | 返回值 | 示例 |
| [attr] | 选取拥有此属性的元素 | 集合元素 | $(“div[id]”)选取拥有属性id的div元素 |
| [attr=value] | 选取属性的值为value的元素 | 集合元素 | $(“div[title=test]”)选取属性title为”test”的<div>元素 |
| [attr!=value] | 选取属性的值不等于value的元素 | 集合元素 | $(“div[title!=test]”)选取属性title不等于 ”test”的<div>元素 |
| [attr^=value] | 选取属性的值以value开始的元素 | 集合元素 | $(“div[title^=test]”)选取属性title以”test”开始的<div>元素 |
| [attr$=value] | 选取属性的值以value结束的元素 | 集合元素 | $(“div[title$=test]”)选取属性title以”test”结束的<div>元素 |
| [attr*=value] | 选取属性的值含有value的元素 | 集合元素 | $(“div[title*=test]”)选取属性title含有”test”的<div>元素 |
| [attr1][attr2] [attrN] | 选择满足所有属性选择器的元素 | 集合元素 | $(“div[id][title$=‘test’]”)选取拥有属性id,并且属性title以”test”结束的<div>元素 |
子元素过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
| :nth-child(index/even/odd) | 选取每个父元素下的第index个或者奇偶元素。index从1开始 | 集合元素 | $(‘div:nth-child(1)’) 选取所有div中的，是其父标签的第一个子标签的div； $(‘div:eq(0)’);选取第一个div； |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | $(“ul li: first-child”)选取每个<ul>中第一个<li>元素 $(‘div:first’)选择所有div标签中的第一个。 |
| :last-child | 选取每个父元素的最后一个子元素 | 集合元素 | $(“ul li: last-child”)选取每个<ul>中最后一个<li>元素；$(‘div:last选择所有div标签中的最后一个。 |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么将会被匹配。 | 集合元素 | $(“ul li:only-child”)在<ul>中选取是惟一子元素的<li>元素 |
：first-child与：first的区别
：nth-child(index)与：eq(index)的区别
：nth-child(表达式)的应用
表单选择器
| 选择器 | 描述 | 返回值 | 示例 |
| input，textarea,select,button | 匹配所有 input, textarea, select 和 button 元素 | 集合元素 | $(":input") 选取所有的input的元素 |
| ：text | 匹配所有的单行文本框 | 集合元素 | $(":text") 选取查找所有文本框 |
| ：password | 匹配所有密码框 | 集合元素 | $(":password")查找所有密码框 |
| ：radio | 匹配所有单选按钮 | 集合元素 | $(":radio")查找所有单选按钮 |
| :checkbox | 匹配所有复选框 | 集合元素 | $(":checkbox")查找所有复选框 |
表单属性过滤选择器
| 选择器 | 描述 | 返回值 | 示例 |
| :checked | 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected | 集合元素 | $("input:checked")查找所有选中的复选框元素 |
| :selected | 匹配所有选中的option元素 | 集合元素 | $("select option:selected")查找所有选中的选项元素 |
6、JQuery中的dom节点操作
运用传统的javascript方法，创建一个div节点：
var node = document.createElement(‘div’);
jQuery中创建一个div节点：
$(‘<div></div>’);
jQuery中创建一个有文本的div节点：
$(‘<div>My Demo</div>’);
运用传统的javascript方法，插入一个节点（如使用appendChild()）：
var container = document.createElement(“p”);
document.body.appendChild(container);
jQuery中插入节点：
$('body').append('<div>在body的末尾加入一个新的div</div>');
7、JQuery常用方法
.children() 获得匹配元素集合中每个元素的所有子元素
.next() 获得匹配元素集合中每个元素的下一个同辈元素
.prev() 获得匹配元素集合中每个元素紧邻的上一个同辈元素
.parent() 获得当前匹配元素集合中每个元素的父元素
.find() 获得当前匹配元素集合中每个元素的后代
.siblings() 获得匹配元素集合中所有元素的同辈元素
.each() 循环，为每个匹配的元素执行函数
.end() 方法结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态。
.addClass() 为每个匹配的元素添加指定的类名
.removeClass() 从匹配的元素中删除全部或者指定的类
.toggleClass() 从匹配的元素中添加或删除一个类
.hasClass() 检查元素是否含有某个特定的类，有，则返回true
.attr() 设置或返回被选元素的属性值 （没有设定属性，返回undefined）
.prop() 设置或返回被选元素的属性值（没有设定属性，返回布尔值）
.removeAttr() 从每一个匹配的元素中删除一个属性
.html() 设置或取得第一个匹配元素的html内容
.val() 设置或返回匹配元素的值针对表单元素
.css() 设置或返回匹配元素的样式属性
.width() 设置或返回匹配元素的宽度
.height() 设置或返回匹配元素的高度
.scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移
.scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移
.position() 获取匹配元素到定位父级的距离
.offset() 获取匹配元素到html的距离
有两个属性 left top
8、JQuery事件
JQ事件绑定及移除
bind() 为每个匹配的元素绑定一个或多个事件处理函数
语法：bind( type , fn ) //不能给未来元素添加事件
$("p").bind("click", function(){
alert( $(this).text() );
});
$("button").bind({
mouseover:function(){$("body").css("background","red");},
mouseout:function(){$("body").css("background","#FFF");}
});
unbind( type , fn )--bind()的反向操作，删除元素的一个或多个事件
on() 在选择元素上绑定一个或多个事件的事件处理函数 可以给未来元素添加事件（事件委托）
语法：on(events,[selector],[data],fn)
$("ul").on( "click" , "li", function(){
alert( $(this).html() );
});
JQ1.7开始引入了全新事件绑定机制
off( type , fn )--on()的反向操作， 移除用on()绑定的事件处理程序
one() 为匹配的元素绑定一次性的事件处理函数不包括新添加的元素
语法：one(type,[data],fn)
$("p").one("click", function(){
alert( $(this).html() );
});
当使用 one() 方法时，每个元素只能运行一次事件处理器函数，执行完之后事件就会被移除
JQ合成事件
hover( )方法
语法：hover(fn1,fn2); 鼠标进入时执行fn1，鼠标离开时执行fn2
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
trigger( )
// trigger(事件) 模拟事件的方法(事件类型，在页面刷新的时候 仅执行一次)
// trigger() 此方法括号里面可以进行传参（字符串，对象，数组）
// triggerHandler() 模拟事件
区别：
第一，triggerHandler 不会触发浏览器默认事件。
第二，triggerHandler 不向上冒泡。
第三，triggerHandler 这个方法的返回的是事件处理函数的返回值，如果返回的集合为空，则这个方法返回 undefined 。trigger 返回的是触发事件的元素。
4641
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
