在jQuery中 常用的选择器介绍
层次选择器：
$('div p');//选取div下的所有的p元素
$('div>p').css('border','1px solid red');//只选取div下的直接子元素
//相邻的元素
$('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的
所有p兄弟元素
$('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素
$('div +p').css('border','1px solid red');与$('div').next('p')等价//这种写法表示div后
只找紧挨着的第一个兄弟元素，并且该元素是p。
获得兄弟元素的方法：
next(); //当前元素之后的紧邻着的第一个兄弟元素（下一个）
nextAll();//当前元素之后的所有兄弟元素
prev();//当前元素之前的紧邻着的兄弟元素（上一个）
prevAll();//当前元素之前的所有兄弟元素
siblings();//当前元素的所有兄弟元素
基本过滤选择器：
$('p:first')与$('p').first()是等价的。获取所有p元素中的第一个P元素
$('p:last')与$('p').last()
$('p:eq(2)')在所有的p元素中找到索引为2的元素
$('p:even')选取所有奇数的p标签
$('p:odd')选取所有偶数的p标签
$('p:not(.tst)').css();选取所有的不应用.tst这种样式的p元素not后面写一个选择器名称
$('p:gt(1)')选取所有索引值大于1的p元素
$('p:lt(3)')选取所有索引值小于3的p元素。
$(':header')选取页面上所有的h1-h6的元素。（如果这样写的话，中间绝对不能有空格。）
属性过滤选择器：
$("div[id]")选取有id属性的<div>
$("div[title=test]")选取title属性为“test”的<div>，jQuery中没有对getElementsByName
进行封装，用$("input[name=abc]")
$("div[title!=test]")选取title属性不为“test”的<div>
还可以选择开头【name^=值】、结束【 name$=值】、包含【 name*=值】等，条件还
可以复合。【[属性1=a][属性2=b]…】（*）
表单对象属性选择器（过滤器）：
$("#form1 :enabled")选取id为form1的表单内所有启用的元素
$("#form1 :disabled")选取id为form1的表单内所有禁用的元素
$(“input:checked”)选取所有选中的元素（Radio、CheckBox）,这个中间不能加空格.
$("select :selected")选取所有选中的选项元素（下拉列表）
表单滤选择器：
$('#form1:enabled');//这个表示能够启用的且id为form1的标签
$('#form1 :enabled')；//这个表示能够启用的且id为form1下的所有启用的元素。
$('input:checked')
$('input:disabled')
$ ('select:selected')
$(“:input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样，
$("input")只获得<input>
$(":text")选取所有单行文本框，等价于
$("input[type=text]"),$(‘input[type=text]'),$(‘:text');
$(“:password”)选取所有密码框。
内容过滤选择器：
:contains(text):过滤出包含给定文本的元素。
：empty包含没有子元素的或者是内容为空的元素。
：has(selecttor)
:parent 获得有子元素的元素。
可见性过滤器：
:hidden
选取所有不可见元素包括:(如果直接写:hidden则会包含head\title\script\style….)
1.表单元素type=“hidden”
2.设置css的display:none
3.高度和宽度明确设置为0的元素。
4.父元素时隐藏的，所以子元素也是隐藏的
visibility: hidden 与opacity为0不算，因为还占位所以不认为是hidden.(与之前版本
jQuery不太一样，1.3.2之前)
:visible
选取所有可见元素
子元素过滤选择器：
first-child 与first的区别：first只能选取第一个，而first-child,则能选取每个子元素的第一个元素。
last-child：
only-child:匹配当前父元素中只有一个子元素的元素。
nth-child:对比eq()来理解，eq()值匹配一个，nth-child()为每个父元素都要匹配一个子元素。
nth-child(index),index从1开始
nth-child(even)
nth-child(odd)
nth-child(3n),选取3的倍数的元素
nth-child(3n+1)满足3的倍数+1的元素
注意：
1.通过jQuery选择器选择的对象本身就是一个jQuery对象，选择器具有隐式迭代 的作用，例如：
$('p').click(function(){
alert(this.innerText);
});
是为所有的p都注释了click事件。
2.无论选择器选择了几个元素返回的一个元素都是一个集合对象，如果没有找到相应的元素，则这个集合对象的length值为0，如果选择到了元素，这个length的元素就是选择的元素的索引值。所以也根据这个属性来判断元素是否存在。例如：
Iif($('#div').length>0)//判断元素是否存在
3.在事件中this还是表示当前触发事件的元素的对象，但是这里的this是dom对象而不是jQuery对象。如果需要执行jQuery中的方法或属性时，应该把this转换为jQuery对象
转换方式为：$(this);
相关推荐
-
JQuery 选择器、过滤器介绍
今日的学习再结合昨天的JavaScriptDOM的内容,让我对此十分清晰.JQuery原则:"write less, do more.",这句话已充分说明它对简化使用JavaScriptDOM编程的功力! 每位老师都有自己的教学方式,可能根据教授的内容的不同教学方式也有轻微的变化.老佟是一位非常有经验的软件教师,之前他在大连的软件公司做培训.经过多年的总结,他已经有自己一套成熟的教学方式.这个方式让我十分喜欢!至于是什么方式,你自己来体验吧!哈哈~~ 从学习JavaWEB.Struts
-
jQuery基本选择器选择元素使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.基本选择器:是jQuery中使用最频繁的选择器,它由元素Id.Class.元素名.多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择
-
jQuery层次选择器选择元素使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.
-
jQuery基本过滤选择器使用介绍
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.简单过滤选择器:根据某类过滤规则进行元素的匹配,书写时都以冒号(:)开头:简单过滤选择器是过滤选择器中使用最广泛的一种 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.内容过滤选择器.可
-
jquery选择器的选择使用及性能介绍
在写完第一回之后,看到了朋友们的回复,指出了我代码中的一些问题,确实由于时间仓促没有使用IDE,直接搞上了,又由于本人记忆力不好,所以把大小写都忘记了,还好晚上回家,用VS改了一下,呵呵,真是对不住大家了. 从这一讲开始,我们将直正接触一个JQ类库,学习一下JQ的写法,JQ的一些常用的命令等等,今天主要讲的是JQ里的选择器,这也是JQ的一大特点,这从它的名称jQuery中可以看到,主要功力体现在查询上. 前言:对于写在<script></script>中的代码,一般在JS环境,我们
-
JQuery中$之选择器用法介绍
1.$.在jQuery 中$("<span>"),这个语法等同于$(document.createElement("span")) ,这是一种用法,在选择元素的时候还会这样子的用:[attribute$=value],匹配给定的属性是以某些值结尾的元素.下面举个例子来说明一下: HTML代码 <input name="newsletter" /> <input name="milkman" /&g
-
JQuery 中几个类选择器的简单使用介绍
复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestClassSelector.aspx.cs" Inherits="WebApplication1.TestClassSelector" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999
-
在jQuery中 常用的选择器介绍
层次选择器: $('div p');//选取div下的所有的p元素 $('div>p').css('border','1px solid red');//只选取div下的直接子元素 //相邻的元素 $('div ~ p).css('border','1px solid red');与$('div').nextAll('p')等价;//表示div后面的 所有p兄弟元素 $('div ~ *').css('border','1px solid red');//表示div后面的所有兄弟元素 $('di
-
jQuery中的类名选择器（.class）用法简单示例
本文实例讲述了jQuery中的类名选择器(.class)用法.分享给大家供大家参考,具体如下: 一.介绍 类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素. 在一个页面中,一个元素可以有多个CSS类,一个CSS类又可以匹配多个元素,如果有元素中有一个匹配的类的名称就可以被类名选择器选取到. 类名选择器很好理解,在大学的时候大部分人一定都选过课,可以把CSS类名理解为课程名称,元素理解成学生,学生可以选择多门课程,而一门课程又可以被多名学生所选择. CSS类与元素的关系既可以是多对多的
-
jQuery中常用动画效果函数(日常整理)
jquery中动画效果非常多,下面小编给大家分享一下jquery中的动画函数. jQuery的效果函数列表: animate():对被选元素应用"自定义"的动画. clearQueue():对被选元素移除所有排队的函数(仍未运行的). delay():对被选元素的所有排队函数(仍未运行)设置延迟. dequeue():运行被选元素的下一个排队函数. fadeln():逐渐改变被选元素的不透明度,从隐藏到可见. fadeOut():逐渐改变被元素的不透明度,从可见到隐藏. fadeTo(
-
JQuery中属性过滤选择器用法实例分析
本文实例讲述了JQuery中属性过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
jQuery中常用的遍历函数用法实例总结
本文实例总结了jQuery中常用的遍历函数用法.分享给大家供大家参考.具体如下: 1. children()函数 children()函数用于选取每个匹配元素的子元素,并以jQuery对象的形式返回. 你还可以使用选择器进一步缩小筛选范围,筛选出符合指定选择器的元素. 用法示例如下: // 返回jQuery对象所有匹配元素的标识信息数组 // 每个元素形如:tagName或tagName#id(如果有id的话) function getTagsInfo($doms){ return $doms.
-
JQuery中基础过滤选择器用法实例分析
本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
-
Extjs中常用表单介绍与应用
目标: 知道表单面板如何创建 了解表单面板中xtype的类型的应用 知道表单面板如何验证,绑定,取值 综合应用表单面板(玩转它) 内容: 首先我们要理解的是FormPanel也是继承panel组件的.所以它有着panel的属性 要创建一个表单面板其实很简单 var MyformPanel=new Ext.form.formpanel(); 表单面板和面板一样只是作为一个容器出现的,需要我们使用items加入各控件元素来丰富我们的表单面板, defaults:{},此属性提取了items中各组件项
-
jQuery中[attribute^=value]选择器用法实例
本文实例讲述了jQuery中[attribute^=value]选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够选取属性值是以某些值开始的元素. 语法结构: 复制代码 代码如下: $("[attribute^=value]") 参数列表: 参数 描述 attribute 属性名称. value 元素数属性开始的值. 引号在大多数情况下是可选的.但在遇到诸如属性值包含"]"时,用以避免冲突. 实例代码: 实例一: 复制代码 代码如下: <!DOCT
-
jQuery中复合属性选择器用法实例
本文实例讲述了jQuery中复合属性选择器用法.分享给大家供大家参考.具体分析如下: 此选择器能够匹配同时满足多个属性条件的元素. 语法结构: 复制代码 代码如下: [selector1][selector2][selectorN] 参数列表: 参数 描述 selector1 属性选择器. selector2 另一个属性选择器,用以进一步缩小范围. selectorN 任意多个属性选择器,也是用来缩小范围. 实例代码: 复制代码 代码如下: <!DOCTYPE html> <html&g
-
python中常用的数据结构介绍
栈 # 使用List作为栈 stack = [3, 4, 5] # 入栈 stack.append(6) # 出栈 val = stack.pop() # 栈定元素 val = stack[-1] 队列 队列是FIFO, 但是List对于First Out效率不够高.通常用双端队列Deque来实现队列 Deque的特点是,两端添加和删除都是O(1)的时间复杂度 from collections import deque queue = deque(["Eric", "John