jquery 属性与css操作
属性
1.属性
1.1 attr(name|properties|key,value|key,fn)
1) 获取属性值 $("img").attr("src");
2) 设置属性值 $("img").attr("title","你好");$("img").attr({src:"img1.png",alt:"img1"})
3) 设置属性值 $("img").attr("alt",function(index,value){return value + index}) //index为当前元素的索引,value为"alt"原先的属性值
1.2 removeAttr(name)
删除一个属性 $("img").removeAttr("alt");
1.3 prop(name|properties|key,value|key,fn)
$("input[type='checkbox']").prop("checked", true);
$("input[type='checkbox']").prop("checked", function( i, val ) { return !val; });
1.4 removeProp(name)
用来删除由.prop()方法设置的属性集
1.5 attr() 与 prop() 的区别
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
2.css类
2.1 addclass(class|fn)
$("p").addClasss("active focus");
$("ul li").addClass(function(i,class){return class+i})
2.2 removeClass([name|fn])
$("p").removeClass("active");
$("p").removeClass(function(){return $(this).attr("class")})
2.3 toggleClass(class|fn)
$("p").toggleClass("active");
$(".class").toggleClass(function(){
if($(this).parent().is(".myClass"))
{
return "classone";
}
else
{
return "classtwo";
}
})
3.HTML代码|文本|值
3.1 html([val|fn])
获取内容 $("div").html() 取得第一个匹配元素的html内容
设置内容 $("div").html("<p><span>htmlhtmlhtml</span></p>");
$("div").html(function(index,html){return html+index})
3.2 text([val|fn])
获取内容 $("p").text()
设置内容 $("p").text("texttexttext")
$("p").text(function(index,text){return index+text})
3.3 val([val|fn|arr])
获取值 $("input").val();
设置值 $("input").val("2222222");
$("input").val(function(index,value){return index + value})
用于 check/select 的值 //数组操作
$("input").val(["check2", "radio1"]);
CSS
1.css
1.1 css(name|pro|[,val|fn])
获取样式属性值 $("p").css("color")
设置样式属性值 $("p").css("color","red")
$("p").css({color:"red",width:"100px"})
$("p").css({
width:function(index,value){return parseFloat(value) * 1.2;},
height:function(index,value){return parseFloat(value) * 1.2;}
})
1.2 jQuery.cssHooks
2.位置
2.1 offset([coordinates]) 获取匹配元素在当前视口的相对偏移
获取偏移值 $("p").offset()
设置偏移值 $("p").offset({top:100,left:100})
$("p").offset(function(i,c){ //c代表选择器的当前坐标
newPos=new Object();
newPos.left=c.left+100;
newPos.top=c.top+100;
return newsPos;
})
2.2 position() 获取匹配元素相对父元素的偏移。
$("p").position()
2.3 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
获取 $("p").scrollTop()
设置 $("p").scrollTop(500)
2.4 scrollTop([val]) 获取匹配元素相对滚动条顶部的偏移。
获取 $("p").scrollLeft()
设置 $("p").scrollLeft(500)
3.尺寸
3.1 height([val|fn])
获取 $("p").height()
设置 $("p").height(500)
$("p").height(function(i,c){return c+200;})
3.2 width([val|fn])
获取 $("p").width()
设置 $("p").width(500)
$("p").width(function(i,c){return c+200;})
3.3 innerHeight() 获取第一个匹配元素内部区域高度(包括补白(padding)、不包括边框)。
$("p").innerHeight();
3.4 innerWidth() 获取第一个匹配元素内部区域宽度(包括补白(padding)、不包括边框)。
$("p").innerWidth();
3.5 outerHeight([options]) 获取第一个匹配元素外部高度(默认包括补白和边框)。
如果 options 值为true 则计算边距(margin)在内,默认值为false
3.6 outerWidth([options]) 获取第一个匹配元素外部宽度(默认包括补白和边框)。
如果 options 值为true 则计算边距(margin)在内,默认值
jquery 属性与css操作的更多相关文章
- 前端开发之jQuery属性和文档操作
主要内容: 1.jQuery属性操作 2.jQuery文档操作 一.jQuery属性操作 1.什么是jQuery的属性操作? jQuery的属性操作模块包括四个部分:html属性操作,dom属性操作, ...
- jQuery属性和样式操作
回顾 1. jquery基本使用 <script src="jquery.min.js"></script><script> $(functio ...
- jquery 学习(五) - CSS 操作
HTML + CSS 样式 /*CSS样式*/<style> body{ margin: 0; } div{ width: 100%; height: 2000px; background ...
- jQuery属性,方法操作
addClass() 向匹配的元素添加指定的类名.attr() 设置或返回匹配元素的属性和值.hasClass() 检查匹配的元素是否拥有指定的类.html() 设置或返回匹配的元素集合中的 HTM ...
- JQuery巧妙利用CSS操作打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- Jquery属性操作(入门二)
********JQuery属性相关的操作******** 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个 ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- JQuery DOM操作 、属性和CSS样式操作、其他函数
DOM操作 1.在div1内部最后追加一个节点 $("#div1").append("<img src='../01-HTML基本标签/img/Male.gif'/ ...
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
随机推荐
- 佛山Uber优步司机奖励政策(2月1日~2月7日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- hdoj 2767 Proving Equivalences【求scc&&缩点】【求最少添加多少条边使这个图成为一个scc】
Proving Equivalences Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 2016-5-19模拟测试 bzoj3652 bzoj3653 bzoj3654
T1 description 给定正整数\(n\),定义\(f(x) = \max{y \ \mathrm{xor}\ x}(y<n)\) \(x\)在\([0,n)\)随机取值,求\(f(x) ...
- spring 最全MAVEN 依赖引入配置
<properties> <spring.version>4.1.6.RELEASE</spring.version> </properties> &l ...
- CAS+SSO原理浅谈
http://www.cnblogs.com/yonsin/archive/2009/08/29/1556423.htmlSSO 是一个非常大的主题,我对这个主题有着深深的感受,自从广州 UserGr ...
- JMeter Tutorial的安装和具体操作
1.下载Jmeter 下载地址:http://jmeter.apache.org/download_jmeter.cgi 目前最新版为2.9,其余文件如源代码等也可从如下官网下载: http://jm ...
- 保持Service不被Kill掉的方法--双Service守护 && Android实现双进程守护
本文分为两个部分,第一部分为双Service守护,第二部分为双进程守护 第一部分: 一.Service简介:Java.lang.Object ↳Android.content.Context ↳an ...
- JavaBean中DAO设计模式介绍(转)
一.信息系统的开发架构 客户层-------显示层-------业务层---------数据层---------数据库 1.客户层:客户层就是客户端,简单的来说就是浏览器. 2.显示层:JSP/Ser ...
- getViewById和getLayoutInflater().inflate的用法
getViewById和getLayoutInflater().inflate得用法 1.什么是LayoutInflaterThis class is used to instantiate layo ...
- Mysql中int(1)的误解及说明
在mysql中使用int相关的数据类型时, 如果不太了解其存储方式, 会产生一些误用的情况. 如: 只保存0-9之间的数字, 可能会直接用int(1). 习惯性的以为int(1)就相当于varchar ...