`

JQuery技术总结（选择器篇）

JQuery技术总结选择器 
阅读更多

JQuery技术总结（选择器篇）

 

jQuery 选择器

    jQuery 选择器继承了 CSS 与 Path 语言的部分语法，允许通过标签名、属性名或内容对DOM 元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过 jQuery 选择器对页面元素的精准定位，才能完成元素属性和行为的处理。

 

选择器的优势

  与传统的 JavaScript 获取页面元素和编写事务相比，jQuery 选择器具有明显的优势，具体表现在以下两个方面：

    代码更简单。

完善的检测机制。

 

 

2. 完善的检测机制

  在传统的 JavaScript 代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在 JavaScript 代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。

 

<!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">

  <head>

      <title>JavaScript 代码检测页面元素 </title>

      <style type="text/css">

          body{font-size:12px;text-align:center}

      </style>

      <script type="text/javascript">

          window.onload=function(){

             if(document.getElementById("divT"))

                    {

                      var oDiv=document.getElementById("divT");

                      oDiv.innerHTML=" 这是一个检测页面 ";

                   }

          }

      </script>

  </head>

  <body>

  </body>

  </html>

 

  在 JavaScript 代码中，有一行代码如下：

  if(document.getElementById("divT")){...}

  该行代码用于检测所定位的页面元素是否存在，如果存在，则执行下面的代码，否则不执行；假设不编写该行代码检测元素的存在，则在浏览器中将出现出错提示信息。

 

jQuery 选择器详解

  根据所获取页面中元素的不同，可以将 jQuery 选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器 6 种。

 

基本选择器是 jQuery 中使用最频繁的选择器，它由元素 Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找。

选择器                          功能                        返回值

  #id                   根据给定的 ID 匹配一个元素                        单个元素

  element                 根据给定的元素名匹配所有元素                       元素集合

  .class                  根据给定的类匹配元素                           元素集合

  *                       匹配所有元素                               元素集合

  selector1,selectorN     将每一个选择器匹配到的元素合并后一起返回                 元素集合

 

 

层次选择器

   层次选择器通过 DOM 元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素。

 

         选择器                                 功能                  返回值

    ancestor descendant           根据祖先元素匹配所有的后代元素                元素集合

    parent > child                根据父元素匹配所有的子元素                  元素集合

    prev + next                   匹配所有紧接在 prev 元素后的相邻元素          元素集合

    prev ~ siblings               匹配 prev 元素之后的所有兄弟元素            元素集合

 

   说明：ancestor descendant 与 parent > child 所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next 可以使用 .next() 代替，而 prev ~siblings 可以使用 nextAll() 代替。

 

简单过滤选择器

  过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种。

 

       选择器                                 功能                      返回值

  first() 或 : first          获取第一个元素                              单个元素

  last() 或 : last            获取最后一个元素                             单个元素

  :not(selector)             获取除给定选择器外的所有元素                       元素集合

  :even                      获取所有索引值为偶数的元素，索引号从 0 开始              元素集合

  :odd                       获取所有索引值为奇数的元素，索引号从 0 开始              元素集合

  :eq(index)                 获取指定索引值的元素，索引号从 0 开始                 单个元素

  :gt(index)                 获取所有大于给定索引值的元素，索引号从 0 开始             元素集合

  :lt(index)                 获取所有小于给定索引值的元素，索引号从 0 开始             元素集合

  :header                    获取所有标题类型的元素，如 h1、h2……                元素集合

  :animated                  获取正在执行动画效果的元素                        元素集合

 

内容过滤选择器

  内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位。

 

       选择器                               功能                        返回值

  :contains(text)             获取包含给定文本的元素                         元素集合

  :empty                      获取所有不包含子元素或者文本的空元素                  元素集合

  :has(selector)              获取含有选择器所匹配的元素的元素                    元素集合

  :parent                     获取含有子元素或者文本的元素                      元素集合

 

可见性过滤选择器

  可见性过滤选择器根据元素是否可见的特征获取元素，。

 

   选择器                            功能                                  返回值

   :hidden       获取所有不可见元素，或者 type 为 hidden 的元素                       元素集合

   :visible      获取所有的可见元素                                            元素集合

 

 

属性过滤选择器

   属性过滤选择器根据元素的某个属性获取元素，如 ID 号或匹配属性值的内容，并以“[”号开始、以“]”号结束。

 

                选择器                            功能             返回值

  [attribute]                         获取包含给定属性的元素             元素集合

  [attribute=value]                   获取等于给定的属性是某个特定值的元素      元素集合

  [attribute!=value]                  获取不等于给定的属性是某个特定值的元素     元素集合

  [attribute^=value]                  获取给定的属性是以某些值开始的元素       元素集合

  [attribute$=value]                  获取给定的属性是以某些值结尾的元素       元素集合

  [attribute*=value]                  获取给定的属性是以包含某些值的元素       元素集合

  [selector1][selector2][selectorN]   获取满足多个条件的复合属性的元素        元素集合

 

子元素过滤选择器

  在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器 :eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery 中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。

               选择器                                 功能               返回值

:nth-child(eq|even|odd|index)      　获取每个父元素下的特定位置元素，索引号从 1 开始      元素集合

:first-child                       　获取每个父元素下的第一个子元素                元素集合

:last-child                        　获取每个父元素下的最后一个子元素               元素集合

:only-child                        　获取每个父元素下的仅有一个子元素               元素集合

 

表单对象属性过滤选择器

   表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如 enabled、disabled、checked、selected 属性。

       选择器                         功能                     返回值

       :enabled           获取表单中所有属性为可用的元素                 元素集合

       :disabled          获取表单中所有属性为不可用的元素                元素集合

       :checked           获取表单中所有被选中的元素                   元素集合

       :selected          获取表单中所有被选中 option 的元素           元素集合

 

表单选择器

     无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在 jQuery 选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。
                                            

       选择器                           功能                              返回值

    :input                 获取所有 input、textarea、select                元素集合

    :text                  获取所有单行文本框                                 元素集合

    :password              获取所有密码框                                   元素集合

    :radio                 获取所有单选按钮                                  元素集合

    :checkbox              获取所有复选框                                   元素集合

    :submit                获取所有提交按钮                                  元素集合

    :image                 获取所有图像域                                   元素集合

    :reset                 获取所有重置按钮                                  元素集合

    :button                获取所有按钮                                    元素集合

:file                  获取所有文件域                                   元素集合

 

 

分享到：
| JQuery技术总结（技术篇）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    从零开始学jquery

    jQuery提供了一系列选择器，包括基本选择器（如ID选择器、类选择器和元素选择器）、层次选择器（如后代选择器、子元素选择器等）、属性选择器、伪类选择器等。每个选择器都有其特定的用途，熟练掌握这些选择器可以...

    jQuery全面技术网页

    1. 快速选择器：jQuery通过$.fn.find()、$.fn.children()等方法提供了强大的DOM元素选择功能，使得开发者可以方便地选取页面中的任何元素，如$("#id")、$(".class")等。 2. 链式操作：jQuery对象返回的是一个包含多...

    jQuery点击弹出城市选择器代码.zip

    本篇将详细讲解如何使用jQuery来实现一个点击按钮后弹出城市选择器的功能。这个功能涉及到前端开发中的CSS、JavaScript和HTML5等多个技术栈，让我们逐一深入探讨。 首先，我们要了解jQuery的基本用法。jQuery是一个...

    jQuery技术三合一教程（电子书 + 理论总结+常用效果源码实践）

    理论篇：对选择器、事件、常用函数方法、外观效果、查找筛选、文档处理、Ajax处理的基础知识，以及《锋利的JQUERY》读书笔记精华完整版。 实践篇：Tab菜单栏源码、手风琴菜单源码、圆角效果源码、网页弹出对话框...

    jQuery学习资料总结

    - **区别**：尽管两者都能实现相同的功能，但jQuery提供了更简洁的语法和更多的功能支持，比如选择器、动画效果等。另外，jQuery还具有更好的跨浏览器兼容性。 - **jQuery对象与DOM对象转换**： - **从jQuery对象...

    jquery-1.11.0+jquery-UI-1.10.4

    jQuery的核心特性包括选择器引擎（用于高效地定位DOM元素）、事件处理、动画效果以及Ajax操作。例如，使用`$(selector).click(function() {...})`可以方便地绑定点击事件，而`$('element').fadeIn()`则能轻松实现...

    JQUERY实现iframe页面切换功能

    要使用jQuery实现iframe页面切换，我们首先需要在HTML中设置一个iframe元素，并为其定义一个id，以便于后续的jQuery选择器能够找到它： ```html 初始页面URL"&gt; ``` 接下来，我们可以编写jQuery代码来实现页面切换...

    jquery触摸拖动选择图片插件.rar_jquery触摸拖动选择图片插件_nearervfy

    总结起来，"jQuery触摸拖动选择图片插件"提供了一种便捷的图片选择方式，通过利用jQuery的强大功能和触摸事件的支持，实现了在不同设备上的流畅交互。结合解压后的文件，开发者可以深入学习并灵活运用这个插件，为...

    jQuery学习心得总结(必看篇).docx

    ### jQuery学习心得总结 #### 一、jQuery简介与特点 jQuery 是一款优秀的 JavaScript 库，它的出现极大地简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等操作。自2006年发布以来，jQuery 已经成为了前端...

    从零开始学习jQuery

    - **选择器**：jQuery提供了多种选择器，如基本选择器（如`#id`、`.class`）、层次选择器（如`div p`）等。 - 示例：`$(".myClass").css("color", "red");` 将所有具有`myClass`类的元素的文字颜色设为红色。 ####...

    jquery1.4和jquery帮助文档

    在jQuery 1.4中，你可以使用ID选择器（#id）、类选择器（.class）、标签选择器（element）等，同时还有属性选择器、子元素选择器、兄弟元素选择器等多种高级选择器。这些选择器极大地提高了代码的可读性和效率。 三...

    jQuery-1.8.3(&2.1.4).min.js&jquery;.fileupload&jquery;.iframe-transport

    jQuery的核心功能包括选择器（如`$("#id")`、`$(".class")`）、DOM操作（如`.append()`、`.remove()`）、事件处理（`.click()`、`.hover()`）和Ajax交互（`.ajax()`, `.get()`, `.post()`）。这些功能使得JavaScript...

    jquery1.4.2.js和jquery.cookie.js

    1. **选择器性能提升**：jQuery 1.4.2对CSS选择器的解析进行了优化，提升了在复杂DOM结构中的查询速度。 2. **事件处理**：添加了`.live()`方法，允许动态添加元素时依然可以捕获到绑定的事件，提高了代码的灵活性。...

    jQueryAPI1.4 chm 中文

    API 1.4是jQuery发展过程中的一个重要版本，它提供了丰富的选择器、事件处理、DOM操作、Ajax交互以及动画效果等功能，极大地简化了JavaScript的开发工作。本篇文章将围绕jQuery API 1.4的中文版进行深入探讨，旨在...

    jqueryapi12.离线版API

    在jQuery 1.2版本中，你可以使用ID选择器（#id）、类选择器（.class）、元素选择器（element）、属性选择器（[attribute]）以及组合选择器（如：$, $(), $(this)等）来精准定位HTML元素，实现快速选取和操作。...

    input-Calendar,简单的jquery 日期选择控件

    压缩包中的"web"文件夹可能包含了input-Calendar的所有Web相关资源，如JavaScript文件（可能包含插件的主文件和依赖的jQuery库）、CSS样式表用于控制日期选择器的外观，以及可能的示例HTML文件展示如何在页面上使用...

    jQuery制作图片标注提示信息插件

    总结来说，这个jQuery图片标注提示信息插件涉及了jQuery的选择器、事件处理、DOM操作、CSS样式控制以及动画效果等核心技术，同时也可能整合了权限控制的复选框功能，提供了一种交互式的用户体验。开发者可以通过分析...

    jQuery如何隐藏部分文本。

    在jQuery中，选择元素通常使用 `$` 符号作为入口，后面跟着一个选择器。选择器可以是CSS选择器、ID选择器、类选择器等。例如： - `$("#elementId")`：选择ID为`elementId`的元素。 - `$(".className")`：选择所有类...

    jquery攻略

    - **基本语法**：介绍jQuery的基本语法，包括选择器的使用方法、获取和设置元素属性的方法等。 - **DOM操作**：教授如何使用jQuery进行DOM元素的创建、删除、替换等操作。 - **事件处理**：详解如何利用jQuery...

Magicbox
Global site tag (gtag.js) - Google Analytics