jQuery中的CSS（二）

时间：2016-09-15 21:35:28 阅读：229 评论：0 收藏：0 [点我收藏+]

标签：

一：获取样式和设置样式

技术分享

4.移除样式：

技术分享

5.切换样式

技术分享

6.判断是否包含某个样式

技术分享

二：设置或获取HTML、文本和值

html()

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

返回值

String

示例

HTML 代码:

<div><p>Hello</p></div>

jQuery 代码:

$("div").html();

结果:

<p>Hello</p>

html(val)

设置每一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

返回值

jQuery

参数

val (String) : 用于设定HTML内容的值

示例

HTML 代码:

jQuery 代码:

$("div").html("<p>Hello Again</p>");

结果:

[ <div><p>Hello Again</p></div> ]

text()

取得所有匹配元素的内容。

结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。

返回值

String

示例

HTML 代码:

<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>

jQuery 代码:

$("p").text();

结果:

Test Paragraph.Paraparagraph

text(val)

设置所有匹配元素的文本内容

与 html() 类似, 但将编码 HTML (将 "<" 和 ">" 替换成相应的HTML实体).

返回值

jQuery

参数

val (String) : 用于设置元素内容的文本

示例

HTML 代码:

<p>Test Paragraph.</p>

jQuery 代码:

$("p").text("<b>Some</b> new text.");

结果:

[ <p><b>Some</b> new text.</p> ]

val()

获得第一个匹配元素的当前值。

在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。

返回值

String,Array

示例

获得单个select的值和多选select的值。

HTML 代码:

<p></p><br/>
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select>

jQuery 代码:

$("p").append(
"<b>Single:</b> " + $("#single").val() +
" <b>Multiple:</b> " + $("#multiple").val().join(", ")
);

}结果:

[ <p><b>Single:</b>Single<b>Multiple:</b>Multiple, Multiple3</p>]

获取文本框中的值

HTML 代码:

jQuery 代码:

$("input").val();

结果:

some text

val(val)

设置每一个匹配元素的值。

在 jQuery 1.2, 这也可以为select元件赋值

返回值

jQuery

参数

val (String) : 要设置的值。

示例

设定文本框的值

HTML 代码:

jQuery 代码:

$("input").val("hello world!");

val(val)

check,select,radio等都能使用为之赋值

返回值

jQuery

参数

val (Array<String>) : 用于 check/select 的值

示例

设定一个select和一个多选的select的值

HTML 代码:

<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2

jQuery 代码:

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);

三：CSS-DOM

1：CSS

css(name)

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

返回值

String

参数

name (String) : 要访问的属性名称

示例

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

jQuery 代码:

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

css(properties)

把一个“名/值对”对象设置为所有匹配元素的样式属性。

这是一种在所有匹配的元素上设置大量样式属性的最佳方式。

返回值

jQuery

参数

properties (Map) : 要设置为样式属性的名/值对

示例

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

jQuery 代码:

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

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

jQuery 代码:

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

css(name,value)

在所有匹配的元素中，设置一个样式属性的值。

数字将自动转化为像素值

返回值

jQuery

参数

name (value) : 属性名

value (String, Number) : 属性值

示例

将所有段落字体设为红色

jQuery 代码:

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

2: 位置

offset()

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。

返回值

Object{top,left}

示例

获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

结果:

<p>Hello</p><p>left: 0, top: 35</p>

3：宽高

height()

取得第一个匹配元素当前计算的高度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的高

返回值

Integer

示例

获取第一段的高

jQuery 代码:

$("p").height();

获取文档的高

jQuery 代码:

$(document).height();

height(val)

为每个匹配的元素设置CSS高度(hidth)属性的值。如果没有明确指定单位（如：em或%），使用px。

如果没有明确指定单位（如：em或%），使用px。

返回值

jQuery

参数

val (String, Number) : 设定CSS中 ‘height‘ 的值

示例

把所有段落的高设为 20:

jQuery 代码:

$("p").height(20);

width()

取得第一个匹配元素当前计算的宽度值（px）。

在 jQuery 1.2 以后可以用来获取 window 和 document 的宽

返回值

Integer

示例

获取第一段的宽

jQuery 代码:

$("p").width();

获取当前窗口的宽

jQuery 代码:

$(window).width();

width(val)

为每个匹配的元素设置CSS宽度(width)属性的值。

如果没有明确指定单位（如：em或%），使用px。

返回值

jQuery

参数

val (String, Number) : 设定 CSS ‘width‘ 的属性值}

示例

将所有段落的宽设为 20:

jQuery 代码:

$("p").width(20);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>15-1</title>
<style type="text/css">
.high{
 font-weight:bold;   /* 粗体字 */
 color : red;        /* 字体颜色设置红色*/
}
.another{
 font-style:italic;
 color:blue;
}
</style>
 <!--   引入jQuery -->
     <script src="../scripts/jquery-1.2.6.js" type="text/javascript"></script>
    <script src="../scripts/jquery-1.2.6-vsdoc-cn.js" type="text/javascript"></script>
 <script type="text/javascript">
 //<![CDATA[
  $(function(){
      //获取样式
      $("input:eq(0)").click(function(){
			alert( $("p").attr("class") );
	  });
      //设置样式
	  $("input:eq(1)").click(function(){
			$("p").attr("class","high");
	  });
      //追加样式
	  $("input:eq(2)").click(function(){
			$("p").addClass("another");
	  });    
	  //删除全部样式
	  $("input:eq(3)").click(function(){
			$("p").removeClass();
	  });  
	   //删除指定样式
	  $("input:eq(4)").click(function(){
			$("p").removeClass("high");
	  });   
	  //重复切换样式
	  $("input:eq(5)").click(function(){
			$("p").toggleClass("another");
	  });  
	  //判断元素是否含有某样式
	  $("input:eq(6)").click(function(){
			alert( $("p").hasClass("another") )
			alert( $("p").is(".another") )
	  });  
  });
  //]]>
  </script>
</head>
<body>
    <input type="button" value="输出class类"/>
	<input type="button" value="设置class类"/>
	<input type="button" value="追加class类"/>
	<input type="button" value="删除全部class类"/>
	<input type="button" value="删除指定class类"/>
	<input type="button" value="重复切换class类"/>
	<input type="button" value="判断元素是否含有某个class类"/>

	<p class="myClass" title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
	<ul>
	  <li title=‘苹果‘>苹果</li>
	  <li title=‘橘子‘>橘子</li>
	  <li title=‘菠萝‘>菠萝</li>
	</ul>
</body>
</html>

jQuery中的CSS（二）

标签：

原文地址：http://www.cnblogs.com/sunliyuan/p/5875450.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行