`

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 选择器整理 #### 基本选择器 **功能描述:** 基本选择器是jQuery中最常用的类型之一,它们提供了简单的DOM元素选择方式。通过这些选择器,开发者可以快速定位到页面中的特定元素。 **代码示例与...

    jQuery 选择器整理

    jQuery 选择器 XMind整理, 包含基本选择器,层级选择器, 过滤选择器

    jquery选择器整理

    自己巩固学习整理的jquery相关选择器,对初学来说还是很不错的,

    基于jQuery选择器的整理集合

    这篇文章将对jQuery选择器进行深入的整理和介绍。 首先,jQuery选择器可以分为基本选择器、层级选择器、属性选择器、内容选择器以及伪类选择器。基本选择器包括ID选择器(`#id`),类选择器(`.class`),元素选择...

    A_jquery+select框图片选择器点击图片给表单select框赋值Java实用源码整理learns

    1. **jQuery选择器**:jQuery的核心是其强大的选择器系统,允许开发者轻松地选取DOM元素。在这个案例中,可能使用了`$('selector')`来选取图片元素,如`$('.image-selector')`,然后绑定点击事件。 2. **事件处理**...

    Jquery表单-层级-内容-属性-子元素选择器知识点整理

    通过以上这些知识点的学习,可以更好地理解如何使用JQuery选择器来操作和处理DOM中的元素,从而提高Web开发效率。掌握这些选择器不仅有助于编写更高效的代码,还能帮助开发者更好地理解JQuery的工作原理。

    JQuery资料整理

    jQuery API提供了丰富的选择器、方法和功能,使得开发者能够高效地操作DOM(文档对象模型)。例如,`$()`函数是jQuery的入口点,可以用于选择DOM元素。选择器如`$("#id")`用于选取ID为特定值的元素,`.class`用于...

    精心为jQuery初学者整理的106个实例代码集

    **jQuery选择器** jQuery的选择器是其强大功能的关键所在。"jQ学习第一季"可能涵盖了ID选择器(如`$("#id")`)、类选择器(如`.class`)、元素选择器(如`$("element")`)以及组合选择器,如后代选择器(`$(".class...

    jquery 选择器部分整理

    jQuery选择器是jQuery库中最基本且强大的特性之一,它允许开发者快速准确地选取和操作DOM元素。在详细解读jQuery选择器之前,首先需要了解jQuery本身是一个JavaScript库,它通过简化的选择器和方法来简化HTML文档...

    jquery特效大全整理打包

    jQuery的核心功能包括选择器(用于选取HTML元素)、DOM操作(如添加、删除或修改元素)、事件处理(绑定和触发事件)以及Ajax请求。而其强大的动画功能,使得jQuery在网页特效方面独树一帜。 导航栏特效是网页设计...

    jQuery部分插件整理及教程

    1. **选择器**: jQuery提供了丰富的CSS选择器,如ID选择器(#id),类选择器(.class)等,使得选取DOM元素变得非常简单。 2. **链式调用**: jQuery对象返回的是一个jQuery对象,允许我们在一条语句中连续执行多个方法。...

    jquery开发入门整理(所需要了解的)

    ### 你应该学习jQuery的七大理由 #### 理由一:jQuery实现脚本与页面的分离 ...### jQuery选择器深入分析:避免不必要的调用 为了提高性能,应当尽量使用精确的选择器来获取DOM元素,避免不必要的遍历过程。

    w3school jQuery参考手册 飞龙整理 20141002

    本参考手册由W3School整理,旨在提供全面的jQuery选择器和事件方法的知识。 **jQuery 选择器** jQuery的选择器是基于CSS选择器进行扩展的,允许开发者更加精确地选取DOM(文档对象模型)中的元素。以下是一些基本...

    JQUERY知识整理文档

    ### 二、jQuery选择器 jQuery的选择器功能强大,支持CSS选择器、ID选择器、类选择器、属性选择器等多种方式来选取DOM元素。例如: - `$("#elementId")`:选取ID为`elementId`的元素。 - `$(".className")`:选取...

    jQuery选择器_动力节点Java学院整理

    jQuery选择器的设计使得开发者能够通过简洁的语法完成复杂的操作,极大地提高了开发效率。 一、选择器的作用 在没有jQuery之前,我们经常需要编写复杂和冗长的JavaScript代码来操作DOM元素,尤其是在多层嵌套的...

    jQuery学习笔记精心整理

    - **回顾CSS3子元素过滤选择器**:jQuery支持所有CSS3选择器,同时也提供了一系列新增的选择器,这些选择器本质上是通过JavaScript模拟实现的。 通过上述内容的学习,我们可以了解到jQuery作为一种流行的...

    精心为jQuery初学者整理的实例代码集

    1. **选择器**: jQuery的选择器允许开发者轻松地选取HTML元素。例如,`$("#myID")`选择ID为`myID`的元素,`$(".myClass")`选择所有类名为`myClass`的元素,`$("tagname")`则选择所有特定类型的元素。 2. **DOM操作*...

    韩顺平AJAX和jquery笔记整理

    jQuery选择器是jQuery的核心,它可以让我们选取特定的DOM元素并进行操作。基本选择器包括元素选择器、类选择器、ID选择器和通配符选择器等。层次选择器包括后代选择器和子选择器等。过滤选择器则用于更精细的选择,...

Global site tag (gtag.js) - Google Analytics