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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记2 js基础语法
Oct 11 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
Dec 16 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
javascript动态创建链接的方法
May 13 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
Jun 14 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 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
详解Window7 下开发php扩展
2015/12/31 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
理解Javascript_02_理解undefined和null
2010/10/11 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
JavaScript 判断浏览器是否是IE
2021/02/19 Javascript
利用Hyperic调用Python实现进程守护
2018/01/02 Python
Python pymongo模块常用操作分析
2018/09/01 Python
Linux CentOS Python开发环境搭建教程
2018/11/28 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
动漫专业高职生职业生涯规划书
2014/02/15 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
反四风个人对照检查材料思想汇报
2014/09/25 职场文书
毕业生党员个人总结
2015/02/14 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2015年化验室工作总结
2015/04/23 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
详解Python内置模块Collections
2022/03/22 Python
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android