`
夏末忆逝
  • 浏览: 147283 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery学习笔记--选择器

阅读更多
jquery的过滤器

1.基本过滤选择器
:first 例:${"div:first"}     取得div标签中的第一个元素
:last  例:${"div:last"}      取得div标签中的最后一个元素
:not(selector) 例:${"div:not(.div)"} 取得所有没有.div样式的div元素
:even 例:${"div:even"}       取得索引为偶数的所有div元素 索引从0开始 (以下关于索引 都从0开始)
:odd  例:${"div:odd"}        取得索引为奇数的所有div元素
:eq(index) 例:${"div:eq(1)"} 取得索引值为1的div元素
:gt(index) 例:${"div:gt(2)"} 取得索引值大于2的div元素
:lt(index) 例:${"div:lt(3)"} 取得索引值小于3的div元素
:header    例:${":header"}   取得所有标题元素<h1>,<h2>
:animated  例:${"div:animated"}取得所有执行动画的div元素

2.内容过滤选择器
:contains(text) 例:$("div:contains('java')") 取得div文本含有java的元素集合
:empty 例:$("div:empty") 取得没有子元素或文本为空的div元素集合
:has(selector) $("div:has(p)") 取得div中包含p标签的div元素 书中例子是取得包含这个样式的div元素 我没实现.. 也许是翻译错误 有异议请指教
:parent 例:$("div:parent") 取得包含子元素的div元素集合

3.可见性过滤选择器
:hidden 例:$(":hidden") 选取所有不可见元素 如果指定元素类型的话 例:$("input:hidden")
:visbile 例:$("div:visbile") 选取所有可见的元素集合

4.属性过滤选择器
[attribute] 例:$("div[id]")取得含有id属性的div元素
[attribute=value] 例:$("div[title=test]")选取title值为test的元素集合
[attribute!=value] 例:$("div[title!=test]")选择title值不为test的元素集合
[attribute^=value] 例:$("div[title^=test]")选择title值以test开始的元素集合
[attribute$=value] 例:$("div[title$=test]")选择title值以test结尾的元素集合
[attribute*=value] 例:$("div[title*=test]")选择title值包含test的元素集合
[selector1][selector2][selectorN]例:$("div[id][title=test][class=d]") 获取包含id属性并且title值为test并且样式为d的div元素集合

5.子元素过滤选择器
:nth-child(index/even/odd/eq)  这个需要再研究 记录下....
:first-child $(div:first-child)选取每个父元素的第一个子元素 注:eq(index)是从0开始的 而first-child(index)从1开始
:last-child $(div:last-child) 选择每个父元素的最后一个子元素
:only-child $(div:only-child) 选择每个父元素中唯一的子元素(只包含1个子元素才有效)

6.表单对象属性过滤选择器
:enabled $("#form1 :enabled") 选取id为form1并且表单对象可用的元素
:disabled $("#form2 :disabled") 选择id为form2并且表单对象不可用的元素
:checked $("input:checked") 选取所有被选中的input元素(复选框)
:selected $("select :selected") 选取所有被选中的下拉框元素

7.层次选择器
获取指定元素的上1个div元素 例:$("#id").prev("div");
指定元素的上1个元素 例:$("#id").prev();
获取指定元素的下1个元素 例:$("#id").next("div");
指定元素的下1个元素 例:$("#id").next();

获取指定元素后面的所有指定同辈兄弟元素 例:$("#id~div");等价于$("#id").nextAll("div");
获取指定元素 下1个div元素 例:$("#id + div");等价于$("#id").next("div");

获取指定元素的所有子元素 其中也包括子元素的子元素 例:$("div span");span中span元素也会被获得
获取指定元素的子元素 不包含子元素中的子元素 例:$("div > span");span中的span元素未获得
例:
<ul class="myList">
<li><a href="http://jquery.com">jQuery Supports!</a>
<ul>
<li><a href="css1">css1</a></li>
<li><a href="css2">css2</a></li>
<li><a href="css3">css3</a></li>
<li><a href="css4">css4</a></li>
</ul>
</li>
<li>Jquery Supports!
<ul>
<li>css5</li>
<li>css6</li>
</ul>
</li>
</ul>

获得指向jQuery网站的链接 $('ul.myList>li>a');
包含样式myList的ul元素的直接子元素li(不包含li里的子元素li)的直接子元素a(不包含li的子元素中的a元素),这样既可直接获得jQuery的链接.

8.一个实用的函数
andSelf()
例:$('div').find('p').andSelf().addClass('border');
html:代码
<div>
   <p>First Paragraph</p>
   <p>Second Paragraph</p>
</div>
结果:
<div class="border">
    <p class="border">First Paragraph</p>
    <p class="border">Second Paragraph</p>
</div>

9.选择器补充
获取超链接并且id为test的元素
以前的写法 $(a[id=test])
jQuery提供了简便的写法 $(a#test)就可以获得这个元素.

分享到:
评论

相关推荐

    jquery学习笔记--1

    **jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。本篇笔记将深入探讨jQuery的基础知识,包括其核心概念、选择器、DOM操作、事件...

    jquery学习笔记-相关代码

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。这份笔记旨在深入理解jQuery的核心概念,通过实例代码来加强理解和应用。 1. **jQuery选择器**:...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jquery 学习笔记源码 1-3章

    《jQuery学习笔记源码1-3章》涵盖了jQuery的基础到进阶内容,是初学者深入理解这一强大JavaScript库的关键步骤。jQuery是一个轻量级、高性能的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    jquery-1.3.1-vsdoc.rar

    - 选择器:jQuery支持CSS1至CSS3的选择器,如$("#id")选取ID为id的元素,$(".class")选取所有class为class的元素。 - DOM操作:如$(selector).html()用于设置或获取元素的HTML内容,$(selector).append()用于在元素...

    jQuery选择器学习笔记

    ### jQuery选择器学习笔记 #### 一、引言 jQuery 是一个快速、小巧且功能丰富的库,极大地简化了 JavaScript 编程。其中的核心之一就是它的选择器系统,它基于 CSS 选择器,并提供了更多的灵活性和功能。本篇笔记...

    jquery 学习笔记源码 3jquery常规选择器

    本学习笔记将聚焦于jQuery的核心功能之一:常规选择器。通过理解并熟练运用这些选择器,你可以更加高效地定位和操纵网页中的元素,提升开发效率。 1. 元素选择器: jQuery的元素选择器允许我们根据HTML标签名来...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    javascript and jquery学习笔记与资料

    CHM文件是一种常见的帮助文档格式,用户可以通过这个文件快速查找并理解jQuery的各种方法、选择器和插件。 `javascript.zip`和`javascript的函数.zip`可能分别包含JavaScript的通用教程和关于函数的专门讨论。...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    jquery学习笔记(各种选择详解)

    **jQuery 学习笔记:各种选择详解** 在前端开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 DOM 操作、事件处理和动画效果。本笔记将深入讲解 jQuery 的选择器,帮助开发者更高效地选取和操作网页...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

Global site tag (gtag.js) - Google Analytics