jQuery 查找元素操作实例小结

 更新时间:2019年10月02日 11:59:30   作者:kevin.Xiang  
这篇文章主要介绍了jQuery 查找元素操作,结合实例形式总结分析了jQuery针对页面元素的各种常见查找操作实现方法,需要的朋友可以参考下

本文实例讲述了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常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结

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

相关文章

  • JQuery移动页面开发之屏幕方向改变与滚屏的实现

    JQuery移动页面开发之屏幕方向改变与滚屏的实现

    这篇文章主要介绍了JQuery移动页面开发之随屏幕方向改变与滚屏的实现,通过相关两个事件的添加来达到响应移动设备上操作的效果,需要的朋友可以参考下
    2015-12-12
  • Jquery中attr与prop的区别详解

    Jquery中attr与prop的区别详解

    在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。下面这篇文章主要给大家介绍了Jquery中attr与prop区别的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • jQuery插件uploadify实现ajax效果的图片上传

    jQuery插件uploadify实现ajax效果的图片上传

    本文主要介绍使用jQuery插件uploadify实现ajax效果的图片上传的功能,有需要的朋友可以参考一下。
    2016-06-06
  • jQuery阻止冒泡和HTML默认操作

    jQuery阻止冒泡和HTML默认操作

    jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发。
    2010-11-11
  • 基于jQuery实现挂号平台首页源码

    基于jQuery实现挂号平台首页源码

    这篇文章主要介绍了基于jQuery实现挂号平台首页源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • jQuery之动画效果大全

    jQuery之动画效果大全

    本篇文章主要介绍了jQuery之动画效果,详细的介绍了各种动画特效的用法,有需要的可以了解一下。
    2016-11-11
  • ztree简介_动力节点Java学院整理

    ztree简介_动力节点Java学院整理

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件,本文给大家简单介绍下ztree的基本知识,感兴趣的朋友一起看看吧
    2017-07-07
  • jQuery实现的手机发送验证码倒计时效果代码分享

    jQuery实现的手机发送验证码倒计时效果代码分享

    这篇文章主要为大家详细介绍了jQuery实现手机注册发送验证码倒计时功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2015-08-08
  • JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    JQuery.uploadify 上传文件插件的使用详解 for ASP.NET

    今天下午整理文件上传的例子,感觉收集到的例子都很不人性话,后来找到一个还可以的,本来想改成类似于腾讯QQ相册那种方式,仔细看了一下是Flash的, 而且那个极速上传插件也不知道用什么做的?问了一下,说是什么cgi. 搞得一头雾水
    2010-01-01
  • jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    jQuery通过ajax请求php遍历json数组到table中的代码(推荐)

    这篇文章主要介绍了jQuery通过ajax请求php遍历json数组到table中代码(推荐)的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论