Jquery文档接口遍历
2024-06-26 04:32:33
//
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();});
})转载于:https://www.cnblogs.com/tingbogiu/p/5825301.html
Jquery文档接口遍历相关推荐
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
为什么80%的码农都做不了架构师?>>> 原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使 ...
- jquery文档加载完毕后执行的几种写法
2019独角兽企业重金招聘Python工程师标准>>> 1.js文档加载完毕 标签内 οnlοad="test()" window.οnlοad=function ...
- JavaScript之jQuery够用即可（查找筛选器、属性操作、jQuery文档处理）
文章目录 一.筛选器补充 二.jQuery属性操作 三.jQuery文档处理 一.筛选器补充 1.过滤筛选器 就是查看某个标签中是否存在另外一个标签 // console.log($("di ...
- 话费充值接口文档接口版本：1.0
话费充值接口文档 接口版本:1.0 ―.引言 文档概述 本文档提供话费充值接口规范说明,提供一整套的完整的接入示例(http 接口)供商户参 考,可以帮助商户开发人员快速完成接口开发与联调,实现与话费 ...
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用"自定义"的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选 ...
- Scrapy笔记（2）——使用正则表达式提取jQuery文档内容
任务:提取如下网页中Data中内容: jQuery1123006065544693397551_1623470103055({"Message":"",&quo ...
- 11月17日学习内容整理：jquery文档处理，事件细讲，动画
一.文档处理:下面举例中的B可以是标签也可以是选择器也可以是字符串 >>>添加到指定元素内部的后面 $(A).append(B) // 把B放到A内部元素的最后,A是父节点$(A). ...
- jQuery文档就绪
很多jQuery代码都有如下片段: $(document).ready(function(){//代码 }) 作用就是等文档结构加载完成后再去执行function中的代码,功能类似于window.on ...
- api es7 删除所有数据_【Elasticsearch7.0】文档接口之查询delete接口
功能介绍 删除除了之前讲的之外,还有可以根据条件来进行删除._delete_by_query接口是对查询到的结果进行删除操作,如示例: curl -XPOST "http://127.0.0 ...
最新文章
- Inception GoogLeNet
- Java中的简单REST客户端
- opengl 实时波形显示_OpenGL1------OpenGL概述
- 微型计算机硬盘接口种类,硬盘接口类型
- ADS（Advanced Design system）仿真对电路进行阻抗匹配
- 从sockaddr_ipx到AF_IPX协议分析（一）
- 「 OptiTrack」搭建动作视觉运动捕捉系统教程
- 纯技术上来说，《看门狗》里的各种骇客技术有可能实现吗？
- MySQL Java的JDBC编程
- 多项式的乘法满足结合律和交换律
- Python学习随笔：PyCharm的错误检测使用及调整配置减少错误数量
- MY-IKuai-2
- sk_buff 介绍
- MOSFET管基本原理与应用
- 双目立体匹配算法SGBM
- Win 8带给我们的惊喜和遗失的美好
- 白加黑加载方式_基层干部白加黑的工作方式不可取
- 相机拍出来的图片有“水波纹”的原因
- python单词翻译-python 中英文翻译
- 技术人员的横向纵向发展