文章目录
-
- 开始学习jQuery和准备工作
- jQuery使用选择器获取HTML元素
- jQuery使用addClass()方法给元素加class
- jQuery根据id属性来获取元素
- 删除没有必要的jQuery方法语句
- 使用jQuery选择器操作同一元素
- 使用jQuery删除HTML元素的class
- 使用jQuery改变HTML元素的CSS样式
- 使用jQuery设置元素不可用
- 使用jQuery改变元素中的文本
- 使用jQuery删除一个HTML元素
- jQuery使用appendTo()移动HTML元素
- jQuery使用clone()方法复制元素
- jQuery使用parent()操作父级元素
- jQuery使用children()操作子级元素
- jQuery使用target:nth-child(n) CSS选择器获取子元素
- jQuery使用选择器操作偶数索引元素
- 使用jQuery修改整个页面
开始学习jQuery和准备工作
现在让我们开始学习最流行的JavaScript框架jQuery吧。至于JavaScript,不用担心,我们很快就会涉及到它。
在我们开始学习使用jQuery之前,需要在HTML文件中添加一些代码。
任务:首先,在页面顶部添加一行script
元素,然后在下一行写上结束符。
浏览器会运行
scrip
t里所有的Javascript,包括jQuery。
在你的script
元素里,添加这段代码:$(document).ready(function() {
到你的script
中,然后在下一行用});
结束它。
接下来我们将学习如何写
function
,需要注意的是,function
里面的代码会在浏览器加载页面后立即运行。这很关键,因为在没有
document ready function
以前,你的代码可能会在HTML渲染完成之前就执行了,这样会产生bug。
<script>
$(document).ready(function(){
});
</script>
<!-- Only change code above this line. -->
<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>
jQuery使用选择器获取HTML元素
现在,我们已经了解了document ready function
。
接下来,让我们开始写第一个jQuery语句,所有jQuery方法都是以$
开头,通常称为 美元符号
,或者简称为bling
。
jQuery通过选择器
来选择一个HTML元素,然后对元素做些改变。
任务:例如,要让所有的button
元素有弹回效果,只要把这段代码写在document ready function
里面就可以了:
$("button").addClass("animated bounce");
注意,我们已经在后台为你引入了jQuery库和Animate.css库,你可以在编辑器里直接使用这两个库,从而通过jQuery给button
元素添加Animate.css的bounce
回弹动画效果。
另外,请务必使用$("button").addClass("animated bounce");
,而不是$('button').addClass("animated bounce");
,因为单引号选择器无法通过我们的测试。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
<!-- Only change code above this line. -->
<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>
jQuery使用addClass()方法给元素加class
你已经了解我们是怎么给所有的button
做弹回效果了吗?
我们用
$("button")
来选择按钮,然后用.addClass("animated bounce")
给按钮加CSS class。
你只需要用jQuery的.addClass()
方法,就可以给元素加class了。
任务:首先,让我们使用$(".well")
来获取所有带有well
class的div
元素。
注意,像使用CSS声明一样,你需要在class的名称前面添加一个.
然后使用jQuery的.addClass()
方法添加2个class:animated
和shake
。
例如,你可以将下面的代码写在document ready function
里,给所有具有text-primaryclass
的元素添加animated
和shake
:
$(".text-primary").addClass("animated shake");
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
});
</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>
jQuery根据id属性来获取元素
你还可以根据id属性来获取元素。
任务:首先,使用$("#target3")
选择器来选择id为target3
的button
元素。
注意,就像CSS声明一样,在id的名称前加上一个#
。
然后使用jQuery的.addClass()
方法来添加animated
和fadeOut
class。
以下是给id为target6
的button
元素添加fade out效果的代码:
$("#target6").addClass("animated fadeOut")
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("fadeOut");
});
</script>
<!-- Only change code above this line. -->
<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=