【Jquery】之DOM操作

时间:2023-03-08 22:21:37

【Jquery】之DOM操作    Questions

本篇文章主要讲解Jquery中对DOM的操作,主要内容如下:

【Jquery】之DOM操作

【Jquery】之DOM操作

【Jquery】之DOM操作

【Jquery】之DOM操作

1    内容区

1.1  .addClass()

(1).addClass(className)

 <!DOCTYPE html>

 <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script> <title>Index</title>
<script>
$(document).ready(function () {
$("#BtnJq").click(function(){
$("#DivTest").addClass("DivClass");
})
})
</script>
</head>
<body>
<div id="DivTest"></div>
<input type="button" id="BtnJq" value="JqDomOperate"/>
</body>
</html>

【Jquery】之DOM操作

(2).addClass(function(index))

 <!DOCTYPE html>

 <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script> <title>Index</title>
<script>
$(document).ready(function () {
$("#BtnJq").click(function(){
$("#DivTest").addClass("DivClass");
$("#DivTest").addClass(function (index) {
return "DivClass" + index;
})
})
})
</script>
</head>
<body>
<div id="DivTest"></div>
<input type="button" id="BtnJq" value="JqDomOperate"/>
</body>
</html>

【Jquery】之DOM操作

(3).addClass(function(index,currentClass))

 <!DOCTYPE html>

 <html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.js"></script> <title>Index</title>
<script>
$(document).ready(function () {
$("#BtnJq").click(function(){
$("#DivTest").addClass(function (index,currentClass) {
return currentClass + index;
})
})
})
</script>
</head>
<body>
<div id="DivTest"></div>
<input type="button" id="BtnJq" value="JqDomOperate"/>
</body>
</html>

【Jquery】之DOM操作

未完,待续。。。。。。。。。

2    文献区

【01】http://www.jquery123.com/category/attributes/

【02】http://api.jqueryui.com

3     版权区

  • 感谢您的阅读,若有不足之处,欢迎指教,共同学习、共同进步。
  • 博主网址:http://www.cnblogs.com/wangjiming/。
  • 极少部分文章利用读书、参考、引用、抄袭、复制和粘贴等多种方式整合而成的,大部分为原创。
  • 如您喜欢,麻烦推荐一下;如您有新想法,欢迎提出,邮箱:2016177728@qq.com。
  • 可以转载该博客,但必须著名博客来源。