jQuery in action 3rd - Selecting elements

jQuery(selector) / $(selector)

selector 选择器有多种形式,下面是 #ID,.class,element

   

jQuery 支持的 CSS 层级关系选择器

  

jQuery 支持的 CSS 属性选择器

  

 jQuery 的过滤器 filter

  过滤器的写法以冒号 “:filter” 开头,用于过滤 $() 返回对象中的数据,以达到精确查找的目的。

  1)位置过滤器

    

    注意,n(索引号) 从 0 开始,与 CSS 中(索引号从 1 开始)的功能不一致。
      比如 “:even” 过滤器,认为第一个匹配的 DOM 元素的索引号为 0 ,而 CSS 中的 "even" 认为第一个匹配的 DOM 元素
      索引号为 1。所以,在给 table 行 tr 设置交替背景颜色时要小心。

    注意,可以给 :eq(n) ,:gt(n),:lt(n),的 n 传递一个负数,表示从最后一个元素开始,进行倒序匹配。

  2)child filters

    

    注意,:nth-child() 与 :eq() 不同,经常容易混淆。

      使用  :nth-child()  匹配查找时,不管上下文中包含的子元素类型是啥,都要计算,都占一个索引号位置。

      使用 :eq() 匹配查找时,不管上下文中 selector 类型元素的前面和后面有多少其他类型的兄弟元素,它都一概忽略,

        只计算 selector 类型元素的索引号。

      再注意, :nth-child() 是按照 CSS 规范实现的,所以它的索引号是从 1 开始的,而不是 0

  3)Form filter

    一般情况下,可以写成 $(‘input[type="checkbox"][checked]‘),

    CSS 提供了一些伪类,那么可以写成 $(‘input[type="checkbox"]:checked‘),

    jQuery 提供了更为方便的一些自定义过滤器,那么可以写成 $(‘input:checkbox:checked‘)。

    

    可以组合 CSS 过滤器以及 jQuery 自定义过滤器,例如: $(‘input:checkbox:checked:enabled‘);

  4)content filter

    

  5)其他过滤器

    

    示例:$(‘input:not(:checkbox)‘)、$(‘:not(img[src*="dog"])‘)、$(‘em:lang(zh-CN)‘)

    提示:jQuery 3 修改了 :visible 和 :hidden 的意思,

      :visible,匹配任何 layout boxes,即使它们的高度和宽度为0。比如 br 元素以及没有内容的 inline 元素。

   6)创建自定义过滤器 

$.expr[‘:‘].pointsHigherThan = $.expr.createPseudo(function(filterParam) {
  var points = parseInt(filterParam, 10);
    return function(element, context, isXml) {
        return element.getAttribute(‘data-points‘) > points;
    }
}

    分为三个步骤:

    第一步,给自定义过滤器起一个名字,比如 “pointsHigherThan”

    第二步,使用 createPseudo(filterParam) 函数创建过滤器对应的匿名函数,filterParam 参数的名字可随便起,
        这个参数是一个传给过滤器函数的可选参数。类似于传给过滤器 :eq(n) 的参数 n。

    第三步,在过滤器函数中再返回另外一个匿名函数,在这个函数内部编写过滤逻辑代码,最后返回 boolean 值表示是否匹配?

        jQuery 传递给此匿名函数三个参数,

        element 参数,是一个 DOMElement 元素,一次传递一个。

        context 参数,匹配元素的上下文参数

        isXML 参数,确定当前操作是在 XML 文档中吗?

    示例如下:$(‘.levels li:pointsHeighThan(20)‘);

    

    

时间: 2024-07-30 17:52:39

jQuery in action 3rd - Selecting elements的相关文章

jQuery in action 3rd - Introducing jQuery

2014 年 10 月, jQuery Foundation 的总裁 Dave Methvin 发布了一篇博客(http://blog.jquery.com/2014/10/29/jquery-3-0-the-next-generations/), 宣布了 jQuery 下一个重要版本的计划:jQuery 3. version 1.x 支持老的浏览器 version 2.x 支持现代的新浏览器 jQuery 3 分为两个版本,jQuery Compat 3 是 1.x 的延续版本,jQuery

jQuery in action 3rd - Operating on a jQuery collection

1.创建新 DOM 元素 $('<div>Hello</div>'); $('<img>', { src: 'images/little.bear.png', alt: 'Little Bear', title: 'I woof in yor general direction', click: function() { alert($(this).attr('title')); } }).appendTo('body'); 2.操作 jQuery collection

Jquery源码分析

1.概述 jQuery是一个非常优秀的Js库,与prototype,YUI,Mootools等众多的Js类库相比,它剑走偏锋,从web开发最实用的角度出发,抛除了一些中看但不实用的东西,为开发者提供一个短小精悍的类库.由于其个短小精悍,使用简单方便,性能相对高效.众多的开发者都选择Jquery来进行辅助的web开发. 在使用jquery时开发,我们也会时常碰到许多的问题,但是jquery的代码很晦涩,难起看懂,当开发时出现了问题,看不懂源码,不知道如何去排错. John Resig,Jquery

jQuery的使用及关于框架造型(转)

Introduction 正如jQuery所宣称的一样,Write Less, Do More.很多时候我们喜欢用它来解决问题.但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间.并且,现在与当初已经有了很大不同,jQuery是伴随着IE6出来的,当时,jQuery在跨浏览器开发上有不可替代的作用.但今天,伴随ES5的广泛被支持以及各个浏览器本身的完善,我们可以考虑适当的丢掉它,改善性能.需要注意的是,并不是说jQuery是不可取的,在某些场合,用它是更合适的,需要我们自己判断.

jQuery核心之jQuery Object及其相关的常用方法

1.jQuery Object 和 原生的DOM对象之间有许多方法是不一样的,用jQuery的方法大部分情况下返回的是jQuery Object,但是jQuery也提供了一些方法可以很轻松的获取原生的DOM对象. 先来看:获取jQuery Object之一, // Selecting only the first <h1> element on the page (in a jQuery object) var headings = $( "h1" ); var first

[英] 推荐 15 个 jQuery 选择框插件

jQuery Selectbox Plugins let you create beautiful and eye catching select box for your websites instead of the orthodox html select box which looks old and boring. This gallery includes 15 jQuery SelectBox Plugins which can be used to enhance any web

jQuery -&amp;gt; 获取指定上下文中的DOM元素

jQuery函数的第二个參数能够指定DOM元素的搜索范围. 第二个參数可分为下面类型 DOM reference jQuery wrapper document 代码演示样例 <!DOCTYPE html> <html> <body> <form> <input name="" type="checkbox"/> <input name="" type="radio&qu

jquery(二) jQuery选取和操作元素的特点

jQuery初探 jQuery选取和操纵元素的特点 JavaScript选取元素 先来看看不用jQuery的时候我们是怎么处理元素选取的. JavaScript选取元素的时候,可以根据id获取元素,当id不存在的时候,结果为null,并且console会报脚本执行错误. 所以一般的做法是先用一个if判断该元素存在. 比如: <body> <a>click me</a> <script type="text/javascript"> //

jquery autocomplete实现读取sql数据库自动补全TextBox

项目需要这样子一个功能,其他部门提的意见,只好去实现了哦,搞了好久才弄出来,分享一下. 1.前台页面 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti