jquery筛选器
2024-10-19 04:24:25
1、过滤
eq(index|-index) 获取当前链式操作中第N个jquery对象,正数从0开始,负数从-1开始。
first 获取当前链式操作中第1个jquery对象
last 获取当前链式操作中最后一个jquery对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>this is a test</p>
<p>so it is</p>
<p>this just a test</p>
<div class="div"></div>
<script src="jquery-3.1.0.js"></script>
<script type="text/javascript">
// 获取所有返回的p元素中第一个和第-2个元素
$("p").eq(1).text()
$("p").eq(-2).text()
$("p").first()
$("p").last()
console.log(objs)
</script>
</body>
</html>
2、查找
children([expre]) 所选元素下的所有子元素,
find(e|o|e) 搜索所有与指定表达式匹配的元素,包括子元素、孙元素等
next(expr) 所有匹配的元素紧临的下一个同辈元素的集合
nextAll([expr]) 所有匹配元素后面紧临的所有同辈元素的集合
prev([expr]) 所有匹配的元素紧临的前一个同辈元素的集合
prevAll([expr]) 所有匹配元素前面紧临的所有同辈元素的集合
parent([expr]) 所有匹配元素的唯一父元素,即上一级元素,而不包括上上级元素
siblings([expr]) 所有匹配元素的前后同辈元素集合
示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--HTML区域-->
<h1>第一个标题</h1>
<div class="nav-2014">
<div class="w">
<div class="w-spacer"></div>
<div class="categorys">
<div class="dt">家用电器分类</div>
<div class="dp">家用电器价格</div>
</div>
<span class="hr"></span>
<div class="navitems-2014">
<div id="treasure"></div>
<span class="clr"></span>
<span class="chr"></span>
男:<input type="checkbox" checked="checked" value="nan">
女:<input type="checkbox" value="nv">
</div>
</div>
</div>
<h2>第二个标题</h2>
<div id="electronic">
<div id="firstScreen">1
<div class="w">2</div>
</div>
<ul>
<li class="ui-switch-curr">第一</li>
<li class="ui-switch-item"></li>
<li class="ui-switch-next">第三</li>
<li class="ui-switch-sub">第四</li>
</ul>
<ul>
<div class="ul_div"></div>
<li class="lizi_ws_fruit" name="zhuang_guo">
<div class="test">test</div>
梨</li>
<li class="ws_pingguo_fruit" name="zhuan_wang">苹果</li>
<li id="elpsq" name="zhuang_dang"></li>
</ul>
<div class="secord_screen">
<div></div>
</div>
<div class="third_screen"></div>
</div> <!--jquery区域-->
<script src="jquery-3.1.0.js"></script>
<script>
// 匹配id为electronic元素的所有子元素,即下一级元素,孙元素不包括在内
$("#electronic").children()
$("#electronic").children("[class$=screen]")
// 匹配所有ul标签下的所有div标签,包括子元素及孙元素等
$("ul").find("div")
// 匹配id为firstScreen的元素的下一个同辈元素,即ul元素
$("#firstScreen").next()
// 匹配span标签的下一个同辈元素中属性为chr的元素
$("span").next(".chr")
// 匹配id为firstScreen的元素后面的所有紧临同辈元素
$("#firstScreen").nextAll()
// 匹配div标签中class值为test的父元素
$("div .test").parent()
// 匹配class属性名为switch的前一个同辈元素
$(".ui-switch-next").prev()
// 匹配class属性名为switch的前面所有同辈元素
$(".ui-switch-sub").prevAll()
// 匹配class值为ui-switch-next的元素前后所有同辈元素
$(".ui-switch-next").siblings()
// 匹配class值为categorys的元素的前后所有同辈元素中,span标签元素
$(".categorys").siblings("span")
console.log(objs)
</script>
</body>
</html>
最新文章
- 【软件】【diamond】-管脚分配
- linux rlwrap
- linux安装配置SVN并设置钩子
- SharePoint 禁用本地回环的两个方法
- 监控mysql主从同步状态脚本
- 常用的MyEclipse快捷键
- Tesseract-OCR识别验证码
- Android Studio 模拟器启动问题——黑屏 死机 解决方法
- php 回调函数
- %02d
- 终于将 SQL Server 成功迁移至 MySQL8.0 啦!!!
- linux date -s
- session前后台交互
- aliyun install Discourse log
- node.js中ws模块创建服务端和客户端,网页WebSocket客户端
- 假期训练八(poj-2965递归+枚举,hdu-2149,poj-2368巴什博奕)
- Android之apk优化
- AjaxAnywhere的用法(FORWARD)
- [Swift实际操作]七、常见概念-(1).范围Range、ClosedRange和NSRange的使用实际操作
- AutoDetectChangesEnabled及AddRange解决EF插入的性能问题