1. Learn how Script Tags and Document Ready Work
现在让我们开始学习最流行的JavaScript库jQuery吧,不用担心JavaScript本身,我们稍后会提到它。
在开始学习使用jQuery之前,我们需要加一些代码到HTML文件中。
首先在页面顶端增加一行script元素,然后写上结束符。
浏览器会运行script 里所有的Javascript,包括jQuery。
在你的script里,添加这个方法:$(document).ready(function() {到你的script,接下来用});结束这个方法
接下来我们来学习如何写方法,方法里面的代码会被浏览器加载。
在没有document ready function以前,你的代码会在HTML没有渲染完成就执行,这样会产生bug。
2. Target HTML Elements with Selectors Using jQuery
现在我们已经知道 document ready function的用法了.
现在让我们开始写第一个jQuery语句,所有jQuery方法都是由$开始的,通常称作为 美元符号,或者简称为bling。
jQuery通过选择器来选择一个元素的,然后操作元素做些改变。
举个例子,要让所有的按钮做弹回效果,只要把这段代码写在document ready function里面就可以了。
$(“button”).addClass(“animated bounce”);
我们已经在后台为你引入了jQuery库和Animate.css库,这样你就可以在编辑器里直接可以使用这两个库,进而通过jQuery给button元素添加bounce回弹动画效果。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce")
});
</script>
3.Target Elements by Class Using jQuery
你看到我们是怎么给所有的按钮做弹回效果了吗?我们用 $(“button”)来选中按钮,然后用.addClass(“animated bounce”)给按钮加CSS class。
你只需要用jQuery的.addClass()方法,就可以给元素加class了。
首先,我们来使用$(".well")来获取所有class为well的div元素。
仔细想想为什么需要在well前面添加.
然后使用jQuery的.addClass()方法添加2个class:animated、shake。
例如,你可以将下面的代码写在document ready function里:
$(".text-primary").addClass(“animated shake”);
上面的代码给所有class为text-primary 的元素添加shake class。
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
});
</script>
4.Target Elements by ID Using jQuery
你还可以根据id属性来获取元素
首先用$("#target3")来选择id为target3的button元素。
注意,就像CSS一样,在id的名字前加上 #。
然后使用jQuery的.addClass()方法来添加 animated和fadeOutclass.
例如:下面的代码就是给id为target6的button元素添加fade out效果的:
$("#target6").addClass(“animated fadeOut”)
5.Target the same element with multiple jQuery Selectors
现在你已经了解了3种选择器:元素选择器: ( " b u t t o n " ) 、 c l a s s 选 择 器 : ("button")、class选择器: ("button")、class选择器:(".btn")、id选择器:$("#target1")。
尽管用.addClass()这种方式就可以加不同的class,不过还是让我们尝试用不同的方式给元素添加class吧。
用上面介绍的jQuery选择器和addClass()方法:
给所有type为button的元素添加animated class。
给所有class为.btn的按钮添加shake class。
给所有id为#target1的按钮添加btn-primary class。
6.Remove classes from an element with jQuery
你可以通过jQuery的addClass()方法给元素添加class,也可以通过jQueryremoveClass()方法去掉元素上的class。
像下面这样:
$("#target2").removeClass("btn-default");
$("#target2").removeClass("btn-default");
来尝试把所有button元素上的btn-default class移除掉。
7.Change the CSS of an Element Using jQuery
我们可以通过jQuery来改变HTML元素的CSS样式。
jQuery有一个叫做.css()的方法能让你改变元素的CSS样式。
我们是这样来把颜色改变成蓝色的:
$("#target1").css(“color”, “blue”);
这跟通常的CSS语法有点不同,这里CSS的属性和值是在引号内的,并且用逗号分开。
把你的document ready function清空,
来尝试把target1改变成红色。
8.Disable an Element Using jQuery
你还可以用jQuery改变除了CSS以外的属性。比如,你可以让按钮变不可选。
当你把按钮设置成不可选以后,这会让按钮变灰并且不能点击。
jQuery有一个.prop()的方法让你来调整元素的属性.
我们是这样来让按钮不可选的:
$(“button”).prop(“disabled”, true);
$(“button”).prop(“disabled”, true);
来尝试让 target1 按钮不可选.
9.Change Text Inside an Element Using jQuery
jQuery不仅可以改变元素开始标记和结束标记间的文本,甚至可以改变元素标记本身。
jQuery的.html()方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉。
我们是通过em[emphasize]标签来重写和强调标题文本的:
$(“h3”).html(“jQuery Playground”);
jQuery 还有一个类似的方法叫.text(),它只能改变文本但不能修改标记。换句话说,这个方法只会把传进来的任何东西(包括标记)当成文本来显示。
任务:强调id为target4按钮里的文本。
10.Remove an Element Using jQuery
现在让我们用jQuery来移除页面上的HTML元素吧.
jQuery 有一个.remove() 的方法可以移除HTML元素
试着使用.remove()方法来移除页面上的target4元素吧.