8、样式操作
方法 | 描 述 |
attr() | 获取样式和设置样式。$("img").attr("width","180"); |
addClass() | 追加样式,向匹配的元素添加指定的类名。 |
removeClass() | 移除样式,从所有匹配的元素中删除全部或者指定的类。$("div").addClass("yangshi") |
toggleClass() | 切换样式。 |
hasClass() | 判断是否含有某个样式。 |
hasClass:
经常在用easyui 的 validator 校验 表单的时候 用户填写信息错误都会有个统一的样式提醒 ,可以根据那个样式来判断是否填写有误。一般这么写
var indexNameClass = $('#indexName').attr('class');//先获取到样式
if(indexNameClass == "validatebox-text validatebox-invalid"){
alert('警告');
}
也可以用hasClass 一次搞定
if($('#indexName').hasClass("validatebox-text validatebox-invalid")){
alert('警告');
}
toggleClass:
定义和用法
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
该方法检查每个元素中的类。如果不存在则添加类,如果已设置则删除之。这就是所谓的切换效果。
不过,通过使用 "switch" 参数,您能够规定只删除或只添加类。
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
.mainO
{
font-size:120%;
color:green;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p class="mainO">This is a paragraph.</p>
<p class="mainO">This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
无法切换
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main");
});
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>
<body>
<h1 id="h1">This is a heading</h1>
<p >This is a paragraph.</p>
<p >This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>
</body>
</html>
可以切换
所以上面那句红色的话很重要。
9、设置和获取HTML、文本和值
方法 | 描述 |
html() | 返回或设置被选元素的内容。$("p").html("Hello <b>world</b>!"); |
text() | 读取或者设置某个元素中的文本内容。 |
val() | 设置和获取元素的值。 |
10、遍历节点
方法 | 描述 |
children() | 获取匹配元素的子元素集合。 |
next() | 获取匹配元素后面紧邻的同辈元素。 |
prev() | 获取匹配元素前面紧邻的同辈元素。 |
siblings() | 获取匹配元素前后所有的同辈元素。 |
closest() | 获取最近的匹配元素,首先检查当前元素是否匹配,如果匹配则直接返回元素本身,如果不匹配则向上查找元素,逐级向上直到找到匹配选择器元素。 |
parent() | 获取集合中每个匹配元素的父级元素。 |
parents() | 获取集合中每个匹配元素的祖先元素。 |
其他 | find()filter()nextAll()prevAll() |
11、CSS-DOM操作
方法 | 描述 |
css() | 获取和设置style对象的各种属性。$("p").css("color","red");$("p").css({"color":"red","font-size":"30px"}); |
height() | 获取和设置元素高度。 |
width() | 获取和设置元素宽度。 |
offset() | 获取元素在当前视窗的相对偏移,返回的对象包括两个属性,即top和left。 |
position() | 获取元素相对于最近的一个(position样式属性设置为relative或者absolute的)祖父节点的相对偏移,返回的对象包括两个属性,即top和left。 |
scrollTop() | 获取元素的滚动条距顶端的距离。 |
scrollLef() | 获取元素的滚动条距左侧的距离。 |