jquery琐碎事
映像里jquery的选择器用了很多次了,每次都是用几遍 感觉很熟悉了,很长时间不用就又忘了,然后再用的时候有得用试错法或者查文档,以后要养成写文档笔记的习惯,这样可以加深自己的映像。
1.jquery选择器
jQuery(document).ready(function(){
var aa=jQuery("#mod_2242>div").eq(1).css("margin-top","330px");
console.log(aa);
});
jQuery("#mod_2242>div") "#mod_2242>div"表示id=mod_2242下的所有div标签的子节点,在实际使用中发现此种写法和"#mod_2242 div"效果相同
css("margin-top","330px") //设置元素css样式的margin-top属性,还有一种写法css({margin-top:"330px"}) 但这种写法书写margin-top属性时会报错,很诧异!
2.jquery图片轮转的一段代码,很简单。
<script language="javascript">
var len=4;
var st=0;
jQuery(document).ready(function(){
setInterval("showAuto()",2000);
jQuery("#imageTurn ul li").click(
function(){
var current_index=$(this).index();
jQuery("#imageTurn dl").each(
function(){
jQuery(this).removeClass("show");
}
);
jQuery("#imageTurn dl").eq(current_index).addClass("show");
jQuery("#imageTurn ul li").each(function(){jQuery(this).removeClass("nub")});
jQuery("#imageTurn ul li").eq(current_index).addClass("nub");
}
);
//jQuery(".Bimg").hover(function(){clearInterval("showAuto()");},function(){setInterval("showAuto()",2000);});
});
function showAuto(){
if(st>3){
st=0;
}else{
st++;
}
jQuery("#imageTurn ul li").eq(st).trigger("click");
}
</script>
3.jquery 获取元素的高度
获取浏览器显示区域的高度 :
$(window).height();
获取浏览器显示区域的宽度 :
$(window).width();
获取页面的文档高度 :
$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :
$(document).scrollTop();
获取滚动条到左边的垂直宽度 :
4.使用jquery循环显隐菜单的常用代码段:
jQuery(".showmore_title").click(function(){
var status=jQuery("#tool_list").css("display");//获取对应元素下css属性的值
if(status=="none"){
jQuery("#sider_bar_nav").css({"position":"fixed"});
jQuery(".showmore_title").css("background-image","url(./yii/css/image/wind/Tip_up.jpg)");
jQuery("#tool_list").show();
}else{
jQuery("#sider_bar_nav").css({"position":""});
jQuery(".showmore_title").css("background-image","url(./yii/css/image/wind/Tip_down.jpg)");
jQuery("#tool_list").hide();
}
})
目前为止,还是把jquery当作工具,能完成工作就ok了,对其中的一些细节基本上是不求甚解,先这样吧。