jquery是什么？
一系列函数的集合，是别人封装好的函数，自己拿去调用就OK了
主要就是用更少的代码实现更多的功能
比如：页面上有两个按钮，一张图片，当点击hidden按钮时隐藏图片，当点击show按钮时显示图片
一般情况，利用DOM技术，当点击按钮时触发onclick事件进而引发一个函数，但代码很长
如果用jquery,如$("#ID")，它的本质是一个函数，$其实只是一个方法名而已，#ID是函数的形参，这样做给了我们一个假象，就是只需要调用这个函数就能够定位到某个节点，这样代码就会简洁很多，不需要通过document.getElementById();document.getElementsByTagName();document.ElementsByName()来实现
get( )和eq( )的区别
eq返回的是一个jquery对象，get返回的是一个html 对象数组
返回的是jQuery对象，就可以继续调用其他方法，返回的是html数组就不能调用jQuery的其他方法
<p style="color:red">颜色</p> 使用eq来获得第一个p标签的color值： $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象，所以可以用jq的方法css使用get来获得第一个p标签的color值： $("p").get(0).style.color //因为get(num)返回的是个html对象，所以要使用传统的HTML对象方法，jq对象此时就没用了。 当然，也可以get(num)后把对象转为jq的对象再进行操作： $($("p").get(0)).css("color")
选择网页元素
jQuery的基本设计思想和主要用法，就是选择某个网页元素，然后对其进行某种操作
选择表达式可以是CSS选择器：
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
也可以是jQuery自己的表达式：
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
链式操作
比如：$('div').find('h3').eq(2).html('Hello');
分解开就是：
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
jQuery还提供了.end（）方法，使得结果集可以后退一步
取值和赋值
$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常见的几个：
.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
移动
第一种方法是使用.insertAfter()，把div元素移动p元素后面：
$('div').insertAfter($('p'));
把所有段落插入到一个元素之后。与 $("#foo").after("p")相同 HTML 代码: <p>I would like to say: </p><div id="foo">Hello</div> jQuery 代码: $("p").insertAfter("#foo"); 结果: <div id="foo">Hello</div><p>I would like to say: </p>
第二种方法是使用.after()，把p元素加到div元素前面：
$('p').after($('div'));
把所有段落插入到一个元素之前。与 $("#foo").before("p")相同。 HTML 代码: <div id="foo">Hello</div><p>I would like to say: </p> jQuery 代码: $("p").insertBefore("#foo"); 结果: <p>I would like to say: </p><div id="foo">Hello</div>
四对操作方法：
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
事件操作:把事件直接绑定在网页元素之上。
$('p').click(function(){
alert('Hello');
});
jquery中的事件
.blur() 表单元素失去焦点。
触发所有段落的blur事件
$("p").blur();
.change() 表单元素的值发生变化
触发被选元素的 change 事件。
$(selector).change();
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
在页面内对键盘按键做出回应，可以使用如下代码:
jQuery 代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
触发所有input元素的select事件:
$("input").select();
当文本框中文本被选中时执行的函数:
$(":text").select( function () { /* ...do something... */ } );
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() 用户离开页面
事件运行一次，可以使用.one()方法
$("p").one("click", function() {
alert("Hello"); //只运行一次，以后的点击不会运行
});
事件对象：所有的事件处理函数，都可以接受一个事件对象作为参数
$("p").click(function(e) {
alert(e.type); // "click"
});
事件对象的属性和方法：
event.pageX 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（比如click）
event.which 按下了哪一个键
event.data 在事件对象上绑定数据，然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
event.stopPropagation() 停止事件向上层元素冒泡
工具函数
字符串操作
$.trim()：去除字符串左右两边的空格
去掉字符串起始和结尾的空格。
$.trim(" hello, how are you? ");
数组和对象操作
$.each()
遍历数组
$.each(array,function(index,value){})：array:数组变量，index:元素下标，从0开始，value:元素值
遍历对象
$each(object,function(name,value){})：object:对象，name:属性名，value:属性值
例遍数组，同时使用元素索引和内容。
jQuery 代码:
$.each( [0,1,2], function(i, n){
alert( "Item #" + i + ": " + n );
});
例遍对象，同时使用成员名称和变量内容。
jQuery 代码:
$.each( { name: "John", lang: "JS" }, function(i, n){
alert( "Name: " + i + ", Value: " + n );
});
$.inArray()：查找元素的下标
$.inArray(value,array)：value:元素值，array:查找的数组，返回元素在数组中的下标，从0开始
$.merge()：合并两个数组
$.merge(array1,array2)：将第二个数组加到第一个数组后面
$.unique()：去除重复DOM元素
$.unique(dom)：dom:DOM元素
.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。
.parseXML(data)：解析一个字符串到一个XML文件。
$extend()：用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
jQuery.fn.extend(object);给jQuery对象添加方法。
jQuery.extend(object); 为扩展jQuery类本身，为自身添加新的方法。
jQuery.fn = jQuery.prototype 即指向jQuery对象的原型链，对其它进行的扩展，作用在jQuery对象上面；
一般用此方法来扩展jQuery的对象插件
将hello方法合并到jquery的实例对象中。
$.fn.extend({
hello:function(){alert('hello');}
});
在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{
hello:function(){alert('hello');}
}); //使用jQuery.net.hello();
增加两个插件方法。
jQuery 代码:
jQuery.fn.extend({
check: function() {
return this.each(function() { this.checked = true; });
},
uncheck: function() {
return this.each(function() { this.checked = false; });
}
});
结果:
$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();
$.map( )：将一个数组中的元素转换到另一个数组中。
将原数组中每个元素加 4 转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return n + 4;
});
结果:
[4, 5, 6]
原数组中大于 0 的元素加 1 ，否则删除。
jQuery 代码:
$.map( [0,1,2], function(n){
return n > 0 ? n + 1 : null;
});
结果:
[2, 3]
原数组中每个元素扩展为一个包含其本身和其值加 1 的数组，并转换为一个新数组。
jQuery 代码:
$.map( [0,1,2], function(n){
return [ n, n + 1 ];
});
结果:
[0, 1, 1, 2, 2, 3]
.toArray()：把jQuery集合中所有DOM元素恢复成一个数组。
.parseJSON(json)：接受一个JSON字符串，返回解析后的对象。
.parseXML(data):解析一个字符串到一个XML文件。
测试操作
$.isArray()：判断是否为数组对象，返回boolean
$.isFunction()：判断是否为函数，返回boolean
$.isEmptyObject()：判断是否为空对象，返回boolean
$.isPlainObject()：判断是否为纯粹对象，返回boolean
$.contains()：判断DOM节点是否包含另一个DOM节点
$.type()：输出数据类型，返回对象的数据类型
$.isNumeric()：判断是否为数值类型
$.isWindow()：判断是否为Window对象
URL操作
$param()：将对象的键值对转化为URL键值对字符串形式
$param(object)：object:需要转化的对象
.error(message)：接受一个字符串，并且直接抛出一个包含这个字符串的异常。
插件编写
.error(message):接受一个字符串，并且直接抛出一个包含这个字符串的异常。
$.fn.jquery:代表 jQuery 版本号的字符串。
其他操作
$.proxy()：调整this的指向
外部事件触发调用对象方法时，this指向会有问题（会调用触发的对象）
特殊效果
显示隐藏：可设置函数和线性运动
$("p").hide();隐藏
$("p").show();显示
$("p").toggle(); 隐藏的时候显示，显示的时候隐藏
淡入淡出
fadeIn() 淡入已隐藏的元素
fadeout() 淡出可见元素
$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出
fade Toggle() 方法 淡出就淡入 淡入就淡出
fadeTo() 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
滑动
slideDown();向下滑动 slideUp(); 向上滑动 slideToggle(); 反过来滑动
动画
animate()创建动画 可以操作多个属性 height opacity等 也可以使用相对值 “+=”
点击按钮后div元素的几个不同属性一同变化 HTML 代码: <button id="go"> Run</button> <div id="block">Hello!</div> jQuery 代码: // 在一个动画中同时应用三种类型的效果 $("#go").click(function(){ $("#block").animate({ "90%", height: "100%", fontSize: "10em", borderWidth: 10 }, 1000 ); });