封装jquery的方法

爱你孤身走安详

已于 2022-11-23 22:49:27 修改

阅读量1k

点赞数

文章标签： jquery javascript 前端

于 2022-11-23 22:41:47 首次发布

本文链接：https://blog.csdn.net/linlinaitangtang/article/details/128009241

版权

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")
		//改变isReady
		isReady = 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'
});

爱你孤身走安详

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
封装jquery的方法

•只有 jQuery 对象才能使用 jQuery 的方法，在 jQuery 对象中无法使用 DOM 对象的任何方法，反之 DOM 对象也无法使用任何 jQuery 的方法。jQuery 对象通过 jQuery 提供的 get（index）方法，得到对应的 DOM 对象。•jQuery 对象中封装了多个 DOM 对象，同时 jQuery 对象是类数组对象。jQuery 对象是一个类数组对象，可以通过 [] 方式，得到对应的 DOM 对象。•jQuery 对象 ---- 底层就是 dom 对象。
复制链接

扫一扫