jQuery.ZoomLoad.js 仅1.5k
这是头一次开发jQuery插件。因为切图网的原因,本人一直在于网页前端开发打交道,jQuery写了多少行特效已经无法统计了,jQuery幻灯片,图片滚动,select,radio,checkbox美化等效果基本都是手写出来,滚动条事件的效果等,基于这个经验,开发一款jQuery插件就不是太难了,关键是执行力不好,很多时候想到的事情,到最后都没有做出来。
做插件是很好的一件事情,如果时间很多的话,它的好处在于,下次项目中就可以直接用插件了,所以插件需要具备最关键的一点就是灵活性高,兼容性好等,jQuery.ZoomLoad.js 插件的开发还是碰到了很多困难,好在查阅文档都一一解决了。并运用到了一个客户项目中,效果和兼容性都不错。
写插件有点像写作文的小结,是会以往项目中好的代码的一个聚合和总结,反复优化,所以以后有时间会经常出一些插件分享。
以下来自文档的说明
———————————————-
jQuery.ZoomLoad是一款基于jQuery开发的插件,它可以让你的网站图片以放大的形式打开,并且支持滚动条的响应,可以增强用户体验,并且调用很简单,一行代码调用就可以让你的网站炫起来。PS:它与lazyload不一样,它不具备替网站提速的“功效”,它只是在图片的打开方式上让用户获得一种全新的体验。
http://www.qietu.com/p/jquery_zoomload
day57:jQuery事件
jQuery对象调用jQuery方法之后返回的还是jQuery对象所以就可以继续调用。
offset()方法:用于获取元素在页面中的具体位置(相对于浏览器窗口)
position()方法:用于获取元素在父标签中的具体位置(相对于父标签)
scrollTop()方法用于获取或设置一个元素的垂直滚动条的偏移量(即滚动条滚动的距离)。它适用于具有垂直滚动条的元素,如div、textarea或window对象。
使用scrollTop()方法,可以完成以下操作:
1. 获取滚动条的垂直偏移量:
这将返回元素的滚动条相对于顶部的偏移量,单位为像素。如果元素没有滚动条,返回值将为0。
2. 设置滚动条的垂直偏移量:
这将使元素的滚动条滚动到指定的垂直偏移量位置。参数`value`是一个数字,表示滚动条的新偏移量。
使用scrollTop()方法,可以在滚动事件中获取当前滚动位置,实现滚动到指定位置或实现滚动到顶部或底部等功能。
scrollLeft():水平方向滚动条。
height()方法用于获取或设置一个元素的高度。
width()方法用于获取或设置一个元素的宽度。
innerHeight()方法用于获取窗口或容器的可视高度。即窗口的内部高度,不包括滚动条和边框。
innerWidth()方法用于获取窗口或容器的可视宽度。
outerHeight()方法用于获取窗口或容器的外部高度。
outerwidth()方法用于获取窗口或容器的外部宽度。
$(\’#d1\’).val()
$(\’#d1\’).val(520快乐 ) # 括号内不加参数就是获取加了就是设置
w.fn.init是jQuery库中的一个构造函数。它用于创建jQuery对象,以便在选择器中指定元素或创建新的元素。
为何要加索引?
`$(\’#d2\’)[0]`是通过jQuery选择器选中的元素集合,而不是单个元素节点。即使只选中了一个元素,jQuery返回的仍然是一个包含该元素的数组。
通过`[0]`索引可以取出数组中的第一个元素,即选中的单个元素节点。然后可以通过`.files[0]`来获取该元素节点的文件列表中的第一个文件。
因此,`$(\’#d2\’)[0].files[0]`的作用是获取通过id选择器选中的元素节点的文件列表中的第一个文件。如果不加索引`[0]`,则返回的是整个文件列表而不是具体的文件。
示例:
假设HTML结构如下:
使用$(\’#d2\’)[0]和$(\’#d2\’)分别输出的结果如下:
可以看到,使用$(\’#d2\’)[0]会直接获取到选中的元素节点,而使用$(\’#d2\’)则返回一个包含选中元素的数组。
在储存变量的时候,javascript推荐使用XXXEle来存储标签对象。
jquery推荐使用$XXXEle来存储标签对象。
attr是jQuery中用于操作元素属性的方法。可以获取或设置元素的属性值。
使用attr方法可以按照以下方式操作元素属性:
- 获取属性值:
- 设置属性值:
- 设置多个属性值:
- 移除属性:
注意,对于标签上有的能够看到的属性和自定义属性用attr对于返回布尔值比如checkbox、radio、option是否被选中用prop。
使用prop方法操作元素属性:
- 获取属性值:
- 设置属性值:
- 设置多个属性值:
- 移除属性:
append() # 内部尾部追加
prepend # 内部头部追加
$(\’#d2’).after($pEle) # 放在某个标签后面
$(\’#d1\’).remove() # 将标签从DOM树中删除
$(\’#d1\’).empty() # 清空标签内部所有的内容
克隆事件
返回顶部
自定义登录校验
on()方法用于添加事件监听器。它允许你在一个或多个元素上绑定一个或多个事件处理程序函数。
on事件
hover事件
键盘按键事件
按下键盘时,js会通过返回的数字来判断按下的按键。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。