jQuery笔记

jQuery:
–javascript库

入口函数：等待DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕
–$ (document).ready(function(){});
–$ (function(){}); //推荐使用

$是jQuery的别称，可以相互替换：
–jQuery(document).ready(function(){});
–jQuery(function(){}); //推荐使用

注意：
–相当于原生JS中DOMContentloaded.
当纯HTML被完全加载以及解析时，DOMContentLoaded 事件会被触发，而不必等待样式表，图片或者子框架完成加载。
–不同于原生JS中的load事件是等页面所有资源加载完毕才执行内部代码。

//==================================================================

DOM对象：
–用原生JS获取的对象就是DOM对象

jQuery对象：
–使用jQuery获取的对象就是jQuery对象（以伪数组形式存储）

注意：
–DOM对象中不能使用jQuery对象方法，同样jQuery对象也不能使用DOM对象方法，只能转换后使用。

DOM对象和jQuery对象相互转换：
–DOM对象转换成jQuery对象：$(DOM对象);--jQuery对象转换成DOM对象：$(DOM对象)[index];或 $(DOM对象).get(index);

//==================================================================

jQuery常用选择器：
–基础选择器：
$(“选择器”); //可以嵌套选择器

–筛选选择器：
$(DOM对象:筛选器);
–first 获取第一个元素
–last 获取最后一个元素
–eq(index) 获取某个元素
–odd 获取索引为奇数的元素
–even 获取索引为偶数的元素

–筛选方法
.parents(selector) 查找祖先元素（含父元素）
.parent() 查找父级元素
.children(selector) 查找所有或特定所有的子元素
.find(selector) 相当于后代选择器
.siblings(selector) 查找兄弟选择器，不包括自己
.nextAll(selector) 查找当前元素之后的所有兄弟元素
.prevAll(selector) 查找当前元素之前的所有兄弟元素
.hasClass(class) 查看元素是否含有特定的类，有，返回true
.eq(index) 查找某个元素

//==================================================================

jQuery样式操作：
–css();
$(DOM对象).css(‘属性’); 返回属性的值，带单位的字符串
$(DOM对象).css(‘属性’,‘值’); 修改样式
$(DOM对象).css({‘属性’:‘值’,‘属性’:‘值’…}); 可以修改多个样式

–addClass(); 添加类
–removeClass(); 移除类
–toggleClass(); 切换类

注意：
–jQuery中的类操作在添加类的时候不会移除其他的类，而原生JS中的className会把其他的类移除

jQuery属性操作：
–获取属性值
–prop(“属性”); //获取固有属性
–attr(“属性”); //获取自定义属性
–设置属性
–prop(“属性”,“值”);
–attr(“属性”,“值”);

jQuery数据缓存：
–data(“属性”);
– 获取H5自定义属性不用写"data-"

–data(“属性”,“值”);
–设置的值存放在元素内存中，在DOM树上看不见

//==================================================================

jQuery隐式迭代：
–隐式遍历内部DOM元素（伪数组形式存储）的过程就叫隐式迭代。

jQuery效果：
–显示隐藏：
–show([speed],[easing],[callback]);
–hide([speed],[easing],[callback]);
–toggle([speed],[easing],[callback]);
–滑动：
–slideDown([speed],[easing],[callback]);
–slideUp([speed],[easing],[callback]);
–slideToggle([speed],[easing],[callback]);
–淡入淡出:
–fadeIn([speed],[easing],[callback]);
–fadeOut([speed],[easing],[callback]);
–fadeToggle([speed],[easing],[callback]);
–fadeTo([speed],opacity,[easing],[callback]);
–自定义动画：
–animate(params,[speed],[easing],[callback]);
–事件切换
–hover([fun1],[fn2]); 鼠标经过和离开的复合写法，如果只有一个函数，两个事件都会触发

动画队列：
–多次触发动画，在上一次动画没完成时，再次触发动画，那么动画就形成队列，队列执行
–使用.stop()方法解决，在下次动画触发时，停止当前的动画，执行下一次动画

//==================================================================

jQuery内容获取：只要按针对元素内容和表单值得操作
–普通元素内容:
–.html(); 获取元素中的内容（包含标签）
–.html(“内容”) 设置元素中的内容
–.text(); 获取元素中的内容（不包含标签）
–.text(“内容”); 设置元素内容
–.val(); 获取表单的值

保留小数点：
–toFixed(n);

jQuery遍历：
–$("Obj").each(function(index,domEle));--$.each(arr, function(index,domEle){}); //可以传入一个数组,对象

jQuery元素操作：
–创建元素
–$(DOM);
–添加元素
–.append();
–.prepend();
–.before();
–.after();
–删除元素
–.remove();
–.empty();
–.html("");

jQuery尺寸操作：
–width()/height() 取得/设置匹配元素的宽度/高度 只算width/height
–innerWidth()/innerHeight() 取得/设置匹配元素的宽度/高度 包含padding
–outerWidth()/outerHeight() 取得/设置匹配元素的宽度/高度 包含padding、border
–outerWidth(true)/outerHeight(true) 取得/设置匹配元素的宽度/高度 包含padding、border、margin

jQuery位置操作:
–offset() 设置或返回被选元素相对于文档的偏移坐标，跟父元素没关系
–position() 返回被选元素相对于带有定位的父级元素的偏移坐标
–scrollTop()/scrollLeft() 设置或返回页面卷曲的距离

jQuery事件处理：
–事件绑定
$(Ele).event(fn);
$(Ele).on(events,[selector],fn); 可以多个事件注册，传入一个事件对象

–事件解绑：
off(events,events…); 可以解绑多个事件
one(event,fn); 触发一次事件就解绑

jQuery对象拷贝
–$.extend([deep],target,object1,object2,…)
deep:如果为true为深拷贝,默认为false浅拷贝
target：要拷贝的目标对象
object1：待拷贝到第一个对象的对象