jquery

jQuery选择器

基本选择器
#id ：根据id属性匹配元素                    //重点
Element ：根据标签名称匹配元素                    //重点
selector1,selector2 ：群组选择器，匹配所有满足条件的元素    //重点
.class ：根据class属性匹配元素                    //重点

层级选择器
ancetor descendant ：匹配当前元素的所有后代元素     //重点
parent > child ：匹配当前元素的所有子元素        //重点
prev + next ：匹配当前元素后面紧邻的下一个元素
prev~siblings ：匹配当前元素后面所有的同级兄弟元素

简单选择器
:first ：匹配第一个元素
:last ：匹配最后一个元素
:even ：匹配所有偶数元素
:odd ：匹配所有奇数元素
:eq(index) ：匹配索引等于index的元素，默认索引从0开始    //重点
:gt(index) ：匹配索引大于index的元素
:lt(index) ：匹配索引小于index的元素
:not(selector) ：匹配除指定选择器以外的元素

内容选择器
:contains(text) ：匹配内容包含text的元素
:empty ：匹配内容为空的元素                //重点
:has(selector) ：匹配具有指定选择器的元素
:parent ：匹配具有子元素的元素（匹配内容不为空的元素）


可见性选择器
:hidden ：匹配所有隐藏元素，（隐藏表单元素以及display：none元素）
:visible ：匹配所有可视化元素

属性选择器
[attribute] ：匹配具有指定属性的元素
[attribute=value] ：匹配元素属性等于指定值的元素     //重点
[attribute!=value] ：匹配元素属性值不等于value的元素
[attribute^=value] ：匹配属性值以value开始的元素
[attribute$=value] ：匹配属性值以value结尾的元素
[attribute*=value] ：匹配属性值包含value的元素
[selector1][selector2][selectorN] ：匹配同时具有多个属性的元素    //重点

子元素选择器
:nth-child(index/even/odd) 从1算起，根据（索引/偶数/奇数）来匹配子元素
:first-child ：匹配第一个子元素
:last-child ：匹配最后一个子元素
:only-child ：如果当前元素是唯一子元素，则匹配

表单选择器
:input ：匹配所有表单元素            //重点

:text     ：匹配所有文本框            //重点
:password ：匹配所有密码框
:radio     ：匹配所有单选按钮
:checkbox ：匹配所有复选框            //重点
:submit ：匹配所有提交按钮
:reset ：匹配所有重置按钮
:image ：匹配所有图像域
:button ：匹配所有button按钮
:file ：匹配所有文本域
:hidden ：匹配所有隐藏表单

表单对象选择器
:enabled ：匹配所有可用表单元素
:disabled ：匹配所有不可用表单元素
:checked ：匹配所有选中的元素            //重点
:selected ：匹配所有下拉选中的元素        //重点


*********************************************************************

jQuery对象转DOM对象
DOM对象 = jQuery对象[索引];
DOM对象 = jQuery对象.get(索引);

DOM对象转jQuery对象
jQuery对象 = $(DOM对象);

*********************************************************************

属性操作
<元素 属性=属性的值 … />
attr(name) ：获取指定属性的值
attr(key,value) ：设置指定属性
attr(properties) ：同时为元素设置多个属性，要求格式是一个json对象
attr(key,fn) ：通过函数的返回值，设置元素属性
removeAttr(name) ：移除某个属性

class属性操作
<元素 class=”class样式” />
addClass(class) ：为元素添加class样式
removeClass(class) ：移除元素的class样式
toggleClass(class) ：切换class属性，如果当前元素存在该属性则移除，反之，添加
hasClass(class) ：判断元素是否具有某个class样式

css操作
<元素 style=’border:1px #f00 solid; background-color:yellow’ />
css(name) ：获取css属性值
css(name,value) ：设置css属性值
css(properties) ：同时为元素设置多个css样式

offset位置
offset() ：获取元素的位置信息，返回json对象，包含left和top两个属性
offset(coordinates) ：设置元素的位置信息，要求是一个json对象，必须包含left和

top属性

尺寸操作
width() ：获取元素的宽度
width(value) ：设置元素宽度

height() ：获取元素的高度
height(value) ：设置元素的高度

文本/值
html() ：获取元素的值
html(val) ：设置元素的值
相当于DOM对象中的innerHTML属性（操作双标签元素）

val() ：获取表单元素的值
val(val) ：设置表单元素的值
相当于DOM对象中的value属性（操作表单元素）

text() ：获取元素的值
text(val) ：设置元素的值
相当于DOM对象中的innerText属性（原生代码具有兼容性问题，在jQuery中已解决）

***********************************************************************

基本事件
blur(fn) ：当失去焦点时触发
change(fn) ：当状态改变时触发
click(fn) ：当单击时触发
dblclick(fn) ：当双击时触发
focus(fn) ：当获得焦点时触发
keydown(fn) ：当键盘按下时触发
keyup(fn) ：当键盘弹起时触发
keypress(fn) ：当键盘按下时触发  keypress?keydown?keyup
load(fn) ：当页面载入完毕后触发（功能与ready方法类似）
unload(fn) ：当页面关闭时触发
mousedown(fn) ：当鼠标按下时触发
mouseup(fn) ：当鼠标弹起时触发
mousemove(fn) ：当鼠标移动时触发
mouseover(fn) ：当鼠标悬浮时触发
mouseout(fn) ：当鼠标离开时触发
resize(fn) ：当窗口大小改变时触发
scroll(fn) ：当滚动条滚动时触发
select(fn) ：（了解），当文本框内容被选中时触发
submit(fn) ：当表单元素提交时触发

*******************************************************************

hover(over,out) ：鼠标切换事件（鼠标悬浮,鼠标离开）
参数解析：
鼠标悬浮与鼠标离开切换事件，当鼠标悬浮时触发第一个事件处理程序，当鼠标离开时触

发第二个事件处理程序。
over：鼠标悬浮事件
out：鼠标离开事件

*******************************************************************

toggle(fn,fn) ：点击切换事件
参数说明：
    当我们第一次单击时触发第一个fn事件处理程序，当我们第二次单击时触发第二

个fn事件处理程序，当我们第三次单击时，触发第一个fn事件处理程序（当然其可以定义

多个fn事件处理程序）
fn：事件的处理程序

*********************************************************************

事件绑定
bind(type,[data],fn) ：为元素绑定相关事件
参数说明：
type：要绑定的事件类型，不带’on’前缀，如click、mouseover、mouseout
[data]：（了解），事件发生时所传递的参数
fn：事件的处理程序，一般是一个匿名函数

bind({type:fn,type:fn}) ：为元素绑定多个相关事件，要求参数是一个json对象
参数说明：
参数只有一个，就是一个json对象，里面属性为type，值为fn
type：事件的类型
fn：事件的处理程序

one(type,[data],fn) ：为元素进行一次绑定，只绑定一次
参数说明：
type：要绑定的事件类型，不带’on’前缀，如click、mouseover、mouseout
[data]：（了解），事件发生时所传递的参数
fn：事件的处理程序，一般是一个匿名函数

unbind([type]) ：移除元素事件
参数说明：
[type]：可选参数，填写type代表移除某个指定的事件
                    不填写代表移除所有事件
这个方法不同于原生Javascript中的移除，原生Javascript代码移除时，首先必须要具有

一个前提：在元素进行绑定时，其事件的处理程序必须是一个有名函数。

********************************************************************

阻止事件冒泡
jQuery对象.bind(‘事件’,function(event) {
    event.stopPropagation();
});


********************************************************************

阻止默认行为
记住：在jQuery中其完全兼容W3C所以处理方式一样
jQuery对象.bind(‘事件’,function(event) {
    event.preventDefault();
});

********************************************************************

基本效果（显示与隐藏）
show() ：显示
show(speed,[callback]) ：以动画效果显示
hide() ：隐藏
hide(speed,[callback]) ：以动画效果隐藏
toggle() ：显示或隐藏，如果显示则隐藏，反之则显示
toggle(switch) ：显示或隐藏，如果参数为true，代表一直显示，反之，一直隐藏
toggle(speed,[callback]) 以动画效果切换或隐藏
参数说明：
1）speed：速度，其可以使用以下三个值
speed:"slow", "normal", "fast"
slow：缓慢的
normal：正常的
fast：快速的
2）speed：动画的持续时间，单位为毫秒，3000代表（3s）
3）[callback]：动画完成时所触发的回调函数

********************************************************************

滑动效果（向上或向下滑动）
slideDown(speed,[callback]) ：以动画效果向下滑动
slideUp(speed,[callback]) ：以动画效果向上滑动
slideToggle(speed,[callback]) ：以动画效果向上或向下滑动

********************************************************************

淡入淡出效果（透明度设置）
fadeIn(speed,[callback]) ：以动画效果淡入
fadeOut(speed,[callback]) ：以动画效果淡出
参数说明：
speed：动画的持续时间
[callback]：动画完成时所触发的回调函数
fadeTo(speed,opacity,[callback]) ：设置元素的透明度
参数说明：
speed：动画的持续时间
opacity：元素的透明度（0全透明 1不透明 0-1之间半透明）
[callback]：动画完成时所触发的回调函数

********************************************************************

自定义动画
animate(params,[speed]) ：自定义动画
参数说明：
params：自定义动画效果，要求是一个json格式的对象
[speed]：动画持续时间


********************************************************************

jQuery文档操作
插入
删除
复制
替换
包裹
查找
1、插入操作（内部插入）
append(content) ：把content内容插入到元素的尾部
appendTo(content) ：把匹配到的内容插入到content元素的尾部
prepend(content) ：把content内容插入到元素的头部
prependTo(content) ：把匹配到的内容插入到content元素的头部

2、插入操作（外部插入）
after(content) ：在元素的尾部插入content内容
before(content) ：在元素的头部插入content内容
insertAfter(content) ：把匹配到的内容插入到content元素的尾部
insertBefore(content) ：把匹配到的内容插入到content元素的头部

3、删除操作
在jQuery代码中，删除一般有两种情况：
1）删除元素的内容，但是保留标签 empty()
2）删除元素的内容同时也删除元素的标签 remove()

4、复制操作（克隆元素）
clone() ：克隆元素但不是不克隆元素本身的事件
clone(true) ：克隆元素且克隆元素本身的事件

5、替换操作
replaceWith() ：实现元素节点的替换
html()、text() ：实现元素内容（值）的替换

6、包裹操作
wrap() ：对每个匹配的元素进行单独包裹
wrapAll() ：对所有匹配的元素进行一次包裹
wrapInner() ：对每个匹配的元素的内容进行单独包裹

7、查找操作
eq(index) ：匹配索引等于index的元素
filter(expr) ：过滤（但是这个过滤不是过滤掉元素而是缩小查询的范围）
not(expr) ：匹配除指定选择器以外的其他元素
children([expr]) ：匹配当前元素的所有子元素（只有一级关系）
find(expr) ：匹配当前元素的所有后代元素（可能具有多级关系）
next([expr]) ：匹配当前元素紧邻的下一个元素（要求是同级兄弟节点）
prev([expr]) ：匹配当前元素紧邻的上一个元素（要求是同级兄弟节点）
parent([expr]) ：匹配当前元素的父元素
siblings([expr]) ：匹配当前元素的所有同级兄弟节点（包括上面也包括下面）

***********************************************************************

2、实现jQuery插件扩展
jQuery.fn.extend(object) 或 $.fn.extend(object)
语法：
jQuery.fn.extend({
//属性：扩展函数的名称，右边的函数就是函数的具体实现
    fn1:function(){},
    fn2:function(){},
    ......
});