本文介绍了jQuery的基本概念，包括如何下载和引入jQuery库，以及jQuery对象与DOM对象的区别和转换。详细讲解了jQuery的选择器，如基础选择器、层级选择器、过滤选择器等，并介绍了筛选方法。此外，文章还涵盖了jQuery的事件处理，如onload与ready()的区别，以及各种事件绑定和触发方法。最后，文章提到了jQuery中的动画效果和尺寸位置操作。
目录
（1）jQuery对象和原生js的DOM对象的属性和方法不能混用,须转换
（3）jQuery对象转为js的DOM对象: $('element')[index].jQuery属性方法
一、Jquery概述
1. 概念： 一个JavaScript框架。简化JS开发
* jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨 是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优 化HTML文档操作、事件处理、动画设计和Ajax交互。
* JavaScript框架：本质上就是一些js文件，封装了js的原生代码而已
2. 快速入门
步骤：
（1）下载JQuery
* 目前jQuery有三个大版本：
1.x：兼容ie678,使用最为广泛的，官方只做BUG维护，
功能不再新增。因此一般项目来说，使用1.x版本就可以了，
最终版本：1.12.4 (2016年5月20日)
2.x：不兼容ie678，很少有人使用，官方只做BUG维护，
功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，
最终版本：2.2.4 (2016年5月20日)
3.x：不兼容ie678，只支持最新的浏览器。除非特殊要求，
一般不会使用3.x版本的，很多老的jQuery插件不支持这个版本。
目前该版本是官方主要更新维护的版本。最新版本：3.2.1（2017年3月20日）
* jquery-xxx.js 与 jquery-xxx.min.js区别：
1. jquery-xxx.js：开发版本。给程序员看的，有良好的缩进和注释。体积大一些
2. jquery-xxx.min.js：生产版本。程序中使用，没有缩进。体积小一些。程序加载更快
（2）导入JQuery的js文件：导入min.js文件
（3）使用
var div1 = $("#div1");
二、Jquery的使用
1. jQuery对象和DOM对象
JQuery对象和JS对象区别与转换
1. JQuery对象在操作时，更加方便。
2. JQuery对象和js对象方法不通用的.
3. 两者相互转换
* jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
* js -- > jq : $(js对象)（1）jQuery对象和原生js的DOM对象的属性和方法不能混用,须转换
$获取过来的是jQuery对象
原生js获取过来的是DOM对象
（2） js的DOM对象转为jQuery对象
mydiv = document.querySelector('div');
$(mydiv);
（3）jQuery对象转为js的DOM对象: $('element')[index].jQuery属性方法
$('element').get(index).jQuery属性方法
$('mydiv');
$('mydiv')[index].hide();
或$('mydiv').get(index)..hide();2. jQuery选择器
（1）jQuery选择器允许对HTML元素组或单个元素进行操作
（2）jQuery选择器基于id、类（class）、类型（Tag）属性（Attr）、
属性值（value）等进行查找或者选择HTML元素
（2）jQuery是基于已有的css选择器，除此之外，他还自定义了一些选择器
（3）jQuery中所有的选择器都以美元符号$开头($是jQuery的别称,
在代码中可以使用jQuery代替$,通常都直接使用$,$也是jQuery的顶级对象,
相当于JavaScript中的window,把元素利用$包装成jQuery对象,就可以调用jQuery的方法)(1)基础选择器
*匹配所有
$('*').css('background','red');
,表示群组选择，匹配多个元素时中间用英文逗号隔开
$('div,p').css('background','red');
匹配标签
$('div').css('background','red');
匹配id
$('#id01').css('background','red');
匹配class
$('.class01').css('background','red');
(2)层级选择器
直接或间接后代选择器 (前面的选择器必须是后面选择器的父级标签,父级与子级选择器之间用空格隔开)
$('div p').css('background','red'); //子元素应用样式
直接后代选择器(前面的选择器必须是后面选择器的直接父级标签)
$('div>p').css('background','red'); //父元素应用样式
相邻或者不相邻后代选择器(同级兄弟关系，相邻元素之间用~隔开，但只有后一个元素应用样式)
$('p~p').css('background','red');
相邻后代选择器(同级且相邻兄弟关系，相邻元素之间用+隔开，但只有后一个元素应用样式)
$('p+p').css('background','red');
(3)基本过滤选择器
匹配第一个
$('div:first').css('background','red');
匹配最后个
$('div:last').css('background','red');
排除选择
$('div:not(.class01)').css('background','red');
$('div:not(.class01,.class02)').css('background','green');
选择偶数个
$('div:even').css('background','red');
选择奇数个
$('div:odd').css('background','red');
自定义选择(索引选择)
$('div:eq(0)').css('background','red');//选择第一个div
选择大于（索引）的
$('div:gt(2)').css('background','red');//选择第3个之后的div
选择小于（索引）的
$('div:lt(3)').css('background','red');//选择第4个之前的div
选择标题标签
$(':header').css('background','red');//h1-h6的标题标签
选择处于动画效果的
$(':animated').css('background','red');
选择符合条件的第几个
$('div:nth-child(3n)').css('background','red');//选择第3个div
$('div:nth-child(3n+1)').css('background','red');//每3个div里选择第1个div
选择符合条件的排序后的第几个
$('div:nth-of-type(3n)').css('background','red');//选择div里的第3个
(4)可见性选择过滤器
display：none 或者 input type = hidden 不可见且不占位置
visbility：hidden 或者 opacity：0 不可见但是占位置
$(':hidden)').css('background','block');
$(':visible').css('background','red');
(5)内容过滤选择器
包含字符
$('div:contains(\'3\')').css('background','red');//选择包含字符3的div
空值
$('div:empty').text(123);
包含子元素或者文本
$('div:parent').css('background','red');
包含子元素
$('div:has(p)').css('background','red');
(6)属性过滤选择器
带有属性的
$('div[myAttr]').css('background','red');
带有属性的并且符合属性值
$('div[myAttr=\'a11\']').css('background','red');
不带有属性的，或者带有属性但属性值不符的
$('div[myAttr!=\'a11\']').css('background','red');
带有属性但属性值不符的
$('div').filter('[myAttr]').filter('myAttr!=\'a11\']').css('background','red');
等价于 $('div[myAttr][myAttr!=\'a11\']').css('background','red');
属性值以xxx开头
$(div[myAttr^=\'a1\']).css('background','red');
属性值以xxx结尾
$(div[myAttr$=\'22\']).css('background','red');
属性值包括xxx
$(div[myAttr*=\'1\']).css('background','red');
(7)表单过滤器
$(:input).css('display','none');
$(:text).css('display','none');
$(:password).css('display','none');
$(:radio).css('display','none');
$(:checkbox).css('display','none');
$(:submit).css('display','none');
$(:reset).css('display','none');
$(:image).css('display','none');
$(:file).css('display','none');
$(:button).css('display','none');//<input type=bitton\> 和<button></button>都能选择
$(:checked).css('display','none');// 获得单选/复选框选中的元素
$(:selected).css('display','none');//获得下拉框选中的元素
$(:enabled).css('display','none');//可用表单
$(:disabled).css('display','none');//不可用表单3. Jquery筛选方法
$('Element').parent() 查找直接父级
$('Element').parents() 查找间接父级
$('Element').children(selector) 相当于$('ul>li'),查找最近一级(亲儿子)
$('Element').find(selector) 相当于$('ul li'),后代选择器
$('Element').siblings("element") 查找兄弟节点,不包括自己本身
$('Element').nextAll() 查找当前元素之后所有同辈元素
$('Element').prevtAll() 查找当前元素之前所有同辈元素
$('Element').hasClass(class) 检查当前的元素是否含有某个特定的类,如果有则返回true
$('Element').eq(index) 相当于$('li：eq(2)'),index从0开始4. Jquery入口函数
onload 和 ready() // onload 和 ready()不可以混用
onload 和 ready()区别：
（1）onload指页面包含图片等文件在内的所有元素都加载完成。在onload中只能
window.οnlοad=function()
{
a( );
b( );
}（2）ready表示文档结构已经加载完成（不包含图片等非文字媒体文件），只是在所有的DOM加载完毕后就会触发，在jQuery中可利用多个jQuery.Ready( )方法，他们会按次序依次执行。在页面加载完成后，立即执行指定的函数。这么做的好处是可以减少页面渲染的时间，加快页面加载，提升用户体验。
(3) ready在onload前加载,ready()相比onload事件绑定函数的优势：具有较高优先级，只需等到html结构加载完成后即可执行；而onload必须等到图片在内的所有元素加载完毕后才执行。除了使用target选择器时需要结合window.onload，大多数我们都可以使用ready()来进行编写js代码。
$(function () {
});
window.onload 和 $(function) 区别
* window.onload 只能定义一次,如果定义多次，后边的会将前边的覆盖掉
* $(function)可以定义多次的。ready()的三种写法：
(1)
$(document).ready(function(){
console.log(ready 1);
});
(2)
$().ready(function(){
console.log(ready 1);
});
(3)
$(function(){
console.log(ready 3);
});5. jQuery 常用方法
(1)获得或者设定内容text()
console.log($('#pid').text()); //获得text内容
$('#pid').text('555'); //设定text内容
$('#pid').text(function(i,origText){ //函数方法设定text内容
console.log(i + '-' + origText);
return 'aaa';
});
(2)获得或者设定html()内容
console.log($('#pid').html()); //获得html内容
$('#pid').html('555'); //设定html内容
$('#pid').html(function(i,origText){ //函数方法设定html内容
console.log(i + '-' + origText);
return 'aaa';
});
(3)获得或者设定表单控件的value值
console.log($('input:first').val()); //获得val内容
$('input:first').val('555'); //设定val内容
$('input:first').val(function(i,origText){ //函数方法设定val内容
console.log(i + '-' + origText);
return 'aaa';
});
(4)通用属性操作
1. attr(): 获取/设置元素的属性
2. removeAttr():删除属性
3. prop():获取/设置元素的属性
4. removeProp():删除属性
* attr和prop区别？
1. 如果操作的是元素的固有属性，则建议使用prop
2. 如果操作的是元素自定义的属性，则建议使用attra.获取和设定元素固有的属性值element.prop('属性名')
console.log($('checkbox').prop('checked'));// 复选框的选中状态
$('a').prop('tittle','我是更改后的标题');
b.获得或者设定元素自定义属性attr()
console.log($('input:first').attr('index')); //获得attr属性
$('input:first').attr('type','password'); //设定attr属性
$('input:first').attr({ //对象方法设定val属性
type:password,
value:'123456',
});（5）对class属性操作（css操作 ）：
1. addClass():添加class属性值
2. removeClass():删除class属性值
3. toggleClass():切换class属性
* toggleClass("one"):
* 判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加
4. css():addClass:添加
$('p.contains(p1)').addClass(cls1);
removeClass:删除
$('p.contains(p1)').removeClass(cls1);
toggleClass:切换
$('button').click(function(){
$('p.contains(p2)').toggleClass(cls1);
});
css操作一个：
$('p.contains(p2)').css('background-color','red');
css操作多个：
$('p.contains(p2)').css('background-color','red').css('color','green'); //级联方法
$('p.contains(p2)').css({ //对象方法
'background-color':'red',
'color':'green'
});6. jQuery DOM 元素的添加和删除
创建元素的三种方法：
(1)HTML：
var txt1 = '<p>p1</p>';
(2)JS原生
var txt2 = document.createElement('p');
txt2.innerHTML = 'p2';
(3)Jquery
var txt3 = $('<p></p>').text('p3');
添加元素:
CRUD操作:
1. append():父元素将子元素追加到末尾
* 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
* 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
* 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
* 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头
5. after():添加元素到元素后边
* 对象1.after(对象2)： 将对象2添加到对象1后边。对象1和对象2是兄弟关系
6. before():添加元素到元素前边
* 对象1.before(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系
7. insertAfter()
* 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系
8. insertBefore()
* 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系 append() //在被选元素的结尾插入元素，作为子元素
perpend() //在被选元素的开头插入元素，作为子元素
after() //在被选元素之后插入元素，作为同级元素
before() //在被选元素之前插入元素，作为同级元素
var txt3 = $('<p>hello word</p>');
$('div:eq(1)').append(txt1);
$('div:eq(1)').perpend(txt1);
$('div:eq(1)').after(txt1);
$('div:eq(1)').before(txt1);删除DOM元素
9. remove():移除元素
* 对象.remove():将对象删除掉
10. empty():清空元素的所有后代元素。
* 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点
(1)remove() //自杀,自己删除自己
$('p:contains(p1)').remove();
等价于 $('p').remove(:contains(p1));
(2)empty() //父亲杀儿子,父亲删除自己所有子元素
$('div:eq(1)').empty();
7. jQuery对象拷贝
把某个对象拷贝给另一个对象使用(如果有相同的属性值,目标对象的属性值会被合并覆盖掉)
$.extend([deep],target,obj1,obj2);
//deep：默认为false，浅拷贝，如果·设为true为深拷贝，
target：拷贝给的目标对象，
obj：要拷贝的对象
浅拷贝时,复杂数据类型只会拷贝其地址给目标对象,修改目标对象会影响被拷贝对象
深拷贝时,完全克隆拷贝的对象,而不是地址,修改目标对象不会影响被拷贝对象
$(function(){
var targetObj = {
id:0
};
var obj = {
id:1,
name:"andy"
}
$.extend(targetObj,obj);
console.log(targetObj);
})
8. jQuery DOM 元素的遍历
遍历元素方法:
1. js的遍历方式
* for(初始化值;循环结束条件;步长)
2. jq的遍历方式
1. jq对象.each(callback)
1. 语法：
jquery对象.each(function(index,element){});
* index:就是元素在集合中的索引
* element：就是集合中的每一个元素对象
* this：集合中的每一个元素对象
2. 回调函数返回值：
* true:如果当前function返回为false，则结束循环(break)。
* false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)
2. $.each(object, [callback])
3. for..of: jquery 3.0 版本之后提供的方式
for(元素对象 of 容器对象) (1) $('element').each(function(index,domEle){$(domEle).css('color','blue');})
//遍历 ，回调函数里第一个参数是索引号，第二个参数是dom元素对象
(2) $.each($('element'),function(index,domEle){$(domEle).css('color','blue');})
//遍历 ，主要用于遍历数据（数组，对象），处理数据9. jQuery事件
1. jquery标准的绑定方式
* jq对象.事件方法(回调函数)；
* 注：如果调用事件方法，不传递回调函数，则会触发浏览器默认行为。
* 表单对象.submit();//让表单提交
2. on绑定事件/off解除绑定
* jq对象.on("事件名称",回调函数)
* jq对象.off("事件名称")
* 如果off方法不传递任何参数，则将组件上的所有事件全部解绑
3. 事件切换：toggle
* jq对象.toggle(fn1,fn2...)
* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....
* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。
<script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>常用事件：
(1)$('div:eq(0)').click(function(){//点击事件
console.log(div click);
});
(2)$('div:first').dblclick(function(){//双击事件
console.log(div dblclick);
});mouseover和mouseenter都是鼠标移到元素身上就触发
区别是：
mouseover经过自身盒子触发，经过子盒子也触发，拥有冒泡特性，
mouseenter只经过自身盒子触发，没有冒泡特性
mouseenter不会冒泡，搭配鼠标离开事件mouseleave同样不会冒泡 (3)
$('div:eq(0)').mouseenter(function(){//鼠标划过事件
console.log(div mouseenter);
});
$('div:eq(0)').mouseleave(function(){//鼠标划走事件
console.log(div mouseleave);
});
$('div:eq(0)').mouseover(function(){//鼠标划过事件
console.log(div mouseover);
});
$('div:eq(0)').mouseout(function(){//鼠标划走事件
console.log(div mouseout);
});
$('div:first').hover(
function(){
$(this).css('background-color','green');//鼠标划过事件
},
function(){
$(this).css('background-color','white');//鼠标划走事件
}
);
(4)$('button:eq(0)').focus(function(){//获取焦点的元素事件
$(this).css('background-color','green');
});
$('button(0)').blur(function(){//没有焦点时
$(this).css('background-color','red');
}); (5)键盘事件
$('button:first').keydown(function(e){
var keys = e.which;
console.log('keydown' + keys);
});
$('button:first').keyup(function(e){
var keys = e.which;
console.log('keyup' + keys);
});
$('button:first').keypress(function(e){
var keys = e.which;
console.log('keypress' + keys);
});(6)delegate //事件委托，子元素不绑定任何事件，子元素通过冒泡将事件交由父元素处理
$('div').delegate('p','click',function(event){
console.log(event.target);
});bind的两种用法：
(1)可以用更加优雅的方式以object的方式给一个元素绑定多个事件
$('button:first').bind({
focus:function(){
$(this).css('background-color','green');
},
blur:function(){
$(this).css('background-color','red');
},
})(2)可以用于传递参数
function handler(e){
console.log(e.data.msg);
}
$('button:first').bind('focus',{msg:'hello'},handler);on的用法：代替bind和代替delegate
代替bind：
(1)可以用更加优雅的方式以object的方式给一个元素绑定多个事件
element.on(events,[selector],fn) //events：一个或多个用空格分隔的事件类型，selector：元素的子元素选择器
$('button:first').on({
focus:function(){
$(this).css('background-color','green');
},
blur:function(){
$(this).css('background-color','red');
},
})(2)on可以实现事件委托
$("Ul li").click() //隐式迭代，给每一个li绑定了事件
$("ul").on("click","li"'function（）{})；//只是给ul注册了事件，但把事件委托给了li，触发条件是li，大大增加了执行效率 (3)on可以给动态创建的元素绑定事件(click()实现不了)
(4)可以用于传递参数
function handler(e){
console.log(e.data.msg);
}
$('button:first').on('focus',{msg:'hello'},handler);on事件解绑
$("element").off() //解除element上所有事件
$("element").off("click") //解除element上的点击事件
$("element").off("click","li") //解除element上的点击事件委托
$("element").one();绑定事件 //只会触发一次事件代替delegate：
$('div').delegate('click','p',function(event){
console.log(event.target);
}); 自动触发事件 (轮播图):
$("element").click();
$("element").trigger("click");
$("element").triggerHandler("click"); //不会触发事件的默认行为 (比如文本框获得焦点时不会有光标闪烁)10. jQuery 事件方法
事件方法触发器或添加一个函数到被选元素的事件处理程序。
下面的表格列出了所有用于处理事件的 jQuery 方法。
方法 描述
bind() 向元素添加事件处理程序
blur() 添加/触发失去焦点事件
change() 添加/触发 change 事件
click() 添加/触发 click 事件
dblclick() 添加/触发 double click 事件
delegate() 向匹配元素的当前或未来的子元素添加处理程序
die() 在版本 1.9 中被移除。移除所有通过 live() 方法添加的事件处理程序
error() 在版本 1.8 中被废弃。添加/触发 error 事件
event.currentTarget 在事件冒泡阶段内的当前 DOM 元素
event.data 包含当前执行的处理程序被绑定时传递到事件方法的可选数据
event.delegateTarget 返回当前调用的 jQuery 事件处理程序所添加的元素
event.isDefaultPrevented() 返回指定的 event 对象上是否调用了 event.preventDefault()
event.isImmediatePropagationStopped() 返回指定的 event 对象上是否调用了 event.stopImmediatePropagation()
event.isPropagationStopped() 返回指定的 event 对象上是否调用了 event.stopPropagation()
event.namespace 返回当事件被触发时指定的命名空间
event.pageX 返回相对于文档左边缘的鼠标位置
event.pageY 返回相对于文档上边缘的鼠标位置
event.preventDefault() 阻止事件的默认行为
event.relatedTarget 返回当鼠标移动时哪个元素进入或退出
event.result 包含由被指定事件触发的事件处理程序返回的最后一个值
event.stopImmediatePropagation() 阻止其他事件处理程序被调用
event.stopPropagation() 阻止事件向上冒泡到 DOM 树，阻止任何父处理程序被事件通知
event.target 返回哪个 DOM 元素触发事件
event.timeStamp 返回从 1970 年 1 月 1 日到事件被触发时的毫秒数
event.type 返回哪种事件类型被触发
event.which 返回指定事件上哪个键盘键或鼠标按钮被按下
event.metaKey 事件触发时 META 键是否被按下
focus() 添加/触发 focus 事件
focusin() 添加事件处理程序到 focusin 事件
focusout() 添加事件处理程序到 focusout 事件
hover() 添加两个事件处理程序到 hover 事件
keydown() 添加/触发 keydown 事件
keypress() 添加/触发 keypress 事件
keyup() 添加/触发 keyup 事件
live() 在版本 1.9 中被移除。添加一个或多个事件处理程序到当前或未来的被选元素
load() 在版本 1.8 中被废弃。添加一个事件处理程序到 load 事件
mousedown() 添加/触发 mousedown 事件
mouseenter() 添加/触发 mouseenter 事件
mouseleave() 添加/触发 mouseleave 事件
mousemove() 添加/触发 mousemove 事件
mouseout() 添加/触发 mouseout 事件
mouseover() 添加/触发 mouseover 事件
mouseup() 添加/触发 mouseup 事件
off() 移除通过 on() 方法添加的事件处理程序
on() 向元素添加事件处理程序
one() 向被选元素添加一个或多个事件处理程序。该处理程序只能被每个元素触发一次
$.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数
ready() 规定当 DOM 完全加载时要执行的函数
resize() 添加/触发 resize 事件
scroll() 添加/触发 scroll 事件
select() 添加/触发 select 事件
submit() 添加/触发 submit 事件
toggle() 在版本 1.9 中被移除。添加 click 事件之间要切换的两个或多个函数
trigger() 触发绑定到被选元素的所有事件
triggerHandler() 触发绑定到被选元素的指定事件上的所有函数
unbind() 从被选元素上移除添加的事件处理程序
undelegate() 从现在或未来的被选元素上移除事件处理程序
unload() 在版本 1.8 中被废弃。添加事件处理程序到 unload 事件
contextmenu() 添加事件处理程序到 contextmenu 事件
$.holdReady() 用于暂停或恢复.ready() 事件的执行11. 显示相关（中间添加动画过渡效果）
三种方式显示和隐藏元素
1. 默认显示和隐藏方式
1. show([speed,[easing],[fn]])
1. 参数：
1. speed：动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如：1000)
2. easing：用来指定切换效果，默认是"swing"，可用参数"linear"
* swing：动画执行时效果是 先慢，中间快，最后又慢
* linear：动画执行时速度是匀速的
3. fn：在动画完成时执行的函数，每个元素执行一次。
2. hide([speed,[easing],[fn]])
3. toggle([speed],[easing],[fn])
2. 滑动显示和隐藏方式
1. slideDown([speed],[easing],[fn])
2. slideUp([speed,[easing],[fn]])
3. slideToggle([speed],[easing],[fn])
3. 淡入淡出显示和隐藏方式
1. fadeIn([speed],[easing],[fn])
2. fadeOut([speed],[easing],[fn])
3. fadeToggle([speed,[easing],[fn]]) $('element').hover(鼠标经过函数,鼠标离开函数); //切换效果
$('element').stop(); //结束上一个动画，解决动画排队问题，但函数必须写在动画前面
$('#show').click(function(){ //显示状态切换为匀速显示
$(p:eq(0)).show(2000,f); //速度2000毫秒，调用f函数
});
$('#hide').click(function(){ //显示状态切换为匀速隐藏
$(p:eq(0)).hide(2000,f); //速度2000毫秒，调用f函数
});
$('#toggle').click(function(){ //来回匀速切换显示与隐藏状态
$(p:eq(0)).toggle(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeIn').click(function(){ //显示状态切换为加速显示
$(p:eq(0)).fadeIn(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeOut').click(function(){ //显示状态切换为加速隐藏
$(p:eq(0)).fadeOut(2000,f); //速度2000毫秒，调用f函数
});
$('#fadeOut').click(function(){ //显示状态切换为半透明
$(p:eq(0)).fadeTo(2000,0.5); //速度2000毫秒，修改透明度为0.5
});
$('#fadeToggle').click(function(){ //来回加速切换显示与隐藏状态
$(p:eq(0)).fadeToggle(2000,f); //速度2000毫秒，调用f函数
});
$('#slideDown').click(function(){ //显示状态切换为下滑显示
$(p:eq(0)).slideDown(2000,f); //速度2000毫秒，调用f函数
});
$('#slideUp').click(function(){ //显示状态切换为上滑隐藏
$(p:eq(0)).slideUp(2000,f); //速度2000毫秒，调用f函数
});
$('#slideToggle').click(function(){ //来回切换上滑与下滑的显示与隐藏状态
$(p:eq(0)).slideToggle(2000,f); //速度2000毫秒，调用f函数
});12. jQuery尺寸,位置操作
jQuery尺寸:
width()/height() 获取和设置匹配元素宽度和高度值
innerWith()/innerHeight() 获取和设置匹配元素宽度和高度值,含padding
outerWith()/outerHeight() 获取和设置匹配元素宽度和高度值,含padding,border
outerWith(true)/outerHeight(true) 获取和设置匹配元素宽度和高度值,含padding,margin,borderjQuery位置:
offset() 获取和设置被选元素相对于文档的偏移坐标,跟父级没有关系
position() 获取被选元素相对于有定位的父亲的偏移坐标,
所有父级都没有定位,则相对于文档
scrollTop()/scrollLeft 获取和设置被选元素被卷去的头部和左侧
(document.scrollTop()/scrollLeft 文档被卷去的头部和左侧)13. Jquery 自定义动画
animate({想要修改的样式属性},速度(slow / normal / fast),切换效果(swing /l inear) , 回调函数)
14. jQuery多库共存
解决多个库共用$符号,出现冲突的情况
解决方法:
a. 把里面的$符号统一改为jQuery,比如jQuery("div");
b. jQuery变量规定新的名称:$.noConflict() ,比如:var xx = $.noConflict();
15. 方法链（chaining）
方法链是一种Jquery的技术，允许在相同的元素上运行多条命令，一条接着一条，这样的话浏览器就不必多次查询同一元素，如果需要链接一个动作，只需要简单的追加动作即可。
jQuery案例:banner轮播图
var $j = 0; //当前图像
var $last = 0;
var $timer = '';
var $period = 2000; //间隔时间
var $z-iNdex = 1;
var $img = $('div#banner ul li img');
$img.eq($j).css('z-index',$z-index).css('opacity','1');
$img.filter(':not(:eq('+$j+'))').css('opacity','0');
function startRoll(){
$last = $j;
$j++;
$z-index++;
if($j >= $img.length){
$j = 0;
}
$img.eq($j).css('z-index',$z-index).animate({opacity:1},1000,'linear',finction(){
$img.eq($last).css('opacity','0');
});
$timer = setTimeout('startRoll',period);
console.log($last + '-' + $j);
}
$timer = setTimeout('startRoll',period);16. jQuery插件
瀑布流,图片懒加载插件网址:www.jq22.com
jQuery全屏滚动插件网址:http://www.dowebok.com/demo/2014/77/
17. 插件：增强JQuery的功能
1. 实现方式：
1. $.fn.extend(object)
* 增强通过Jquery获取的对象的功能 $("#id")
2. $.extend(object)
* 增强JQeury对象自身的功能 $/jQuery
1436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
