!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
创新互联-专业网站定制、快速模板网站建设、高性价比田东网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式田东网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖田东地区。费用合理售后完善，十年实体公司更值得信赖。
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title我的菜单/title
style
div {
margin:5px;
padding: 5px;
float:right;
width:80%;
background-color:#fff;
}
.menu_container {
float:left;
width:20%;
margin:0 auto;
text-align:left;
}
.level_one_menu {
background-color:#ccc;
}
.level_two_menu {
background-color:#cdd;
display:none;
}
.level_three_menu {
background-color:#dcc;
display:none;
}
/style
script src="js/jquery-1.9.0.js" type="text/javascript"/script
script
$(document).ready(function() {
$('.level_two_menu').bind("click",function(){
$(".level_three_menu",this).toggle();
return false;
})
$('.level_one_menu').bind("click",function(event){
$(".level_two_menu",this).toggle();
event.stopPropagation();
})
$('.level_three_menu').bind("click",function(event){
alert($(this).text());
event.stopPropagation();
})
$('.level_one_menu:eq(0) .level_two_menu').show();
$('.level_two_menu:eq(0) .level_three_menu').show();
});
/script
/head
body
div class="menu_container"
div class="level_one_menu"计算机分类
div class="level_two_menu"编程语言
div class="level_three_menu"Java/div
div class="level_three_menu".net/div
div class="level_three_menu"C/C++/div
div class="level_three_menu"PHP/div
div class="level_three_menu"Python/div
div class="level_three_menu"Javascript/div
div class="level_three_menu"Object-C/div
div class="level_three_menu"Perl/div
div class="level_three_menu"Shell/div
/div
div class="level_two_menu"操作系统
div class="level_three_menu"Linux/div
div class="level_three_menu"Windows/div
div class="level_three_menu"Mac/div
div class="level_three_menu"Unix/div
/div
div class="level_two_menu"数据库
div class="level_three_menu"Mysql/div
div class="level_three_menu"Oracle/div
div class="level_three_menu"DB2/div
div class="level_three_menu"PostgreSQL/div
div class="level_three_menu"MS SQL Server/div
div class="level_three_menu"Sybase/div
/div
/div
div class="level_one_menu"出版社分类
div class="level_two_menu"Addison-Wesley/div
div class="level_two_menu"Apress/div
div class="level_two_menu"Dummies/div
div class="level_two_menu"friendsofED/div
div class="level_two_menu"JohnWiley/div
div class="level_two_menu"Manning/div
div class="level_two_menu"McGraw/div
div class="level_two_menu"NewRiders/div
div class="level_two_menu"NoStarch/div
div class="level_two_menu"OReilly/div
div class="level_two_menu"Packt/div
div class="level_two_menu"Pearson/div
div class="level_two_menu"Pragmatic/div
div class="level_two_menu"Prentice/div
div class="level_two_menu"Que/div
div class="level_two_menu"Sams/div
div class="level_two_menu"SitePoint/div
div class="level_two_menu"SYBEX/div
div class="level_two_menu"Syngress/div
div class="level_two_menu"Wrox/div
/div
div class="level_one_menu"出版日期分类
div class="level_two_menu"2015/div
div class="level_two_menu"2014/div
div class="level_two_menu"2013/div
div class="level_two_menu"2012/div
div class="level_two_menu"2011/div
div class="level_two_menu"2010/div
div class="level_two_menu"2009/div
div class="level_two_menu"2008/div
div class="level_two_menu"2007/div
div class="level_two_menu"2006/div
div class="level_two_menu"2005/div
div class="level_two_menu"2004/div
div class="level_two_menu"2003/div
div class="level_two_menu"2002/div
div class="level_two_menu"2001/div
div class="level_two_menu"2000/div
div class="level_two_menu"2000年之前/div
/div
/div
/body
/html
首页简单创建一个动态的树
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
html xmlns=""
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/
titleSimpleTree/title
link rel="stylesheet" type="text/css" href="js/tree_themes/SimpleTree.css"/
script type="text/javascript" src="js/jquery-1.6.min.js"/script
script type="text/javascript" src="js/SimpleTree.js"/script
script type="text/javascript"
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
/script
/head
body
div class="st_tree"
ul
lia href="#" ref="hyjm"欢迎界面/a/li
lia href="#" ref="xtgl"系统管理/a/li
ul show="true"
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
lia href="#" ref="ckgl"仓库管理/a/li
ul
lia href="#" ref="kcgl"库存管理/a/li
lia href="#" ref="shgl"收货管理/a/li
lia href="#" ref="fhgl"发货管理/a/li
ul
lia href="#" ref="yhgl"用户管理/a/li
lia href="#" ref="rzck"日志查看/a/li
/ul
/ul
/ul
/div
/body
/html
效果图：
提取如何 获取属性。
用户事件获取
$(function(){
$(".st_tree").SimpleTree({
click:function(a){
if(!$(a).attr("hasChild"))
alert($(a).attr("ref"));
}
});
});
2. 动态维护修改属性 这个时候需要用到each 遍列 + val值判断 设置新属性和读取
jQuery.each($(".st_tree"), function(i, val) { // i 指向键, val指定值
if(val == "xxx"){
// 你可以做读了或重新设置
}
});
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码。分享给大家供大家参考。具体如下：
这里介绍两个有动画功能的jQuery导航菜单，每个具备移动背景的效果，第二则是渐变背景效果，两个都不错，根据你的喜好选择了，菜单的风格和颜色自己修改一下就能用了。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
""
html
xmlns=""
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"/script
script
type="text/javascript"
$(function()
{
$("#test1
a").mouseover(function()
{
var
index
=
$("#test1
a").index(this);
var
width
=
$("#test1
a").width();
$("#test1
.showhover").stop().animate({left:width*index},1000);
})
$("#test2
a").mouseover(function()
{
var
index
=
$("#test2
a").index(this);
var
width
=
$("#test2
a").width();
$("#test2
.showhover").stop().animate({left:width*index,opacity:'0.6'},1000).stop(false,true).animate({opacity:'1.0'},500);
})
})
/script
style
type="text/css"
.body
{margin:10px;}
img
{border:0;}
a
{text-decoration:none;}
ul{list-style:none;
margin:0;
padding:0;}
.menu
{background:#003399;
height:25px;
width:600px;
position:relative;
overflow:hidden;}
.menu
.showmenu,
.menu
.showhover{
position:absolute;}
.menu
.showmenu
a
{float:left;
display:block;}
.menu
.showmenu
a
{font:700
12px/25px
Microsoft
YaHei;
color:#fff;
width:100px;
height:25px;
text-align:center;}
.menu
.showhover
{background:#990033;
width:100px;
height:25px;}
/style
/head
body
div
class="menu"
id="test1"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
div
style="clear:both;height:50px;"/div
div
class="menu"
id="test2"
div
class="showhover"/div
div
class="showmenu"
a
href="#"网站首页/a
a
href="#"关于我们/a
a
href="#"新闻中心/a
a
href="#"产品中心/a
a
href="#"解决方案/a
a
href="#"联系我们/a
/div
/div
/body
/html
希望本文所述对大家的jQuery程序设计有所帮助。
$.getJSON("Ajax/JQproc.ashx", function (json) {
$.each(json, function (i) {
$("ul_proc").append("li" + json[i].Name + "/li");
// ####### 这一句错了，$("ul_proc")少了一个# = $("#ul_proc")
})
})
只要检测document和window对象的高度，在一个滚动事件中利用他们的关系约束，触发一个自定义的函数即可实现这是基于
options
，在
options
获取失去焦点事件
或者
下拉项选中事件
重新刷新数据这样做便于控制下拉列表何时显示隐藏，无法取消（我尝试过阻止默认事件，这方面成熟的jquery插件也不少，结果没有反应），所以最好的方法我觉得就是模拟select，自己写一组html替换select，就是说不用select标签，不用担心click的问题首先说下解决方案：function(data){/script.html(data)：{参数名;info"/如果你需要传参数的话;div上边的代码也是对的，我给你写个简洁的.;，但是不够简洁;，可以写在这里,参数名，可能你看不太懂.：$('/);div
id="script，格式为;第一步，使用jquery的ajax技术，将数据读入。相关的函数有$.ajax(),
$.get(),
$.post()$.load()
等函数。使用方法请百度一下，教程非常多。第二步，将读入的数据使用jquer的选择器比如$("#divid").html("这里放入数据")，也可以用$.text()，具体区别请参考$.html()和$.text()的使用方法。另外，jquer还支持读取json数据和script数据，可以将读取的数据直接使用或者执行。具体根据你的需要改变。
animate()
对被选元素应用“自定义”的动画
clearQueue()
对被选元素移除所有排队的函数（仍未运行的）
delay()
对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()
运行被选元素的下一个排队函数
fadeIn()
逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()
逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()
把被选元素逐渐改变至给定的不透明度
hide()
隐藏被选的元素
queue()
显示被选元素的排队函数
show()
显示被选的元素
slideDown()
通过调整高度来滑动显示被选元素
slideToggle()
对被选元素进行滑动隐藏和滑动显示的切换
slideUp()
通过调整高度来滑动隐藏被选元素
stop()
停止在被选元素上运行动画
toggle()
对被选元素进行隐藏和显示的切换
