类样式操作
添加类样式
addClass(className) 为指定元素添加类className
$(selector).addClass(“liItem”);
移除类样式
removeClass(className) 为指定元素移除类 className
$(selector).removeClass(“liItem”);
$(selector).removeClass(); 不指定参数,表示移除被选中元素的所有类
判断有无类样式
hasClass(calssName) 判断指定元素是否包含类 className
$(selector).hasClass(“liItem”);
切换类样式
toggleClass(className) 为指定元素切换类 className,该元素有类则移除,没有指定类则添加。
$(selector).toggleClass(“liItem”);
jQuery节点操作
创建元素 $(“<div>我是div</div>”)
内部追加元素
$(selector).append() - 在被选元素的结尾(内部)插入内容
$(selector).append(node);
$(selector).append($(‘<div></div>’));
$(selector).appendTo(node); - 追加到.. ,把选择到的元素追加到node中
$(selector).appendTo(selector);
父节点.prepend(子节点)
外部追加元素
$(selector).after(node) - 在被选元素之后插入内容
$(selector).before(node) - 在被选元素之前插入内容
替换节点
$(selector).replaceAll(node) -新节点替换旧节点
清空元素 $(selector).empty(); // 清空所有子元素(光杆司令)
$(selector).remove(); // “自杀” 把自己删除掉
jQuery表单操作
设置属性
$(selector).attr(“title”,”baizhi”);
获取属性
$(selector).attr(“title”);
移除指定属性
$(selector).removeAttr(“title”)
值和内容
$(selector).text() - 设置或返回所选元素的文本内容
$(selector).html() - 设置或返回所选元素的内容(包括 HTML 标记)
$(selector).val() - 设置或返回表单字段的值
获取和设置方法名相同,通过不同参数来确定是获取还是设置值
宽高:
height (): $(selector).height(); //带参数设置,不带参数获取,参数是number类型
width() : $(selector).width(200); //带参数设置,不带参数获取
innerWidth():包含content + padding
outerWidth() :包含content + padding + border
如果传一个参数true,就再加上margin
偏移量:
offset().top
offset().left
滚动量:
scrollTop() scrollLeft()
jQuery动画
隐藏 显示
$(selector).show(speed,callback);
$(selector).hide(1000);
$(selector).toggle("slow");
三个方法的语法都一致,参数可以有两个,第一个是动画的速度,第二个是动画执行完成后的回调函数。
第一个参数是:可以是指定单词或者毫秒数
如果是slow,fast,normal参数。slow对应时长为600,normal为400,fast为200
淡入淡出
$(selector).fadeIn(speed, callback)
$(selector).fadeOut(1000)
$(selector).fadeToggle('fast',function(){})
$(selector).fadeTo(1000, .5); //淡入到 0透明,1不透明
滑动
$(selector).slideDown(speed,callback); // 显示
$(selector).slideUp(speed,callback); // 隐藏
$(selector).slideToggle(speed,callback);
自定义动画:
$(selector).animate({params},speed,callback);
支持的属性:
http://www.w3school.com.cn/jquery/effect_animate.asp
停止动画:
$(selector).stop();
// 第一个参数表示是否清空所有的后续动画
// 第二个参数表示是否立即执行完当前正在执行的动画
$(selector).stop(stopAll,goToEnd);
坐标值操作:
offset() 获取或设置元素相对于文档位置的方法
获取:$(selector).offset();
此时,返回一个object,包含left和top属性,值是相对于document的位置。
$(selector).offset({left:100, top: 150}); // 设置元素位置
position() 获取相对于其最近的定位的父元素的位置。
只能获取,不能设置。
相对与其最近的__定位__元素
返回一个object,包含left和top属性
例如:
$(selector).position();
$(selector).position().left