一、給元素添加(移除)類屬性:css
<script> $(document).ready(function() { $("button").addClass("animated"); //標籤選擇,添加類屬性 $(".btn").addClass("shake"); //類選擇器,添加類屬性 $("#target1").addClass("btn-primary"); //id選擇器,添加類屬性 $("button").removeClass("btn-default"); //標籤選擇,移除類屬性 }); </script>
二、改變元素的CSS:html
<script> $(document).ready(function() { $("#target1").css("color","red") //ID 爲target1的標籤元素改變顏色爲紅色 }); </script>
三、調整CSS外的其餘屬性:app
<script> $(document).ready(function() { $("#target1").prop("disabled", true); //設置按鈕不可用 }); </script>
四、修改標籤內容或刪除標籤:code
<script> $(document).ready(function() { $("#target1").remove(); //刪除ID爲target1的標籤 $("#target4").html("<em>#target4</em>"); //修改ID爲target4的標籤的內容爲傳入的內容 }); </script>
五、移動或複製標籤元素:htm
<script> $(document).ready(function() { $("#target2").appendTo("#right-well"); //將ID爲target2的標籤移動到ID爲right-well的容器中 $("#target5").clone().appendTo("#left-well"); //複製元素,以後添加到對應容器中 }); </script>
六、訪問元素的父級(或子級)元素:ip
<script> $(document).ready(function() { $("#target1").parent().css("background-color","red"); //父級元素背景色改成紅色 $("#right-well").children().css("color","orange"); //子元素文本變爲橙色 }); </script>