自己实现一个jQuery插件

时间:2023-01-29 16:44:02
  <script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>

<table class='mainTable' id='tbl'>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
<script>
$(function(){
/* 非插件实现行背景高亮
$('.mainTable tr').mouseover(function(){
$(this).css('backgroundColor','yellow').siblings().css('backgroundColor','white');
});
*/
$('.mainTable').setTableColor(); }); ////自己实现jquery插件(可单独放到js文件中):
/*
* 鼠标放table行上背景高亮
* 插件的使用:$('#tbleId').setTableColor();
*/
;(function($){//为了把前面代码视为一个整体故第一个字符是分号,$是jquery对象。
//注意:$.fn.extend()里面以“key-value”形式写函数
$.fn.extend({
setTableColor:function(){//行背景高亮函数
$('tr',this).mouseover(function(){//this是table对象
$(this).css('backgroundColor','#F2F4FF').siblings().css('backgroundColor','white');//this是表行
});
return this;//本句为了能链式编程
}
});
})(jQuery); </script>

自己实现一个jQuery插件的更多相关文章

  1. 做了一个jquery插件,使表格的标题列可左右拉伸

    示例下载 插件名称命名为:jquery.tableresize.js,代码如下: /* Writen by mlcactus, 2014-11-24 这是我封装的一个jquery插件,能够使table ...

  2. Jquery 类似新浪微博,鼠标移到头像,用浮动窗口显示用户信息,已做成一个jquery插件

    请注意!!!!! 该插件demo PHP 的 demo下载  C#.NET的demo下载 需要如下图, 1.鼠标移动到头像DIV时,Ajax获取数据,并让浮动DIV显示出来. 2.鼠标可以移动到上面浮 ...

  3. 如何写一个jquery插件

      本文总结整理一下如何写一个jquery插件?虽然现今各种mvvm框架异常火爆,但是jquery这个陪伴我们成长,给我们带来很多帮助的优秀的库不应该被我们抛弃,写此文章,作为对以往欠下的笔记的补充, ...

  4. 你真的需要一个jQuery插件吗

    jQuery的插件提供了一个很好的方法,节省了时间和简化了开发,避免程序员从头开始编写每个组件.但是,插件也将一个不稳定因素引入代码中.一个好的插件节省了无数的开发时间,一个质量不好的插件会导致修复错 ...

  5. 如何去定义一个jquery插件

    扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方 ...

  6. 开发一个jQuery插件——多级联动菜单

    引言 开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页 ...

  7. 如何使用jQuery写一个jQuery插件

    jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...

  8. 我的第一个jquery插件:下拉多选框

    <!DOCTYPE HTML> <html> <head> <title> New Document </title> <meta n ...

  9. 自己在项目中写的一个Jquery插件和Jquery tab 功能

    后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...

随机推荐

  1. java mail&lpar;发送邮件--163邮箱&rpar;

    package com.util.mail; /** * 发送邮件需要使用的基本信息 */ import java.util.Properties; public class MailSenderIn ...

  2. C&sol;C&plus;&plus; 结构体 简单输入输出

    #include <stdio.h> #include <stdlib.h> struct student{ int num; ]; double dec; }; int ma ...

  3. Welcome to Linux From Scratch&excl;

    /**************************************************************************** * Welcome to Linux Fro ...

  4. 在 Java 中高效使用锁的技巧--转载

    竞争锁是造成多线程应用程序性能瓶颈的主要原因 区分竞争锁和非竞争锁对性能的影响非常重要.如果一个锁自始至终只被一个线程使用,那么 JVM 有能力优化它带来的绝大部分损耗.如果一个锁被多个线程使用过,但 ...

  5. python中的列表和字典

    列表和字典的区别: 列表是有序排列的一些物件,而字典是将一些物件(键)对应到另外一些物件(值)的数据结构; 应用场景: 字典 各种需要通过某个值去查看另一个值的场合,也就是一个虚拟的“查询表”,实现方 ...

  6. js/css 检测移动设备方向的变化 判断横竖屏幕

    js/css 检测移动设备方向的变化 判断横竖屏幕 方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...

  7. Linux网络编程一站式学习

    提要 学过非常多遍计算机网络,依旧不会网络编程. 看完这篇文章之后就不会是这样了. 环境:Ubuntu14.04 64bit 何为Socket 是基于TCP/IP的网络应用编程中使用的有关数据通信的概 ...

  8. 手淘的flexible&period;js解决手机适配问题

    如何使用flexible.js做手机适配 做移动端网页肯定需要做适配,以前都用的fixscreen.js,对比一下,觉得flexible.js更好吧,毕竟是大厂出的东西. 第一步要给页面加在viewp ...

  9. Java序列化&lpar;含transient&rpar;

    什么是序列化? 我们创建的对象只有在Java虚拟机保持运行时,才会存在于内存中.如果想要超出Java虚拟机的生命周期,就可以将对象序列化,将对象状态转换为字节序列,写入文件(或socket传输),后面 ...

  10. 教你构建好 SpringBoot &plus; SSM 框架

    来源:Howie_Y https://juejin.im/post/5b53f677f265da0f8f203914 目前最主流的 java web 框架应该是 SSM,而 SSM 框架由于更轻便与灵 ...