jQuery笔记

mac2025-02-11  14

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对象: ( D O M 对 象 ) ; − − j Q u e r y 对 象 转 换 成 D O M 对 象 : (DOM对象); --jQuery对象转换成DOM对象: (DOM);jQueryDOM(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遍历: – ( " O b j " ) . e a c h ( f u n c t i o n ( i n d e x , d o m E l e ) ) ; − − ("Obj").each(function(index,domEle){}); -- ("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:待拷贝到第一个对象的对象

最新回复(0)