一、给元素添加(移除)类属性: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>