草窟设计 » Jquery

jquery select option 操作

Time Posted on 15, 六

jQuery 是一个非常强大的JS类库，现在越用觉得越好用了。使用jquery如何操作select(下拉框)呢？主要讲下怎么动态添加option 动态选择option，假如我们的select 控件的 id 属性为 sel

CSS Flow Chart and Jquery Tips

Time Posted on 14, 六

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Sigenics</title> <meta name="generator" content="WordPress 3.1.3" /> <meta name="robots" content="follow, all" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> //<![CDATA[ $(function (){ var x = 10; var y = 20; $(".chart a").mouseover(function(e){ this.myTitle = this.title; this.title = ""; [...]

Jquery addClass siblings removeClass

Time Posted on 26, 五

开始，第一个元素默认被选择，鼠标经过改变被选择的元素，当鼠标离开，又恢复第一个被选择。 <html><html> <head> <title></title> <style> * { padding:0; margin:0;} div { background:#eee; padding:20px; width:500px; } a {padding:5px; border:#ccc solid 1px;} .active{color:#F00; padding:5px; border:#F00 solid 1px;} p{background:#CCC; border:#333 solid 1px; padding:20px;} .hilight { color:red;} </style> </head> <body> <div class="navig"> <a href="/" class="active">澳星移民</a> <a href="/" >澳星留学</a> <a href="/" >海外房产</a> <a href="/" target="_blank" >澳星之友</a> <a href="/" target="_blank" [...]

jScrollPane – 跨浏览器可样式滚动条

Time Posted on 26, 四

http://jscrollpane.kelvinluck.com/index.html jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS. jScrollPane 是一个跨浏览器的 jQuery 插件，作者 Kelvin Luck，他把一个浏览器默认的滚动条（一个与内容溢出属性相关的元素）转换成 HTML 结构，这样可以跟容易的使用CSS编写他的样式。 jScrollPane is designed to be flexible but very easy to use. After you [...]

Jquery 表格上色插件

Time Posted on 8, 九

http://franca.exofire.net/jq/colorize Coloriza 是一个Jquery 插件，可以为表格的行添加背景颜色，鼠标动作后为行、列增加高亮效果。你可以为很多行、列填色，只要你愿意。再从点击已经填色的行、列就可以还原表格本色。怎么使用？使用默认设置（colorizes a row） $(‘#yourTableId’).colorize() ; 其他设置和参数: altColor : alternate row background color. The default is ‘#ECF6FC’, ‘none’ can be used for no alternate background color.交替行的背景颜色。默认值为’＃ECF6FC’，’none’ 可替代的背景颜色使用。 bgColor : background color (The default background color is white).背景颜色（默认背景颜色为白色）。 hoverColor : background color when you hover a mouse over a row. The default [...]

JQUERY搜索框提示效果

Time Posted on 1, 九

搜索框提示效果，输入框获取焦点，则原提示关键字消失，失去焦点，还原原关键字，当然是在没有输入用户关键字的前提下！

JQUERY 层-隐藏-显示效果

Time Posted on 28, 八

JQUERY 层-隐藏-显示效果可以应用与文章列表摘要模式-列表模式切换： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-EN"> <head> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Simple JQuery Collapsing menu</title> </head> <body> <script type="text/javascript"> $(function() { var i = 1; $("#mostrar").click(function(event) { if(i%2 == 1) $("#mostrar").html("简洁模式"); else $("#mostrar").html("摘要模式"); event.preventDefault(); $(".box2").slideToggle(); i++; [...]

Jquery 获取元素数量 length

Time Posted on 25, 八

这个示例会输出 id=”nav” UL 下的 li 元素的数量(length) <!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=gb2312" /> <title>无标题文档</title> <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script> </head> <body> list 1: <ul id="nav"> <li>ssss</li> <li>aaaaa</li> <li>ddddd</li> <li>eeeee</li> </ul> list2: <ul id="nav2"> <li>sssss</li> <li>aaaaa</li> <li>ddddd</li> <li>eeeee</li> </ul> <a href="#" id="test" onClick="jq()">jQuery</a> <script> function jq(){ alert($("#nav li").length); } [...]

jQuery插件Step Carousel Viewer实现Javascript图片滑动旋转效果

Time Posted on 20, 八

需要将产品图片或相片等实现Javascript图片滑动旋转Animation效果，能自动播放图片或鼠标控制播放图片，图片固定的滑动在指定的区域内，类似动画播放，使用jQuery插件Step Carousel Viewer可实现该功能，而且使用简单，Step Carousel Viewer中文大概是按步旋转阅读，意思是说每张图片一张一张旋转阅读，效果： <script type="text/javascript"> // For instructions how how to modify go to this URL // http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm stepcarousel.setup({ galleryid: 'mygallery', //id of carousel DIV beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs panelclass: 'panel', //class of panel DIVs each holding content autostep: {enable:true, moveby:1, pause:2000}, panelbehavior: {speed:500, wraparound:true, [...]