自定义一个jQuery插件

最新推荐文章于 2023-12-07 15:17:31 发布
最新推荐文章于 2023-12-07 15:17:31 发布
阅读量896 收藏 2
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42775017/article/details/82762989
版权

例题：在列表<ul>元素中，鼠标在列表项<li>元素移动时，可以自定义其获取焦点(focus)时的背景颜色，即设置表项<li>元素选中时的背景色.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="https://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script>
    </head>
    
    <body>
        <ul id = ul>
            <li>苹果</li>
            <li>葡萄</li>
            <li>火龙果</li>
            <li>哈密瓜</li>
            <li>西瓜</li>
        </ul>
        <script type="text/javascript">
            (function ($) {
                $.extend({
                    "FocusColor": function (li_col) {
                       $(this).find('li').each(function(i,e){
                           $(e).mouseover(function(){
                               $(e).css('background-color',li_col);
                           }).mouseout(function(){
                               $(e).css('background-color','#fff');
                           })
                       })
                       return $(e);
                    }
                });
            })(jQuery);
            $(function () {
               $.FocusColor('red');
            });
        </script>
    </body>
</html>

结果：

0 errors,0 warnings
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2022-06-21 jQuery自定义插件的定义和使用(以选项卡为例)
GAARA
06-21 410
文章目录 jQuery插件的概念 插件引入时必须遵守的规定 自定义选项卡插件tabs 引入样式和js 改进:改进默认选中的方式和获取节点的方式 改进:将js和css放到单独文件中并在新的html中引入 结果 改进:html只保留框架,里面的li节点通过动态获取并初始化 vue组件:把css,js都组装在一起的插件,只需输入标签名
jQuery自定义插件
Hello,I am Waleee
07-24 548
jQuery插件分为三种： 1.封装对象方法的插件（推荐） 调用在jQuery对象上的 jQuery对象.方法名(); 95%以上的jQuery插件都是封装对象方法的插件2.封装全局函数的插件3.选择器插件
jQuery：自定义jQuery插件
xpmhhh的博客
03-18 257
jQuery：基于jQuery编写的扩展库 1.扩展$的方法： $.extend({ min:function(a,b){...} }) 2.扩展jQuery对象的方法： $.fn.extend({...}) jQuery插件： jquery-validation：表单验证插件 jQuery-UI：UI插件 laydate：日期控件 ...
jQury（自定义插件）
Bugxiu_fu的博客
03-23 1270
jQuery（插件） 什么是插件呢？相比代码的新手还不晓得，其实插件就是函数我们直接下载过来用的意思。 如图所示： 一、自定义插件 1.两个对象的继承 $.extend()实现对象继承 var person = {"name":"东方不败","sex":"女"}; var stu = {}; console.log($.type(stu)); console.log(stu);
jquery插件含义及用法大全，非常的easy
最新发布
weixin_43452154的博客
12-07 173
Jquery插件是对Jquery利用原型的一个扩充，例如：想要实现统一的弹窗规格显示、导航栏、背景颜色管理、计算复杂运算等。
jquery 自定义插件， 监听元素插件
猎人在吃肉
11-23 593
因此决定开发一个插件，既满足上面要求、又不让代码冗余。的函数就能满足要求，这个插件没必要开发；如果没有第3条的要求，那么使用。函数，但是里面的业务逻辑与。增加了第3条后，就要能增加。完全一样，代码重复了。
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
01-19
　功能：当你鼠标悬浮在你的html元素上面的时候，它会显示一个help说明性的label。 　效果图： 　原始： 　 　当你的鼠标悬浮在’单击我吧1’时： 　 　当你的鼠标悬浮在’textbox’时： 　 看了效果图，若是有兴趣...
自定义滚动条美化jQuery插件
04-02
自定义滚动条美化jQuery插件是一款基于jquery实现的易滚动自定义滚动条美化插件。本作品由【站长素材】收集整理，转载请注明出处！
jQuery自定义弹窗功能插件
04-02
jQuery自定义弹窗功能插件是一款jQuery基于animate css动画库，实现多种弹窗方式，可自定义对应弹出框代码。
自定义jQuery选项卡插件实例
01-19
代码如下:<!...<head><... charset=utf-8″><...jQuery自定义选项卡插件</title><style>body, ul { padding:0; margin:0; }li { list-style:none; }#tabs { zoom:1; }#tab:
jquery打造自定义控件（原创）
difu2984的博客
06-27 454
本人第一次发表文章，不足之出请大家多多包涵 下面是一个combox的代码 /// <reference path="../Js/jquery-1.7.2.min.js" /> $.extend({ //下拉列表框 qyjcombox: function (select) { ...
基于jquery的html select完全自定义化插件
09-25
基于jquery的html select完全自定义化插件基于jquery的html select完全自定义化插件基于jquery的html select完全自定义化插件
JqueryFormBuidler 自定义控件-详细版
i_wonder_how_的博客
12-11 3577
JqueryFormBuidler 自定义控件 一、JqueryFormBuilder文件树 源码文件目录 ├─demo │ │ index.html │ │ │ ├─js │ │ actionButtons.js │ │ demo.js │ │ │ └─sass │ demo.scss │ ├─fonts │ config.json │ formbuilder-icons.woff │
JQueryFormBuilder 自定义控件
i_wonder_how_的博客
11-19 3599
JQueryFormBuilder 自定义控件 定义控件 按照文档继承Control.js 并且注册 //`import control from '../control'` import control from '../control' //define a new class extending `control` (or any other child control class) export default class controlImg extends control { //
JQuery专栏之五————构造控件自定义函数，简化控件的使用
AndyYuan317的博客
04-09 323
5. 构造控件自定义函数，简化控件的使用。 从前面实例中可以看出控件的定义是比较繁琐的，如果将一些常用的控件通过函数形式加以定义和调用，这将大大简化控件的使用。函数可以将控件的许多标准属性加以固化，同时又允许用户自己定义一些属性，这些属性往往可被描述为参数。 jQDemos工程创建一个名为fn_function.js的javascript公共文件，该文件中包含各类控件自定义函数，并在以后实例中...
jquery系列教程7-自定义jquery插件全解：对象函数、全局函数、选择器
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-05 3801
//插件名称最好为jquery.[插件名].js。所有方法和函数插件都应该以分号结尾。插件开头也应该添加分号 //插件应该返回一个jquery对象，以保证链式操作。或者返回需要获取的量。插件内部不要使用$作为jquery对象的别名 //所有的对象方法附加到jQuery.fn对象上，所有的全局函数，附加到jQuery对象上， //插件内部，this指向通过选择器获取的jquery对象，可以通过this
jQuery05 自定义插件&第三方插件
weixin_67450855的博客
03-22 1124
<!-- 引入jQuery的表单验证的类库 --> <script src="./js/jquery.validate.js" type="text/javascript" charset="utf-8"></script> 使用表单验证的步骤： 1、下载jQuery插件验证库 2、将类库引入页面 3、两种方式使用验证 jQueryValidate规则： 一、自定义插件 1.1 $.extend()实现对象继承 案例1：两个对象的...
JQuery 如何使用插件&如何安装插件(详细讲解)
m0_65725031的博客
03-22 5133
今天是jquery的最后一节课，小编教大家如何使用插件，也算是一个jquery的一个扩展，大家有不懂的在下方评论或者私信小编噢。 一.自定义插件 1.$.extend(对象1,对象2) ------->对象1继承对象2 格式: $.方法名() 2.$.fn.extend({ 方法名:function (){} }) 注： 使用$.fn.extend({ 方法名:function (){} ...
编写一个jquery插件
09-18
编写一个jQuery插件需要遵循一定的结构和规范，以便可以在不同的项目中重复使用。下面是一个简单且通用的示例： ```javascript // 定义插件 (function($) { // 插件方法 $.fn.myPlugin = function(options) { //...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值