jQuery 查找元素操作实例小结


Posted in jQuery onOctober 02, 2019

本文实例讲述了jQuery 查找元素操作。分享给大家供大家参考,具体如下:

1. id

// 通过id查找
$('#id')

2. class

<div class='c1'></div>
// 通过class查找
$('.c1')

3. 标签、组合

<div id='i1' class='c1'>
  <a>x</a>
</div>
<div class='c1'>
  <div class='c2'>x</div>
</div>
// 标签:找到所有a标签
$('a')

4. 层级

<div>up</div>
<div id='i10'>
  <div>
    <a>x</a>
  </div>
    <a>x</a>
    <a>x</a>
</div>
<div>down</div>
// 以" "分割
// 查找指定id标签下的所有a标签
$('#i10 a')
// 以">"分割
// 查找指定id标签下子标签下的所有标签
$('#i10>div')
// 以"+"分割
// 查找指定id标签同级下的下一个div标签
$('#i10+div')
// 以"~"分割
// 查找指定id标签同级的所有div标签
$('#i10~div')

5. :first

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
// 获取匹配的第一个元素
$('li:first');
// 塞选某个ID下标签下的第一个元素
$('#ID>标签:first')

6. :eq(index)

<table>
 <tr><td>Header 1</td></tr>
 <tr><td>Value 1</td></tr>
 <tr><td>Value 2</td></tr>
</table>
// 匹配一个给定索引值的元素
$("tr:eq(1)")

7. :last()

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>
// 获取最后个元素
$('li:last')

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
jQuery实现html双向绑定功能示例
Oct 09 jQuery
jQuery实现滚动效果
Nov 17 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery实现的网站banner图片无缝轮播效果完整实例
Jan 28 jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
基于jQuery拖拽事件的封装
Nov 29 jQuery
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 #jQuery
jquery中attr、prop、data区别与用法分析
Sep 25 #jQuery
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 #jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 #jQuery
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 #jQuery
基于jquery ajax的多文件上传进度条过程解析
Sep 11 #jQuery
You might like
基于php下载文件的详解
2013/06/02 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
Javascript 中的 &amp;&amp; 和 || 使用小结
2010/04/25 Javascript
in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案
2011/07/26 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
常规表格多表头查询示例
2014/02/21 Javascript
多引号嵌套的变量命名的问题
2014/05/09 Javascript
jquery实现的下拉和收缩效果示例
2014/08/21 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
基于jQuery实现动态搜索显示功能
2016/05/05 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
微信小程序实现Swiper轮播图效果
2019/11/22 Javascript
微信小程序动态评分展示/五角星展示/半颗星展示/自定义长度展示功能的实现
2020/07/22 Javascript
Windows下安装python2.7及科学计算套装
2015/03/05 Python
django初始化数据库的实例
2018/05/27 Python
tensorflow 获取模型所有参数总和数量的方法
2018/06/14 Python
python实现简单flappy bird
2018/12/24 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
Pytorch 实现冻结指定卷积层的参数
2020/01/06 Python
Django数据库迁移常见使用方法
2020/11/12 Python
PyQt实现计数器的方法示例
2021/01/18 Python
心得体会范文
2014/01/04 职场文书
办理生育手续介绍信
2014/01/14 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
省级优秀班集体申报材料
2014/05/25 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
先进个人事迹材料(2016推荐版)
2016/03/01 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL