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

来源：互联网发布：淘宝客服月工作计划编辑：程序博客网时间：2024/05/22 03:15

前言

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

测试用例

以下是对上面相关的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>