您的位置：首页 > Web前端 > JQuery

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

2016-05-03 22:58 621 查看

前言

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

attr(name)

attr(properties)

attr(key, value)

attr(key, function(index, attr))

removeAttr(name)

addClass(class)

removeClass([class])

toggleClass(class)

html()

text()

val()

测试用例

以下是对上面相关的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操作html标签。只有熟悉每一个小的细节，才能在大的项目中游刃有余。

分享是一种态度

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航