第8章jQuery基础知识.ppt

jQuery访问DOM对象 通过选择器获得的对象是jQuery对象，可以应用jQuery库提供的方法 如果需要应用DOM模型提供的方法需要将jQuery对象转成DOM对象 访问DOM对象的语法 选择器.get(index); 选择器[index]; 相关实践15-1 案例：jQuery完成树状菜单的开发 相关实践15-2 在硬盘任意位置下新建tree目录，将以下文件复制到tree目录中。 close.gif、item.gif、opengif –图片资源 jquery-1.3.1.min.js – jQuery库文件 启动Dreamweaver，在tree目录下新建“tree.html”文件，定义页面HTML元素。 运行效果见右图。 相关实践15-3 实现树的展开与折叠 实现树状菜单展开/折叠的关键是对CSS属性“display”控制，当所有display属性值为“block”时便显示树的子节点，为“none”则隐藏树的子节点。在当前页面，我们使用一个name属性为“container”的层包裹每棵树下的所有li标记。只要将这个层的CSS属性“display”设置为“block”或“none”就可以实现菜单展开与折叠。 相关实践15-4 //展开与折叠树的代码如下： $document.ready( function(){ $(ul label).bind(click , function(){ if($(this).parent().find(div).css(display) == block){ $(this).parent().find(div).fadeOut(200); $(this).parent().find(img[name=onoff]).attr(src,close.gif); } else{ $(this).parent().find(div).fadeIn(200); $(this).parent().find(img[name=onoff]).attr(src,open.gif); } } ); } ) 相关实践15-5 当点击“展开/折叠”按钮时，将所有子节点显示/隐藏。同样，在页面初始化时，绑定按钮单击事件处理程序，程序判断当前页“name=container”层“display”属性值，如果是“block”值子节点就淡出消失，如果是“none”则淡入显示，对应图标也发生改变。 相关实践15-6 $( function(){ $(#openclose).bind(click, function(){ if($(uldiv).css(display) == block){ $(uldiv).fadeOut(300); $(img[name=onoff]).attr(src,close.gif); } else{ $(uldiv).fadeIn(300); $(img[name=onoff]).attr(src,open.gif); } } ); } ) 相关实践15-7 菜单默认以纵向排列，我们可以让它以横向排列，要做到这点很简单。只需要设置ul的CSS属性“float”为“left”即可。 相关实践15-8 $( function(){ $(#horder).bind(click, function(){ $(li).css(float,left); } ); $(#vorder).bind(click, function(){ $(li).css(float,none); } ) } ) 相关实践15-9 当鼠标移动到子节点上时，会动态显示小技巧(Tips)，提示我们可以点击就能查看相关信息。在书写HTML代码时，我们预留了一个”id=tips”的层，就是用来完成这个功能的，每当鼠标移动到子节点上时tips层显示，提示“点击这里查看关于[子节点名]的信息”，当鼠标移开后隐藏这个层。 相关实践15-10 第一步，我们需要在style块中新增美化tips层的CSS样式，我们要求该层拥有淡黄色背景且有细线边框。 #tips { position:absolute; z-index:1; border:1px solid #cccccc; background-color:#FFC; display:none; font-size:14px; } 相关实践15-11 第二步，在script块中为所有