封装jquery的方法

jQuery 对象

•jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。

•jQuery 对象是 jQuery 独有的。

jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。

•只有 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对象

var isReady=false;//当前dom是否加载完毕var readyList = [];//等待要被执行的函数礼包document.addEventListener("DOMContentLoaded",function(){//文档加载完毕// alert("DOMContentLoaded")//改变isReadyisReady = true;readyList.forEach(item=>item());//做完后清空readyList=[];})// jq初始化函数jQuery.fn.init =function(selector){//如果传递的是一个函数if(typeof selector==="function"){//如果jquery已经准备完毕if(isReady){selector();}else{//把他加入的readyList列表中readyList.push(selector);}}else{// 获取到选择列表var list = document.querySelectorAll(selector);// 当前对象的长度this.length = list.length;for(var i=0;i<list.length;i++){//遍历类别对 this赋值this[i] = list[i];}}}

 <body><h1>jQuery还是大哥吗</h1><p>是的</p><h1>好难啊</h1></body><script src="./js/jquery-9.0.0.js"></script><script>$("button").click(function(){$("h1").toggle().click(function(){alert(this.innerText);});})$(function(){alert("jq已经加载完毕3")})$(function(){alert("jq已经加载完毕")})$(function(){alert("jq已经加载完毕2")})</script>

渲染内容：

jQuery 对象转换为 DOM 对象

jQuery 对象通过 jQuery 提供的 get（index）方法，得到对应的 DOM 对象

var $ul = $('ul'),ul = $ul.get(0);

jQuery 对象是一个类数组对象，可以通过 [] 方式，得到对应的 DOM 对象。

类数组对象

类数组对象本质就是一个对象，只不过存储方式类似于数组的结构

•arguments 对象 ---- 接受函数实参的个数
•jQuery 对象 ---- 底层就是 dom 对象

jQuery插件分为三种：
1.封装对象方法的插件（推荐）
调用在jQuery对象上的
jQuery对象.方法名();
95%以上的jQuery插件都是封装对象方法的插件

属性

•length 属性（数组的长度 | 元素的个数）

方法

•get（index）：根据 index 放回对应的 dom 对象
•eq（index）：根据 index 返回对应的 jQuery 对象
•index（）：查找元素的索引值

ready 和 onlaod 的区别

ready

1.具有简写方式
2.在一个 HTML 页面中允许出现多个
3.加载完 DOM 结构就执行
4.执行速度快

jQuery 动画

基本隐藏、显示效果

•show（）/ hide（）

$('div').show(1000).hide(1000);

若是对同一个 jQuery 对象使用，可以采用链式操作。

滑动式动画效果

•slideDown（）/ slideUp（）

$('div').slideUp(1000).slideDown(1000);

淡入淡出

•fadeIn（）淡入
•fadeOut（）淡出

$('div').fadeIn(1000).fadeOut(1000);

添加多个函数可以使用$.extend（）函数

jQuery.extend = jQuery.fn.extend = function() {var options, name, src, copy, copyIsArray, clone,target = arguments[0] || {},i = 1,length = arguments.length,deep = false;if (typeof target === "boolean") {deep = target;target = arguments[i] || {};i++;}if (typeof target !== "object" && !jQuery.isFunction(target)) {target = {};}if (i === length) {target = this;i--; // 把i 改为1}for (; i < length; i++) {if ((options = arguments[i]) != null) {for (name in options) {src = target[name];copy = options[name];if (target === copy) {continue;}if (deep && copy && (jQuery.isPlainObject(copy) ||(copyIsArray = Array.isArray(copy)))) {if (copyIsArray) {copyIsArray = false;clone = src && Array.isArray(src) ? src : [];} else {clone = src && jQuery.isPlainObject(src) ? src : {};}target[name] = jQuery.extend(deep, clone, copy);} else if (copy !== undefined) {target[name] = copy;}}}}return target;};

添加 jQuery 实例对象的方法

$.fn.method = function(){};对象方法的环境

三、设置默认值

　　1、设置默认值指的是对于比较复杂的和提供了许多选项可定制的的插件，最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。因此，相对于调用一个有大量参数的插件，你可以调用一个对象参数，包含你了你想覆写的设置。

(function ($) {$.fn.tooltip = function (options) {//创建一些默认值，拓展任何被提供的选项var settings = $.extend({'location': 'top','background-color': 'blue'}, options);return this.each(function () {// Tooltip插件代码});};
})(jQuery);$('div').tooltip({'location': 'left'
});

封装jquery的方法相关推荐

Ajax请求Session超时的解决办法：拦截器 + 封装jquery的post方法
目标:前端系统,后端系统等,统一处理Session超时和系统错误的问题. 可能需要处理的问题:Session超时.系统500错误.普通的业务错误.权限不足. 同步请求: Session超时,登录拦截器 ...
jq封装接口ajax,jquery ajax方法封装及api文件设计的代码示例
本篇文章给大家带来的内容是关于jquery ajax方法封装及api文件设计的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 封装 jquery ajax 文件/** * 封 ...
封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /*****************************************************************jQ ...
JQuery封装的ajax方法
JQuery封装的ajax方法 JQuery封装的ajax优势:简单方便,已做好浏览器兼容性处理. 1.$.post方法 $.post(url[,data][,callback][,type]) ...
jquery封装插件的方法
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门编写一个jQuery插件开始于给jQuery.fn ...
jquery封装的ajax方法获取web服务器时间
解决方案: Ajax HTTP Head法原理: 一般服务器在发送静态页面的时候(apache, nginx, lighttpd就目前所知)都是会在 HTTP 头里带一个Date的头信息的,那么我用 ...
利用js的闭包原理做对象封装及调用方法
创建一个js文件,名为testClosure.js: ? 1 2 3 4 5 6 7 8 9 (function () { function a() { alert('i am a') ...
JavaScript 自执行函数和 jQuery扩展方法
我们通常将JS代码写在一个单独的JS文件中,然后在页面中引入该文件.但是,有时候引入后会碰到变量名或函数名与其它JS代码冲突的问题.那么如何解决这个问题呢?作用域隔离.在JS中,作用域是通过函数来划分 ...
jquery on方法原理_jQuery 学习小结
jQuery 学习小结相较于原生 JS,jQuery 通过 API 接口写更少的代码,做更多的事情.虽然这个元老级别的技术库的使用率已经渐渐在减少了,不过了解其原理和用法还是很有用的. jQuery ...
jQuery 工具方法（全）
下面是对jQuery中工具方法的整理,希望可以帮助到有需要的小伙伴. 一.类数组对象 1.length属性 length属性 - 获取当前jQuery对象中包含DOM对象的个数实例: <!DO ...

封装jquery的方法

添加多个函数可以使用$.extend（）函数

封装jquery的方法相关推荐

最新文章

热门文章