记得以前我的朋友robin发过一个这样的效果。
演示:
http://www.cssrain.cn/demo/Supermenu/index.html
下载:
http://www.cssrain.cn/demo/Supermenu/SuperMenu.rar
这次我又自己动手弄了个。嘿嘿。
样式不是我写的。原本是个mootools插件,
被我改成jQuery了。

演示:
http://www.cssrain.cn/demo/jQueryLoginForm/test.html
下载:
http://www.cssrain.cn/demo/jQueryLoginForm/jQueryLoginForm.rar

http://docs.jquery.com/Main_Page
[font=宋体]要刷新框架页应该怎样做
解决思路:
利用“location”对象的“reload”方法或者在框架对象上执行“refresh”(刷新)命令。
具体步骤:
1. 包含框架页的代码。
[code]
[/code]
2.demo.htm页代码。
[code]在这里仅仅是为了测试的需要,在实际使用时可以替换该页。
[/code]
注意:
- “reload”方法和“refresh”命令的执行效果是有区别的。
技巧:用 document.frames["框架名"] 或 document.frames.框架名 或者直接用 框架名都可以捕获到框架对象。
试一试:在frameset中实现本例效果。
特别提示
本例代码运行后,把iframe的滚动条拉动一段距离,然后单击【refresh】按钮,将发现iframe所加载的文档在刷新后滚动条自动滚动到单击按钮之前的位置。而单击【reload】按钮,文档刷新后滚动条不会有变化。[/font]
DOM Core常用部分:
DOM方法
创建节点:createElement(),createTextNode()
复制节点:cloneNode()
插入节点:appendChild(),insertBefore
删除节点:removeChild()
替换节点:replaceChild()
查找节点:getAttribute(),getElementById(),getElementsByTagName,hasChildNodes
设置节点属性:setAttribute()
DOM属性
节点的属性:nodeName,nodeType,nodeValue
遍历节点树:childNodes,firstChild,lastChild,nextSibling,parentNode,previousSibling
下面给出这部分的简要用法,做个索引似帮助文档
1.document.createElement(“节点名”):新建一个节点
2.document.createTextNode(“文本内容”):新建一个文本节点
3.节点.cloneNode(true|false):复制该节点,参数true则连同子结点一同复制,false则不复制子结点
4.节点.appendChild(子节点):在节点下添加子结点
5.父节点.insertBefore(新节点,参照点):在该父节点下的参照点前面插入新节点.通常父节点这样写:参照点.parentNode
6.父节点.removeChild(子结点):删除该父节点下指定的子结点,该子结点下的所有嵌套子结点都将被删除
7.父节点.replaceChild(新节点,旧节点):把该父节点下的指定子结点替换为新节点
8.节点.getAttribute(“属性名”):搜索指定节点的属性名,返回该属性的属性值
9.document.getElementById(“id名”):搜索文档中指定id名的节点,返回该节点对象
10.document.getElementsByTagName(“标签名”):搜索文档中指定标签名的节点,返回一个节点对象列表(数组),基数从0开始,具有length属性,表示数组长度
11.节点.hasChildNodes:该节点是否具有子结点,有,返回true,没有子结点返回false(比如文本节点和属性节点)
12.节点.setAttribute(“属性名”,”属性值”):为该节点添加属性,若该属性已经存在则刷新属性值
13.节点.nodeName:根据节点类型区分
元素节点:返回标签名(相当于tagName属性)
文本节点:返回#text
属性节点:返回属性名
14.节点.nodeType:返回节点类型,常用有一下三种:
元素节点:返回1
属性节点:返回2
文本节点:返回3
15.节点.nodeValue:返回节点当前的值,根据节点类型区分:
元素节点:返回null
属性节点:返回属性值
文本节点:返回文本内容
16.节点.childNodes:返回该节点下的所有一级子结点(前面有具体介绍过,这个属性在不同浏览器有不同解释)
17.节点.firstChild:返回该节点下的第一个子结点
18.节点.lastChild:返回该节点下的最后一个子结点
19.节点.nextSibling:返回该节点的下一个兄弟节点对象
20.节点.parentNode:返回该节点的父节点(肯定是一个元素节点,document节点的父节点为null)
21.节点.previousSibling:和nextSibling相对,返回该节点的上一个兄弟节点对象
演示:
JavaScript版:
http://www.cssrain.cn/demo/3/JM/InsertAtCursorPos.html
插件版:
http://www.cssrain.cn/demo/3/JM/test2.html
注意:
要在同域下面才可以使用。
演示:
http://www.cssrain.cn/demo/3/iframeTest.html
在亮亮blog上看到的。
嘿嘿。
演示1:
http://www.cssrain.cn/demo/3/mouse/a.htm
演示2:
http://www.cssrain.cn/demo/3/mouse/bb.htm
1、整合了Dimensions Plugin (网页位置等)插件.
2、消除.attr()方法的15个明显错误并优化了该方法.
3、.toggle()方法中现在可以地增加了不止两个方法如:
$(“div”).toggle(function(){
$(this).removeClass(“three”).addClass(“one”);
}, function(){
$(this).removeClass(“one”).addClass(“two”);
}, function(){
$(this).removeClass(“two”).addClass(“three”);
});
4、可以对toggle()和one()方法进行解除绑定:
function test(){
$(this).addClass(“test”);
}
$(“div”).one(“click”, test);
$(“div”).unbind(“click”, test);
$(“div”).toggle(test, test);
$(“div”).unbind(“click”, test);
5 、index()现在可用于检索一个jQuery对像在集合中的索引
var test = $(“div.test”);
$(“div”).index( test ) == 3
6、makeArray()可以把任何对像转换为数组
jQuery.makeArray( document.getElementsByTagName(“div”) )
// => [ div, div, div ]
jQuery.makeArray( true )
// => [ true ]
jQuery.makeArray()
// => []
7、beforeSend 的使用可以在ajax调用之前处理一些代码来决定是否进行ajax调用
$.ajax({
beforeSend: function(){
return $(“#input”).val() == “”;
},
url: “test.php”
});
8、公开速度对像,可以通过更改jQuery.fx.speeds对像来对覆盖默认值,也可以新添自已的速度常数。
jQuery.fx.speeds.slow = 1000;
$(“#test”).slideDown(“slow”);
1.绑定事件
(1)
$(“p”).bind(“click”, function(e){
//编写你的代码
});
(2)
$(“p”).click(function() {
//编写你的代码
})
2.删除事件
(1)删除特定事件
$(“div”).unbind(“click”);
(2)删除所有事件
$(“div”).unbind();
3.触发事件
(1)trigger方法 触发特定元素事件
$(“div”).trigger('click');
(2)triggerHandler方法 与trigger方法相似,但不触发浏览器默认事件,如focus事件,使用此方法,将会阻止焦点到元素上
$(“input”).triggerHandler(“focus”);
4.特殊事件
(1)one( event,func )
此事件只执行一次则被删除
$(“p”).one(“click”, function(){
alert(“test”);
});
(2)hover(over, out)
切换mouseover与mouseout事件
$(“td”).hover(
function () {
$(this).addClass(“hover”);
},
function () {
$(this).removeClass(“hover”);
}
);
可用unbind mouseover与mouseout方法来删除此事件
(3)toggle(oldclick,newclick)
切换执行click事件
$(“li”).toggle(
function () {
$(this).css(“list-style-type”, “disc”)
.css(“color”, “blue”);
},
function () {
$(this).css({“list-style-type”:”", “color”:”"});
}
);
可用unbind click方法来删除此事件
5.1.2.3版本新增功能
(1)事件命名空间(便于管理)
实际使用方面:
1.当不需要全部事件,删除特定2个以上的事件.
示例:
$(“div”).bind(“click.plugin”,function() {} );
$(“div”).bind(“mouseover.plugin”, function(){});
$(“div”).bind(“dblclick”, function(){});
$(“button”).click(function() {$(“div”).unbind(“.plugin”); })
在事件名称后面加命名空间,在删除事件时,只需要指定命名空间即可.以上代码执行以后,dbclick仍然存在.
(2)相同事件名称,不同命名的事件执行方法
示例:
$(“div”).bind(“click”, function(){ alert(“hello”); });
$(“div”).bind(“click.plugin”, function(){ alert(“goodbye”); });
$(“div”).trigger(“click!”); // alert(“hello”) only
以上trigger方法则根据事件名称来执行事件.