基本选择
用法 描述
$(“#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>
随时随地看视频
