jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果)
jQuery 属性操作方法(以下方法前些日子学习过,不再赘述)
addClass()
attr()
hasClass()
html()
removeAttr()
removeClass()
toggleClass()
val()
jQuery CSS 操作函数
css()
$("p").css("color");//取得第一个段落的 color 样式属性的值
$(selector).css(name,value)//设置所有匹配元素的指定 CSS 属性
$(selector).css({property:value, property:value, ...})
$(".btn1").click(function(){
$("p").css("color","red");
});
height()
height() 方法返回或设置匹配元素的高度。
$(selector).height()
$(selector).height(length)
$(".btn1").click(function(){
$("p").height(50);
});
offset()
offset() 方法返回或设置匹配元素相对于文档的偏移(位置) $(selector).offset()
返回第一个匹配元素的偏移坐标。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效 $(selector).offset(value) $(".btn1").click(function(){
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);//值对,比如 {top:100,left:0}
});//返回或设置的是一个对象,包含.left和.top属性
offsetParent()
$(selector).offsetParent()//方法返回最近的祖先定位元素 //定位元素指的是元素的 CSS position 属性被设置为 relative、absolute 或 fixed 的元素。
可以通过 jQuery 设置 position,或者通过 CSS 的 position 属性 $("button").click(function(){
$("p").offsetParent().css("background-color","red");
});//设置最近的祖先定位元素的背景颜色
position()
$(selector).position()//position() 方法返回匹配元素相对于父元素的位置(偏移)(类似offset()),此方法只返回不设置
$(".btn1").click(function(){
x=$("p").position();
$("#span1").text(x.left);
$("#span2").text(x.top);
});
scrollLeft()
scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置,滚动条位于最左侧时,位置是 0
$(selector).scrollLeft()//返回第一个匹配元素的水平滚动条位置
$(selector).scrollLeft(position)//设置所有匹配元素的水平滚动条位置
$(".btn1").click(function(){
$("div").scrollLeft(100);
});选择器为导致滚动条出现的元素
scrollTop()
$(selector).scrollTop(offset)//返回或设置
$(".btn1").click(function(){
$("div").scrollLeft(100);
});
width()
$(".btn1").click(function(){
$("p").width(200);
});//width() 方法返回或设置匹配元素的宽度
$(selector).width()
$(selector).width(length)
jQuery 属性操作和CSS 操作的更多相关文章
- Jquery选择器大全、属性操作、css操作、文档、事件等
一.简介 定义 jQuery创始人是美国John Resig,是优秀的Javascript框架: jQuery是一个轻量级.快速简洁的javaScript库. jQuery对象 jQuery产 ...
- jQuery基础DOM和CSS操作
$('#box').html();//获取 html 内容$('#box').text();//获取文本内容,会自动清理 html 标签$('#box').html('<em>www.li ...
- Jq_文档操作方法、属性操作方法、CSS操作函数
JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() ...
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- JQuery第三天——CSS操作与JQuery事件
JQuery的CSS_DOM与样式操作 样式: 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成 ...
- jQuery(基础dom及css操作)
设置元素内容 元素属性操作 ---------- 元素样式操作 ---------------- 对象数组的遍历 测试代码: $(function () { var v=$('div').css([' ...
- jQuery属性遍历、HTML操作
jQuery 拥有可操作 HTML 元素和属性的强大方法. jQuery 遍历函数 jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. .add() 将元素添加到匹配元素的集合中. . ...
- jQuery 第三章 CSS操作
.css() .attr() .prop() .css() 参数填法:如下所示 ↓ 可填px 可不填,注意点:background-color 这类属性,需要填成 小驼峰式 background ...
- jQuery CSS 操作
jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数: $(selector).css(name,value) $(selector).css({properties}) $ ...
随机推荐
- Windows Azure 试用 for 世纪互联运维
前一段时间申请由世纪互联运维的和谐版Windows Azure的邀请嘛下来,今天花费了点时间注册了一下 注册邀请函, 根据提示输入邀请码之后会收到以下邮件 中国地区可选择建立的虚拟机,SQL Serv ...
- C# 反射 表达式树 模糊搜索
反射实体T,非datetime字段反射获取表达式树 public static Expression<Func<T, bool>> GetSearchExpression& ...
- 运用预加载提升H5移动页面的用户体验
原文地址:http://www.grycheng.com/?p=2188 在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用 ...
- 【pyhton】短路逻辑
编程语言常用的逻辑if a and b:#如果a是false,那么跳过b的判断,结果直接falseif a or b:#如果a为true,那么跳过b的判断,直接true
- uboot环境变量区为何不能放在data段
一.疑问 环境变量也是全局变量,为何不能像其他的全局变量放在data段呢?为什么要放在堆中或者使用ENV_IS_EMBEDDED定义的CFG_ENV_SIZE的空间大小,又为什么需要这么大的空间呢? ...
- iOS 仪表式数字跳动动画-b
前几天搞了 双曲线波浪动画(http://www.jianshu.com/p/7db295fd38eb)和环形倒计时动画(http://www.jianshu.com/p/d1d16dff33c9)而 ...
- 关于Java(常用数据类型)
工作中,除非特殊需要,一般使用的数据类型较为单一. int int 是最常用的类型之一,一般能满足判断或循环的需求 float 或 double 两个浮点类型,可以在一定程度上确保数据的精度 BigD ...
- [BZOJ 2440] [中山市选2011] 完全平方数 【二分 + 莫比乌斯函数】
题目链接:BZOJ - 2440 题目分析 首先,通过打表之类的方法可以知道,答案不会超过 2 * k . 那么我们使用二分,对于一个二分的值 x ,求出 [1, x] 之间的可以送出的数有多少个. ...
- ios7新特性1-UI变化、UIKit动态行为支持与Text Kit新接口
iOS 7.0新特性1 iOS 7的UI经过了重新设计.另外,iOS7中引入了新的动画系统,便于创建2D和2.5D的游戏.多任务支持提升,点对点通讯以及其他重要的特征使iOS7相对于以往的SDK来说发 ...
- HTTP-304 NOT Modified
http://www.douban.com/note/161120791/ http://blog.sina.com.cn/s/blog_4c98b9600100jd4z.html http://ww ...