jq插件和jq
封装一个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个原始的一个jq插件
放羊测试测完了再测这两个瞎搞的下拉列表组建 看看从单元测试模块化的角度组建会写成啥样 1:ajax请求 简单文本 2:1个页面多个实例 3:复杂展示+自定义点击+自定义处理函数 ...
- JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)
前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像.或者上传幻灯片大图进行DIV设置小图. 解决方案:目前我知道的解决方案有两个如下: 一.fla ...
- jq插件处女座 图片轮播
好久没写博客了,变得好懒呀,无地自容.最近一直在学sass和jq插件的写法,照猫画虎的谢了一个jq的插件,也算是第一次真正称得上插件的插件 ,废话不多说 上代码 (function($) { $.fn ...
- jq插件第二款来袭 图片滚动
这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认 ...
- 个人学习JQ插件编写成果:little酷炫的图片滑动切换效果
工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/de ...
- 一个简单而实用的JQ插件——lazyload.js图片延迟加载插件
前 言 Cherish 看多了炫酷的插件之后再来看这么一个小清新的东西,是不是突然感觉JQ插件感觉很友好了,简单强大最重要的是实用. 这篇文章将详细讲解一下lazyload.js的用法 lazy ...
- 写一个简单的JQ插件(例子)
虽然现在 vue angular react 当道啊但是那 JQ还是有一席之地很多很多的小单位啊.其实还会用到 我也放一个例子吧虽然我也不是很肯定有没有人写的比我更好啊但是我相信 我这个还是蛮实用的 ...
- 创建jq插件步骤
无意看了这篇<jQuery插件开发精品教程,让你的jQuery提升一个台阶>文章,现在做一下总结. 一.jQuery插件的创建可以有三种方法 1.通过$.extend()来扩展jQuery ...
- jq选择器(jq 与 js 互相转换),jq操作css样式 / 文本内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息
jq选择器(jq 与 js 互相转换) // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取 ...
随机推荐
- mysql事务隔离分析
首先说明下,这里主要内容为整理总结网络搜索的零散信息. 写在最前面,mysql事务是在Innodb引擎中得以实现的,如果这点不了解的话,请自行了解. 事务直接数据的可见性通过MVCC(多版本并发控制) ...
- PTA的Python练习题(七)
不知不觉一个星期过去了,继续从 第3章-12 求整数的位数及各位数字之和 开始做题 1. 我原来想用题目漏洞做题的,不过想想还是算了自己写个完整的: a=int(input()) b=len(str( ...
- SpringData学习笔记一
Spring Data : 介绍: Spring 的一个子项目.用于简化数据库访问,支持NoSQL 和 关系数据存储.其主要目标是使数据库的访问变得方便快捷. SpringData 项目所支持 NoS ...
- NB-IoT的介绍最终版 !看明白了吗?(转自 top-iot)
标签: NB-IOT 1 1G-2G-3G-4G-5G 不解释,看图,看看NB-IoT在哪里? 2 NB-IoT标准化历程 3GPP NB-IoT的标准化始于2015年9月,于2016年7月R13 ...
- git add 添加错文件 撤销
git status 先看一下add 中的文件 git reset HEAD 如果后面什么都不跟的话 就是上一次add 里面的全部撤销了 git reset HEAD XXX/XXX/XXX.java ...
- 杭电2014 (第一次用vector ac题目)
早就想用容器类来实现一些编程,今天也算是学了一点吧. vector的使用方法参考了某位博主的一篇文章,感觉写得还是不错的:http://blog.csdn.net/always2015/article ...
- tomcat启动报错failed to start component
严重: A child container failed during start java.util.concurrent.ExecutionException: org.apache.catali ...
- Spark入门:第4节 Spark程序:1 - 9
五. Spark角色介绍 Spark是基于内存计算的大数据并行计算框架.因为其基于内存计算,比Hadoop中MapReduce计算框架具有更高的实时性,同时保证了高效容错性和可伸缩性.从2009年诞生 ...
- 31 反射方式给类的属性赋值 和 对象赋值(clone)
1.配置类 package com.da.tool.util.configuration.reflect; /** */ public class JobInfo { private String j ...
- 「JOI2019 Final」解题报告
传送门 「JOI2019 Final」勇者比太郎 看懂题就很简单了,后缀和随便维护一下就好了,别用树状数组强加一个\(\log\)就行. 「JOI2019 Final」画展 显然可以先把所有的画框按大 ...