juqery 学习之四 筛选过滤


Posted in Javascript onNovember 30, 2010

eq(index)

获取第N个元素
这个元素的位置是从0算起。

Reduce the set of matched elements to a single element.
The position of the element in the set of matched elements starts at 0 and goes to length - 1.

返回值

jQuery

参数

index (Integer) :元素在jQuery对象中的索引

示例

获取匹配的第二个元素

HTML 代码:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

$("p").eq(1)

结果:

[ <p> So is this</p> ]
--------------------------------------------------------------------------------------------------------------

hasClass(class)

检查当前的元素是否含有某个特定的类,如果有,则返回true。
这其实就是 is("." + class)。

Checks the current selection against a class and returns true, if at least one element of the selection has the given class.
This is an alternative to is("." + class).

返回值

Boolean

参数

class (String) : 用于匹配的类名

示例

给包含有某个类的元素进行一个动画。

HTML 代码:

<div class="protected"></div><div></div>

jQuery 代码:

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});

--------------------------------------------------------------------------------------------------------------

filter(expr)

筛选出与指定表达式匹配的元素集合。
这个方法用于缩小匹配的范围。用逗号分隔多个表达式

Removes all elements from the set of matched elements that do not match the specified expression(s).
This method is used to narrow down the results of a search. Provide a comma-separated list of expressions to apply multiple filters at once.

返回值

jQuery

参数

expr (Expression) : 表达式

示例

保留带有select类的元素

HTML 代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

$("p").filter(".selected")

结果:

[ <p class="selected">And Again</p> ]

保留第一个以及带有select类的元素

HTML 代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

$("p").filter(".selected, :first")

结果:

[ <p>Hello</p>, <p class="selected">And Again</p> ]

--------------------------------------------------------------------------------------------------------------

filter(fn)

筛选出与指定函数返回值匹配的元素集合
这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除,否则就会保留。

Removes all elements from the set of matched elements that does not match the specified function.
The function is called with a context equal to the current element (just like '$.each'). If the function returns false, then the element is removed - anything else and the element is kept.

返回值

jQuery

参数

fn (Function) : 传递进filter的函数

示例

保留子元素中不含有ol的元素。

HTML 代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

结果:

[ <p>How are you?</p> ]

--------------------------------------------------------------------------------------------------------------

is(expr)

用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
如果没有元素符合,或者表达式无效,都返回'false'. 'filter' 内部实际也是在调用这个函数,所以,filter()函数原有的规则在这里也适用。

Checks the current selection against an expression and returns true, if at least one element of the selection fits the given expression.
If no element fits, or the expression is not valid, then the response will be 'false'. 'filter' is used internally, therefore all rules that apply there apply here, as well.

返回值

Boolean

参数

expr (String) :用于筛选的表达式

示例

由于input元素的父元素是一个表单元素,所以返回true。

HTML 代码:

<form><input type="checkbox" /></form>

jQuery 代码:

$("input[type='checkbox']").parent().is("form")

结果:

true

--------------------------------------------------------------------------------------------------------------

map(callback)

将一组元素转换成其他数组(不论是否是元素数组)
你可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。这都可以用'$.map()'来方便的建立。

Translate a set of elements into another set of values (which may, or may not, be elements).
You could use this to build lists of values, attributes, css values - or even perform special, custom, selector transformations. This is provided as a convenience method for using '$.map()'.

返回值

jQuery

参数

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

示例

把form中的每个input元素的值建立一个列表。

HTML 代码:

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

jQuery 代码:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

结果:

[ <p>John, password, http://ejohn.org/</p> ]

--------------------------------------------------------------------------------------------------------------

not(expr)

删除与指定表达式匹配的元素

Removes elements matching the specified expression from the set of matched elements.

返回值

jQuery

参数

expr (String, DOMElement, Array<DOMElement>) : 一个表达式、一个元素或者一组元素

示例

从p元素中删除带有 select 的ID的元素

HTML 代码:

<p>Hello</p><p id="selected">Hello Again</p>

jQuery 代码:

$("p").not( $("#selected")[0] )

结果:

[ <p>Hello</p> ]
-------------------------------------------------------------------------------------------------------------------------

slice(start,[end])

选取一个匹配的子集
与原来的slice方法类似

Selects a subset of the matched elements.
Behaves exactly like the built-in Array slice method.

返回值

jQuery

参数

start (Integer) :开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起。

end (Integer) : (可选) 结束选取自己的位置,如果不指定,则就是本身的结尾。

示例

选择第一个p元素

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(0, 1).wrapInner("<b></b>");

结果:

[ <p><b>Hello</b></p> ]

选择前两个p元素

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(0, 2).wrapInner("<b></b>");

结果:

[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

只选取第二个p元素

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(1, 2).wrapInner("<b></b>");

结果:

[ <p><b>cruel</b></p> ]

只选取第二第三个p元素

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(1).wrapInner("<b></b>");

结果:

[ <p><b>cruel</b></p>, <p><b>World</b></p> ]

Selects all paragraphs, then slices the selection to include only the third element.

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").slice(-1).wrapInner("<b></b>");

结果:

[ <p><b>World</b></p> ]
Javascript 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
javascript 解析url的search方法
Feb 09 Javascript
jquery tab标签页的制作
May 10 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
jQuery.each()用法分享
Jul 31 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
Jun 30 Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
Vue2.0用户权限控制解决方案的示例
Feb 10 Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
Webpack的Loader和Plugin的区别
Nov 09 Javascript
juqery 学习之四 筛选查找
Nov 30 #Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
Nov 28 #Javascript
xss文件页面内容读取(解决)
Nov 28 #Javascript
用js来解决ajax读取页面乱码
Nov 28 #Javascript
window.name代替cookie的实现代码
Nov 28 #Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 #Javascript
一个网马的tips实现分析
Nov 28 #Javascript
You might like
在php中取得image按钮传递的name值
2006/10/09 PHP
php Undefined index和Undefined variable的解决方法
2008/03/27 PHP
百度ping方法使用示例 自动ping百度
2014/01/26 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JS 图片缩放效果代码
2010/06/09 Javascript
基于jquery的图片幻灯展示源码
2012/07/15 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
使用cookie绕过验证码登录的实现代码
2017/10/12 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
React Native日期时间选择组件的示例代码
2018/04/27 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
解决Vue-cli无法编译es6的问题
2020/10/30 Javascript
Python实现豆瓣图片下载的方法
2015/05/25 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
详解Python3定时器任务代码
2019/09/23 Python
Python Selenium参数配置方法解析
2020/01/19 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
教师对学生的评语
2014/04/28 职场文书
贫困生证明范文
2015/06/16 职场文书
婚宴主持词
2015/06/30 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS
Python常遇到的错误和异常
2021/11/02 Python
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
Win11无法安装更新补丁KB3045316怎么办 附KB3045316补丁修复教程
2022/08/14 数码科技