jquery selector 基础

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

转载于:https://www.cnblogs.com/jazzka702/archive/2010/02/27/1674845.html

jquery selector 基础相关推荐

jQuery零基础入门——（三）层级选择器
2019独角兽企业重金招聘Python工程师标准>>> <jQuery零基础入门>系列博文是在廖雪峰老师的博文基础上,补充了个人的理解和日常遇到的点,用我的理解表述出来, ...
jquery 语法基础
来源:http://www.cnblogs.com/A_ming/archive/2011/05/04/2036293.html jquery 语法基础基本语法: $("HTML元素&qu ...
jQuery入门基础-附案例
文章目录预备知识与后续知识及项目案例为什么要学jquery jQuery介绍 JavaScript 库 jQuery的概念 jQuery的优点体验jquery的使用 jquery到底是什么 jq ...
jquery selector 使用方法
jquery selector 使用方法 <select class="selector"></select> 1 设置value为pxx的项选中$(&qu ...
js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些一.总结一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
JQuery动画基础：上卷下拉
开发工具与关键技术: JQuery 作者:咕哒咕哒giao 撰写时间:2019年4月16日今天要说的是JQuery动画基础其中之一:上卷下拉的动画效果. 上卷下拉的话分别是JQuery中的 slid ...
【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框
文章目录 JQuery Mobile基础 1. 页面与对话框 1.1 简单的helloworld 1.2 利用JQuery脚本DIY闪光灯效果 1.3 不断切换的场景 1.4 整人游戏 1.5 手机被 ...
Duplicated jQuery selector
// 设置值 $(':text').val('ly')// 获取值 console.log($(':text').val()) 在使用 jQuery 书写这两行代码是,Pycharm 会给出 Dupl ...
从零开始学jQuery(1)--基础知识
别问我为什么突然跳到jquery了-我只能说-前面一点刚看的没怎么理解-就这里比较好理解 jQuery jQuery可能很多人都有一点印象,是个比较好用的查询方式,利用jQuery可以比较容易的查询到 ...

jquery selector 基础

jquery selector 基础相关推荐

最新文章

热门文章