下面是使用jQuery编程的时候遇到的一些值得记下来的问题:
1.使用jQuery写回到顶部的功能时,发现要注意的一点:
当监听鼠标滚动时间时,必须要用window对象。修改滚动条位置的时候使用body即可。
例如下边的代码:
//回到顶部部分
//向下滚动时
$(window).scroll(function(){
if ($("body").scrollTop() == 0){
$("#mapid").css("bottom","6px");
$("#totop").fadeOut(100);
}else{
$("#mapid").css("bottom","50px");
$("#totop").fadeIn(100);
}
});
//当鼠标移入时变为文字
$("#totop").mouseover(function() {
$("#totop").css("backgroundImage","url(WEB-INF/返回顶部文字.png)");
});
//当鼠标离开时文字变回图标
$("#totop").mouseout(function() {
$("#totop").css("backgroundImage","url(WEB-INF/返回顶部图片.png)");
});
//当鼠标点击时回到顶部
$("#totop").click(function() {
$('body').animate({scrollTop:0},300);
});
2.jQuery中使用定时器的注意事项:
var icons_timer=setInterval(changeIcons,1000); //在jQuery中这样写生效。
var icons_timer=setInterval("changeIcons()",1000); //在JavaScript中这样写生效。
3.eq()选择器的注意事项:eq()选择器在传入数字的时候,是0-n的数组,在传入变量名(例如i)时,不论i实际上是变量还是常量,都需要在i两侧加上+号包裹起来才能执行:
//做选择器时
$(".imgnav li:eq(3)").css("border","1px solid red"); //数字
$(".imgnav li:eq("+i+")").css("border","1px solid red"); //变量
//做方法时
$(".imgnav ul li").eq(3).find('img').css("opacity","1"); //数字
$(".imgnav ul li").eq(i).find('img').css("opacity","1"); //变量
4.当页面中插入iframe标签,并且需要通过父元素控制iframe页面中的子元素的时候,使用如下方式:
注意:window.frames是一个数组,其中包含该窗口中的所有iframe
DOM方法:
父窗口操作IFRAME:window.frames[“iframeSon”].document
IFRAME操作父窗口: window.parent.document
jquery方法:
在父窗口中操作 选中IFRAME中的所有输入框:
(window.frames[“iframeSon”].document).find(“:text”);在IFRAME中操作选中父窗口中的所有输入框:
(window.parent.document).find(“:text”);
iframe元素的属性:
1. src=”test.html”
2. width=”700″
3. height=”300″
4. frameborder=”0″
5. scrolling=”auto”