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文档接口遍历的更多相关文章
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- jquery文档加载几种写法，图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
- jQuery 文档操作 - prependTo() ，appendTo()方法
其他jquery文档操作方法:http://www.w3school.com.cn/jquery/jquery_ref_manipulation.asp jQuery 参考手册 - 文档操作 appe ...
随机推荐
- zepto源码--matches--学习笔记
zepto的第一个函数,zepto.matches: 作用:用来匹配dom元素是否匹配某css selector. 它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, close ...
- JMeter学习-003-JMeter与LoadRunner的异曲同工
本节主要对 JMeter 与 LoadRunner 的优缺点进行概要的总结,若有不足之处,敬请指正,不胜感激! 同时,我也不得不承认,在对 JMeter 和 LoadRunner 进行比较时,我个人的 ...
- UpdatePanel AsyncPostBackTrigger PostBackTrigger 区别
1.使用代码的方式进行编写. 2. Trigger属性: 1)AsyncPostBackTrigger :只是UpdatePanel中指定的进行了局部刷新. 2)PostBackTrigger : 整 ...
- 圆角边框_css控制形状
border-radius:500px 来让整个图像变成圆形. border-top-left-radius: 6px;(左上角圆角) border-top-right-radius: 6px;( ...
- 30天，O2O速成攻略【8.15济南站】
活动概况 时间:2015年08月15日13:30-16:30 地点:山东大学凤岐茶社(山东大学中心校区北门18号楼东连廊一层) 主办:APICloud.蚁巡 网址:www.apicloud.com 费 ...
- 私有IP地址范围
私有IP地址范围 有一部分的地址专门是用于内网的地址,包括: A类中 10.0.0.0/8 B类中 172.16.0.0/12 ~ 172.31.0.0/12 C类中 192.168.0.0/16 这 ...
- Chrome控制台调试工具用法
下面我们来看看console里面具体提供了哪些方法可以供我们平时调试时使用. Console API 当打开 firebug (也包括 Chrome 等浏览器的自带调试工具),window 下面会注册 ...
- 6、JavaScript进阶篇③——浏览器对象、Dom对象
一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...
- [GeoServer]重拾GeoServer之安装篇
GeoServer的项目是一个完整的Java(J2EE)系统,现实了OpenGIS联盟的网络功能服务器规范和网络覆盖服务器规范,并且集成了Web地图服务器. 在大三的时候WebGIS课程中老师讲解过一 ...
- category应用（计算nssting的数量）
// // main.m // 03-分类应用 // // Created by apple on 14-3-18. // Copyright (c) 2014年 apple. All rig ...