jQuery学习--------jQuery过滤器

each() 方法规定为每个匹配元素规定运行的函数。

过滤:

下标过滤:

eq(index) //获取第index个元素

类过滤:

hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true

例如:$("div").hasClass("div1") //含有div1类的div元素

表达式过滤:

filter(expr)  //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式

filter(fn)    //筛选出与指定函数fn返回值匹配的元素集合

例如:$("div").filter(".red")这里的表达式是指:选择器表达式

has(expr)  //参数expr是一个jQuery选择器表达式字符串

也可以是一个元素或者一组元素

例如:$("p").has(span.red) 选择拥有子元素span,并且子元素类为red的p元素

判断:表达式判断的方法不直接过滤元素,

仅作为一个检测工具判断当前jQuery对象是否包含满足条件的元素

is(expr)

例如:$("div").is(.red) //判断是否有含有类red的div元素,如果有返回true

映射将jQuery中的每个对象映射到一个数组

map(callback)  

callback:给每个元素执行的函数

清洗:从jQuery对象中删除符合条件的元素,并返回这个清洗后的jQuery

not(expr)

截取:截取当前jQuery对象中的部分元素,并将部分元素装在一个jQuery对象中返回。

slice(start,[end])

start表示开始选择子集的位置,第一个元素是0,

如果该参数为负数,则表示从集合的尾部开始选起。

end如果不指定,则表示到集合的结尾

         注意:被截取元素不包含end指定的位置

查找:

向下查找后代元素:

DOM提供了三种方法:

使用childNodes属性

使用firstChild和lastChild属性

使用getElementById()和getElementsByTagName()方法

jQuery访问后代元素:


children()方法:查找当前元素的所有或部分子元素

语法:children([expr])

contents()方法:返回所有的子元素,还可以获取文本节点、注释节点

语法:contents();该方法没有参数

find()方法:查找所有的后代元素

语法:find(expr)

例子:$("body").find("p") //返回body下所有的p元素

向上查找祖先元素:

DOM提供了parentNode属性来访问父元素。


jQuery访问父元素

 parents()方法:返回被选元素的所有祖先元素,直到根元素<html>

语法:parent([expr]):expr表达式过滤查询到的祖先元素

parent()方法:返回被选元素的直接父元素。

parentsUntil()方法:查找指定范围内的父元素。

例子:$("span").parentsUntil("ul")//返回的父元素到ul标签为止。

offsetParent()方法:返回被选元素的第一个定位父元素。

 closest()方法:查找指定的父元素

语法:closest(expr,[context])

向上查找兄弟元素:

DOM提供了previousSibling属性


jQuery访问向上的兄弟节点:


prev()方法:返回上一个相邻的元素(不包括文本节点)

语法:prev([expr])

prevAll()方法:返回当前元素以上的所有同辈元素

语法:prevAll([expr])

prevUntil()方法:返回当前元素到selector(不包含selector选择的元素)的所有同辈元素

语法:prevUntil([selector])

向下查找兄弟元素:

DOM提供nextSibling属性


jQuery访问向下的兄弟节点:


next()方法:匹配下一个相邻的节点,不包括文本节点

语法:next([expr])

nextAll()方法


 nextUntil()方法

查找兄弟元素:

jQuery方法:

 siblings()方法:查找所以的兄弟元素。

添加查找对象:

add()方法:向查找结果中添加新的查找内容。

语法:add(expr,[context])

示例:$("div").css("border","solid 5px #000")

.add("p")

.css("background","#990044")

串联:

addSelf()方法:将堆栈中的元素加入到查找结果的中

示例:

<ul>
                              <li>list item 1</li>
                              <li>list item 2</li>
                              <li class="third-item">list item 3</li>
                              <li>list item 4</li>
                              <li>list item 5</li>
                           </ul>

查询代码:

$("li.third-item").nextAll().andSelf()
                                          .css("background-color", "red");

该代码会设置3,4,5项的背景颜色。

解释:初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。

                             调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。

                             最后,调用 .andSelf() 会合并这两个集合。

                             所创建的 jQuery 对象指向按照文档顺序的所有三个项目:

                                                {[<li.third-item>,<li>,<li> ]}。

end()方法:结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态

jQuery学习--------jQuery过滤器,布布扣,bubuko.com

时间: 2024-10-21 12:50:56

jQuery学习--------jQuery过滤器的相关文章

jQuery学习-------jQuery选择器

基本选择器: id选择器:$("#id") 标签选择器:$("tag") 类选择器:$(".classname") 通配选择器:$("*") 组选择器:$("selector1,selector2,...,selectorN") 层次选择器: 包含选择器:$("ancestor descendant") 子选择器:$("parent>child") 相邻选择器:

jquery学习 - jquery选择孩子元素和个数/获取css属性

选择器 选择孩子元素和css属性 获得孩子元素的个数 选择器 jquery的选择器很强大,可以的话,能用jquery的时候,真的是非常方便. 选择孩子元素和css属性 先看下面的代码: SelectColor = $(ColorId).children('svg').children('rect').css('fill'); 这个代码很容易懂.首先: ColorId = $("#id"); svg是一个子元素的标签. rect是svg下的子元素 fill是rect的一个css属性 可以

JQuery学习---JQuery深入学习

属性操作 $("p").text()    $("p").html()   $(":checkbox").val() $(".test").attr("alex")   $(".test").attr("alex","sb") $(".test").attr("checked","checked&q

很不错的jQuery学习资料和实例

这些都是学习Jquery很不错的资料,整理了一下,分享给大家. 希望能对大家的学习有帮助. 帕兰 Noupe带来的51个最佳jQuery教程和实例, 向大家介绍了jQuery的一些基本概念和使用的相关教程,  如果你对jQuery感兴趣, 也可以查看帕兰写的文章: 37个更加出色的jQuery插件 45个新鲜出炉的jQuery插件 50多个强大的jQuery插件应用实例 John Resig John Resig, 这位是 JQuery JavaScript脚本库的创建者, 同时也是Mozill

jQuery学习笔记之过滤器三(向上查找兄弟元素、向下查找兄弟元素)

向上查找兄弟元素的方法:prev方法.prevAll方法.prevUntil方法 向下查找兄弟元素:next方法.nextAll方法.nextUntil方法 向上查找兄弟元素 1.prev方法 2.prevAll方法 3.prevUntil方法 向下查找兄弟元素 1.next方法 2.nextAll方法 3.nextUntil方法 jQuery学习笔记之过滤器三(向上查找兄弟元素.向下查找兄弟元素)

jQuery学习之路(四)之过滤选择器

今天是第四课主要学习过滤选择器 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson4 过滤选择器</title> <link rel="stylesheet" type="text/css" href="css/lesson.css" ></link>

从零开始学习jQuery (二) 万能的选择器

原文:从零开始学习jQuery (二) 万能的选择器 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 从零开始学习jQuery (五) 事件与事件对象 从零开始学习jQuery (六) jQuery中的Ajax 从零开始学习jQuery (七) jQuery动画-让页面动起来! 从零开始学习jQuery

jQuery学习之路(1)-选择器

▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优

jQuery学习一(选择器)

一直在学习web前端的知识,学习jQuey也有一段时间了,想总结一下.这一章先来学习jQuery选择器的知识. 一.jQuery选择器的介绍 jQuery中的选择器完全继承了css的风格.利用jQuery选择器,可以非常快速和便捷的找出DOM元素,学习jQuery选择器是学习jQuery的基础,因为所有的行为都要在获取元素之后才能生效 二.jQuery选择器 1.基本选择器 基本选择器是最常用也是最简单的选择器,通过元素的id,class和标签名等来查找DOM元素 选择器 描述 返回 示例 #i