1.你还可以用jQuery改变除了CSS以外的属性。比如，你可以让按钮变不可选。
当你把按钮设置成不可选以后，这会让按钮变灰并且不能点击。
jQuery有一个.prop()的方法让你来调整元素的属性.
我们是这样来让按钮不可选的:
$("button").prop("disabled", true);
$("button").prop("disabled", true);
来尝试让 target1 按钮不可选.
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled",true);
});
</script>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
2.jQuery不仅可以改变元素开始标记和结束标记间的文本，甚至可以改变元素标记本身。
jQuery的.html()方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。
我们是通过em[emphasize]标签来重写和强调标题文本的：
$("h3").html("<em>jQuery Playground</em>");
jQuery 还有一个类似的方法叫.text()，它只能改变文本但不能修改标记。换句话说，这个方法只会把传进来的任何东西(包括标记)当成文本来显示。
任务：强调id为target4按钮里的文本
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target4").html("<em>#target4</em>");
});
</script>
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>
3.现在让我们用jQuery来移除页面上的HTML元素吧.
jQuery 有一个.remove() 的方法可以移除HTML元素
试着使用.remove()方法来移除页面上的target4元素吧.
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
});
</script>
4.现在让我们尝试把元素从一个div里移到另外一个div里。
jQuery有一个appendTo()方法可以把选中的元素加到其他元素中。
比如，你想让target4从我们的从right-well移到left-well，我们可以这样使用:
$("#target4").appendTo("#left-well");
来试着把target2元素从left-well移到right-well中。
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
});
</script>
5.除了移动元素，你还可以拷贝元素。简单理解：移动元素就是剪切，拷贝元素就是复制。
jQuery的clone()方法可以拷贝元素。
比如，如果我想把target2从left-well拷贝到right-well，我们可以这样写:
$("#target2").clone().appendTo("#right-well");
你有没有发现两个jQuery方法合在一起使用了？这就叫方法链function chaining，使用起来很方便。
复制target5元素追加到left-well。
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
});
</script>
网友评论