jQuery入门第二天
3种选择器:元素选择器:$("button")
、class选择器:$(".btn")
、id选择器:$("#target1")
。
<script> $(document).ready(function() { $("button").addClass("animated bounce"); $(".well").addClass("animated shake"); $("#target3").addClass("animated fadeOut"); $("button").removeClass("btn-default");
$("button").remove("#target4"); }); </script>
jQuery有一个叫做.css()
的方法能让你改变元素的CSS样式。
我们是这样来把颜色改变成蓝色的:
$("#target1").css("color", "blue");
这跟通常的CSS语法有点不同,这里CSS的属性和值是在引号内的,并且用逗号分开.
让我们尝试把元素从一个div
里移到另外一个div
里。
jQuery有一个appendTo()
方法可以把选中的元素加到其他元素中。
比如,你想让target4
从我们的从right-well
移到left-well
,我们可以这样使用:
$("#target4").appendTo("#left-well")
除了移动元素,你还可以拷贝元素。简单理解:移动元素就是剪切,拷贝元素就是复制。
jQuery的clone()
方法可以拷贝元素。
比如,如果我想把target2
从left-well
拷贝到right-well
,我们可以这样写:
$("#target2").clone().appendTo("#right-well");
你有没有发现两个jQuery方法合在一起使用了?这就叫方法链function chaining
,使用起来很方便。
<script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); $("#target5").clone().appendTo("#left-well"); });
jQuery的.html()
方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。
我们是通过em
[emphasize]标签来重写和强调标题文本的:
$("h3").html("<em>jQuery Playground</em>");
jQuery 还有一个类似的方法叫.text()
,它只能改变文本但不能修改标记。换句话说,这个方法只会把传进来的任何东西(包括标记)当成文本来显示。