当前位置:  编程技术>jquery

jquery选择器大全详解

    来源: 互联网  发布时间:2014-10-04

    本文导语:  jquery选择器的重要性。 选择器并没有一个固定的定义,在某种程度上说,jquery的选择器和样式表中的选择器十分相似。 选择器具有如下特点: 1,简化代码的编写 2,隐式迭代 3,无须判断对象是否存在 其中“$”是选择器不...

jquery选择器的重要性。

选择器并没有一个固定的定义,在某种程度上说,jquery的选择器和样式表中的选择器十分相似。

选择器具有如下特点:
1,简化代码的编写
2,隐式迭代
3,无须判断对象是否存在
其中“$”是选择器不可缺少的部分,在jquery库中,$就是jquery的一个简写形式,比如$("#foo")和jquery("#foo")是等价的,$.ajax和jquery.ajax是等价的。
如果没有特别说明,可以把程序中的$符号都理解为jquery的简写形式。

、根据选择器的功能习惯将选择器进行分类,下面将不同类型的分类器进行分类,并且分别进行解释说明。

一、基本选择器
基本选择器包括5种选择器:#id、element、.class、*和selectorl,selector2.selectorn,下面将配合实例分别介绍每种选择器的作用及使用方法。
1,#id选择器
#id选择器根据给定的id匹配一个元素。如果选择器中包含特殊字符,可以用两个斜杠转义,其返回值为array。
2,element选择器
element选择器是一个用于搜索的元素。指向dom节点的标签名。其返回值为array。
3,class选择器
.class选择器根据给定的类匹配元素,是一个用以搜索的类。一个元素可以有多个类,只要有一个符合就能被匹配到,其返回值为array。
举例:
 

代码示例:

根据元素名称选择

jquery("#id").val();
jquery("a").text();
jquery(".classname").val();

即可分别得到元素的值。以上三种为最常见的选择器,其中id选择器是效率最高的,在可能的情况下应该尽量使用它。
4,*选择器
*选择器多用于结合上下文来搜索,匹配所有元素的选择器。其返回值为array。
5,selector1,selector2,selectorn选择器
这类选择器选择器即将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器,并将匹配到的元素合并到一个结果内,其返回值为:array。在下例中通过对选择的项进行css操作来使读者清晰地了解selector1,selector2,selectorn选择器的作用。

二、层级选择器
层级选择器包括5种形式:ancestor、descendant、parent > child、prev + next和prev ~ siblings。下面配合实例分别详细介绍每种选择器的作用及使用方法。
1,ncestor descendant选择器
其指在给定的祖先元素下匹配所有的后代元素,作为参数的ancestor代表任何有效的选择器,而descendant则用以匹配元素的选择器,并且它是第一个选择器的后代。其返回值为:array。
2,parent>child选择器
parent>child选择器代表在给定的父元素下匹配所有的子元素。两个参数分别代表的意思如下:parent代表任何有效选择器;child用以匹配元素的选择器,并且它是第一个选择器的子元素。其返回值为array。
3,prev+next选择器
这类选择器的作用是匹配所有紧接在prev元素后的next元素。两个参数分别代表的意思如下:prev代表任何有效选择器;next代表一个有效选择器并且紧接着第一个选择器。其返回值为array。
4.prev ~ siblings选择器
prev ~ siblings选择器代表匹配prev元素之后的所有siblings元素。两个参数分别代表的意思如下:prev代表任何有效选择器;siblings代表一个选择器,并且它作为第一个选择器的同辈。其返回值为array。

举例:
 

代码示例:





1
2

//得到div中的a标签内容 结果为12
jquery("#divtest a").text();
//输出div直接子节点 结果为投资
jquery("#divtest>input").val();
//输出id为next的后一个同级别元素 结果为担当
jquery("#next+input").val();
//同上,并且是有title的元素 结果为学习
jquery("#next~[title]").val();

三、过滤选择器
过滤选择器主要通过特定的过滤规则来筛选出所需要的dom元素,过滤规则与css中的伪类选择器语法相同,即选择器都以一个冒号开头。
过滤选择器涉及的内容较多,总共有6 种类型,但是其可以进行归类。下面我们将对各种类型的选择器进行详细讲解。
1,基本过滤选择器
基本过滤选择器是过滤选择器中最常用的一种,其主要包括以下几种形式,在此做详细说明:
(1):first/:last选择器。
(2):not选择器。
(3):even和:odd选择器。
(4):eq:gt、:lt、选择器。
(5):header选择器。
(6):animated选择器。
举例:
 

代码示例:

   

  • 投资

  • 理财

  • 成熟

  • 担当



  •    


//第一个li内容 结果为投资
jquery("li:first").text();
//最后一个li内容 结果为担当
jquery("li:last").text();
//input未被选中的值 结果为不学习
jquery("li input:not(:checked)").val();
//索引为偶数的li 结果为投资 成熟
jquery("li:even").text();
//索引为奇数的li 结果为理财 担当
jquery("li:odd").text();
//索引大于2的li的内容 结果为担当
jquery("li:gt(2)").text();
//索引小于1的li的内容 结果为投资
jquery("li:lt(1)").text();

2,容过滤选择器
内容过滤选择器主要包括:contains、:empty、:has、:parent 4种过滤器,这部分过滤器是对上面介绍基本过滤选择器的一个补充,对于页面选取、设置元素显示等方面发挥着重要的作用。下面将对各选择器进行详细的介绍。
(1):contains选择器。
(2):empty选择器。
(3):has选择器。
(4):parent选择器。
举例:
 

代码示例:

   

  • hyip投资

  • hyip


  • 理财

  • 投资

  •    

  
//包含hyip的li的内容 结果为hyip投资 hyip
jquery("li:contains('hyip')").text();
//内容为空的li的后一个li内容 结果为理财
jquery("li:empty+li").text();
//包含a标签的li的内容 结果为投资
jquery("li:has(a)").text();

3,可见性过滤选择器
可见性过滤选择器比较简单,其包含两种选择器,主要是用来匹配所有可见元素和不可见元素。下面将会对这两种选择器进行详细介绍。
(1):hidden选择器。
(2):visible选择器。
举例:
 

代码示例:

       
  • 可见

  •    
  • 不可见


//不可见的li的内容 结果为不可见
jquery("li:hidden").text();
//可见的li的内容 结果为可见
jquery("li:visible").text();

4,属性过滤选择器
属性过滤选择器是用于匹配包含给定属性的元素,当然也可以匹配不包含此属性的元素等。属性过滤选择器共含有以下7种选择器。
(1) [attribute]选择器。
(2)[attribute=value]、[attribute!=value]选择器(此处包含两种)。
(3)[attribute^=value]、[attribute$=value]、[attribute*=value]选择器(此处包含三种)。
(4)[selector][selector2]选择器。
举例:
 

代码示例:



//name为hyipinvest的值 结果为hyip投资
alert(jquery("input[name='hyipinvest']").val());
//name以hyip开始的值 结果为hyip投资
alert(jquery("input[name^='hyip']").val());
//name以hyip结束的值 结果为投资hyip
alert(jquery("input[name$='hyip']").val());
//name包含oo的值 结果为hyip
alert(jquery("input[name*='oo']").val());

5,子元素过滤选择器
html由层层嵌套在一起的标签组成,由于一些标签需要进行单独处理,如何选取一个或者一些特定的嵌套标签在程序中就成为了一个问题。jquery提供了子元素过滤选择器解决了这个问题。它包括4个选择器,具体内容将在下面详细讲解。
(1):nth-child选择器。
(2):first-child、:last-child选择器(两种)。
(3):only-child选择器。

6,表单对象属性过滤选择器
这部分内容相当简单,只包含四种类型的选择器,这些选择器分别用来匹配可用元素或者不可用元素、选中元素等。下面将以实例的形式对此部分内容进行讲解。
(1):enabled、:disabled选择器。
(2):checked选择器。
(3):selected选择器。
表单过滤选择器是用于处理html中表单的选择器,其中不仅仅包括经常用到的按钮、文本域、单选框、复选框等,还涉及了很少用到的图片、隐藏域、文件上传等标签。下面将会对这些选择器进行具体介绍。
(1):input选择器。
(2):text、:password选择器。
(3):radio、:checkbox选择器。
(4):submit、:image、:reset、:button、:file选择器。
(5):hidden选择器。
query选择器就总结到这里,相信大家很快就可以熟练使用jquery选择器了。

jquery选择器之属性过滤选择器
Jquery选择器全面总结(实例)
Jquery 选择器的用法介绍
jQuery :visible 选择器(冒号)的用法
jquery css 选择器的实现代码
jquery选择器的用法
Jquery选择器实现隔行变色的代码
Jquery常用选择器
jquery 选择器引擎sizzle的使用


    
 
 

您可能感兴趣的文章:

  • jQuery - css() 方法示例详解
  • jquery EasyUI导入js顺序详解
  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
  • jQuery focus和blur事件的应用详解
  • jquery操作select详解(取值,设置选中)
  • Jquery中"$(document).ready(function(){ })"函数的使用详解
  • Jquery性能优化详解
  • jQuery插件开发的两种方法及$.fn.extend的详解
  • Jquery遍历修改url请求参数的代码详解
  • jquery选择器之内容过滤选择器详解
  • JQuery动画animate的stop方法使用详解
  • jquery判断浏览器类型实例详解
  • jquery操作css样式表文件的方法详解
  • Jquery中$命名冲突问题详解
  • 详解jquery的substring,substr,split的用法
  • jquery中each的用法详解
  • JQuery下拉控件select操作方法大全 iis7站长之家
  • jQuery之ajax删除详解
  • jquery与直接写JS的区别详解
  • jquery移除、绑定、触发元素事件使用示例详解
  • jQuery日期选择插件 jQuery UI Datepicker
  • jQuery 行政区选择插件 jQuery distpicker
  • jQuery 日期选择插件 jQuery-datepicker
  • jQuery区间选择控件 jquery range picker
  • jQuery的选择器引擎 Sizzle
  • jQuery下拉选择插件 MagicCombo
  • jQuery颜色选择器 ExColor
  • jQuery 颜色选择器 mColorPicker
  • jQuery日期选择插件 glDatePicker
  • jQuery 的日期选择插件 jdPicker
  • jQuery颜色选择器插件 Farbtastic
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • 使用jquery中height()方法获取各种高度大全
  • JQuery下拉控件select操作方法大全
  • Jquery操作select实例大全
  • jquery 操作input标签方法大全
  • jquery选择器大全 全面详解jquery选择器
  • jquery操作select大全
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin
  • jQuery日历插件 jQuery Week Calendar
  • jQuery的中文日历插件 jQuery.datePickerCn
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery的CSV插件 jQuery CSV
  • jQuery的气泡提示插件 jquery.ns_bub.js
  • jQuery气泡提示插件 jquery-rollover-tooltip
  • jQuery对话框 jQuery Modal Dialog
  • jQuery 插件 jQuery Ripples
  • 精简版的jQuery jQuery.ish
  • jQuery的OpenSocial插件 OpenSocial jQuery


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3