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

本文介绍如何使用jQuery进行元素属性操作、添加或移除样式类及获取HTML、文本或表单值的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

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

相关API介绍

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标签。只有熟悉每一个小的细节,才能在大的项目中游刃有余。
分享是一种态度

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值