JS_自己写的JQ插件

最新推荐文章于 2019-04-30 17:09:33 发布
最新推荐文章于 2019-04-30 17:09:33 发布
阅读量4.7k 收藏 4
点赞数
分类专栏： code box 文章标签： function class div textbox jquery jquery插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/trace332/article/details/4654985
版权

看了<<锋利的jQuery>>之后,受益匪浅,特别是有关代码风格方面的内容.

于是想把以前写的一些JQ插件整理一下,以留备用...(里面也有一些书中的例子,我也放进去了)

其它的也会陆续添加进来~~~

 

 

 

测试插件

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery objMethod</title>
<script type="text/javascript" src="../jquery-1.3.2.min.js" ></script>
<script type="text/javascript" src="jquery.objMethod.js" ></script>


</head>
<style>
body { margin:0; padding:0;}

.box { border:3px solid #69F; width:70%; margin:0 auto; margin-bottom:15px;}
.box .hd { border-bottom:1px solid #69F; background:#CCC; color:#000; font-size:12px;
 margin-bottom:10px; padding:5px;}
.box .bd { /*font-size:12px;*/ text-align:center;}

.clear { clear:both;}

</style>
<body>

<!--
<div class="box">
 <div class="hd"></div>
    <div class="bd"></div>
</div>
-->

<div class="box">
 <div class="hd">
     alterBgColor    - 设置表格交替样式及hover格式
    </div>
    <div class="bd">
 <style type="text/css">
 .even { background-color:#CFC}
 .odd { background-color:#3FF;}
 .hover { background-color:yellow;}
 .click { background-color:#ccc;}
 </style>
 <table id="alterTb">
  <tbody>
   <tr>
    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
   </tr>
   <tr>
    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
   </tr>
   <tr>
    <td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td><td>abc</td>
   </tr>
  </tbody>
 </table>
    </div>
</div>

<div class="box">
 <div class="hd">waterMark       - 文本框的水印效果</div>
    <div class="bd">
     <input type="textbox" id="t1"><br />
     <input type="textbox" id="t2"><br />
     <input type="textbox" id="t3">
    </div>
</div>

 

<div class="box">
 <div class="hd">floatMenuEffect - 一个浮动菜单特效</div>
    <div class="bd" style="height:320px;">
    <style type="text/css">
 ul#floatMenu { margin:0; padding:0;position:relative;  width:102px;}
 ul#floatMenu li { height:30px; width:100px; line-height:30px; position:absolute; left:0;
   border:1px solid #ccc; text-align:center; list-style:none; overflow:hidden;
   background:#9FF; cursor:pointer;}
 ul#floatMenu li span { display:block; background-color:#9FF; height:100px;}
 </style>
    <ul id="floatMenu">
        <li>
                h1
            <span>this is h1<br />
            feajlf;j;ae<br />
            fejioa;fjaoifjeai<br />
            </span>
        </li>
            <li>h2
             <span>this is h2</span>
        </li>
            <li>h3
             <span>this is h3</span>
        </li>
            <li>h4
             <span>this is h4</span>
        </li>
            <li>h5
             <span>this is h5</span>
        </li>
            <li>h6
             <span>this is h6</span>
        </li>
            <li>h7
             <span>this is h7</span>
        </li>
            <li>h8
             <span>this is h8</span>
        </li>
            <li>h9
             <span>this is h9</span>
        </li>
    </ul>
    <div class="clear"></div>
    </div>
</div>
 
 
<div class="box">
 <div class="hd">shining - </div>
    <div class="bd">
     <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg1"/><br />
  <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg2"/><br />
  <img src="http://www.baidu.com/img/baidu_logo.gif" alt="" id="shimg3"/><br />
        <p id="shi_p">this is a p</p>
    </div>
</div>


<div class="box">
 <div class="hd">posMove - </div>
    <div class="bd">
    <style type="text/css">
     #m1,#m2 { width:30px; height:30px; border:1px solid #ccc; margin-bottom:20px; color:#ccc;}
    </style>
     <div id="m1">m1</div>     <div id="m2">m2</div>
    </div>
</div>


</body>
</html>

<script type="text/javascript">
function dw(s){ document.writeln(s + "<br />");}


$(function(){
 //alterBgColor   
 $("table").alterBgColor(); 
 
 //waterMark
 $("#t1").waterMark({text:"what"});
 $("#t2").waterMark({text:"what",colorMark:"#CCC"});
 $("#t3").waterMark({text:"what",colorMark:"blue",colorEnter:"blue"});
 
 //floatMenuEffect
 $("ul#floatMenu").floatMenuEffect({posY:20});
 
 //
 $("#shimg1").shining({state:1});
 $("#shimg2").shining({state:2});
 $("#shimg3").shining({state:3});
 $("#shi_p").shining();
 
 //
 
 $("#m1").mouseover(function(){
  var arr1 = [["l",5],["t",5]];
  $(this).posMove({speed:100,step:arr1});
 });
 $("#m2").mouseover(function(){
  $(this).quiver();
 })
 
})
</script>

 

trace332
关注
专栏目录
图片查看 -jq插件
04-23
本文将深入探讨“图片查看 - jq插件”这一主题，重点关注如何使用jQuery来实现图片的单图查看、多图查看、旋转和放大缩小功能。 首先，我们来看“jQueryViewer”这个文件名，这很可能是一个基于jQuery的图片查看器...
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
10-27
JQ.MoveBox.js是一款通过jQuery实现的自定义插件，专门用于实现div元素的拖拽功能。它允许用户将指定的div元素在网页上进行拖动操作，从而提高界面的交互性。 ### 关键知识点 1. **jQuery插件开发**：JQ.MoveBox....
jquery自己写插件
肖肖肖丽珠的博客
05-02 519
(function($){     $.fn.extend({        "函数名":function(自定义参数){              //这里写插件代码    }    });   })(jQuery); 使用：$("#id").函数名();
Jquery编写自己的插件
qq_34117170的博客
07-26 1289
编写自己的插件首先我们需要搭建一个插件框架如下：(function（$）{})(jQuery)编写自己所需要用的插件： 下例是一个带关闭按钮的提示框/** * * @authors wdl (you@example.org) * @date 2017-07-26 10:04:44 * @version $Id$ */ (function ($) { $.extend({
如何自己写jquery插件
My_Deng_Peng的博客
06-25 868
  其实大家看起来的jQuery插件感觉很高级、很上档次，但是其实是一个很简单的原理。jQuery我们可以看作是java里面的一个类，jQuery插件的添加其实就是给jQuery类添加新的实例方法或者类方法，然后将其功能封装在其中。    当然，毕竟实在html上说java比较难以理解，所有我就用了一个表格悬浮实验来帮助IT朋友来进行帮助理解，但是呢还是要明白IT界一些不成文的规矩。那就是命名方面...
自己写的自动完成js插件源码
hjd1056的专栏
05-04 472
<br />经测试，此插件兼容ie，chrome，firefox。<br /> <br />//autocomplete 0.2 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// var g_divName = undefined; var g_ajaxFunc = undefined; var g_
编写jq插件
weixin_34152820的博客
12-29 238
注意点/** * 编写jQuery插件注意事项 * ;(function(){})(jQuery) 自执行函数 * $.fn.extend({ * 名字为fun：function (参数){} * }) * 创建css * 命名 * 默认参数 * this指向 * 拼接字符串 * css最好直接写行内 *...
JQ固定table头部的插件.zip_Table_自己编写jq固定表格头部插件
09-20
3. **CloneTableHeader.js**：这是自编写的jQuery插件脚本，它的主要任务是监听窗口的滚动事件，复制表格的头部到一个新的位置，使其在滚动时保持在视口顶部。插件的实现可能包括以下步骤： - 首先，获取表格的头部...
javascript_jq.zip_javascript_jquery
最新发布
09-24
本资料“javascript_jq.zip”包含了基于PPT制作的PDF文档，专门讲解JavaScript和jQuery的相关知识，旨在帮助学习者深入理解这两种技术。 JavaScript，作为一门客户端脚本语言，是网页动态功能的基础。它允许开发者...
jquery-3.4.1_jquery_3.4.1.js_jquery-3.4.1_sangat1_jquery3.4.1_jq
09-30
综上所述，jQuery 3.4.1是一个强大的JavaScript库，它的主要特点包括高效的选择器引擎、简洁的API、丰富的插件生态系统和跨浏览器兼容性。通过引入"jquery-3.4.1.js"，开发者可以轻松地实现各种前端功能，如动态修改...
新手如何开始写jq插件
we do not talk any more的博客
08-13 2702
如何开始自己的插件之路？
javascript如何封装自己的js插件
pdfh5.js的博客
02-04 7002
作为一个程序员，如果只会ctrl+c和ctrl+v，那么其实工作起来很枯燥的。做人没有梦想那跟咸鱼有什么分别？程序员也是一样。我们不要一直局限于粘贴复制，我们要学会自己造轮子。 那么，作为一个前端，该如何封装自己的插件呢？ 下面给不会封装的同学示范一个小模板： //前面加;是防止跟其他js压缩时报错 ;(function(global){ //开启严格模式 "u...
自己写的一个Js小插件
weixin_30561425的博客
10-12 234
这是效果图。上面一个过滤标签。下面弹出框，选择日，周，月。我的用途主要是报表查询的时候根据这３种类型来查询数据用的。 这里分享下代码。 Js代码 (function ($) { $.extend($.fn, { DtFilter: function (setting) { var container = th...
怎么写一个jquery插件
Fiona
11-08 5996
创建插件 看来 jQuery 你已经用得很爽了，想学习如何自己编写插件。非常好，这篇文档正适合你。用插件和方法来扩展 jQuery 非常强大，把最聪明的功能封装到插件中可以为你及团队节省大量开发时间。 开始 要编写一个 jQuery 插件，需要为 jQuery.fn 对象增加一个新的函数属性，属性名就是插件的名字 jQuery.fn.myPlugin = function() {
js写插件
Burgess_Lee的博客
04-30 897
因为聊天最近聊到这个东西，所以直接附上别人的链接。就不在重复粘贴了。 下面是网址。 js插件 js插件从入门到精通
jQuery编写插件()
weixin_30566063的博客
08-08 371
引言： 　　在项目中不同页面经常要用到已经写好的交互，比如弹窗，比如下拉菜单，比如选项卡，比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情，而且个人认为有些low了，我们可是要追寻 高大上的90后有为青年呢~可是该如何高大上呢？这时jQuery自定义插件开发来了，第一次听到插件开发觉得如此happy， 遂动手网上查找资料进行学习，如下，我用自己的语言...
javascript插件的几种写法
小小阳
07-07 5233
一、js原生插件的写法 （1）工厂模式 var Helloword = function(objId){ var _get_dom = function(Id){ return document.getElementById(Id); } var _aim_obj = _get_dom(objId); var _say_hello = funct
jq_area：实现地区三级联动的JavaScript插件
"jq_area地区三级联动插件是一个用于在网页中实现地区选择的JavaScript插件，特别适合在表单中创建省市县/区的联动下拉菜单。它基于jQuery库，通过循环遍历预定义的地区数据来动态生成下拉选项。此插件的核心功能是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值