jquery新手入门教学(三)
来源:互联网 发布:番茄时钟软件 pc 编辑:程序博客网 时间:2024/05/01 16:07
类样式操作
添加类样式
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
- jquery新手入门教学(三)
- jquery新手入门教学(一)
- jquery新手入门教学(二)
- jquery新手入门教学(四)
- jQuery新手入门(三) 管理jQuery包装集
- 黑莓开发新手入门教学帖,如何制作一个能控制LED颜色的程序(三)
- struts-validator绝对新手入门教学
- JQuery新手入门理论知识
- VB新手入门之三
- 新手入门--输入格式三
- Pomelo 新手入门(三)
- NodeJs新手入门(三)
- python新手入门(三)
- jquery实例教学一
- WinDBG 使用教学(三)
- jQuery新手入门(六) AJAX快餐
- jQuery 技巧大全(新手入门篇)
- 全文索引---新手入门(三)
- 技术外包真的好吗?
- 工作日志记录:Android中为Editetxt设置软件盘的enter键为的显示为Search(搜索),并响应搜索行为
- WebService(5)——一个webService请求的流程
- Android 解锁和锁屏广播必须手动用代码注册
- php 自带过滤和转义函数
- jquery新手入门教学(三)
- android studio 创建java项目
- hive
- 11.7
- ubuntu 14.04 搜狗拼音输入法安装
- R语言神经网络keras,tensorflow,mxnet
- 栈的应用--逆波兰表达式
- 有功功率,无功功率,视在功率定义
- 微信小程序选项卡原理