jQuery属性/CSS使用例子
jQuery属性/CSS
1、.attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性。
例1:获取元素的属性的值
<p title="段落1" class="p1">我是一个段落</p>
<div>div</div>
<script type="text/javascript">
$(function(){
var p1=$('.p1').attr('title');
$('div').text('p1').css('color','red');
});
</script>
效果:
我是一个段落 p1
例2: 设置每一个匹配元素的一个或多个属性
<p class="p1">这是第一个段落</p>
<div>这是一个div</div>
<script type="text/javascript">
$(function(){
$('.p1').attr('id','p1');
$('div').attr({
'id':'div1',
'class':'div1'
});
$('#p1').css('color','red');
$('.div1').css('color','blue');
});
</script>
效果:
这是一个段落
这是一个div
2、.prop() 获取匹配的元素集中第一个元素的属性(property)值或设置每一个匹配元素的一个或多个属性。
<input type="checkbox" />
<script>
$(function(){
$("input[type='checkbox']").prop("checked", "checked");
});
</script>
效果:
3、.removeAttr() 为匹配的元素集合中的每个元素中移除一个属性(attribute)
<input type="checkbox" disabled="disabled"/>
<input type="submit" disabled="disabled" />
<script>
$(function(){
$("input[type='submit']").removeAttr("disabled");
});
</script>
效果:本来是submit是禁用的,移除了属性后变为可点击的;而checkbox没有移除disabled属性,则依然是禁用的。
4、removeProp() 用来删除由.prop()方法设置的属性集。
注意: 不要使用此方法来删除原生的属性( property ),比如checked, disabled, 或者 selected。
这将完全移除该属性,一旦移除,不能再次被添加到元素上。使用.prop()来设置这些属性设置为false代替。
<p></p>
<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
$('p').prop({
"abc":1234
});
if ($('p').prop("abc")){
$('#div1').text(String($('p').prop("abc")));
}
$('p').removeProp("abc");
if ($('p').prop("abc")){
$('#div2').text("abc");
}
});
</script>
效果
1234
5、.val() 获取匹配的元素集合中第一个元素的当前值或设置匹配的元素集合中每个元素的值。这个方法不接受任何参数,主要用于获取表单元素的值。
<input type="submit" value="提交"/>
<p></p>
<script>
$(function(){
var $value=$("input[type='submit']").val();
$('p').text($value).css('color','red');
});
</script>
效果:
6、.addClass() 为每个匹配的元素添加指定的样式类名。
<p>这是p段落</p>
<script>
$(function(){
$('p').addClass('p1');
$('.p1').css('color','blue');
});
</script>
效果:
这是p段落
7、.css() 获取匹配元素集合中的第一个元素的样式属性的计算值 或 设置每个匹配元素的一个或多个CSS属性。这个方法在上面例子中早已使用。
<p class="p1">这是p段落</p>
<script>
$(function(){
$('.p1').css({
width:"200",
color:'red',
border:'1px solid #ccc'
});
});
</script>
效果:
8、.hasClass() 确定任何一个匹配元素是否有被分配给定的(样式)类。
<div class="div1">我是div1</div>
<script>
$(function(){
var res=$('div').hasClass('div1');
if (res){
$('div').css('color','red');
}
});
</script>
效果:
我是div1
9、removeClass() 移除集合中每个匹配元素上一个,多个或全部样式。
<style type="text/css">
.div1{
color: red;
}
</style>
<div class="div1">我是div1</div>
<script>
$(function(){
$("div").removeClass("div1");
});
</script>
效果:移除了类名为.div后,样式便不起作用了。
我是div1
10、.toogleClass() 用来切换匹配集合中的每个元素的一个或多个样式类名(用空格隔开)。
<style type="text/css">
p {
font-weight: bolder;
cursor: pointer;
} .highlight {
background: yellow;
}
</style>
<p class="blue">Click to toggle</p>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "highlight" );
});
</script>
效果:点击第一次与点击第二次,期间类名发生了反转。
11、.height() 获取匹配元素集合中的第一个元素的当前计算高度值 或 设置每一个匹配元素的高度值。
<p>这是一个段落</p>
<script type="text/javascript">
$(function(){
$( "p" ).height(50).css('background-color','blueviolet');
});
</script>
效果:
12、innerHeight() 用于获得匹配集合中第一个元素的当前计算的内部高度(包括padding,但不包括border),或 设置每一个匹配元素的内部高度。这个方法不接受任何参数。该方法返回元素的高度,包括顶部和底部的padding,单位是像素。
<style type="text/css">
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
}
</style>
<div class="div1">
<p class="p1"></p>
</div>
<script type="text/javascript">
$(function(){
var height= $('p').innerHeight();
$('div').text(height);
});
</script>
效果:
10
13、outerHeight() 获取匹配元素集合中第一个元素的当前计算宽度值,包括padding,border和选择性的margin。返回一个整数(不包含“px”)表示的值 ,或如果在一个空集合上调用该方法,则会返回 null。
<style type="text/css">
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
}
</style>
<div class="div1">
<p class="p1"></p>
</div>
<script type="text/javascript">
$(function(){
var height= $('p').outerHeight();
$('div').text(height);
});
</script>
效果:
12
14、outerWidth() 获取元素集合中第一个元素的当前计算宽度值,包括padding,border和选择性的margin。(愚人码头注:返回一个整数(不包含“px”)表示的值,或如果在一个空集合上调用该方法,则会返回 null。)
<style type="text/css">
p {
width: 100px;
border: 2px solid #666;
}
</style>
<div class="div1">
<p class="p1"></p>
</div>
<script type="text/javascript">
$(function(){
var width= $('p').outerWidth();
$('div').text(width);
});
</script>
效果:
102
15、innerWidth() 用于获得匹配集合中第一个元素的当前计算的内部宽度(包括padding,但不包括border),或 设置每一个匹配元素的内部宽度。
<style type="text/css">
p {
padding: 10px;
width: 100px;
border: 2px solid #666;
}
</style>
<div class="div1">
<p class="p1"></p>
</div>
<script type="text/javascript">
$(function(){
var width= $('p').innerWidth();
$('div').text(width);
}); </script>
效果:
120
16、.width()
<p>这是一个段落</p>
<script type="text/javascript">
$(function(){
$( "p" ).width(100).css('background-color','blueviolet');
});
</script>
效果:
17、offset() 在匹配的元素集合中,获取的第一个元素的当前坐标,或设置每一个元素的坐标,坐标相对于文档。
<style type="text/css">
p { margin-left:10px; }
</style>
<p>Hello</p>
<p>2nd Paragraph</p>
<script type="text/javascript">
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
效果:
Hello
left: 18, top: 50
18、.offsetParent() 取得离指定元素最近的含有定位信息的祖先元素。含有定位信息的元素指的是,CSS 的 position 属性是 relative, absolute, 或 fixed 的元素。
<style type="text/css">
.div1{
width: 100px;
height: 50px;
position: relative;
}
</style>
<div class="div1">
div1
<p class="p1"></p>
</div>
<script type="text/javascript">
$(function(){
$('.p1').offsetParent().css('background-color','red');
});
</script>
效果:
19、.position()
<style type="text/css">
div { padding: 15px;}
p { margin-left:10px; }
</style>
<div>
<p>Hello</p>
</div>
<p></p>
<script type="text/javascript">
$(function(){
var p = $("p:first");
var position = p.position();
$("p:last").text( "left: " + position.left + ", top: " + position.top );
});
</script>
效果:
Hello
left: 23 top:23
20、.scrollLeft() 获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置。
21、.scrollTop() 获取匹配的元素集合中第一个元素的当前垂直滚动条的位置或设置每个匹配元素的垂直滚动条位置。
22、.data() 在匹配元素上存储任意相关数<style type="text/css">
div { color:blue; }
span { color:red; }
</style>
script type="text/javascript">
$(function(){
$("div").data("test", { first: 16, last: "div1!" });
$("span:first").text($("div").data("test").first);
$("span:last").text($("div").data("test").last);
}); </script>
效果:
The values stored were 16 and div1!
23、.removeData() 在元素上移除绑定的数据
<style type="text/css">
div { margin:2px; color:blue; }
span { color:red; }
</style>
<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
<script type="text/javascript">
$(function(){
$("span:eq(0)").text("" + $("div").data("test1"));
$("div").data("test1", "VALUE-1");
$("div").data("test2", "VALUE-2");
$("span:eq(1)").text("" + $("div").data("test1"));
$("div").removeData("test1");
$("span:eq(2)").text("" + $("div").data("test1"));
$("span:eq(3)").text("" + $("div").data("test2"));
});
</script>
效果:
jQuery属性/CSS使用例子的更多相关文章
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- jquery知识 属性 css
jquery基础知识 属性 css <!doctype html> <html lang="en"> <head> <meta chars ...
- jQuery 属性操作和CSS 操作
如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...
- 如何利用 jQuery 修改 css 中带有 !important 的样式属性?
使用 jQuery 修改 css 中带有 !important 的样式属性 外部样式为: div.test { width:auto !important; overflow:auto !import ...
- 使用jquery获取css的top和left属性
使用jquery获取css的top和left属性 因为left和top也都是普通的css属性所以可以使用如下代码来获取 var left = $('#test').css('left'); var t ...
- js进阶 11-3 jquery中css属性如何操作
js进阶 11-3 jquery中css属性如何操作 一.总结 一句话总结:通过css()方法 1.attr和css是有交叉的,比如width,两者中都可以设置,那么他们的区别是什么? 其实通俗一点 ...
- jquery的api以及用法总结-属性/css/位置
属性/css 属性 .attr() attr()设置普通属性,prop()设置特有属性 获取或者设置匹配的元素集合中的第一个元素的属性的值 如果需要获取或者设置每个单独元素的属性值,需要依靠.each ...
- js、jquery、css属性及出错集合
*)注意使用jquery设置css的语法 css("propertyname","value");#单个时时逗号 css({"propertyname ...
随机推荐
- JSDeferred 源码分析
不经意看到了一个构思非常惊人的异步流程控制库,发出来分享下 http://cho45.stfuawsc.com/jsdeferred/ 关于CommonJS Promises请看另一个异步库 http ...
- 深入理解this机制系列第一篇——this的4种绑定规则
× 目录 [1]默认绑定 [2]隐式绑定 [3]隐式丢失[4]显式绑定[5]new绑定[6]严格模式 前面的话 如果要问javascript中哪两个知识点容易混淆,作用域查询和this机制绝对名列前茅 ...
- Codeforces Round #323 (Div. 2) C.GCD Table
C. GCD Table The GCD table G of size n × n for an array of positive integers a of length n is define ...
- BAT及各大互联网公司2014前端笔试面试题--Html,Css篇
很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...
- 你需要知道的包管理器(Package Manager)
最近我花了一点时间关注了在不同系统之中所用到的包管理器(Package Manager) .最开始的时候,我是在使用Linux操作系统时,对这种工具以及它背后的想法深深迷恋住了:这真是自由的软件世界. ...
- Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试
在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...
- UWP开发之Mvvmlight实践三:简单MVVM实例开发(图文详解付代码)
在做MVVM各种框架对比之前,我觉得有必要先自己做一个简单的MVVM实现案例比较好,这样就可以看到自己实现的时候有那些不方便的地方.而各种框架又是怎么解决我们这些麻烦的. 案例介绍:用户登录画面,没有 ...
- MySQL官方.NET Core驱动已出,支持EF Core
千呼万唤始出来MySQL官方.NET Core驱动已出,支持EF Core. 昨天MySQL官方已经发布了.NET Core 驱动,目前还是预览版,不过功能已经可用. NuGet 地址:https:/ ...
- 12个不可不知的Sublime Text应用技巧和诀窍
本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...
- 常见的几个meta标签元素
1.指定字符集: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/& ...