Jquery文档接口遍历
//children():获取所有子元素
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery</title> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
$(function() { $body = $("body").children(); $p = $("p").children(); $ul = $("ul").children(); alert($body.length+"---"+$p.length+"---"+$ul.length); for(var i=0;i<$ul.length;i++){ alert($ul[i].innerHTML); } })
next();获取匹配元素后面xianglin的同辈元素
$(function() { $ul = $("p").next(); alert($ul.length); for(var i=0;i<$ul.length;i++){ alert($ul[i].innerHTML); } })
prev();获取匹配元素前面xianglin的同辈元素
$(function() { $p = $("ul").prev(); alert($p.html()); })
siblings():获取前后面所有同辈元素,不再演示
closest()用来匹配最近的匹配元素,首先检查当前元素是否匹配,是返回,不是向上查找父元素--个人实验后,是选择距离鼠标指针最近的元素
$(function(){ $(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); }) }); //]]> </script> </head> <body> <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body>
还可以去设置元素高度height(),宽度width();
1.offset();
$(function(){ //获取<p>元素的color $("input:eq(0)").click(function(){ alert( $("p").css("color") ); }); //设置<p>元素的color $("input:eq(1)").click(function(){ $("p").css("color","red") }); //设置<p>元素的fontSize和backgroundColor $("input:eq(2)").click(function(){ $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) }); //获取<p>元素的高度 $("input:eq(3)").click(function(){ alert( $("p").height() ); }); //获取<p>元素的宽度 $("input:eq(4)").click(function(){ alert( $("p").width() ); }); //获取<p>元素的高度 $("input:eq(5)").click(function(){ $("p").height("100px"); }); //获取<p>元素的宽度 $("input:eq(6)").click(function(){ $("p").width("400px"); }); //获取<p>元素的的左边距和上边距 $("input:eq(7)").click(function(){ var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); }); })
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery</title> </head> <body> <input type="button" value="获取<p>元素的color"/> <input type="button" value="设置<p>元素的color"/> <input type="button" value="设置<p>元素的fontSize和backgroundColor"/> <input type="button" value="获取<p>元素的高度"/> <input type="button" value="获取<p>元素的宽度"/> <input type="button" value="设置<p>元素的高度"/> <input type="button" value="设置<p>元素的宽度"/> <input type="button" value="获取<p>元素的的左边距和上边距"/> <p title="选择你最喜欢的水果."><strong>你最喜欢的水果是?</strong></p> <ul> <li title='苹果'>苹果</li> <li title='橘子'>橘子</li> <li title='菠萝'>菠萝</li> </ul> </body> </html>
2.position
$("input:eq(8)").click(function(){
var position = $("p").position();
var left = position.left;
var top = position.top;
alert("left:"+left+";top:"+top);
});
3.scrollTop();获取滚动条距顶端距离
scrollLeft();获取滚动条距左侧距离
var scrollTop = $("textarea").scrollTop(); var scrollLeft = $("textarea").scrollLeft(); $("textarea").scrollTop(300); $("textarea").scrollLeft(300);
4.案例自带提示
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/js/jqr.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>jquery</title> <style type="text/css"> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } p{ clear:both; margin:0; padding:.5em 0; } /* tooltip */ #tooltip{ position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none; } </style> </head> <body> <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p> <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p> <p><a href="#" title="这是自带提示1.">自带提示1.</a></p> <p><a href="#" title="这是自带提示2.">自带提示2.</a></p> </body> </html>
$(function(){ $("a.tooltip").mouseover(function(e){ var x=10; var y=20; this.myTitle=this.title; this.title=""; var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>"; $("body").append(tooltip); $("#tooltip").css({ "top":(e.pageY+y)+"px", "left":(e.pageX+x)+"px" }).show("fast"); }).mouseout(function(){ $("#tooltip").remove(); this.title=this.myTitle; $("#tooltip").remove(); }); })
