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数组插入一条记录的代码
Aug 30 Javascript
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JavaScript中数组的合并以及排序实现示例
Oct 24 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
基于Vue开发数字输入框组件
Dec 19 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
修改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者的疑难问答(1)
2006/10/09 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
PHP7 mongoDB扩展使用的方法分享
2019/05/02 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
JavaScript网页制作特殊效果用随机数
2007/05/22 Javascript
jquery lazyload延迟加载技术的实现原理分析
2011/01/24 Javascript
js查错流程归纳
2012/05/04 Javascript
javascript基于prototype实现类似OOP继承的方法
2015/12/16 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
基于js 本地存储(详解)
2017/08/16 Javascript
vue组件实现文字居中对齐的方法
2017/08/23 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
js实现数组和对象的深浅拷贝
2017/09/30 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
layui使用数据表格实现购物车功能
2019/07/26 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
python检测lvs real server状态
2014/01/22 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
python动态参数用法实例分析
2015/05/25 Python
Python 多线程抓取图片效率对比
2016/02/27 Python
Python 如何访问外围作用域中的变量
2016/09/11 Python
Python进阶之尾递归的用法实例
2018/01/31 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
Python多线程:主线程等待所有子线程结束代码
2020/04/25 Python
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
Mamas & Papas沙特阿拉伯:英国最受欢迎的婴儿品牌
2017/11/20 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
.NET初级开发工程师面试题
2014/04/18 面试题
房地产还款计划书
2014/01/10 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
新书发布会策划方案
2014/06/09 职场文书
2015年路政工作总结
2015/05/22 职场文书
清明扫墓感想
2015/08/11 职场文书
在前女友婚礼上,用Python破解了现场的WIFI还把名称改成了
2021/05/28 Python
PHP 时间处理类Carbon
2022/05/20 PHP