jQuery学习笔记(一)

　　jQuery的强大功能无需多言，其中学习的内容自然也是较多，查询API是必经之路的，总结复习也是必不可少的，此笔记多数案例也是来自API文档。

导入js文件

　　使用任意js框架，导入相关js文件都是第一步。鉴于jQuery 2.x版本对低端IE浏览器（IE8及以下）的支持问题，实际开发中，为了全兼容一般使用1.x的版本。我使用的是jQuery1.8.3 。

　　js文件一般都有普通版和压缩版，两者功能完全一样，压缩版只是去掉了多余的空格，在实际开发中使用，用以减小文件大小。但对于阅读来说极度不友好，所以学习阶段建议使用普通版。

<head>
    <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
</head>

jQuery核心函数

ready(fn) 返回值jQuery

　　此方法是事件模块中最重要的一个函数，表示DOM载入就绪时执行其中的函数，相当于原生js中的window.onload。

jQuery(document).ready(function(){
    // 文档就绪后要执行的操作
});

　　在js文件中有如下声明：

// Expose jQuery to the global object
window.jQuery = window.$ = jQuery;

　　所以需要使用jQuery的地方，可以用"$"代替。当然，上述代码一般都会使用其简写方式：

$(function(){
    //要执行的操作
});

　　和原生js中的onload不同的是，使用jQuery能多次绑定就绪事件，例如：

onload = function(){
    alert("a");
};
onload = function(){
    alert("b");
};

　　以上代码只能执行最后一次绑定中的方法，即弹出"b"；而使用jquery之后：

$(function(){
    alert("a");
});
$(function(){
    alert("b");
});

　　以上两个方法会按绑定的顺序全部执行，即先弹出"a"，在弹出"b"。不过需要这种操作的情况可能并不多见。

　　注：两者其实还有一个区别，即执行时机的区别。window.onload 必须等待页面中所有内容加载完毕（包括图片等）才会执行绑定的函数，而ready(fn) 在网页中所有的DOM结构绘制完毕后就执行，可能此时DOM元素关联的东西并没有加载完。

jQuery对象与dom对象转换

　　要想使用jQuery中的方法，只能用jQuery对象调用。切记不能用DOM对象调用jQuery方法，也不能用jQuery对象操作DOM对象属性。

　　DOM转jQuery：将dom对象用$()包裹即可，例如：

var $jquery1 = $(document.getElementById("#d1"));

　　注：习惯上，对jQuery对象的命名以"$"开头，这是为了容易区分两种对象，并没有特殊的含义。

　　jQuery转DOM：

　　var dom对象 = $jquery对象.get(0);　　或者　　var dom对象 = $jquery对象[0];

var div1 = $jquery1.get(0);
// 或者
var div1 = $jquery1[0];

jQuery(html,[ownerDocument])　　返回值jQuery

　　将一个dom对象包装成jQuery对象，第二个参数可选，用来设置dom对象的属性

$("<div>", {
  "class": "test",
  text: "Click me!",
  click: function(){
    $(this).toggleClass("test");
  }
}).appendTo("body");

jQuery([selector,[context]])　　返回值jQuery

　　这应该是jQuery中最常用的方法了，jQuery的核心功能都是通过这个函数来完成的。第一个参数通常是css选择器，第二个参数可选，表示查找的dom集。

　　jQuery提供的选择器

　　jquery提供的选择器大致分九种，查询API是很好的学习途径，这里仅作简单描述。

　　基本选择器：（没什么好说的）返回值id选择器是Array<Element>；其余是Array<Element(s)>；最常用的是id选择器。

　　#id　　　　通过id匹配元素
　　element　　通过元素名匹配
　　.class　　　通过给定的类匹配
　　*　　　　　匹配所有元素
　　selector1,selector2,selectorN　　多个选择器组合使用，用","隔开

　　层级选择器

　　ancestor descendant　　后代选择器：在给定祖先元素元素下匹配所有后代元素（包括直接子元素和间接子元素）

　　html代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

　　jQuery 代码:

$("form input")；

　　结果：

[ <input name="name" />, <input name="newsletter" /> ]

　　parent > child　　子元素选择器：在给定的父元素下匹配所有的子元素（只有直接子元素）

　　仍是上面的html代码，使用：

$("form > input")

　　结果：

[ <input name="name" /> ]

　　prev + next　　直接兄弟元素选择器：匹配所有紧接在 prev 元素后的 next 元素（必须紧接在后面才可以）

　　html代码：同上

　　jQuery代码：

$("label + input")

　　结果：

[ <input name="name" />, <input name="newsletter" /> ]

　　prev ~ siblings　　兄弟元素选择器：匹配所有和prev元素同辈的元素。

　　html代码：同上

　　jQuery代码：

$("form ~ input")

　　结果：

[ <input name="none" /> ]

　　如上，是jQuery提供的基本选择器和层级选择器，然后是一些过滤选择器（也称过滤器），是在基本选择器和层级选择器获取到一批元素后，进行过滤操作。过滤器通常以 ":" 开头，属性过滤选择器除外。

　　由于过滤器较多，这里就不一一总结，还是那句话，多查API是最好的方法。以下是一些具体需求的实现，主要是介绍一些方法。

jQuery对象访问常用方法：

　　需求：以下代码中input元素的个数（size（）方法）

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

　　jQuery代码：

var size = $("input").size();

　　结果是：3　　size()方法：当前匹配的元素个数。

　　需求：上面代码中name属性为 "name" 的input元素是第几个input（index（）方法）

　　jQuery代码：

var index = $("input[name='name']").index("input"));

　　结果是：0　　index([selector|element])；方法：搜索匹配的元素，返回当前元素的索引值，从0开始，如果找不到，返回 -1。

　　如果参数是一个选择器：返回的是这个对象在选择器匹配集合中的索引位置。比如上述代码返回的就是name属性为 "name" 的input在后一个选择器（所有input）中的索引位置。

　　jquery代码：

var index = $("form *").index($("input"));

　　结果是：1　　如果参数是一个或一组jQuery对象，返回的是这个对象或这组对象中的第一个元素在原集合中的索引位置。比如上述代码返回的是所有input元素集合中第一个元素在前一个选择器匹配的元素集合（form中的所有元素）中的索引位置。

　　jQuery代码：

var index = $("input").index(document.getElementsByName("none")[0]);

　　结果是：2　　参数同样可以是一个dom对象。返回值和传入一个jQuery对象一样。比如上述代码，返回name属性为 "none" 的第一个元素在所有input元素集合中的索引位置。

　　jQuery代码：

var index = $("input[name='name']").index();

　　结果是：1　　如果不传值，返回这个对象相对于同辈元素的位置。。比如上述代码name属性为 "name" 的input元素在同辈元素中的索引位置。

　　需求：获取所有input元素的name属性（each(callback)）

　　HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

　　jQuery代码：

$("input").each(function(){
    alert(this.name);
});

　　each(callback) 函数，用于遍历匹配元素集合，以每一个匹配元素作为上下文来执行一个函数。函数中可以使用 this 关键字指代当前dom元素。如果需要使用jQuery对象，可以使用 $(this) 调用相应方法。

　　需求：获取第二个input元素的name属性（get(index)）

　　HTML代码：

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

　　jQuery代码：

var name = $("input").get(1).name;

　　这个方法之前也用过，就是jQuery对象转dom对象时，jQuery对象.get(0)。与jQuery对象[0]等价。　　　　　　

属性方法：

　　对于此类方法，一般记住一点即可：如果属性值是可选参数，通常传属性值代表设置属性，不传代表获取属性。

CSS方法：

　　和属性方法使用基本类似。

　　说了一堆废话，还有文档处理、事件、ajax等使用注意，有空再总结。作为第一篇博客，特此纪念。

　　2018-06-29　　00:24:34