首页 > 代码库 > Jquery文档接口遍历
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(); });})
Jquery文档接口遍历
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。