基本选择
用法 描述
$("#elementID") #表示根据 id 查找; 查找 id 为 elementID 的元素; 建议的用法. 所以一般推荐给标签设置 ID.
类似:
document.getElementById("elementID") 但两者之间返回类型不同
$(".className") . 表示根据 class 样式名称查找; 查找样式名称为 className 的所有标签
$("input") 查找所有 input 标签
基本取 / 设值
用法 描述
- $("#elementID").val()
- $("#elementID").val("新值")
分别表示取值和设置值
- $("#elementID").html()
- $("#elementID").html("新值")
分别表示获取标签内部的 html 文本内容和设置 html 文本内容. 类似 innerHTML
- $("#elementID").text()
- $("#elementID").text("新值")
分别表示获取标签内部的纯文本内容和设置纯文本内容.
- $("#elementID").attr("name")
- $("#elementID").attr("name","itcast")
attr 为获取对应属性的值或设置对应属性的值. 如果遇上具有 true 和 false 两个属性的属性, 如 checked, selected 或者 disabled 则使用 prop()
- <meta charset="UTF-8">
- <title>01_basic.html</title>
- <!--<script type="text/javascript" th:src=@{"js/jquery-3.3.1.js}"></script>-->
- <script src="../../static/js/jquery-3.3.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- $("#btn1").click(function(){
- alert($("#div1").html());
- });
- $("#btn2").click(function(){
- alert($(".divClass").text());
- });
- $("#btn3").click(function(){
- alert($("#div1").attr("title"));
- });
- $("#btn4").click(function(){
- alert($("input").length);
- });
- $("#btn5").click(function(){
- $("#div1").html("div 内容修改!!");
- });
- $("#btn6").click(function(){
- alert("div 的内容:"+$("#div1").text() + ",span 的内容:" + $("span").text())
- });
- });
- </script>
- <style>
- .divClass{
- text-align: center;
- width: 100%;
- }
- </style>
- </head>
- <body>
- <div id="div1" class="divClass" title="div 的 title 属性值">
- <p>div 的内容 </p>
- </div>
- <br><br>
- <input type="text" value="输入框 1"><br>
- <input type="text" value="输入框 2"><br><br>
- <span > 这是 span 的信息 </span><br>
- <input type="button" value="1# 获取 div 里面的 Html 内容" id="btn1">
- <br><br>
- <input type="button" value="2. 获取 div 里面的纯文本内容" id="btn2">
- <br><br>
- <input type="button" value="3# 获取 div 里面的 title 属性的值" id="btn3">
- <br><br>
- <input type="button" value="4 获取 input 的个数" id="btn4">
- <br><br>
- <input type="button" value="5 改变 div 里面的值" id="btn5">
- <br><br>
- <input type="button" value="同时获取 div 和 span" id="btn6">
- <br><br>
来源: http://www.bubuko.com/infodetail-2666514.html