封装一个jq

(function(win) {
var jQuery = function(selecter) {
this.version = '1.0.1'; //版本号
this.selecter = selecter;
return this;
};
jQuery.prototype.getElement = function() {
// 当前只支持取id
// 如果是class或者tag,得装在数组里
this.elem = document.getElementById(this.selecter);
return this;
};
jQuery.prototype.html = function(val) {
var elem = this.elem;
if(val) {
elem.innerHTML = val;
return this;
} else {
return elem.innerHTML;
}
};
jQuery.prototype.on = function(type, Fn) {
var elem = this.elem;
elem.addEventListener(type, Fn);
return this;
};
jQuery.init = function(selecter) {
return new this(selecter);
};
win._jQuery = jQuery;
})(window); function $(selecter) {
var test = _jQuery.init(selecter);
return test.getElement(selecter);
} function jQuery(selecter) {
var test = _jQuery.init(selecter);
return test.getElement(selecter);
}

使用

<div id="one">hello world</div>
<div id="two">我是一个带有class属性的标签</div>
//来个点击事件
jQuery('one').html('hello girl').on('click', function() {
alert('hello boy');
});
//或者来个赋值操作
$('two').html('hello baby');
// 打印版本
console.log($().version);

封装一个jq插件

(function ($) {
$.fn.myPlugins = function (options) {
//参数赋值
options = $.extend(defaults, options);//对象合并
this.each(function () {
//执行代码逻辑
});
};
})(jQuery); // 使用
$(selector).myPlugins({参数});

jq插件和jq的更多相关文章

  1. 单元测试地二蛋 先弄个两个原生模块1个原始的一个jq插件

    放羊测试测完了再测这两个瞎搞的下拉列表组建 看看从单元测试模块化的角度组建会写成啥样 1:ajax请求 简单文本     2:1个页面多个实例     3:复杂展示+自定义点击+自定义处理函数     ...

  2. JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

    前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下:       一.fla ...

  3. jq插件处女座 图片轮播

    好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...

  4. jq插件第二款来袭 图片滚动

    这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...

  5. 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

    工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...

  6. 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件

      前  言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...

  7. 写一个简单的JQ插件(例子)

    虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...

  8. 创建jq插件步骤

    无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...

  9. jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息

    jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...

随机推荐

  1. elk单机安装部署

    es 下载地址:wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.1.0-linux-x86_64.t ...

  2. Beautisoup库

    所看视频: https://www.bilibili.com/video/av9784617/?p=34 一, Beautifulsoup是一个可以从HTML或XML文件中提取数据的Python库,它 ...

  3. crm系统和e_store商场的比较总结

    e_store用了:Java.Servlet.JSP.Oracle.JQuery.Mybatis,tomcat技术 crm用了 :Java.JSP.Oracle.JQuery,Mybatis,spri ...

  4. JS原型链的理解和使用(一)

    一些个人的理解,不一定是对的,仅供参考. 在JS中有函数和对象两个概念,而又有一切皆对象的概念及函数也是一个对象.所以可以说函数一定可以作为一个对象,而对象不一定是一个函数. 也可以说在js中对象分为 ...

  5. Python数据类型-2 数字类型

    数字类型 数字类型是不可变类型.所谓的不可变类型,指的是类型的值一旦有不同了,那么它就是一个全新的对象.数字1和2分别代表两个不同的对象,对变量重新赋值一个数字类型,会新建一个数字对象. 还是要强调一 ...

  6. Python学习第十八课——继承,接口继承等

    1.继承:字面意思 # 继承 : 字面意思 class father: pass class grandfather: pass class children(father): # 单继承 pass ...

  7. 爬虫实战_爬取豆瓣图书利用csv库存储

    读取csv文件 通过csv.reader()和DictReader()两个函数 reader()函数返回一个迭代器 会包含表头 通过next函数可以跳过,但是它只能通过下标访问数据: DictRead ...

  8. 实验一 git代码版本管理

    实验目的 1. 了解分布式系统版本管理的核心机理. 2. 熟练掌握 git 的基本指令和分支管理指令. 实验内容 1. 安装 git.2. 初始化配置 git,git init ,git status ...

  9. KDE Plasma 5.17 即将发布

    导读 Plasma 5.17上个月达到了beta版本,而下周将发布Plasma 5.17.0版本!KDE桌面的大更新只有几天了.因此,开发人员一直在整理它,同时也集思广益讨论Plasma 5.18应该 ...

  10. SpringAOP原理分析

    目录 Spring核心知识 SpringAOP原理 AOP编程技术 什么是AOP编程 AOP底层实现原理 AOP编程使用 Spring核心知识 Spring是一个开源框架,Spring是于2003年兴 ...