jQuery学习心得总结(必看篇)
来源: 阅读:4305 次 日期:2016-06-20 15:37:15
温馨提示: 小编为您整理了“jQuery学习心得总结(必看篇)”,方便广大网友查阅!

下面小编就为大家带来一篇jQuery学习心得总结(必看篇)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。

jQuery 对象

•jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

•jQuery 对象是 jQuery 独有的。

•只有 jQuery 对象才能使用 jQuery 的方法,在 jQuery 对象中无法使用 DOM 对象的任何方法,反之 DOM 对象也无法使用任何 jQuery 的方法。

•约定:如果获取的是 jQuery 对象,那么要在变量前面加上 $

•jQuery 对象中封装了多个 DOM 对象,同时 jQuery 对象是类数组对象

•数组与类数组对象的区别

1.数组的类型是Array

2.类数组对象的类型是 Object

DOM 对象转 jQuery 对象

•使用 $()将 DOM 对象包装起来,就可以转换成 jQuery 对象

var item = document.getElementsByTagName('ul')[0], // DOM对象

  $item = $(item); // jQuery对象

jQuery 对象转换为 DOM 对象

jQuery 对象通过 jQuery 提供的 get(index)方法,得到对应的 DOM 对象

var $ul = $('ul'),

  ul = $ul.get(0);

jQuery 对象是一个类数组对象,可以通过 [] 方式,得到对应的 DOM 对象。

类数组对象

类数组对象本质就是一个对象,只不过存储方式类似于数组的结构

•arguments 对象 ---- 接受函数实参的个数

•jQuery 对象 ---- 底层就是 dom 对象

属性

•length 属性(数组的长度 | 元素的个数)

方法

•get(index):根据 index 放回对应的 dom 对象

•eq(index):根据 index 返回对应的 jQuery 对象

•index():查找元素的索引值

ready 和 onlaod 的区别

ready

1.具有简写方式

2.在一个 HTML 页面中允许出现多个

3.加载完 DOM 结构就执行

4.执行速度快

onload

1.没有简写方式

2.在一个 HTML 页面中只能使用一个

3.需要等页面所有资源加载完才执行

4.执行速度比 ready 慢

jQuery 动画

基本隐藏、显示效果

•show()/ hide()

$('div').show(1000).hide(1000);

若是对同一个 jQuery 对象使用,可以采用链式操作。

滑动式动画效果

•slideDown()/ slideUp()

$('div').slideUp(1000).slideDown(1000);

淡入淡出

•fadeIn()淡入

•fadeOut()淡出

$('div').fadeIn(1000).fadeOut(1000);

并发和排队效果

•并发效果:设置多个动画同时执行

•排队效果:设置多个动画,按照先后顺序依次执行

jQuery 插件

jQuery 插件的作用

•扩展 jQuery 的功能

•呈现组件化特点

日期插件 - layDate插件

•layDate初步使用

1.引入 laydate.js

2.laydate(options)

开发插件

全局函数

全局函数,实际上就是 jQuery 本身的方法。

jQuery 内置的一些功能是通过全局函数实现的。

•比如$.ajax()就是典型的全局函数

向 jQuery 命名空间添加一个函数,只需要将这个新函数指定为 jQuery 本身的一个属性

$.globalFunction = function(){

  // todo...

};

可以通过 jQuery.globalFunction()或者 $.globalFunction()来调用

当需要添加多个函数可以使用$.extend()函数

$.extend({

  functionOne: function(){

    // todo...

  },

  functionTwo: function(){

    // todo...

  }

});

通过上述代码可以添加全局函数,但是代码存在有关命名空间的风险

我们可以把属于一个插件的所有全局函数封装到一个对象

$.plugins = function(){

  functionOne: function(){

    // todo...

  },

  functionTwo: function(){

    // todo...

  }

};

通过上述代码,其实是为全局函数创建了另一个方法 --- plugins

functionOne 和 functionTwo 已经成为 plugins 对象的属性。

$.plugins.functionOne();

$.plugins.functionTwo();

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

在任何插件方法内部,关键字 this 引用的都是当前调用方法的 jQuery对象,因此可以在 this 上面调用任何内置的 jQuery 方法。

方法连缀

通过 return this 来实现链式操作

以上这篇jQuery学习心得总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map