本文实例讲述了jquery动态导航插件dynamicNav用法。分享给大家供大家参考。具体如下： 这是一款自己写的jquery动态导航插件—dynamicNav，具体思路是： 第一、给所有的li里插入一个span标签，且包含li里面的a标签 第二、复制一份a标签，插入到span里，现在span里有两个a标签 第三、根据传入的参数判断是垂直切换还是水平的，如果是垂直的，将span的宽度改为一个a标签的宽度，这时两个a标签就垂直排列了，这里一定要将li的overflo...
本文实例讲述了jQuery网页选项卡插件rTabs用法。分享给大家供大家参考。具体如下： 这里介绍jQuery网页选项卡插件rTabs用法，一共演示了4种TAB选项卡样式，第一种：默认样式：自动运行、无动画效果、Hover事件；第二种：自动运行、向上滚动、支持Hover事件的TAB选项卡菜单；第三种：自动运行、渐入淡出、支持Hover事件的选项卡；第四种：自动运行、向左滚动、点击事件的网页选项卡，选一个你喜欢的放在你的网站吧。 先来看看运行效...
事件委托主要是利用事件冒泡现象来实现的，对于事件委托的精准的掌握，可以有利于提高代码的执行效率。先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>脚本之家</title> <style type="text/css"> table{width:300px;height:60px;background-color:green; } table td{background-color:white; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script...
本文实例讲述了JQuery中DOM事件合成用法。分享给大家供大家参考。具体分析如下： jQuery有两个合成事件——hover()方法和toggle()方法，类似前面讲过的ready()方法，hover()方法和toggle()方法都属于jQuery自定义的方法。 hover()方法 hover()方法的语法结构为： hover(enter,leave); hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第1个函数(enter);当光标移出这个元素时，会触发指定的第2个函数(leave)。...
本文实例分析了JQuery中DOM事件冒泡。分享给大家供大家参考。具体分析如下： 什么是冒泡 在页面上可以有多个事件，也可以多个元素响应同一个事件。假设网页上有两个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素上也绑定了click事件。 <div id="content">外层div元素<span>内层span元素</span>外层div元素 </div> <script type="text/javascript"> $(function(){// 为span元素绑定click事件$(span...
本文实例讲述了JQuery中DOM加载与事件执行原理。分享给大家供大家参考。具体分析如下： JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。当文档或者它的某些元素发生某些变化或操作时，浏览器会自动生成一个事件。例如当浏览器装载完一个文档后，会生成事件：当用户单击某个按钮时，也会生成事件。虽然利用传统的JavaScript事件能完成这些交互，但jQuery增加并扩展了基本的事件处理机制。jQuery不仅提...
本文实例讲述了Jquery日期选择datepicker插件用法。分享给大家供大家参考。具体如下： 1、首先将Jquery中的datepicker插件中的相关属性值改成中文的： $.datepicker.regional[zh-CN] = { clearText: 清除, clearStatus: 清除已选日期, closeText: 关闭, closeStatus: 不改变当前选择, prevText: <上月, prevStatus: 显示上月, prevBigText: <<, prevBigStatus: 显示上一年, nextText: 下月>, nextStatus: 显示下月, nextBigText: >...
本文实例讲述了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表单对象属性过滤选择器用法。分享给大家供大家参考。具体分析如下： <!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"...
本文实例讲述了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中Text方法用法。分享给大家供大家参考。具体如下： <!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>JQuery Text方法</title> <style type="text/css"> div{width:100px;margin:0px auto;...
本文实例讲述了jquery插件bxslider用法。分享给大家供大家参考。具体用法如下： 首先调用对应js文件： <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bxslider.js"></script>jQuery代码部分： $(function(){ $(#marquee).bxSlider({ mode:vertical, //默认的是水平 displaySlideQty:1,//显示li的个数 moveSlideQty: 1,//移动li的个数 captions: true,//自动控制 a...
本文实例讲述了jQuery控制Div拖拽效果的方法。分享给大家供大家参考。具体如下： <!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> #Drigging { width:200px; background:#CCC; bord...
本文实例讲述了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> <script language="javascript" src="inc/jquery-1.4.2.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</...