JQuery【属性、CSS类、html、文本、值】

前言

本文主要涉及到如何使用jQuery获取标签的属性值,如何获取并添加标签样式,如何获取标签内的html内容或文本内容或者是input输入框的值等。

相关API介绍

attr(name)

JQuery【属性、CSS类、html、文本、值】_第1张图片

attr(properties)

JQuery【属性、CSS类、html、文本、值】_第2张图片

attr(key, value)

JQuery【属性、CSS类、html、文本、值】_第3张图片

attr(key, function(index, attr))

JQuery【属性、CSS类、html、文本、值】_第4张图片

removeAttr(name)

JQuery【属性、CSS类、html、文本、值】_第5张图片

addClass(class)

JQuery【属性、CSS类、html、文本、值】_第6张图片

removeClass([class])

JQuery【属性、CSS类、html、文本、值】_第7张图片

toggleClass(class)

JQuery【属性、CSS类、html、文本、值】_第8张图片

html()

这里写图片描述

text()

JQuery【属性、CSS类、html、文本、值】_第9张图片

val()

JQuery【属性、CSS类、html、文本、值】_第10张图片

测试用例

以下是对上面相关的api测试代码,不理解的朋友们,请注意注释部分

<!DOCTYPE html>
<html>
<head>
    <title>JQuery属性</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<!--属性-->
<div id="sx">
    <input type="text" name="name" value="zhangsan">
</div>
<script type="text/javascript"> // 获取id为sx div下的input标签 var inputNode = $("#sx input"); // 获取相关的属性值 var nameAttr = inputNode.attr("name"); var valueAttr = inputNode.attr("value"); // alert("name: "+nameAttr +" value: "+valueAttr); // 结果:name: name value: zhangsan // 修改属性值 inputNode.attr("name","xingming"); inputNode.attr("value","lisi"); // 获取相关的属性值 nameAttr = inputNode.attr("name"); valueAttr = inputNode.attr("value"); // alert("name: "+nameAttr +" value: "+valueAttr); // 结果:name: xingming value: lisi // 移除相关属性 inputNode.removeAttr("name"); inputNode.removeAttr("value"); nameAttr = inputNode.attr("name"); valueAttr = inputNode.attr("value"); // alert("name: "+nameAttr +" value: "+valueAttr); // 结果:name: undefined value:  </script>
<!--CSS类-->
<style type="text/css"> .color{ color: red; } .bigFont{ font-size: 40px; } .opacityFont{ opacity: 0.5; } </style>
<div id="csstest">
    CSS类:测试中....
</div>
<button id="add">add Class</button>
<button id="delete">remove Class</button>
<button id="toggle">toggle Class</button>
<script type="text/javascript"> // add Class按钮添加点击事件 $("#add").click(function(){ var cssTestDiv = $("#csstest"); //获取id为csstest的div节点 alert("添加color样式"); cssTestDiv.addClass("color"); //添加color样式 alert("添加bigFont样式"); cssTestDiv.addClass("bigFont"); //添加bigFont样式 }); $("#delete").click(function(){ var cssTestDiv = $("#csstest"); //获取id为csstest的div节点 alert("移除color样式"); cssTestDiv.removeClass("color"); //移除color样式 alert("移除bigFont样式"); cssTestDiv.removeClass("bigFont"); //移除bigFont样式 }); $("#toggle").click(function(){ var cssTestDiv = $("#csstest"); //获取id为csstest的div节点 cssTestDiv.toggleClass("opacityFont"); //如果存在opacityFont样式则删除,不存在则添加 }); </script>
<!--HTML代码、文本、值-->
<div id="htmlTest">
    <span>xxxxxxxxx</span>
    <input type="text" name="age" value="20"></input>
</div>
<script type="text/javascript"> // 显示id为htmlTest的div中的html代码 alert($("#htmlTest").html()); //结果:<input type="text" name="age" value="20"></input> // div下span下的文本节点内容 alert($("#htmlTest span").text()); //结果:xxxxxxxxx // div下input的value值 alert($("#htmlTest input").val()); //结果:20 $("#htmlTest input").val(30); //给input输入框设置值 </script>
</body>
</html>

测试结果

此处并未显示所有的结果,具体请自行运行,查看效果。
JQuery【属性、CSS类、html、文本、值】_第11张图片

总结

进一步了解如何使用jQuery操作html标签。只有熟悉每一个小的细节,才能在大的项目中游刃有余。
分享是一种态度

你可能感兴趣的:(html,jquery,css)