本文实例讲述了轻量级网页遮罩层jQuery插件用法。分享给大家供大家参考。具体如下： 使用jQuery的好处是很多人为它写一些组件，而在项目所需用到功能也都可以找到一些组件去完成。 现在又这样一个需求当用户点击一个按钮后不允许用户进行任何的操作，取而代之的是弹出一个遮罩层显示一个loading提示框，效果如下。其实这个需求很简单，但很多组件体积相对这个需求来说太大了，在网上瞎溜达了找到了一个还不错的组件，作者是上面也没...
本文实例讲述了可以浮动某个物体的jquery控件。分享给大家供大家参考。具体如下： js代码如下： (function($){$.fn.scrolltip = function(){$(this).each( function() {var obj = $(this);var objtop = obj.position().top;$(window).scroll(function(){obj.css({top:$(window).scrollTop()+objtop,position:absolute});});});} })(jQuery);html代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www...
本文实例讲述了jQuery菜单插件用法。分享给大家供大家参考。具体如下： 这里要分享的是一个菜单插件，在http://plugins.jquery.com/keleyi/ 看到的，使用找个插件可以制作页面底部向上弹出的菜单，不一定在页底，还有多种其他方式。 jQuery菜单插件js文件： /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) {$.fn.keleyi = function (options) {var settings = $.extend({width: 986px,...
本文实例讲述了jQuery中$.extend()用法。分享给大家供大家参考。具体分析如下： $.extend()方法定义如下： jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象，返回被扩展的对象。 如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共...
本文实例讲述了jQuery可见性过滤器：hidden和：visibility用法。分享给大家供大家参考。具体分析如下： :hidden 匹配所有不可见元素，如果使用css的visibility属性让元素不显示但是占位，则不属于hidden了 查找display:none的tr元素，$("tr:hidden") :visible 匹配所有可见元素 查找所有display不为none的元素，$("tr:visible") 例子： <tr id="one"style="display:none;"><td>1</td><td>2</td></tr> <tr id="two"style="visibilit...
本文实例讲述了JQuery中DOM事件合成用法。分享给大家供大家参考。具体分析如下： jQuery有两个合成事件——hover()方法和toggle()方法，类似前面讲过的ready()方法，hover()方法和toggle()方法都属于jQuery自定义的方法。 hover()方法 hover()方法的语法结构为： hover(enter,leave); hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)。...
本文实例讲述了jquery获取当前元素索引值用法。分享给大家供大家参考。具体如下： 今天在做促销页面的图片轮转效果时，下方页码的左边需要对应显示图片的说明信息，效果如下：思路： 页面部分当为当前状态的时候，会添加“active”样式。 通过获取 li class="active" 的索引值，对应找到相应的图片说明信息，显示出来。 解决： 通过jquery的 index() 可以很轻松的实现该效果。 代码如下： HTML： <div id="carousel"> <div id="car...
本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下： 1、首先将Jquery中的datepicker插件中的相关属性值改成中文的： $.datepicker.regional[zh-CN] = { clearText: 清除, clearStatus: 清除已选日期, closeText: 关闭, closeStatus: 不改变当前选择, prevText: <上月, prevStatus: 显示上月, prevBigText: <<, prevBigStatus: 显示上一年, nextText: 下月>, nextStatus: 显示下月, nextBigText: >...
本文实例讲述了jquery任意位置浮动固定层插件用法。分享给大家供大家参考。具体分析如下： 说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动 2009-06-10修改：重新修改插件实现固定浮动层的方式，使用一个大固定层来定位 2009-07-16修改：修正IE6下无法固定在top上的问题 09-11-5修改：当自定义层的绝对位置时，加上top为空值时的判断 这次的方法偷自天涯新版页 经多...
本文实例讲述了jQuery插件制作之全局函数用法。分享给大家供大家参考。具体分析如下： 1、添加新的全局函数 所谓的全局函数，实际上就是jQuery对象的方法，但从实践的角度上看，他们是位于jQuery命名空间内部的函数 (1)添加一个函数，只需要将新函数指定为jQuery对象的一个属性。 jQuery.five =function(){ alert("直接继承方式不一样"); }调用： 代码如下:$.five(); (2)添加多个函数 jQuery.five =function(){ alert("直接继承方...
本文实例讲述了jQuery插件制作之参数用法。分享给大家供大家参考。具体分析如下： 1、无参数实现文字阴影效果 jQuery.fn.shadow =function(){ return this.each(function(){ var $originalElement = jQuery(this); for(var i = 0;i < 5;i++){ $originalElement.clone() .css({ position :"absolute", left :$originalElement.offset().left + i, top :$originalElement.offset().top + i, margin : 0, zIndex : -1, opacity : 0.1 ...
本文实例讲述了jquery中map函数遍历数组用法。分享给大家供大家参考。具体如下： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>map函数</title> <script src="jquery-1.6.2.min.js" type="text/javascript">...
本文实例讲述了JQuery中属性过滤选择器用法。分享给大家供大家参考。具体如下： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>属性过滤选择器</title> <style type="text/css"> div{width:200px;border:1px ...
本文实例讲述了JQuery中基础过滤选择器用法。分享给大家供大家参考。具体如下： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>基础过滤选择器</title> <style type="text/css"> #main{width:600px;border:1p...
本文实例讲述了JQuery中层次选择器用法。分享给大家供大家参考。具体如下： <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>层次选择器</title> <script src="jquery-1.6.2.min.js" type="text/javascript"></...