jQuery基础知识点梳理

javascript库:即library,一个封装好的特定的集合(方法和函数).
jQuery封装了JavaScript常用的功能代码,
jQuery入口函数:
1. $(function() {}).
2. $(document).ready(function() {}).

$(this):当前元素;

$(this).index(); 获取当前元素索引号
$(this).is(':checked');  获取复选框的状态  选中返回true 

DOM对象与jQuery对象互相转换:
DOM转换为jQuery对象:$('元素对象')
jQuery转换为DOM对象:
1. $('元素对象')[index]  index是索引号.
2. $('元素对象').get(index)  index是索引号

jQuery选择器:
$('选择器')

隐式迭代:把匹配到的所有元素内部进行遍历循环,子项相应的方法,

jQuery筛选选择器:
1. $('元素:first')获取第一个元素;
2. $('元素:last')获取最后一个元素;
3. $('元素:eq(n)')获取索引为第n个的元素;
4. $('元素:odd')获取索引号为奇数的元素;
5. $('元素:oeven')获取索引号为偶数的元素;
6. $('元素:checked')  查找被选中的表单元素:
7. $('元素:checked').length  查找被选中的表单元素个数:

jQuery筛选方法:
1. $('元素').parent() 查找父元素;
1.1 $('元素').parents('元素') 返回指定祖先级元素;
2. $('元素').children('元素') 查找子代;
3. $('元素').find('元素') 查找所有后代;
4. $('元素').siblings('元素') 除去自身的兄弟元素;
5. $('元素').nextAll() 查找元素之后的所有的同辈元素;
6. $('元素').prevAll() 查找元素之前的所有的同辈元素;
7. $('元素').eq(index) 查找索引号为index的元素 ;
8. $('元素').hasClass('类名') 查找是否带有特定类名,有返回 true ,

jQuery样式操作:
操作css方法:
1. $(this).css(属性)  :参数只写属性,则返回属性值
2. $(this).css('属性','属性值')  设置一组样式
2. $(this).css({ })  参数可以是对象形式,以 , 隔开.

设置类样式:
1. $('元素').addClass('类名');  添加类样式,不影响以前的类名,
2. $('元素').removeClass('类名');  删除类名,
3. $('元素').toggleClass('类名');  切换类名,

jQuery效果:
speed: 预定效果的字符串('slow','normal','fast')
easing:用来指定切换效果(默认'swing', 'linear')
fn: 在动画执行完后的回调函,执行一次,
注:参数都可以省略,

显示隐藏:
1. $('元素').shou([speed,[easing],[fn]]):  显示,
2. $('元素').hide([speed,[easing],[fn]]):  隐藏,
3. $('元素').toggle([speed,[easing],[fn]]):切换显示与隐藏效果,

滑动:
1. $('元素').slideDown([speed,[easing],[fn]]): 上滑
2. $('元素').slideUp([speed,[easing],[fn]]):下滑
3. $('元素').slideToggle([speed,[easing],[fn]]):切换滑动效果

淡出淡入:
1. $('元素').fadeIn([speed,[easing],[fn]]):淡入
2. $('元素').fadeOut([speed,[easing],[fn]]):淡出
3. $('元素').fadeToggle([speed,[easing],[fn]]):切换淡出淡入,
4. $('元素').fadeTo([speed,opacity,[easing],[fn]]):渐进方式调整到指定透明度,
opacity: 透明度必写,取值0到1之间,

注: 1. 如果是在左上角做动画， 是正向的方向做动画   slideDown向下出现   slideUp向上隐藏
2.如果是在右下角做动画， 是反向的方向做动画   slideDown向上出现   slideUp向下隐藏
总结： slideDown就是出现动画 ，slideUp就是隐藏动画 ， 没有固定动画方向

自定义动画:
1. $('元素').animate(params,[speed,[easing],[fn]])
params:想更改的样式属性,以对象形式传递,

$('元素').hover(function(){},function(){}) and  hover(function(){});鼠标经过和离开的复合写法,
stop():用于停止动画或效果,写在动画或效果前面,停止上一次的动画,

jQuery的属性操作:
设置或获取元素固有属性值:
获取属性值:
$('元素').prop('属性名')

设置属性值:
$('元素').prop('属性','属性值')

设置或获取元素自定义属性:
获取属性
$('元素').attr('属性')

设置属性
$('元素').attr('属性','属性值')

数据缓存
$('元素').date()

jQuery内容文本值
获取设置样式内容:
$('元素').html()

获取设置元素文本内容:
$('元素').text()

获取设置表单值
$('元素').val()
注:内容为空是获取,有值为修改,

jQuery遍历对象
1. $('元素').each(function(index,domEle){ })
index:是索引号,可以更改
domEle: dom元素对象,需转换$('domEle'),

2. $.each('元素',function(i,ele){ });
如果遍历jquery对象，使用$('元素').each(function(index,domEle){ })

如果遍历普通对象，使用$.each('元素',function(i,ele){ });

数据处理
创建元素
$('标签')  如:标签:

,

添加元素:
内部添加:父子关系
$('元素').append('标签名'),放到后面
$('元素').prepend('标签名') 放到前面

外部添加:是兄弟关系
$('元素').after('标签名')  放到后面
$('元素').before('标签名') 放到前面

删除元素
$('元素').remove() 移除自己
$('元素').mepty()  移除匹配元素里面的子节点
$('元素').html('')  移除匹配元素里面的子节点

jQuery尺寸.位置操作
jQuery尺寸:
$('元素').width()/hight():获取设置元素大小
$('元素').innerWidth()/innerHight():获取设置元素 width和height + padding 大小;
$('元素').outerWidth()/outerHight():获取设置元素 width和height + padding + border 大小 ;
$('元素').outerWidth(true)/outerHight(true):获取设置 width和height + padding + border + margin;
参数为空是获取,为数字是修改相应的值,

jQuery位置
$('元素').offset()  获取设置距离文档的位置（偏移）
$('元素').offset().top  获取设置距离文档顶部的位置（偏移）
$('元素').offset().left  获取设置距离文档左侧的位置（偏移）

$('元素').scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧

$('元素').position()  获取距离带有定位父级位置（偏移） position   如果没有带有定位的父级，则以文档为准,这个方法只能获取不能设置偏移
$('元素').position().top  用于获取距离定位父级顶部的距离
$('元素').position().left 用于获取距离定位父级左侧的距离,

$('元素').scorll() 用于获去被卷区的距离

jQuery事件注册:
单个事件注册:
element.事件(function() {  })

jQuery事件处理
on()绑定事件:
element.on('events',('子元素'),function() {}) events:事件类型,
element.on({事件1:function() {},})

事件委派:
给动态创建的元素绑定事件:
$('父元素').on('事件','子元素',function() { })

jQuery解除事件:
事件解绑off:
1. element.off();解除身上所有事件,
2. element.off('事件');解除此绑定事件,
3. element.off('事件','子元素');  解除事件委托;

one()事件:只能触发一次

自动触发事件 trigger
1. element.事件();
2. element.trigger('事件')
3. element.triggerHandler('事件');不会触发默认行为,

做动画回到滚动到某个位置:
$(body,html).animate({scrollTop:0})

$('元素').toFixed(n)末尾保留n位
$('元素').substr(n):截取字符串 n 是索引号

jQuery官网:www.//jquery.com/
其他版本:www.//code.jquery.com/

插件:
jQuery插件库: http://www.jq22.com/
jQuery之家:http://www.htmleaf.com/