一。JQuery访问DOM节点
1.JQ对象:框架对JS中的DOM对象进行封装后的对象,让其获取方式更加简单、直观。
使用$()方法就可以直接返回JQ对象,其实质为一个字符串。
var $p = $('#imooc');
通过$('#imooc')方法会得到一个$p的jQuery对象,$p是一个类数组对象。这个对象里面包含了DOM对象的信息,然后封装了很多操作方法,调用自己的方法html与css,得到的效果与标准的JavaScript处理结果是一致的。
通过标准的JavaScript操作DOM与jQuery操作DOM的对比,我们不难发现:
- 通过jQuery方法包装后的对象,是一个类数组对象。它与DOM对象完全不同,唯一相似的是它们都能操作DOM。
- 通过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的默认值。