码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习02

时间:2016-08-21 22:50:13      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:

1. jQuery操作样式
1.1 使用jQuery设置css样式
1.1.1 设置单个样式
jQueryobj.css(name,value);设置需要更改的属性名和属性值。
1.1.2 设置多个样式
jQueryobj.css(obj);obj:{name:value,name:value,...}由多个属性名和属性值组成的键值对组成的对象。
1.1.3 获取样式
jQueryobj.css(name);获取的是jQuery对象中第一个元素的对应属性的值。
1.2 使用jQuery设置class名
1.2.1 添加className
jQueryobj.addClass(className);在对象中追加指定的className,不影响原本存在的className。
1.2.2 移除className
jQueryobj.removeClass(className);在对象中找到并移除指定的className,如果未找到指定的className则无效果,如果未指定className则视为将该对象的所有className全部移除。
1.2.3 判断className是否存在
jQueryobj.hasClass(className);在对象的className中找是否存在指定的className,如果有返回true,如果没有则返回false。
1.2.4 切换className
jQueryobj.toggleClass(className);如果对象中存在指定的className,则将该className移除,如果对象中不存在指定的className,则给对象追加这个className。
2. jQuery动画
2.1 显示和隐藏动画
jQueryobj.show(speed,callback);让对象显示,如果不传入参数的话将直接显示对象,没有动画效果。
jQueryobj.hide(speed,callback);让对象隐藏,如果不传入参数的话将直接隐藏对象,没有动画效果。
jQueryobj.toggle(speed,callback);切换对象显示或隐藏状态,如果对象原来为显示状态则将对象隐藏,如果对象原来为隐藏状态则将对象显示,不传入传输也会有动画效果。
speed:动画执行的时间,callback:动画完成时执行的回调函数。
这组动画改变的是对象的宽度、高度和透明度。
2.2 淡入淡出动画
jQueryobj.fadeIn(speed,callback);让对象淡入,不传入参数也会有动画效果。
jQueryobj.fadeOut(speed,callback);让对象淡出,不传入参数也会有动画效果。
jQueryobj.fadeToggle(speed,callback);切换对象淡入或淡出状态,如果对象原来为完全透明则将
对象淡入,如果对象原来不为完全透明则将对象淡出。
jQueryobj.fadeTo(speed,to,callback);让对象淡入或淡出到指定的透明度,speed为必填参数,如果不填将会认为传入的to值为speed值。
to参数为需要淡入或淡出的目标透明度。
speed:动画执行的时间,callback:动画完成时执行的回调函数。
这组动画改变的是对象的透明度。
2.3 滑入和滑出动画
jQueryobj.slideDown(speed,callback);让对象滑入,不传入参数也会有动画效果。
jQueryobj.slideUp(speed,callback);让对象滑出,不传入参数也会有动画效果。
jQueryobj.slideToggle(speed,callback);切换对象滑入或滑出状态,如果对象原来高度为0时则将对象滑入,如果对象原来高度不为0则将对象滑出。
speed:动画执行的时间,callback:动画完成时执行的回调函数。
这组动画改变的是对象的高度。
2.4 自定义动画
jQueryobj.animate(prop, speed, easing, callback);自定义改变对象我们想要改变的属性及目标值。
prop:{name:value,name:value,...}由多个属性名和属性值组成的键值对组成的对象。
speed:动画执行的时间,callback:动画完成时执行的回调函数。
easing:动画执行时的显示效果。
2.5 参数详解
2.5.1 speed:可以传入两种值:
指定的字符串:fast、slow、normal。
数字:需要动画执行的时间,单位是ms。
2.5.2 callback:回调函数
在动画执行完再执行的函数,可以没有。
2.5.3 easing:动画显示效果
swing:动画的开始和结束时变化较慢,动画中间部分变化较快,成变化速度成正弦形式。
linear:匀速的线性变化,变化速度不变。
2.6 动画的队列
给一个对象注册多个动画,而注册的间隔时间很短时,所有被注册的动画需要依次等前面的动画执行完才会进行,这种现象就是动画队列。
jQueryobj.stop(clearQueue,jumpToEnd);停止当前正在执行的动画,它的两个参数分别表示:
clearQueue:是否清除动画队列中所有等待执行的动画。传入参数为boolean值。
jumpToEnd:是否跳转到当前动画的最终效果。传入参数为boolean值。
可以根据具体实现要求来设置stop的两个参数值。
3. jQuery操作DOM节点
3.1 创建DOM节点
$(htmlStr):htmlStr为html元素格式的字符串,$()的形式会将html字符串转换为jQuery对象。它的返回值就是这个对象。
3.2 添加DOM节点
3.2.1 append()
jQueryobj.append(jQueryobj);将这个参数对象追加到指定的父元素对象中,这个参数jQueryobj的内容可以是html元素格式的字符串,也可以是页面中获取的元素。
注意:如果参数为页面中获取的元素时,在追加的时候会将原页面元素剪切后粘贴到指定地方。
jQueryobj.append(htmlStr);会把htmlStr转换成jQuery对象后在进行添加。
jQuery会将这种字符串自动识别为DOM元素节点。
append()这种方法会将参数对象追加到指定对象的所有子元素的最后。
3.2.2 prepend(htmlStr/jQueryObj)
使用方法和注意点都和append完全一致,prepend()是将指定元素添加到当前对象的所有子元素的前面。
3.2.3 before(htmlStr/jQueryObj)
使用方法和注意点都和append完全一致,before()是将指定元素添加到当前元素的前面。
3.2.4 after(htmlStr/jQueryObj)
使用方法和注意点都和append完全一致,after()是将指定元素添加到当前元素的后面。
3.3 替换DOM节点
jQueryobj.html(htmlStr);将当前对象中的内容替换为指定的内容,会将htmlStr字符串自动识别为DOM元素节点。
3.4 清空DOM节点
3.4.1 jQueryobj.html("");将当前对象中的内容替换为空内容,不推荐使用这种方式的清空,因为这种只会情况内容,而内容对应的事件等都还保留在内存中。
3.4.2 jQueryobj.empty();清空当前对象的所有子元素,包括子元素对应的事件等。
3.5 删除DOM节点
jQueryobj.remove();删除当前对象,包括当前对象的所有子元素和注册的事件。
3.6 克隆DOM节点
jQueryobj.clone(flag);克隆当前对象,默认为深度克隆,且只能深度克隆。
参数flag为是否克隆当前对象注册的事件,传入值为boolean类型。

jQuery学习02

标签:

原文地址:http://www.cnblogs.com/chendu/p/5793818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!