`
wsql
  • 浏览: 11714875 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

jQuery 之 选择器总结(上篇)

 
阅读更多

jQuery的选择器非常的像CSS的选择器.他们两者都有一个非常大的优点,就是将对象和行为给区分开了,充分体现了内容和操作的完全的分离,就好像我们提倡的OOA,OOP一样,HTML中的元素就是静态的,在JS中,可以动态的取得HTML中的对象进行行为的添加,样式的添加,这样可以非常容易修改.

jQuery做为一个JavaScript库,封装了JavaScript的操作,提倡write less do more的理念,相对传统的JavaScript代码而言,最大的好处在于以后不用考虑JavaScript的兼容性了,我们可以放心的使用jQuery而不用管浏览器是否会支持这些选择器.除此之外,jQuery具有简洁的写法,完善的处理机制.

jQuery分为基本的选择器,层次选择器,过滤选择器还有表单选择器,该篇主要举今天下午练习的基本选择器,层次选择器,过滤选择器的用法,都将以上内容写到一个例子中,如下:

=====================以上代码20090910下午======================================

jQuery的基本选择器:

1)有通过给定的id来选取一个jQuery对象----->$('#id')

2)有通过给定的类名来选取一个jQuery对象的集合--->$('.class')

3)有通过给定的元素来选取一个jQuery对象的集合--->$('element')

4)有通过通配符*号来选取该网页中的所有的jQuery对象的集合--->$('*')

5)有通过多个选择器匹配之后进行选择合并而得到jQuery对象的集合-->$('selector1,selector2..')

实际开发中,基本选择器完成了绝大多数的工作.

jQuery层次选择器:

1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant')

2)可以选取某一个元素的子辈的所有的元素,得到一个jQuery对象的集合-->$('prev>son')

3)可以选取某个元素节点之后的元素,得到一个jQuery对象的集合-->$('prev+next') 或者$('prev').next(' ')

4)可以选取某一个元素对象之后的所有的同胞元素-->$('prev~siblings)或者$('prev').nextAll(' ')

5)可以选取某一个元素对象的所有的同胞元素,不管是在前面的还是在后面的-->$('prev').siblings(' ')

jQuery的过滤选择器

jQuery的过滤选择器又分为多种,其中包含基本的过滤选择器,内容过滤浏览器,可见性过滤浏览器,属性过滤浏览器,子元素过滤浏览器,和表单对象属性浏览器(jQuery 之 选择器总结 下篇 附加表单选择器内容)

一.基本过滤选择器的内容

1)我们可以选取第一个元素----->:first------>$('div:first')

2)我们可以选取最后一个元素----->:last-------->$('div:last')

3)可以去除所有与给定选择器匹配的元素--->:not(selector)---->$('div:not(.class)')

4)可以选取所有下标为偶数的元素----->:even----->$('div:even')

5)可以选取所有小标为奇数的元素----->:odd------>$('div:odd')

6)可以选取索引下标等于给定的值的元素------>:eq(index)------>$('div:eq(10)')

7)可以选取索引下标小于给定值的元素--------------->:lt(index)---->$('div:lt(10)')

8)可以选取索引下标大于给定值的元素------------->:gt(index)----->$('div:gt(10)')

9)可以选择所有的标题的元素,比如说h1,h2,h3...等等------>:header------>$(':header')

10)可以选择当前正在活动的元素(执行动画的元素)----->:animated----->$('div:animated')

二.内容过滤选择器

1)可以选取含有文本为指定值的元素---->:contains(text)---------->$('div:contains(nihao)')

2)可以选取不包含子元素或者文本的空元素---->:empty-------->$('div:empty')

3)可以选取含有选择器所匹配的元素的元素----------------->:has(selector)----------->$('div:has(p)')

4)可以选择符合只有一个孩子(文本元素也算),就是有内容的元素--------->:parent--------->$('div:parent')

三.可见性过滤选择器

1)可以选取不可见的元素----------------->:hidden------------->$('div:hidden')

2)可以选取可见的元素------------------------->:visible------------>$('div:visible')

四.属性过滤选择器

1)可以选取拥有此属性的元素--------------->[attribute]------------>$('')

2)可以选择属性等于指定属性值的元素----------------->[attribute=value]------------>$('div[title=nihao]')

3)可以选择属性不等于指定值的元素---------------->[attribute!=value]------------->$('div[title!=nihao]')

4)可以选择属性值以指定值开始的元素---------------->[attribute^=value]--------->$('div[title^=ni]')

5)可以选择属性值以指定值结尾的元素----------------->[attribute$=value]---------------->$('div[title$=hao]')

6)可以选择属性值中含有指定值的元素--------------->[attribute*=value]---------------->$('div[title*=ih]')

7)可以使用属性选择器进行多次选择满足多个条件----->[selector][selector]------------->$('div[id][title*=ih]')

五.子元素过滤选择器

1)可以选取每个父元素下面第几个子元素,或者是奇偶元素---->:nth-child(index/even/odd)---->这个是从1开始计算的!

2)可以选取每一个父元素下面的第一个子元素------------>:first-child

3)可以选取每一个父元素的最后一个子元素----------->:last-child

4)如果每个元素是它父元素中唯一的子元素,那么会被匹配,否者都无--->:only-child

分享到:
评论

相关推荐

    jQuery之日期选择器

    jQuery之日期选择器,之前是看到一篇文章,然后自己总结了一下,希望能帮到大家,No 3q

    jQuery学习资料

    五.jQuery选择器全解 13 六 jQuery选择器实验室 19 七.API文档 20 八.总结 20 从零开始学习jQuery (三) 管理jQuery包装集 21 一.摘要 21 二.前言 21 三.动态创建元素 21 四.管理jQuery包装集元素 25 五.常用函数举例...

    jQuery选择器全面总结

    本篇文章主要是对jQuery选择器进行了全面的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    jQuery技术三合一教程(电子书 + 理论总结+常用效果源码实践)

    理论篇:对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识,以及《锋利的JQUERY》读书笔记精华完整版。 实践篇:Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...

    jquery选择器简述

    本篇文章主要是对jQuery选择器进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助

    jquery 列表双向选择器之改进版

    记得之前发表过一篇《Jquery简单应用总结》,最后有一个自己做的列表双向选择器,感觉有点挫,昨天闲着没事改进了一下,把元素改成了select option这样就支持shift多选,代码量也精简了些。 我的双向选择器支持批量...

    jQuery实现鼠标经过图片预览大图效果

    jQuery中的核心知识点就是选择器的使用,选择器的内容我会在之后的博客中总结,希望大家去看下,学好了选择我器,相当于完全掌握了jQuery。 这篇博文是实现怎么通过jQuery实现我们在购物网站中常见的:当鼠标经过了...

    jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下; 一、JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察。 不使用...

    15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】

    本文总结述了15个值得开发人员关注的jQuery开发技巧和心得。非常精辟实用!分享给大家供大家参考,具体如下: 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! ...

    对jQuary选择器的全面总结

    下面小编就为大家带来一篇对jQuary选择器的全面总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    .net C# 学习过程中收藏的一些比较有用的和感兴趣的链接

    http://www.360doc.com/userhome.aspx?userid=19107491&cid=3 jQuery基本选择器及用法 前端模块化开发(AMD和CDM规范) http://wenku.baidu.com/view/25ddbf420b4e767f5acfcee0.html jQuery.getJSON的缓存问题的解决...

    仿JQuery输写高效JSLite代码的一些技巧

    然而,我计划根据他人对jQuery总结的一些速度方面的技巧和一些建议,来教你提升你的JSLite和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。 首先,在脑子里牢牢记住JSLite就是...

    Jquery中map函数的用法

    很久没用map()这个函数了,由于最近看一篇react的文章,其中有谈到map()这个函数,于是就重新查了一些资料,发现map()函数可以用在不同的地方,下面小编总结具有内容分享给大家,也方便今后查找。 其实,本人一直很...

    周末总结正则表达式(完整篇)

    1、正则表达式-完结篇 —工具类开发— <?php /* * PHP 正则表达式工具类 * 描述:进行正则表达式匹配,有常用的正则表达式以及允许用户自定义正则表达式进行匹配 */ class regexTool{ //定义常用正则表达式,...

    老男孩第三期Python全栈开发视频教程 零基础系统学习Python开发视频+资料

    ├─(23) 07 python s3 day43 jquery选择器.avi ├─(24) 08 python s3 day43 jquery的查找筛选器.avi ├─(25) 09 python s3 day43 jquery练习之左侧菜单.avi ├─(26) day43课件代码.rar (8)\\python全栈day41-50\...

    java开发erp源码-NSFW_Systen:学SSH时写的纳税服务系统,详情可看ReadMe

    我跟着练习一步一步完成需求,才发觉原来Java是这样用来做网站的,Java有那么多的类库,页面的效果(图表、日期选择器等等)是通过JavaScript组件来显示,调用后端代码来获取数据从而显示出来的。 通过这次的项目开阔...

Global site tag (gtag.js) - Google Analytics