JQ属性和css部分测试
1、attr(name|properties|key,value|fn) 设置或返回被选元素的属性值。
<div class="attr">设置或返回被选元素的属性值。</div>
<script>
$(".attr").html($(".attr").html()+$(".attr").attr("class"));
</script>
2、removeAttr(name) 从每一个匹配的元素中删除一个属性
<div class="removeAttr" id="abc">从每一个匹配的元素中删除一个属性</div>
<script>
$(".removeAttr").click(function(){
$(this).removeAttr("id");
})
</script>
3、prop(name|properties|key,value|fn) 获取在匹配的元素集中的第一个元素的属性值。
$("input[type='checkbox']").prop("checked");
4、removeProp(name) 用来删除由.prop()方法设置的属性集
$(".p01").removeProp("disabled");
5、addClass(class|fn) 为每个匹配的元素添加指定的类名。
$("option").addClass("selected");
6、removeClass([class|fn]) 从所有匹配的元素中删除全部或者指定的类。
$("option").removeClass("selected");
7、toggleClass(class|fn[,sw]) 如果存在(不存在)就删除(添加)一个类。
$("option").toggleClass("selected");
8、html([val|fn]) 取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
$('p').html();
获取内容
9、text([val|fn]) 取得所有匹配元素的内容。
$('p').text();
10、val([val|fn|arr]) 获得匹配元素的当前值。
$("input").val();
一般都是用来获取表单元素的
11、css(name|pro|[,val|fn]) 访问匹配元素的样式属性。
$("p").css({ "color": "#ff0011", "background": "blue" });
12、jQuery.cssHooks 直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。
(function($) {
// first, check to see if cssHooks are supported
if ( !$.cssHooks ) {
// if not, output an error message
throw("jQuery 1.4.3 or above is required for this plugin to work");
return;
}
$.cssHooks["someCSSProp"] = {
get: function( elem, computed, extra ) {
// handle getting the CSS property
}, set: function( elem, value ) {
// handle setting the CSS value
}
};
})(jQuery);
目的是为了一些前缀的标准统一化,让设置css时可以直接使用不加前缀就可以兼容。
13、offset([coordinates]) 获取匹配元素在当前视口的相对偏移。
返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效。
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
14、position() 获取匹配元素相对父元素的偏移。
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
15、scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
var p = $("p:first");
$("p:last").text( "scrollTop:" + p.scrollTop() );
16、scrollLeft([val]) 获取匹配元素相对滚动条左侧的偏移。
var p = $("p:first");
$("p:last").text( "scrollLeft:" + p.scrollLeft() );
17、height([val|fn]) 取得匹配元素当前计算的高度值(px)。
$("button").click(function(){
$("p").height(function(n,c){
return c+10;
});
});
返回用于设置高度的一个函数。接收元素的索引位置和元素旧的高度值作为参数。
18、width([val|fn]) 取得第一个匹配元素当前计算的宽度值(px)。
$("p").width();
19、innerHeight() 获取第一个匹配元素内部区域高度(包括补白、不包括边框)。
$(".p01").innerHeight();
20、innerWidth() 获取第一个匹配元素内部区域宽度(包括补白、不包括边框)。
$(".p01").innerWidth();
21、outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。
$(".p01").outHeight();
22、outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。
$(".p01").outWidth();
它们都可以传个true,把外边距计算在内
JQ属性和css部分测试的更多相关文章
- JQ系列:css操作
JQ中的 .css()有三种使用方法: $('#p').css('width'); 取得ID为p的样式属性的width值;等同 return width $('#p').css('width','10 ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- (转)面向属性的CSS命名
原文链接:戳这里 自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根 ...
- 面向属性的CSS命名
自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来 ...
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- 背景新增属性和css渐变及倒影
背景新增属性和css渐变及倒影 一.background新增属性 background-size:指定对象的背景图像的尺寸大小. background:url() 0 0,url() 0 100%;多 ...
- 小tip:巧用CSS3属性作为CSS hack——张鑫旭
一.开篇小问题 题目:实现类似下图的宽度自适应效果,IE9+,FireFox,Chrome,Opera等使用CSS3实现,IE6~8浏览器使用图片实现. 计时思考…… 二.思考中 ————- 假设这是 ...
- 第一百六十六节,jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度、偏移、滚动条
jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...
- 前端设计的常用属性,CSS的盒模型,页面布局的利器
在CSS和HTML结合布局页面的过程中,有一组被人们称为“盒属性”的CSS样式,被广泛的使用到.相信经常布局写页面的朋友们对盒属性一定不陌生.在CSS技术的发展过程中,盒属性也有了许多次改进,今天小编 ...
随机推荐
- stream_copy_to_stream的使用
stream_copy_to_stream - 在数据流之间进行复制操作 例子: <?php //读写方式 $stream = fopen('php://temp', 'w+'); //如果成功 ...
- Windows XP SP3下编译安装openssl-1.1.0b
软件需要: openssl-1.1.0b visual studio 2010(cn_visual_studio_2010_ultimate_x86_dvd_532347.iso) perl:Acti ...
- 柬埔寨手机上网资费套餐(3G/4G上网)
柬埔寨三大运营商 Cellcard 官网套餐详情http://www.cellcard.com.kh/cellcard-internet Metfone 官网套餐详情http://www.met ...
- php session的存放目录,再次回顾
session的存放位置可以通过运行时配置ini_set和函数session_save_path来设置 .session_save_path - 读取/设置当前会话的保存路径 string sessi ...
- mORMot使用基础
mORMot 名称来自Marmot,对,土拨鼠,俗称旱獭,是一种生活在高寒山区的动物.多数都在白天活动,喜群居,善掘土,所挖地道深达数米,内有铺草的居室,非常舒适.通常洞穴都会有两个以上的入口,以策安 ...
- 远程桌面Default.rdp 中各个参数的含义(转)
存储在 Default.rdp 文件中的设置 默认情况下,将在“我的文档”文件夹中创建 Default.rdp 文件.以下 RDP 设置存储在 Desktop.rdp 文件中: desktopwidt ...
- WebStorm License Activation (WebStorm许可证激活)
User or company name(用户或公司名称): EMBRACE License key(许可证密钥): ===== LICENSE BEGIN =====89374-12042010 ...
- Apache+PHP配置运行环境(getenv的使用)
在开发与上线等多个环境下,常量的配置一般不同,例如开发环境和生产环境的一些域名肯定不一样,为了保证代码上线就能运行,要求在代码运行开始的时候对不同的环境区分这些常规变量. 找到Apache目录下虚拟主 ...
- xtrabackup工具
xtrabackup是基于InnoDB存储引擎灾难恢复的.它复制InnoDB的数据文件,尽管数据文件在内部是非一致性的,但在执行灾难恢复时可以保证这些数据文件是一致的,并且可用. 官方原理 在Inno ...
- Lucene.Net+盘古分词器(详细介绍)(转)
出处:http://www.cnblogs.com/magicchaiy/archive/2013/06/07/LuceneNet%E7%9B%98%E5%8F%A4%E5%88%86%E8%AF%8 ...