您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

jQuery入门须知总结

2024/4/16 20:54:19发布6次查看
这次给大家带来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()
$('p').show(1000).hide(1000);
若是对同一个 jquery 对象使用,可以采用链式操作。
滑动式动画效果
•slidedown()/ slideup()
$('p').slideup(1000).slidedown(1000);
淡入淡出
•fadein()淡入
•fadeout()淡出
$('p').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上传表单样式
jquery解析xml文件详解
以上就是jquery入门须知总结的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录