jquery自定义组件开发

时间: 2019-02-28阅读: 1965标签: jquery

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。


第一步要知道封装jquery组件的基本语法

(function ($) {
    $.fn.ziDinYiZuJian = function () {
        //ziDinYiZuJian 组件 要实现的功能代码
    }
})(jQuery)


第二步调用自定义的组件

调用组件必须要引入在组件中用到的js包,然后调用

<div id="dom"></div>
$(‘#dom‘).ziDinYiZuJian();

注意有可能会报错:$(...).ziDinYiZuJian is not a function. 

原因可能是 引入必要的js包的顺序有问题,如果是在子页面调用组件 如果母版页引入了相同js包可能会因为重复引用js包报错,所以最好把母版页的js包 都在页面一开始全引入

 

在封装自定义jquery组件的时候需要注意的细节问题:

1、组件的数据源只需要是具有某个特征的数据集就可以了
2、组件自己根据传入的控制参数相应的格式化数据
3、暴露出的事件所需要的参数一般是 对象+触发事件的对象
4、组件要尽量封装成可重用的组件
5、组件写好之后要整理一个组件使用文档(包括:需要传入的参数说明、暴露出来的事件、使用事例等等)


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/2159

jQuery中页面返回顶部的方法总结

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。

jquery 中的dom操作

jquery DOM 分为元素操作、属性操作、样式操作。本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得大家学习.

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

jQuery实现全选、全不选以及反选操作

在写购物车案例时实现全选操作使用的是js的getAttribute()setAttribute()方法获取checked属性的值是undefined实现完成之后全选操作,如果在全选中的情况下改变其中一个的状态再点击全选,之前被取消的将不在被选中。之后使用js的DOM.checked属相的获得是true或false,操作很方便,很完美没有bug

每个 Web 开发者应该知道的 jQuery i18n 知识

在设计网站时,一个重要的考虑是国际化。世界上每个地区和国家对于文本、消息、数字和日期应该如何出现有不同的期望。特定应用程序的每个用户期望所有文本和消息以熟悉的格式显示

前端jquery防止数据重复提交

前端在向后端进行数据提交的时候,通常会需要在第一次提交返回前,阻止用户在快速点击发送二次请求,即防止重复提交,最简单的方法是使用标志参数或者 class 元素控制

wrap_jQuery wrap()的用法

jQuery中wrap()用于把所有匹配的元素用其他元素的结构化标记包裹起来。这种包装对于在文档中插入额外的结构化标记最有用,而且它不会破坏原始文档的语义品质。这个函数的原理是检查提供的第一个元素(它是由所提供的HTML标记代码动态生成的)

jQuery属性操作之.val()函数

val()实例方法的三种用法:.val() : 获取匹配的元素集合中第一个元素的当前value属性值(property).val(value) : 设置匹配的元素集合中每个元素的value属性值(property).val(function(index,value){}) :钩子函数未设置或无效时

jQuery不同版本的差异對比

1.x版本:兼容ie678,使用最为广泛的,官方只做bug维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!