JQuery学习之路(一)———六大功能

一。JQuery访问DOM节点

    1.JQ对象：框架对JS中的DOM对象进行封装后的对象，让其获取方式更加简单、直观。

    使用$()方法就可以直接返回JQ对象，其实质为一个字符串。

var $p = $('#imooc');

通过$('#imooc')方法会得到一个$p的jQuery对象，$p是一个类数组对象。这个对象里面包含了DOM对象的信息，然后封装了很多操作方法，调用自己的方法html与css，得到的效果与标准的JavaScript处理结果是一致的。 

     通过标准的JavaScript操作DOM与jQuery操作DOM的对比，我们不难发现：

1.  通过jQuery方法包装后的对象，是一个类数组对象。它与DOM对象完全不同，唯一相似的是它们都能操作DOM。
2. 通过jQuery处理DOM的操作，可以让开发者更专注业务逻辑的开发，而不需要我们具体知道哪个DOM节点有那些方法，也不需要关心不同浏览器的兼容性问题，我们通过jQuery提供的API进行开发，代码也会更加精短。

2.JQ对象转换为DOM对象

当使用JQ对象时，需要用到DOM对象的某个方法而JQ对象却没有提供对应封装的方法，就必须进行转换。

转换方法：（两种）  [index] 索引      ，       get(index) 方法

var  jqObj = $("#xdl");

var DOMObj = jqObj.get(0);

var DOMObj = jqObj[0];

3.DOM对象转换为JQ对象

var DomObj = document.getElementById('xdl');

var jqObj = $(DomObj);

**PS: JQ对象和DOM对象是两个不同的对象。

二。JQ对页面的处理时间

1.把所有对应的事件按照其名字封装为JQ对象的方法和属性。

2.JQ对象可以直接对集合DOM节点绑定事件，集合下的每个单独节点都会生效。

三。JQ动态控制页面CSS

1.直接为DOM节点添加CSS样式

2.使用class类的增添和删除操作来控制页面的层叠样式

链式操作的补充： 当某个JQ对象调用了自己的牟哥方法后，如果该方法不是访问和操作DOM节点的时候，那么该方法调用完毕后返回这个JQ对象本身。

JQ库操作DOM节点的class属性： addClass() 为节点添加class类名

                                                     removeClass()为节点溢出class类名

                                                       toggleClass()为记得点切换class类名

4.JQ处理页面动画效果

封装好的动画效果：基本动画 show()和hide()，滑动动画 slideDown() 和slideUp() ，淡入淡出动画 fadeIn() 和 fadeOut() 以及自定义动画。

5.JQ的AJAX技术应用

$.ajax()  方法的正确使用方式： 实参是一个JSON格式的对象，而这个对象下面配置许多属性。如果没有手动配置，则保持JQ的默认值。