`
nianshi
  • 浏览: 406902 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

jquery选择器摘要

阅读更多


jquery对象访问:

1. each(callback):以每个匹配的元素作为上下文来执行一个函数,return false;停止循环;return true;跳至下一个循环。
来个实例 :               
$("img").each(function(){
       $(this).toggle("example");
})
        

2.size()与length相同,都是返回jquery对象中元素的个数。
   $("img").size();或$("img").length;

3.get():取得所有匹配的DOM元素集合(注意返回是dom对象,而非jquery对象)
$("img").get().reverse();

4.get(index):取得其中一个匹配的元素。index表示匹配第几个元素,可以让你操作一个实际的dom元素。
$("img").get(0);//得到第一个匹配的img元素
$(this).get(0)与$(this)[0]等价

5.index(subject):搜索与参数表示的对象匹配的元素,并返回相应元素的索引值。

选择器-基本:
selector1,selector2,selectorN将匹配到的元素合并后一起返回
$("div,span,p.myClass");

选择器-层级:
1.ancestor descendant在给定的祖先元素下匹配所有的后代元素
    $("div input");//div下所有input

2.parent > child 在给定的父元素下匹配所有的子元素
    $("div > input);//父元素下的子元素

3.prev + next 匹配所有紧接在prev元素后的next元素
$("div + span")//紧接在div后的span

4.prev ~ siblings 匹配prev元素之后的所有siblings元素
$("form ~ input")//找到所有与表单同辈的input元素


选择器-简单:
1.:first 匹配找到的第一个元素
$("tr:first")//查找表格中第一行

2.:last 匹配找到的最后一个元素
$("tr:last")//匹配找到的最后一个元素

3.:not(selector) 去除所有与给定选择器匹配的元素
   ps:jquery 1.3中,已支持复杂选择器了(例如::not(div a)和:not(div,a))
   $("input not(:checked)")//所有未被选中的input元素

4.:even 匹配所有索引值为偶数的元素,从0开始计数
   $("tr:even")//查找表格中偶数行

5.:odd匹配所有索引值为奇数的元素,从0开始计数
   $("tr:odd")//查找表格中奇数行

6.:eq(index)匹配一个给定索引值的元素
   $("tr:eq(1)")//查找第二行

7.:gt(index)匹配所有大于给定索引值的元素
   $("tr:gt(0)")//查找大于0的所有行

8.:lt(index)匹配所有小于给定索引值的元素
$("tr:lt(2)")//查找小于2的所有行

9.:header 匹配如h1,h2,h3之类的标题元素
   $(":header").css("background",red");//所有标题加上背景色

10.:animated 匹配所有正在执行动画效果的元素

选择器-内容:
1.:contains(text) 匹配包含给定文本的元素
   $("div:contains('aaa')")查找所有包含有aaa的div元素

2.:empty()匹配所有不包含子元素或文本的空元素
  
$("td:empty")

3.:has(selector)匹配含有选择器所匹配的元素的元素
  
$("div:has(p)").addClass("test");//给所有包含p元素的div元素添加一个text类

4.:parent匹配含有子元素或者文本的元素
   $("td:parent");//查找所有含有子元素或者文本的td元素

选择器-可见性:
1.:hidden匹配所有不可见元素,input元素的type属性为hidden的话也会被匹配
  
$("tr:hidden");//查找所有不可见的tr元素

2.:visible匹配所有可见元素
   $("tr:visible");//查找所有可见的tr元素

选择器-属性:
1.[attribute]匹配包含给定属性的元素
   
$("div[id]")//查找所有含有id属性的div元素

2.[attribute=value]匹配给定的属性是某个特定值的元素
   
$("input[name='username']")//查所所有name=username的input元素

3. [attribute!=value]匹配所有不含有指定属性,或者属性不等于特定值的元素
     此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value])
    $("input[name!='username']")//查找所有name!=username的input元素

4. [attribute^=value]匹配给定的属性是以某些值开始的元素
    $("input[name^='user'])//查找所有name以'newws'开始的input元素

5. [attribute$=value]匹配给定属性是以某些值结尾的元素
   $("input[name$='letter']) //查找所有name以'letter'结尾的input元素

6. [attribute*=value]匹配给定的属性是以包含某些值的元素
   $("input[name*='man']")//查找所有name包含'man'的input元素

7. [selector1][selector2][selectorN]复合属性选择器,冉要同时满足多个条件时用。
    $("input[id][name='man']")//含有id属性,并且name为man的

选择器-子元素:
1.:nth-child(index/even/odd/equation)匹配其父元素下的第N个子或奇偶元素
    $("ul li:nth-child(2)")//在每个ul查找第2个li

2. :first-child匹配第一个子元素
    $("ul li:first-child")//在每个ul中查找第一个li

3.:las-child匹配最后一个子元素
    $("ul li:last-child")// 在第个ul中查找最后一个li

4.only-child如果某个元素是父元素中唯一的子元素,那将会被匹配,如果父元素中含有其他元素,不会被匹
   $("ul li:only-child")//在ul中查找是唯一子元素的li

选择器-表单:
1.:input ,:text ,:password ,:radio , :checkbox ,:submit ,:image ,:reset ,:button , :file
2.:hidden匹配所有不可见元素,或type为hidden的元素

选择器-表单对象属性:
1.:enable匹配所有可用元素
   $("input:enabled")//查找所有可用的input元素

2.:disabled匹配所有不可用元素
   $("input:disabled")//匹配所有不可用元素

3.:checked匹配所有选中的被选中元素(复选框、单选框、不包括select中的option)
    $("input:checked")//查找所有选中的复选框元素

4.:selected匹配所有选中的option元素
    $("select option:selected")//查找所有选中的选项元素

分享到:
评论

相关推荐

    jQuery学习资料

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

    jQuery ColorPicker网页取色器、颜色选择器 v1.0

    摘要:脚本资源,jQuery,拾色器, jQuery ColorPicker颜色选择器【网页取色器】,有的也称拾色器,总之它是运行在网页上截取屏幕颜色值的小工具,可以把某点的颜色值转换至对应格式传入需要的地方。ColorPicker基于...

    从零开始学习jQuery (二) 万能的选择器

    编写任何javascript程序我们要首先获得对象, jQuery选择器能彻底改变我们平时获取对象的方式, 可以获取几乎任何语意的对象, 比如”拥有title属性并且值中包含test的元素”, 完成这些工作只需要编写一个jQuery选择器...

    从零开始学习JQuery

    从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) ...

    从零开始学习jQuery (九) jQuery工具函数

    大部分人仅仅使用jQuery的选择器选择对象, 或者实现页面动画效果. 在处理业务逻辑时常常自己编写很多算法. 本文提醒各位jQuery也能提高我们操作对象和数组的效率. 并且可以将一些常用算法扩充到jQuery工具函数中, ...

    从零开始学习jQuery (三) 管理jQuery包装集

    摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着学习如何管理jQuery包装集, 比如添加,删除,切片等. 二.前言 本系列的2,3篇上面列举了太多的API相信大家...

    jQuery时间插件,日期选择插件

    摘要:脚本资源,jQuery,日历选择器,日期插件 jQuery日期插件,写了个简单的。呵呵。  引入了jQuery1.6.2,也可用更高版本的jQuery,可实现鼠标拖动,按住鼠标左键即可拖动日期插件,还可以设置拖动的加速度、拖动的...

    三个基于jQuery的JS复选框全选反选例子

    摘要:脚本资源,jQuery,全选,反选 三个基于jQuery的JS复选框全选反选例子,实用的网页特效,三款例子大同小异。所有checkbox跟着全选的checkbox走,定义一个临时变量,避免重复使用同一个选择器选择页面中的元素,...

    jQuery 开天辟地入门篇一

    摘要 二.前言 三.什么是jQuery jQuery是一套Javascript脚本库. 在我的博客中可以找到”Javascript轻量级脚本库”系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户...

    jquery瀑布流 图片无限加载代码

    摘要:脚本资源,jQuery,瀑布流 一款简单的jquery瀑布流特效,完美实现了图片的ajax无限加载效果,相关参数设置说明:  column_width:240,//列宽  column_className:'waterfall_column',//列的类名  column_space:...

    jQuery-Resumo-por-Palavras:插件创建文本摘要,限制单词数

    jQuery Word摘要插件可创建受单词数限制的文本摘要。 ##依赖关系:[jQuery]( ) ###用 $()....## 参数objs:CSS选择器限制:将显示的单词数verMore:摘要后要显示的文本(例如“查看更多”或“ ...”)

    jquery-mutation-summary:一个用于jQuery-wrapper-summary的jQuery wrapper插件,DOM突变-观察者包装器

    突变摘要库将多个DOM突变聚集为一个整洁的变更集,可以选择。 看看“突变摘要”的创建者。 得到它 演示版 :原始副本,但该库为默认选项。 Shuffle.html在中进行解释。 :聆听列表中的简单突变。 用法 有关 ,和...

    jQuery jcDate时间选取插件(选取时间段)

    摘要:脚本资源,jQuery,时间插件,...jQuery jcDate时间选取插件,支持选取时间段,日期选取插件,可选择起始时间和结束时间的日期选择器,适合用于酒店预订、车票预订、数据统计等应用场合。 运行环境:HTML/PHP/ASP/

    从零开始学习jQuery (一) 开天辟地入门篇

    摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何...

    jQuery EasyUI 1.3 API 中文教程

    下拉选择框 - Custom Combo 下拉组合框 - ComboBox 数据表格下拉框 - ComboGrid 树形下拉框 - ComboTree 日期输入框 - DateBox 日期时间输入框 - DateTimeBox 数字输入框 - NumberBox 格式化数字...

    IRC-Logbot:具有链接提取和过滤功能的 IRC Logbot。 这是一个频道档案生成器。 演示

    Clansuite IRC-LogBot 这是一个改进的 IRC Channel Logbot ...演示变更日志0.3.0 - 将 0.2.0 与 0.1.1 合并修改: 增加了 v0.2.0 的过滤功能过滤使用 jquery 选择器并立即切换删除了 cookie 功能,谷歌不喜欢它们在

    paramquery-7.1.0.zip

    它提供了最快的jQuery网格,treegrid,pivot网格和电子表格等最令人垂涎​​的功能,并且基于性能,卓越的UX和开放标准的原则构建。Pro的以下功能是对ParamQuery Grid基本功能的补充。 专业功能: 也可用于...

    FileUploadManager:ASP.NET MVC 5文件上传管理器

    File Upload小部件,具有多个文件选择,拖放支持,进度栏,验证和预览图像,jQuery的音频和视频。 支持跨域,分块和可恢复的文件上传。 与支持标准HTML表单文件上传的任何服务器端平台( ASP.NET ,PHP,Python,...

    EasyUI tutorial 中文版 chm

    使用jQuery easyUI 创建一个 RSS Feed阅读器 Drag and Drop easyUI 基础的拖动和放置 使用easyUI创建一个拖放的购物车 使用easyUI创建一个课程表 Menu and Button 使用easyUI创建简单的菜单 使用easyUI...

    Updated_Portfolio:我更新的投资组合页面

    导航栏位于顶部,用户可以从三个选项(英语,西班牙语和意大利语)中选择一种语言。 已经创建了非常相似HTML文件来满足针对自动和盲文阅读器的可访问性要求。 一个汉堡包按钮正在部署一个侧栏(移动设备上的水平...

Global site tag (gtag.js) - Google Analytics