JQuery Study Notes

JQuery Study Notes

---

• document ready function的用法

<script>
  $(document).ready(function() {
  });
</script>

所有jQuery方法都是由$开始的，通常称作为美元符号，或者简称为bling。
jQuery通过选择器来选择一个元素的，然后操作元素做些改变。

例如，让所有的按钮做弹回效果，只要把这段代码写在document ready function里面就可以了。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

---

• 3种选择器：
  
  1. 元素选择器：$("button")
  2. class选择器：$(".btn")
  3. id选择器：$("#target1")。

---

• JQuery中的一些方法：

方法名	用途	代码	备注
.addClass()	给元素添加class
.removeClass()	去掉元素上的class
.css()	改变元素的CSS样式	$(“#target1”).css(“color”, “red”);
.prop()	调整元素的属性	$(“button”).prop(“disabled”, true);
.html()	添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉	$(“h3”).html(“jQuery Playground“);	通过em[emphasize]标签来重写和强调标题文本
.text()	只能改变文本但不能修改标记		这个方法只会把传进来的任何东西(包括标记)当成文本来显示
.remove()	可以移除HTML元素		$(“#target4”).remove();
.appendTo()	可以把选中的元素加到其他元素中	$(“#target4”).appendTo(“#left-well”);	让target4从right-well移到left-well
.clone()	可以拷贝元素	$(“#target2”).clone().appendTo(“#right-well”);	把target2从left-well拷贝到right-well
.parent()	它允许你访问指定元素的父元素	$(“#left-well”).parent().css(“background-color”, “blue”)	让left-well 元素的父元素parent()的背景色变成蓝色
.children()	它允许你访问指定元素的子元素	$(“#left-well”).children().css(“color”, “blue”)	让left-well 元素的子元素children()的文本颜色变成蓝色

---

• 其他方法

名称	作用	代码	备注
:
target:nth-child(n)	CSS选择器允许你按照索引顺序(从1开始)选择目标元素的所有子元素	$(“.target:nth-child(3)”).addClass(“animated bounce”);	给目标元素的第三个子元素添加bounce class
		$(“.target:odd”).addClass(“animated shake”);	获取class为target且索引为奇数的所有元素，并给他们添加class

---

两个jQuery方法合在一起使用，这就叫方法链(function chaining)。
一些例子：
- $("body").addClass("animated fadeOut"); –让整个body都有淡出效果;(fadeOut)
- $("body").addClass("animated hinge"); –整个页面垮掉，不见;
- 使用$(".well")来获取所有class为well的div元素。