Jquery的这套选择符是比较帅气的,借用了XPath2.0和CSS1-3中的语法,并且兼容了多个浏览器,让原本非常复杂的DOM,一下子变得简单起来了,手中最新的版本是1.2.2b,下面的所有例子,也是根据此版本提供的例子。
测试HTML代码:
<div id="father">
<div id="first">I am first</div>
<div id="second" class="red">I am second</div>
<div id="third" style="display:none">I am third</div>
</div>
<p class="red">I am forth</p>
<h4></h4>
基础:
#id:根据对象的id属性获取对象。
alert($('#first').html());
//显示I am first
element:匹配某一HTML标签的所有对象
alert($('div').length);
//显示4
.class:根据对象的class属性获取对象
alert($('.red').length);
//显示2
*:获取所有的对象
alert($('*').length);
//显示HTML中对象的和,但是不同的浏览器,结果会有所不同
selector1, selector2, selectorN:获取多个选择符的合集,不剔出重复项。
alert($('.red,#second,p').length);
//显示4
层级选择符:
ancestor descendant:这个选择符就是空格,表示先找到第一个选择符的所有对象,然后在他的子孙节点中找到所有符合第二个选择符的对象。
alert($('#father .red').html());
//显示I am second
parent > child:这个选择符就是大于号,表示先找到第一个选择符的所有对象,然后在他的子节点(不能是孙节点)中找到所有符合第二个选择符的对象。
alert($('#father > .red').html());
//显示I am second
prev + next:这个选择符就是加号,表示先找到第一个选择符的所有对象,然后找和他同级的紧跟着的下一个节点同时符合第二个选择符的对象。
alert($('#father + .red').html());
//显示I am forth
prev ~ siblings:这个选择符就是~号,表示先找到第一个选择符的所有对象,然后找和他同级的以后所有节点里面同时符合第二个选择符的对象。
alert($('#first ~ #third').html());
//显示I am third
基础过滤符:
:first:匹配多个对象中的第一个对象
:last:匹配多个对象中的最后一个对象
alert($('.red:first').html());
//显示I am second
alert($('div:last').html());
//显示I am third
:not(selector):匹配去除了not后面选择符中内容的项
alert($('.red:not(#second)').html());
//显示I am forth
:even:匹配所有对象中的第偶数个
:odd:匹配所有对象中的第奇数个
alert($('div:even').length);
//显示2
alert($('div:odd').length);
//显示2
:eq(index):匹配某一下表的单独某元素
alert($('div:eq(2)').html());
//显示I am second
:gt(index):匹配大于某一下标的所有元素
:lt(index):匹配小于某一下标的所有元素
alert($('div:gt(1)').length);
//显示2
alert($('div:lt(2)').length);
//显示2
:header:匹配所有的header元素,例如h1,h2,h3,h4,h5,h6
alert($(':header').length);
//显示1
:animated:匹配所有有动画效果的元素
function animateIt()
{
$("#second").slideToggle("slow", animateIt);
}
animateIt();
alert($(':animated').html());
//显示I am second
文本过滤符:
:contains(text):匹配内部拥有该文本元素的对象,包含间接有用的情况
alert($('div:contains("first")').length);
//显示2
:empty:匹配所有没有子元素的对象
alert($(':header:empty').length);
//显示1
:has(selector):匹配所有至少含有一个子选择符的对象
alert($('div:has("#third")').attr('id'));
//显示father
:parent:匹配所有的父对象,父对象包含那些只含有文本的对象
alert($('div:parent').length);
//显示4
可见性过滤符:
:hidden:匹配所有隐藏对象,或者input中的hidden类型
:visible:匹配所有可见的对象
alert($('div:hidden').length);
//显示1
alert($('div:visible').length);
//显示3
属性过滤符:
[attribute]:匹配拥有某一属性的所有对象
[attribute=value]:匹配拥有某一属性和值的对象
[attribute!=value]:匹配拥有某一属性,且不是某一值的对象
[attribute^=value]:匹配拥有某一属性,且以某一值开头的对象
[attribute$=value]:匹配拥有某一属性,且以某一值结尾的对象
[attribute*=value]:匹配拥有某一属性,且包含某一值的对象
alert($('div[class]').html());
//显示I am second
alert($('div[class=red]').html());
//显示I am second
alert($('div[id!=father]').length);
//显示3
alert($('div[id^=f]').length);
//显示2
alert($('div[id$=d]').length);
//显示2
alert($('div[id*=ir]').length);
//显示2
[selector1][selector2][selectorN]:匹配同时符合多个属性选择符的对象
alert($('div[id=second][class^=r]').length);
//显示I am second
子过滤符:
:nth-child(index/even/odd/equation):匹配子元素中的某一下标/偶数/奇数/等式的对象,:eq(index)只能匹配某单一对象的子元素特征,而这个方法可以匹配多个对象的某一子元素共同特征
alert($('#father div:nth-child(1)').html());
//显示I am first
alert($('#father div:nth-child(even)').length);
//显示1
alert($('#father div:nth-child(odd)').length);
//显示2
alert($('#father div:nth-child(3n)').length);
//显示1,其实是每3个一匹配
:first-child:匹配第一个子元素
:last-child:匹配最后一个子元素
这两个匹配符也可以对多个父对象的所有子元素进行匹配操作
alert($('#father div:first-child').html());
//显示I am first
alert($('#father div:last-child').html());
//显示I am third
:only-child:如果一个父元素只有一个子元素,就匹配这个子元素
alert($('div:only-child').length);
//显示0
This entry was posted
分享到:
相关推荐
jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context ); }, // A ...
jQuery基础+选择器 教程,适合入门初学者了解jQuery...
jQuery学习笔记: jQuery学习 1、基本语法: $(selector).action() $:定义jQuery selector:选择符,查询和查找HTML元素 action():对元素执行的操作 实例: $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...
代码 $("selector").load(url,data,function(response,status,xhr)) 该方法是最简单的从服务器获取数据的方法。它几乎与 $.get(url, data, success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。当...
基础语法是:$(selector).action() • 美元符号定义 jQuery • 选择符(selector)“查询”和“查找” HTML 元素 • jQuery 的 action() 执行对元素的操作 示例 $(this).hide() - 隐藏当前元素 $("p").hide() - ...
本文实例讲述了jQuery基础语法。分享给大家供大家参考。具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作。 代码如下:$(selector).action() 下面就对以上语法规则进行详细的阐述:...
$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是...
使用jQuery的方式来操作DOM更加的简洁、方便,统一的调用方式方便学习并且可降低学习成本。 1、样式属性操作 1)设置样式属性操作 ①设置单个样式: // 第一个参数表示:样式属性名称 // 第二个参数表示:样式属性...
第24行很关键, 代码如下: jQuery = window.jQuery = window.$ = function( selector, context ) { // The jQuery object is actually just the init constructor ‘enhanced’ return new jQuery
下面简单的来说一下 jQuery 中事件的基础操作。 绑定事件和事件代理 在 jQuery 中,提供了诸如 click() 这样的语法糖来绑定对应事件,但是这里推荐统一使用 on() 来绑定事件。语法: .on( events [, selector ] [, ...
图片滚动效果相信对大家来说都不陌生,烂大街的效果图如下所示,js实现代码很短,不过如果想做的话,必须掌握jquery、IIFE、setInterval等基础以及$.fn用法: jquery中$.fn用法 $.fn是jquery的命名空间,如果对...
之前一篇文章介绍了jQuery Validate表单验证入门的基础知识,详细内容参见《jQuery Validate表单验证入门学习》,今天这篇文章深入学习jQuery Validate表单验证,以下就是文章的全部内容: 1、用其他方式替代默认的 ...
格式: 代码如下:$(“selector: first”)用于对当前jQuery集合进行过滤并选择出第一个匹配元素 实例: 代码如下:$(“td:first”).css(“border”, “2px solid blue”); 2. :last选择器 格式: 代码如下:$(“selector: ...
Reactor 是一个基于 JVM 之上的异步应用基础库。为 Java 、Groovy 和其他 JVM 语言提供了构建基于事件和数据驱动应用的抽象库。Reactor 性能相当高,在最新的硬件平台上,使用无堵塞分发器每秒钟可处理 1500 万事件...
JqueryToolkit 基础文档 创建一个新插件: $ . toolkit ( 'namespace.pluginName' , { . . protoype . . } ) ; 使用上面描述的工具包创建插件,您现在可以通过执行以下操作来实例化您的插件: $ ( 'selector' )...
Api文档基础选择器$(selector)/kss(selector)传入"#id"/".class"/"tag"/elem/function(Ready方法),支持带空格如".class tag",不支持伪类,返回kss对象。.eq(index)传入索引值,返回对应的节点的kss对象。
环境配置 :check_mark: Javascript:基础知识 :check_mark: Javascript:控制权 :check_mark: Javascript:Função :check_mark: Javascript:Objeto :check_mark: Javascript:数组 :check_mark: 节点 :check_...
如果您构建一个带有少量JS交互的简单网页,则不需要使用整个堆栈(Browserify / Webpack + Babel + jQuery的组合足以能够在不同文件中编写ES6代码),但是如果您想构建一个可扩展的Web应用程序,并且需要设置方面的...
基础用法//vanilla js KUTE.fromTo('selector', fromValues, toValues, options).start(); //with jQuery plugin $('selector').fromTo(fromValues, toValues, options).start();高级用法//vanilla js...
PJAN是在Pjax基础上加入JSON支持的插件,原作者Welefen。 1.0版本详细文章: 作者:长岛冰泪 示例代码 jQuery(document).ready(function(w){ var $page_title=''; w.pjan({ selector: 'a',//选择器。可用jQuery...