浅谈jquery中的each方法$.each、this.each、$.fn.each

jquery.each 方法

方法一

$("img").each(function(i,elem){
 // i 下标 从零开始,
 // elem == this
 // $(elem).toggleClass("example");
 $(this).toggleClass("example");
});

方法二

$.each([1,2,3,4],function(){
  //$(this)==数组中的每一个数组(如果数组是对象,就是对象)
});

方法三

应有场景有点不一样

this.each(function(){

})

扩展jQuery对象方法

应该是

jQuery.fn.Fun=function(){
  //this==$("img") 和下面的调用方法相结合,如果是其他对象就是其他对象
  this.each(function(){
  
  $(this)==$("img")[0],
  //$(this)==$("img")[1],
 // .......

  })
  

}
调用
$("img").Fun();

以上就是小编为大家带来的浅谈jquery中的each方法$.each、this.each、$.fn.each全部内容了,希望大家多多支持我们~

时间: 2016-06-22

利用jQuery简单实现产品展示图片左右滚动功能(示例代码)

最近要做一个产品展示功能,由于产品比较多,一屏展示不完,所以想要做一个通过点击进行翻页的效果,在网上找了几个都不大好用,最后只能自己动手写了. 效果如下所示: 原理比较简单:将要滚动显示的区域的CSS的override设为hidden,宽度设成一个比较大的值,如4000px,然后每次点击上一页或下一页的按钮时,计算当前页数,如果已经到了最后一页,则回到第一页,滚动是通过控制div的left属性实现的,需要两个div,外面的div的position设为retative,里面的DIV的positio

基于jQuery图片平滑连续滚动插件

* 此插件要求运行在jQuery v1.3 或更高版本上 * 插件可以实现图片平滑向上或向左滚动 * 如果您需要更多的效果或在使用中本插件存在BUG,可以给在彦磊的博客上留言,彦磊将尽自己最大努力完善此插件 * 您留言前请先到:http://gmarwaha.com/jquery/jcarousellite/ 上面下载jcarousellite插件 * 来和彦磊图片平滑滚动的插件相互补充使用以获取更多的图片效果 * 彦磊图片平滑滚动插件只是对jcarousellite插件的补充 * * * 技术

基于jQuery的图片左右无缝滚动插件

在线演示:http://demo.jb51.net/js/2012/myslideLeftRight/打包下载:http://www.jb51.net/jiaoben/44973.html核心代码: 复制代码 代码如下: (function($){ $.fn.extend({ "slidelf":function(value){ value = $.extend({ "prev":"", "next":""

jQuery插件开发的两种方法及$.fn.extend的详解

jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

以下代码,运行后,需要刷新下,才能加载jquery,要不然看不到效果.1.单行滚动效果 无标题文档 ul,li{margin:0;padding:0} #scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} #scrollDiv li{height:25px;padding-left:10px;} function AutoScroll(obj){ $(obj).find

jquery中$.fn和图片滚动效果实现的必备知识总结

前言 图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery.IIFE.setInterval等基础以及$.fn用法: jquery中$.fn用法 $.fn是jquery的命名空间,如果对jquery源码有过学习,就不难发现源码中有如下代码: jquery.fn=jquery.prototype={ init:function(selector,context){ /* *code */ } } 所以说jquery.fn也就是jque

jQuery中$.fn的用法示例介绍

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了. 那么你可以这样子:$("#div").abc(); jQuery为开发插件提拱了两个方法,分别是: jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQue

基于jquery实现点击左右按钮图片横向滚动

点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

jquery $.fn $.fx是什么意思有什么用

$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通常使用extend方法扩展,详细请看API. $.fx是指jquery的特效. 如果使用显示.滑动.淡入淡出.动画等. $.fx.off可以关闭动画,其实是直接显示结果. jquery的extend和fn.extend jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object

js jquery做的图片连续滚动代码

核心代码如下,大家可以参考 复制代码 代码如下: <script src="/js/jquery.js"></script>  <script>  $(document).ready(function(){ $(".bannerbutton li").each(                       function(){                              $(this).click(        

图片连续滚动代码[兼容IE/firefox]

var sliderwidth=300 //设置滚动宽度 var sliderheight=150 //设置流动高度 var slidespeed=3 //设置滚动带度(1-10)1的滚动速度最慢 slidebgcolor="#ffffff" //滚动区域的背景色 var leftrightslide=new Array() var finalslide='' leftrightslide[0]='' //设置图片地址及其链接地址. leftrightslide[1]='' leftr

jquery的幻灯片图片切换效果代码分享

本文实例讲述了jquery的幻灯片图片切换效果.分享给大家供大家参考.具体如下: 这是一款基于jquery的幻灯片图片切换效果代码,有缩略图和标题,可以自定义标题. 运行效果图:     -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. (1)在head区域引入CSS样式: <LINK rel=stylesheet type=text/css href="css/lrtk.css&quo

js鼠标点击图片切换效果代码分享

本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图:                                      -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea

JS实现的相册图片左右滚动完整实例

本文实例讲述了JS实现的相册图片左右滚动效果.分享给大家供大家参考,具体如下: 执行左移右移函数: var $get = function(id) { return "string" == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, source) { for (var property in source) { destination[property] = s

JS简单封装的图片无缝滚动效果示例【测试可用】

本文实例讲述了JS简单封装的图片无缝滚动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="

js钢琴按钮波浪式图片排列效果代码分享

本文实例讲述了js钢琴按钮波浪式图片排列效果.分享给大家供大家参考.具体如下: 这是一款基于javascript实现的钢琴按钮波浪式图片排列效果,鼠标在图片列表上移动,当前图片高亮显示,以此为根基点,周围的图片逐渐变小,所以有种手指划过钢琴键盘的感觉. 运行效果图:                                -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 注意:图片的alt属性不能

jQuery图片左右滚动代码 有左右按钮实例

用jquery封装了一个控制图片左右滚动的插件,有左右按钮可以点击实现图片滚动效果. 代码如下: <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>slide</title> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquer

jQuery网页右侧广告跟随滚动代码分享

两种方法都分享给大家,希望对大家的学习有所启发. 方法一: <script type="text/javascript">// <![CDATA[ $.fn.smartFloat = function() { var position = function(element) { var top = element.position().top, pos = element.css("position"); $(window).scroll(func

JS实现的车标图片提示效果代码

本文实例讲述了JS实现的车标图片提示效果.分享给大家供大家参考.具体如下: 这是一款基于JavaScript的鼠标提示效果,名车车标展示提示效果-鼠标移过时显示车标图片,页面打开后并不显示车标,只有当鼠标移在车标上的时候,车标才突然出现,类似Js提示特效,本代码兼容性也写的不错,代码也并不复杂,大部分是调用图片的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-car-ico-alert-style-demo/ 具体代码如下: <!DOC