打杂之WEB前端（二） jQuery 操作DOM总结，DOM Html操作，DOM Css操作

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()	获取元素的滚动条距左侧的距离。

打杂之WEB前端（二） jQuery 操作DOM总结，DOM Html操作，DOM Css操作

定义和用法

猜你喜欢