0
点赞
收藏
分享

微信扫一扫

jQuery中的CSS(二)

拾杨梅记 2022-10-19 阅读 55

一:获取样式和设置样式

jQuery中的CSS(二)_jquery

 

 

jQuery中的CSS(二)_jquery_02

 

 

jQuery中的CSS(二)_html_03

 

 

4.移除样式:

 

jQuery中的CSS(二)_html_04

5.切换样式

jQuery中的CSS(二)_css_05

 

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

jQuery中的CSS(二)_html_06

二:设置或获取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 代码:
<div></div>
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.");
结果:

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 代码:

<input
type="text" value="some text"/>

jQuery 代码:

$("input").val();

结果:

some text





val(val)
设置每一个匹配元素的值。
在 jQuery 1.2, 这也可以为select元件赋值
返回值
jQuery
参数
val (String) : 要设置的值。
示例
设定文本框的值
HTML 代码:
<input type="text"/>
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 代码:


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>

 



举报

相关推荐

0 条评论