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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JavaScript下申明对象的几种方法小结
Oct 02 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
js+html5生成自动排列对话框实例
Oct 09 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 jQuery
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
分享5个非常有用的Laravel Blade指令
2018/05/30 PHP
js中将字符串转换成json的三种方式
2011/01/12 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
获得所有表单值的JQuery实现代码[IE暂不支持]
2012/05/24 Javascript
jquery的ajax简单结构示例代码
2014/02/17 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JavaScript中rem布局在react中的应用
2015/12/09 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
JavaScript Promise 用法
2016/06/14 Javascript
利用JS实现页面删除并重新排序功能
2016/12/09 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[03:56]DOTA2完美大师赛趣味视频之小鸽子和Mineski打台球
2017/11/24 DOTA
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
python中实现指定时间调用函数示例代码
2017/09/08 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
python将YUV420P文件转PNG图片格式的两种方法
2021/01/22 Python
用gpu训练好的神经网络,用tensorflow-cpu跑出错的原因及解决方案
2021/03/03 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
法学函授自我鉴定
2014/02/06 职场文书
中层领导干部群众路线对照检查材料思想汇报
2014/10/02 职场文书
借名购房协议书范本
2014/10/06 职场文书
建筑工地文明标语
2014/10/09 职场文书
就业导师推荐信范文
2015/03/27 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书