jquery操作css
样式操作
1. 获取和设置class attr()
<p class=”myclass” title=”选择喜欢的水果”>你最喜欢的水果是？<p>
在上面代码中，class也是p元素的属性，因此获取class和设置class都可以用attr()方法来完成
代码如下：
Var p_class=$(“p”).attr(“class”); //获取p元素的class
也可以用attr()方法来设置class
$(“p”).attr(“class”,”high”); //将p元素的class设置为high
在大多数情况下，它是将原来的class替换成新的class，而不是在原来基础上追加新的class
新的代码为
<p class=”high” title=”选择喜欢的水果”>你最喜欢的水果是？<p>
2. 追加样式 addclass()
<style>
.another{
Font-style:italic; /* 斜体 */
Color：blue；} /* 字体设为蓝色 */
</style>
在网页中追加一个样式
$(“input : eq(2)”).click(function(){
$(“p”).addclass(“another”);
})
|
方法 |
Addclass（） |
Attr（） |
|
对同一个网页操作 |
<p>test</p> |
|
|
第一次使用方法 |
$(“p”).addclass(“high”); |
$(“p”).attr(“class”,”high”) |
|
第一次结果 |
<p class=”high”>test</p>; |
|
|
再次使用方法 |
$(“p”).addclass(“another”); |
$(“p”).attr(“class”,”another”) |
|
结果 |
<p class=”high another”>test<p> |
<p class=” another”>test<p> |
3. 移除样式
通过 removeClass（）方法来完成
$(“p”).removeclass(“high”);
<p class=”high another”>test<p>,
将p两个类都移除
$(“p”).removeclass(“high”) .removeclass(“another”);
或
$(“p”).removeclass(“high another”)；
将类全部移除
$(“p”).removeclass()；
4. 切换样式
Jquery提供toggleclass()方法控制样式的切换
$(“p”).toggleclass(“another”);
判断是否包含某样式，如果有 返回true 否则 返回 false
$(“p”).hasClass(“another”); 相当于$(“p”).is(“.another”);
5. 设置或获取HTML、文本和值,含html代码
5.1.1 html()
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
返回值：String
示例
HTML 代码:
<div><p>Hello</p></div>
jQuery 代码:
$("div").html(); 相当于 $("div")[0].innerHTML; // $("div")[0] 转换为dom元素
结果:
<p>Hello</p>
5.1.2 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> ]
Alert（$("div").html("<p>Hello Again</p>") [0].outerHtml）; 弹出包含该div的html代码
5.2 text()，得到文本，不显示html代码
取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
返回值:String
示例
HTML 代码:
<p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
jQuery 代码:
$("p").text(); 相当于$(“p”)[0].innerText;
结果:
Test Paragraph.Paraparagraph
5.2.2 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> ]
5.3.1 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
5.3.2 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"); // single 值 为 single2 说明singl2被选中
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
CSS-DOM
1：CSS
1.1 css(name)
访问第一个匹配元素的样式属性。
返回值:String
参数:name (String) : 要访问的属性名称
示例
取得第一个段落的color样式属性的值。
jQuery 代码:
$("p").css("color");
css(properties) // properties JION对象
把一个“名/值对”对象设置为所有匹配元素的样式属性。
这是一种在所有匹配的元素上设置大量样式属性的最佳方式。
返回值:jQuery
参数:properties (Map) : 要设置为样式属性的名/值对
示例
将所有段落的字体颜色设为红色并且背景为蓝色。
jQuery 代码:
$("p").css({ color: "#ff0011", background: "blue" });
如果属性名包含 "-"的话，必须使用引号: //jion语法规定
jQuery 代码:
$("p").css({ "margin-left": "10px", "background-color": "blue" });
1.2 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: 宽高
3.1.1 height()
取得第一个匹配元素当前计算的高度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的高
返回值:Integer
示例
获取第一段的高
jQuery 代码:
$("p").height();
获取文档的高
jQuery 代码:
$(document).height();
3.1.2 height(val)
为每个匹配的元素设置CSS高度(height)属性的值。
如果没有明确指定单位（如：em或%），使用px。
返回值:jQuery
参数:val (String, Number) : 设定CSS中 'height' 的值
示例
把所有段落的高设为 20:
jQuery 代码:
$("p").height(20);
3.2.1 width()
取得第一个匹配元素当前计算的宽度值（px）。
在 jQuery 1.2 以后可以用来获取 window 和 document 的宽
返回值:Integer
示例
获取第一段的宽
jQuery 代码:
$("p").width();
获取当前窗口的宽
jQuery 代码:
$(window).width();
3.2.2 width(val)
为每个匹配的元素设置CSS宽度(width)属性的值。
如果没有明确指定单位（如：em或%），使用px。
返回值:jQuery
参数:val (String, Number) : 设定 CSS 'width' 的属性值
示例
将所有段落的宽设为 20:
jQuery 代码:
$("p").width(20);
| 方法 | 描述 |
|---|---|
| addClass() | 向匹配的元素添加指定的类名。 |
| attr() | 设置或返回匹配元素的属性和值。 |
| hasClass() | 检查匹配的元素是否拥有指定的类。 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容。 |
| removeAttr() | 从所有匹配的元素中移除指定的属性。 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类。 |
| toggleClass() | 从匹配的元素中添加或删除一个类。 |
| val() | 设置或返回匹配元素的值。 |
