封装一个jq

  1. (function(win) {
  2. var jQuery = function(selecter) {
  3. this.version = '1.0.1'; //版本号
  4. this.selecter = selecter;
  5. return this;
  6. };
  7. jQuery.prototype.getElement = function() {
  8. // 当前只支持取id
  9. // 如果是class或者tag,得装在数组里
  10. this.elem = document.getElementById(this.selecter);
  11. return this;
  12. };
  13. jQuery.prototype.html = function(val) {
  14. var elem = this.elem;
  15. if(val) {
  16. elem.innerHTML = val;
  17. return this;
  18. } else {
  19. return elem.innerHTML;
  20. }
  21. };
  22. jQuery.prototype.on = function(type, Fn) {
  23. var elem = this.elem;
  24. elem.addEventListener(type, Fn);
  25. return this;
  26. };
  27. jQuery.init = function(selecter) {
  28. return new this(selecter);
  29. };
  30. win._jQuery = jQuery;
  31. })(window);
  32. function $(selecter) {
  33. var test = _jQuery.init(selecter);
  34. return test.getElement(selecter);
  35. }
  36. function jQuery(selecter) {
  37. var test = _jQuery.init(selecter);
  38. return test.getElement(selecter);
  39. }

使用

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

封装一个jq插件

  1. (function ($) {
  2. $.fn.myPlugins = function (options) {
  3. //参数赋值
  4. options = $.extend(defaults, options);//对象合并
  5. this.each(function () {
  6. //执行代码逻辑
  7. });
  8. };
  9. })(jQuery);
  10. // 使用
  11. $(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. Mysql 分组查询出现'this is incompatible with sql_mode=only_full_group_by'的解决办法

    由于Mysql自动开启了 only_full_group_by,所以若查询的字段不在group by里面,则分组报错. 解决办法其一:mysql配置,关闭only_full_group_by,这种办法 ...

  2. 使用KVC键值编码

    掌握KVC从不使用setter.getter.点语法开始. ----- 前言 对象的内部状态是由属性进行封装的.访问对象属性的方式平时在开发过程中用得最多的是getter方法和点语法.键值编程KVC也 ...

  3. sourceTree的忽略文件

    在没有导入项目之前,就要把忽略配置好: *~ .DS_Store xcuserdata

  4. Python中.npz文件的读取

    有时候从网上下载的数据集扩展名(后缀名)是npz,我们需要对数据进行加载(读取):例如:识别猫狗图片的二分类,下的数据集分别为cat.npz和dog.npz import numpy as npcat ...

  5. 玩转NB-IOT模块之sim7000c

    https://blog.csdn.net/liwei16611/article/details/82698926 http://bbs.21ic.com/icview-2104630-1-1.htm ...

  6. Python学习第十五课——类的基本思想(实例化对象,类对象)

    类的基本思想 类:把一类事物的相同的特征和动作整合到一起就是类类是一个抽象的概念 对象:就是基于类而创建的一个具体的事物(具体存在的)也是特征和动作整合到一块 对象写法 # 对象写法 def scho ...

  7. 李德胜系列——李德胜和CPC人的初心

    很久很久以前,有三条恶龙盘踞着村庄,恶龙们及其爪牙对村民敲骨吸髓,逼着村民卖儿鬻女.苦不堪言.但是村民们却对此压迫习以为常,逆来顺受. 后来,一个书生来到了这个村庄,告诉村民,不许跪,也没有人值得他们 ...

  8. WebMagic基础与Maven管理依赖

    2. 快速开始 WebMagic主要包含两个jar包:webmagic-core-{version}.jar和webmagic-extension-{version}.jar.在项目中添加这两个包的依 ...

  9. FFmpeg笔记--vcodec和-c:v,-acodec和-c:a的区别?

    在看ffmpeg命令的时候经常会看到有些地方使用--vcodec指定视频解码器,而有些地方使用-c:v指定视频解码器,那这两个有没有区别呢? ffmpeg的官方文档: -vcodec codec (o ...

  10. 吴裕雄--天生自然HADOOP操作实验学习笔记:Wor的Count程序的编写

    实验目的 理解mapreduce的工作原理 理解Partitioner的书写方法 理解GroupingComparator的书写方法 实验原理 我们已经学习了hadoop的大部分基础知识,剩下的就是利 ...