热门关键字:
jquery > jquery教程 > jquery教程 > Jquery入门到精通(基础篇四)

Jquery入门到精通(基础篇四)

1469
作者:管理员
发布时间:2012/8/9 13:43:22
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=52

JQuery操作CSS方法
 

CSS和attr方法其实很相近,就是换了个名字, 所操作的对象不一样,只要大家不要把他们的用处搞混就好了,下面举个例子说明一下

css(name)

概述

访问第一个匹配元素的样式属性。

参数

nameString要访问的属性名称
实例

描述:取得第一个段落的color样式属性的值。

jQuery 代码:

$("p").css("color");

注意:这里所获取到的是style样式中color中的颜色值,和attr("color")是不一样的。
实例2:

描述:将所有段落的字体颜色设为红色并且背景为蓝色。

jQuery 代码:

$("p").css({ color: "#ff0011", background: "blue" });

描述:如果属性名包含 "-"的话,必须使用引号:

jQuery 代码:

$("p").css({ "margin-left": "10px", "background-color": "blue" });
实例3:

描述:将所有段落字体设为红色

jQuery 代码:

$("p").css("color","red");
实例4:

描述:逐渐增加div的大小

jQuery 代码:
  $("div").click(function() {
    $(this).css({
      width: function(index, value) {
        return parseFloat(value) * 1.2;
      },
      height: function(index, value) {
        return parseFloat(value) * 1.2;
      }
    });
  });

 
 
JQuery 操作html方法

html()方法不管是在实战还是调试的时候都是很常用的,举个简单的例子

alert($(id).html());

这样我们可以测式所获取的对象的Hmtl代码是什么,也就确定了所操作的对象。下面下介绍。

html()

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
实例1:

设置id=obj的内容

HTML代码:

<div id="obj"></div>

JQUERY代码:

$(".obj").html("这是我添加的内容");

结果:

<div id="obj">这是我添加的内容</div>

html()方法其实也可以接受两个参数,html(function(index, html)),index为元素在集合中的索引位置,html为原先的HTML值。

 




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:Jquery入门到精通(基础篇四)
友荐云推荐