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：待拷贝到第一个对象的对象