jQuery学习笔记（一）

学习一样技术，我习惯先把握住其全貌，再把握其套路，再把握其特殊点，在这个基础上就可以快速入门。入门之后，我们就可以利用任何零碎时间学习其细节。

本着这个套路，我也会这样记录我的jQuery学习笔记。

准备工作：

先下载jquery-1.8.2.js文件，引用jQuery：如 <script type="text/javascript" src="scripts/jquery-1.8.2.js"></script>

这样准备工作完成了。

写自己的代码：

一般是在一个新建js文件写自己代码，然后引用：如 <script type="text/javascript" src="js/page/index.js"></script>

然后在文件里面怎么写jQuery代码呢？

写jQuery代码：

要写jQuery的代码，首先弄清楚几个重点的知识点（没学过jQuery的人一下子不清楚的，又必须清楚才能更好的学习jQuery的知识点）：

一、jQuery的构造函数

1、$(Function fn)：是$(document).ready()的简写模式，如：$( function fn(){ ... } )；

2、$(String expr)：根据给定的CSS选择符查找匹配的元素，如$("div>p")；

3、$(Element elem)：将给定的DOM元素对象转换为jQuery对象，如$(document).find("div>p")；

4、$(Array<Element> elems)：如$(myForm.elements).hide()；

5、$(jQuery obj)：如：var div = $("div"); $(div).find("p")；

6、$(String expr, Element context)：在context中查找expr，如：$("div", xml.responseXML)；

其中第一个是学习jQuery必须使用,如在<script type="text/javascript" src="js/page/index.js"></script>文件中，一开始就写上这个内容

$(function(){

});

或者

$(document).ready(function(){

});

我更喜欢使用前者：简单。

然后基本上我所有写的东西都放在这个构造函数里面，如

$(function(){

//定义变量

var val = "myString";

var arr = [];

var obj = {};

var myJsonData = null;

//定义函数

function foo(){

}

//引用变量

var newVal = val + "new";

//应用函数

foo();

});

其实说白了，

$(function(){

});

里面可以写任意我们平时写的js代码，只是里面的变量，函数等的作用域就局限在该函数内，用其他高级语言说，就已经成了局部变量，

如果用js的面向对象的说法就是已经变成了私有的(private)，用js的高级特性说，这就是闭包(closure)的应用了。

总结：写jQuery代码，就先写

$(function(){

});，然后在里面写我们的js代码或者jQuery代码。

补充：

jQuery的$(function(){});、js代码的window.load();与 (function())();的区别

1、jQuery的$(function(){});在dom节点加载解释完成后执行，但是还没有去加载img节点的src属性的图像资源。

2、js代码的window.load();在所有资源都加载完成了后执行，包括已经加载img节点的src属性的图像资源。这比$(function(){});的时机更迟一些。

3、(function(){})();懂js的应该看得懂吧，这是在定义一个匿名函数的同时，就立刻执行该函数，其中经常使用的一个是(function($){})(jQuery);

总结：写jQuery代码，也可先写(function($){})(jQuery);然后在里面写我们的js代码或者jQuery代码。

接下来，要讲解2-6这5个构造函数前，我们需要具备两个知识点：

1）什么是jQuery选择器，怎么使用jQuery选择器，jQuery选择器有哪些？

2）什么是jQuery对象，什么是js dom对象

对于第一个问题：

1、什么是jQuery选择器？

像在js dom编程里面，有getElementById('myId');、getElementsByTag('tagName');等函数获取网页面上某个元素，并返回一个dom对象节点让你操作（什么是 js dom对象？思考下）。

那么jQuery api里面是怎么获取网页面上某个或某些元素呢？

如第二个构造方法的例子：2、$(String expr)：根据给定的CSS选择符查找匹配的元素，如$("div>p")；

$("div>p")；构造函数的参数"div>p"就是一个简单的jQuery选择器，通过该构造函数返回一个jQuery对象（什么是jQuery对象？思考下）

对于怎么使用jQuery选择器，jQuery选择器有哪些？由于jQuery的强大也在于其选择器很丰富，很容易就让我们获取到页面上的元素，并提供很丰富的函数去

操作这些网页元素，因此，在后面我会独立成一个学习笔记。

2、什么是jQuery对象，什么是js dom对象

1）你使用jQuery api（这要是6个jQuery构造函数）获取页面上的元素，返回的一般就是jQuery的对象，

2）你使用js dom编程的api获取页面上的元素，返回的就是js dom对象。

3）jQuery提供api，将jQuery对象与js
dom对象相互转换。如其中一个方法：

第三个构造方法：3、$(Element
elem)：将给定的DOM元素对象转换为jQuery对象，如$(document).find("div>p")；

其中document是js
dom对象，通过jQuery构造函数$(document)就返回一个jQuery对象了。

4）其中jQuery与js dom对象相互转换用得最多的地方就属jQuery each(index,item)这个函数了

A、强调：jQuery构造函数返回的jQuery对象都是一个集合，像$('p')就是选择页面上所有的p元素（p元素集合），就连$('#myId')通过id属性选择唯一的元素，

返回的jQuery对象还是一个集合，只是这个集合只有包含一个页面元素。

B、each方法，如

$('p').each(index,item){

$(this).css('width','800');

$(item).css('width','800');

};

其中index，item是jQuery传给我们的参数，代表集合中的下表index和元素对象item，item和this是js dom对象，

所以通过构造函数$(this)、$(item)就将js
dom对象转换成jQuery对象。

3、就剩下
5、$(jQuery obj)：如：var div = $("div"); $(div).find("p")；

6、$(String expr, Element context)：在context中查找expr，如：$("div", xml.responseXML)；

这两个构造函数了，这两个没什么好说的了，直接使用就得了。

构造函数的酒总结道这里了，下次应该会总结jQuery的选择器和jQuery的常用方法和jQuery的获取、设置表单或者table里面的数值。

jQuery：write less，do more