jQuery 是一个 javascript 库，可以简化 js 编程。
All jQuery functions start with a $, usually referred to as a dollar sign operator, or as bling. jQuery often selects an HTML element with a selector, then does something to that element.
我们再使用 jQuery 的时候是有那个这样的先搭一个这样的架子
<script>
$(document).ready(function(){
});
</script>
Without your document ready function, your code may run before your HTML is rendered, which would cause bugs.
追加元素属性
For example, let's make all of your button elements bounce. Just add this code inside your document ready function:
$("button").addClass("animated bounce");
现在我们已经有这样一段代码：
<!-- 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>
只需要在前面加入这样的几行代码就能够为所有的 button 添加上 模拟动效。（不过这里有个隐藏了的东西就是 jQuery library 以及 Animate.css library 的引入）
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>
上面的示例中 jQuery 的使用是通过 selector （即 button）来实现的，我们也可以使用 class 来实现：
<script>
$(".well").addClass("aniimated shake");
</script>
注意一下这里面的 class 名称是带有 句号的，和我们在 style 中上声明一个类是一样的。
当然了，我们也可以使用 id 来操作：
<script>
$("#target1").addClass("animated fadeOut");
</script>
删除元素属性
我们可以猜到，使用完全一样的方式也可以进行 Class 的剔除，方法就是 .removeClass， 例如： ·$("#target2").removeClass("btn-default");·
使用 jQuery 改变元素样式（修改css）
We can also change the CSS of an HTML element directly with jQuery.
jQuery has a function called .css() that allows you to change the CSS of an element.
Here's how we would change its color to blue:
$("#target1").css("color", "blue");
This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.
抑制某元素（例如 button）
jQuery 中有一个 叫做 .prop() 的方法可以修改元素的属性。
jQuery 还可以修改除了 css 之外的属性，例如抑制一个 button，我们将会看到 被抑制之后的 button 将会变成灰色的并且不再可以点击 $("button").prop("disabled", true);
jQuery 的 .html 方法可以直接对 HTML 标签进行操作。
jQuery has a function called .html() that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.
Here's how you would rewrite and emphasize the text of our heading:
$("h3").html("<em>jQuery Playground</em>");
jQuery also has a similar function called .text() that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.
删除元素 .remove()
上面我们了解到 jQuery对元素属性的操作，可以为元素追加或者删除属性甚至抑制某个元素，其实 jQuery 还可以直接删除某个元素，所使用的方法是 .remove(),例如我们想要删除上面代码中的 #target4，可以是有那个这行代码：
$("#target4").remove()
我们这里面的 remove函数是不需要参数的，这样就可以直接删除这个元素了。
元素位置移动 .appendTo()
jQuery has a function called appendTo() that allows you to select HTML elements and append them to another element. For example, if we wanted to move target4 from our right well to our left well, we would use:
$("#target4").appendTo("#left-well");
元素的复制 .clone()
和 上面的 .remove()方法一样，这里面我们也是不需要参数的，语法是：
$("xxx").remove();`
链式方程 function chaining
多个方法是可以连用的，例如我们将 target5 复制一份到 left-well 里面的话就可以这样写：
$("#target5").clone().appendTo("#left-well");
父级/子集元素 .parent() / .children()
使用这个方法可以得到当前所选元素的父级元素，例如通过 #target5 来设置 #right-well 的背景色：
$("#target5").parent().css("backgroung-color","green");
设置 #right-well 里面的所有元素使用 橙色字体：
$("#right-well").children().css("color","orange");
网友评论