jquery中的属性和css
jQuery中的属性用于获取或设置元素的属性
1.attr(),获取或设置所有相匹配的元素的属性值;removeAttr("attr"),移除所有相匹配的元素的属性
//html
<img src="1.jpg" alt=""/> //jquery
$("img").attr("src")//"1.jpg"获取img的src属性值
$("img")attr({src:"2.jpg",alt:"this is a img"})//<img src="2.jpg" alt="this is a img"/> img的src值变为了"2.jpg",alt属性值变为了"this is a img"
$("img").removeAttr("alt")//<img src="2.jpg" /> 移除了img的alt属性,此时再次访问alt属性值会返回undefined。
2.prop(),获取或设置相匹配的元素中第一个元素的属性值;removeprop("attr"),移除相匹配的元素中第一个元素的属性
//html
<p title="first">first</p>
<p title="last">last</p> //jquery
$("p").prop("title","lucky")//<p title="lucky">first</p>只改变了第一个p的title值
$("p").attr("title","lucky")//<p title="lucky">first</p>,<p title="lucky">last</p>两个p的title值都改变了
$("p").removeProp("title")//<p>first</p>只移除了第一个p的title值
$("p").removeAttr("title","lucky")//<p>first</p>,<p>last</p>两个p的title值都移除了
3.addClass(“”),给元素增加类名,即class的属性值;removeClass(""),移除元素的类名;toggleClass(“”)元素有该类名移除,没有该类名则增加
//html
<div class="box">box1</div>
<div class="two">box2</div> //jquery
$("div").addClass("do")//<div class="box do">box1</div>,<div class="two do">box2</div>div元素都增加了do的类名
$("div").removeClass("do")//<div class="box">box1</div>,<div class="two">box2</div>div元素都移除了do的类名
$("div").toggleClass("box")//<div class="">box1</div>,<div class="two box">box2</div>第一个div移除了box类名,第二个div增加了box类名
4.html(),获取或设置元素中的内容,包括html标签。等同于js中的innerHTML;text(),获取或改变元素标签中的文本内容。等同于js中的textContent;val()获取元素的value值,等同于js中的value
//html
<div class="box">box<p>it's a p</p></div>
<div class="text">text<p>it's a p</p></div>
<input type="text" value="text"/> //jquery
//获取
$(".box").html()//“box it's a p” div标签中的内容以html方式获取
$(".box").text()//“box <p>it's a p</p>” div标签中的内容以text方式获取
$("input[type='text']").val()//"text" 获取input元素中的value值
//设置
$(".box").html("<u>aaa</ul>")// "aaa" div标签中的内容以html格式显现
$(".text").text("<u>aaa</ul>")//<u>aaa</ul> div标签中的内容以html格式显现
$("input[type='text']").val("noval")//<input type="text" value="noval"/>将input元素中的value值改为了noval
jquery中的css用于设置元素的css样式
1.css()设置元素的css样式
//html
<div class="box">it's a box</div> //jquery
$(".box").css({width:"100px",height:"100px",border:"1px solid #f00"})//div元素的宽变为了100px,高变为了100px,边框为红色的1px宽度的实线
2.jQuery.cssHook.直接向 jQuery 中添加钩子,用于覆盖设置或获取特定 CSS 属性时的方法,目的是为了标准化 CSS 属性名或创建自定义属性。$.cssHooks 对象提供了一种通过定义函数来获取或设置特定 CSS 值的方法。可以用它来创建新的 cssHooks 用于标准化 CSS3 功能,例如,盒子阴影(box shadows)及渐变(gradients)。
(function($) {
//判断是否存在cssHooks方法
if ( !$.cssHooks ) {
throw("jQuery 1.4.3 or above is required for this plugin to work");
return;
}
//元素是否有borderRadius属性
if ( borderRadius && borderRadius !== "borderRadius" ) {
$.cssHooks.borderRadius = {
//获取元素的borderRadius属性
get: function( elem, computed, extra ) {
return $.css( elem, borderRadius );
},
//设置元素的borderRadius属性
set: function( elem, value) {
elem.style[ borderRadius ] = value;
}
};
}
})(jQuery);
3.offset({coordinates}):获取或设置元素在当前视口中的位移,单位为px;position():获取元素相对于父元素的位移
//html
<div class="box">
<p>this is a p</p>
</div> //jquery
$(".box").offset({top:50,left:100})//div元素处于窗口距离左边100px,上边50px的位置
$(".box p").position()//返回p元素在div中的位置对象,该对象有left,top两个属性
4.scrollTop():获取或设置匹配元素相对滚动条顶部的偏移;scrollLeft():获取或设置匹配元素相对滚动条左边的偏移。这两种方法对可见和隐藏元素均有效。
//html
<div class="box">box</box> //jquery
$(".box").scrollTop(50).scrollLeft(100)//div元素处于距离滚动条上边50px,左边100px的位置。
5.height():获取或设置元素的高度;width():获取或设置元素的宽度;innerHeight():获取元素的高度(不包括元素的边框及外边距);innerWidth():获取元素的宽度(不包括元素的边框及外边距);outerHeight([option]):获取元素的高度,option为true时包括元素的边框及外边距;outerWidth():获取元素的宽度,option为true时包括元素的边框及外边距。
//html
<div class="box">this is a box</div> //style
.box{ width:100px;height:100px;border:1px solid #000;margin:50px 20px 0 0} //jquery
$(".box").width(200)//宽度变为200px
$(".box").height(300)//高度变为300px
$(".box").innderWidth()//200px
$(".box").innderHeight()//300px
$(".box").outerWidth(true)//222px
$(".box").outerHright(true)//352px
jquery中的属性和css的更多相关文章
- jQuery修改class属性和CSS样式
jQuery修改class属性和CSS样式 class属性修改 类属性即class属性,规定类名. 用类选择器规定样式的时候,需要为元素指定类名,即class属性的值. 注意每个HTML元素只有一个c ...
- js进阶 10-6 jquery中的属性选择器有哪些
js进阶 10-6 jquery中的属性选择器有哪些 一.总结 一句话总结: 1.第一遍能学会么? 一遍是肯定学不会的,要多学几遍,所以想着怎么加快速度,减少学习的遍数 2.属性选择器是干嘛的? 选择 ...
- JQuery中根据属性或属性值获得元素
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...
- JQuery中根据属性或属性值获得元素(6种情况获取方法)
根据属性获得元素 1.比如要获取页面p标签中属性有id的元素 $("p[id]").css("color","red"); 根据属性值获得元 ...
- jQuery中的属性选择器
先看代码,后面详细解释: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- jQuery中对属性的增删改查
获取元素的属性 $('input').attr('type') .attr() 可以获取和设置自定义属性 .prop() 只能获取和设置固有属性 在设置属性值时 建议不要修改type属性,有的浏览 ...
- Jquery中animate可以操作css样式属性总结
可以用 animate() 方法来操作所有 CSS 属性吗? 是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate()时, 必须使用 Camel 标记法书写所有的属性名,比如,必须使用 ...
- jQuery(三)、属性、CSS
jQuery设置了很多为标签进行属性的操作,比如添加.删除. 一 .属性 1 attr(name | properties | [key, value | fn]) 设置或返回被选择的属性值. 参数: ...
- jQuery中的属性(四)
1. attr(name|properties|key,value|fn), 设置或返回被选元素的属性值 参数说明: name:属性名称 properties:作为属性的“名/值对”对象 key,va ...
随机推荐
- poj 1964 Cow Cycling(dp)
/* 一开始想的二维的 只维护第几只牛还有圈数 后来发现每只牛的能量是跟随每个状态的 所以再加一维 f[i][j][k]表示第i只牛 领跑的j全 已经消耗了k体力 转移的话分两类 1.换一只牛领跑 那 ...
- [HAOI2006]聪明的猴子
/* 找出能连通所有点的一棵树 是的最大的边最小 很显然就是最小生成树. 堆优化prim. */ #include<iostream> #include<cstring> #i ...
- C#进程启动实例
1.调用widnows资源管理器打开文件夹 private void OpenFolder(string folder) { System.Diagnostics.Process.Start(&quo ...
- javascript实现silverlight pivotViewer控件
一时无事,就用js实现了一个silverlight pivotViewer控件来练手. 实现效果: silverlight PivotViewer说明地址:https://msdn.microsoft ...
- Windows计划任务 未能启动
近期在windows server 2003上运行的备份脚本,在7月23日之后,没再运行,在计划任务里看到的状态是:未能启动.结果手动运行了一下备份脚本,没有问题,可以正常运行,但是在计划任务里为什么 ...
- 保障MySQL安全的14个最佳方法
MySQL数据库一贯以高性能.高可性和易用性著称,它已经成为世界上最流行的开源数据库.大量的个人.WEB开发者.大型公司等都在其网站.关键系统.软件包中广泛使用MySQL数据库. 通常, ...
- maven实现tomcat热部署
1.使用maven+tomcat事项热部署 1.1修改tomcat-user.xml <role rolename="manager-gui"/> <!--man ...
- 【C++学习之路】派生类的构造函数(三)
三.多层继承的派生类 1.多层继承的派生类只需在构造函数的初始化列表中写出直接基类的构造函数即可 class student { public: student(int n, string nam) ...
- php global范例
Example #1 $GLOBALS 范例 <?phpfunction test() { $foo = "local variable"; echo '$foo in ...
- 数值统计 AC 杭电
数值统计 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...