jQuery学习心得总结(必看篇)


Posted in Javascript onJune 10, 2016

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学习心得总结(必看篇)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery下的动画处理总结
Oct 10 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
Angular2从搭建环境到开发步骤详解
Oct 17 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
js实现导航吸顶效果
Feb 24 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
浅谈小程序globalData的那些事儿
Nov 01 Javascript
javascript+Canvas实现画板功能
Jun 23 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 #Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 #Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 #Javascript
关于网页中的无缝滚动的js代码
Jun 09 #Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
Jun 09 #Javascript
You might like
PHP setcookie指定domain参数后,在IE下设置cookie失效的解决方法
2011/09/09 PHP
Android ProgressBar进度条和ProgressDialog进度框的展示DEMO
2013/06/19 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP模糊查询技术实例分析【附源码下载】
2019/03/07 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
Javascript之文件操作
2007/03/07 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
详谈jQuery中的this和$(this)
2014/11/13 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
jQuery生成假加载动画效果
2016/12/01 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
2018/08/24 Javascript
详解Vue组件之间通信的七种方式
2019/04/14 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python中使用Beautiful Soup库的超详细教程
2015/04/30 Python
python装饰器实例大详解
2017/10/25 Python
儿童编程python入门
2018/05/08 Python
Python闭包函数定义与用法分析
2018/07/20 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python实现弹跳小球
2019/05/13 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
Python基于当前时间批量创建文件
2020/05/07 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
python能做哪些生活有趣的事情
2020/09/09 Python
俄罗斯香水和化妆品网上商店:NOTINO.ru
2019/12/17 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server