JQuery 1.*速成版之二
过滤选择器简称:过滤器。它其实也是一种选择器,而这种选择器类似与 CSS3(http://t.mb5u.com/css3/)里的伪类,可以让不支持 CSS3 的低版本浏览器也能支持。和常规
选择器一样,jQuery 为了更方便开发者使用,提供了很多独有的过滤器。
一.基本过滤器
过滤器主要通过特定的过滤规则来筛选所需的 DOM 元素,和 CSS 中的伪类的语法类似:使用冒号(:)开头。
过滤器名 jQuery 语法说明 返回
:first $('li:first') 选取第一个元素 单个元素
:last $('li:last') 选取最后一个元素 单个元素
:not(selector) $('li:not(.red)') 选取class 不是red 的li 元素 集合元素
:even $('li.even') 选择索引(0开始)是偶数的所有元素 集合元素
:odd $('li:odd') 选择索引(0开始)是奇数的所有元素 集合元素
:eq(index) $('li:eq(2)') 选择索引(0开始)等于index的元素 单个元素
:gt(index) $('li:gt(2)') 选择索引(0开始)大于index的元素 集合元素
:lt(index) $('li.lt(2)') 选择索引(0开始)小于index的元素 集合元素
:header $(':header') 选择标题元素,h1 ~ h6 集合元素
:animated $(':animated') 选择正在执行动画的元素 集合元素
:focus $(':focus') 选择当前被焦点的元素 集合元素
注意: :focus 过滤器, 必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。而不是鼠标点击或者Tab键盘敲击激活的。
jQuery 为最常用的过滤器提供了专用的方法,已达到提到性能和效率的作用:
$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素,负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含class 为red的元素
注意::first、:last 和first()、last()这两组过滤器和方法在出现相同元素的时候,first会实现第一个父元素的第一个子元素,last会实现最后一个父元素的最后一个子元素。所以,如果需要明确是哪个父元素,需要指明:$('#box li:last').css('background', '#ccc'); //#box元素的最后一个 li
//或$('#box li).last().css('background', '#ccc'); //同上
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
二.内容过滤器
内容过滤器的过滤规则主要是包含的子元素或文本内容上。
过滤器名 jQuery 语法说明 返 回
:contains(text) $(':contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
:empty $(':empty') 选取不包含子元素或空文本的元素 元素集合
:has(selector) $(':has(.red)') 选取含有 class 是red 的元素 元素集合
:parent $(':parent') 选取含有子元素或文本的元素 元素集合
jQuery 提供了一个has()方法来提高:has 过滤器的性能: $('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是red 的元素。
jQuery 提供了一个名称和:parent 相似的方法, 但这个方法并不是选取含有子元素或文本的元素,而是获取当前元素的父元素,返回的是元素集合。
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
三.可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
过滤器名 jQuery 语法说明 返回
:hidden $(':hidden') 选取所有不可见元素 集合元素
:visible $(':visible') 选取所有可见元素 集合元素
$('p:hidden).size(); //元素 p 隐藏的元素 $('p:visible').size(); //元素 p 显示的元素
注意::hidden过滤器一般是包含的内容为:CSS 样式为display:none、input表单类型为type="hidden"和 visibility:hidden的元素。
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
四.子元素过滤器
子元素过滤器的过滤规则是通过父元素和子元素的关系来获取相应的元素。
过滤器名 jQuery 语法说明 返回
:first-child $('li:first-child') 获取每个父元素的第一个子元素 集合元素
:last-child $('li:last-child') 获取每个父元素的最后一个子元素 集合元素
:only-child $('li:only-child') 获取只有一个子元素的元素 集合元素
:nth-child(odd/even/eq(index)/n[+1]) $('li:nth-child(even)') 获取每个自定义子元素的元素(索引值从1 开始计算) 集合元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
五.其他方法
jQuery 在选择器和过滤器上,还提供了一些常用的方法,方便我们开发时灵活使用。
方法名 jQuery 语法说明 返回
is(s/o/e/f) $('li').is('.red') 传递选择器、DOM、jquery对象或是函数来匹配元素结合 集合元素
hasClass(class) $('li').eq(2).hasClass('red') 其实就是 is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从start 到end位置的元素,如果是负数,则从后开始 集合元素
filter(s/o/e/f) $('li').filter('.red') --------- ---
end() $('div').find('p').end() 获取当前元素前一次状态 集合元素
contents() $('div').contents() 获取某元素下面所有元素节点,包括文本节点,如果是 iframe,则可以查找文本内容 集合元素
<------------------------------------------------------------------------------------------------------------------------------------------------------------------------>
实例:
$(function () { //$('li:first').css('background', '#ccc');
//$('li:last').css('background', '#ccc');
//$('#box li:last').css('background', '#ccc');
//$('ul:first li:last').css('background', '#ccc');
//$('li:not(.red)').css('background', '#ccc');
//$('li:even').css('background', '#ccc');
//$('li:odd').css('background', '#ccc');
//$('li:eq(2)').css('background', '#ccc');
//$('li:eq(-2)').css('background', '#ccc');
//$('li:gt(3)').css('background', '#ccc');
//$('li:lt(2)').css('background', '#ccc');
//$('div :header').css('background', '#ccc');
//$('input').get(0).focus();
//$(':focus').css('background', 'red'); //$('li').first().css('background', '#ccc');
//$('li').last().css('background', '#ccc');
//$('li').not('.red').css('background', '#ccc');
//$('li').eq(2).css('background', '#ccc');
//$('div:contains("ycku.com")').css('background', '#ccc');
//$('div:empty').css('background', '#ccc').css('height','20px');
$('ul:has(.red)').css('background', '#ccc');
//$('div:parent').css('background', '#ddf');
//$('ul').has('.red').css('background', '#ccc'); //alert($('li').parent().size());
//alert($('li').parent().get(0));
//$('li').parent().css('background', '#ccc');
//$('li').parents().css('background', '#ccc');
//$('li').parentsUntil('body').css('background', '#ccc'); //alert($('div:hidden').size());
//$('div:hidden').css('background', '#ccc').show(1000);
//alert($('div:visible').size()); });
js code1:
$(function () { //$('li:first-child').css('background', '#ccc');
//$('li:last-child').css('background', '#ccc');
//$('li:only-child').css('background', '#ccc');
//$('li:nth-child(even)').css('background', '#ccc');
//$('li:nth-child(odd)').css('background', '#ccc');
//$('li:nth-child(5n)').css('background', '#ccc');
//$('li:nth-child(4n+1)').css('background', '#ccc'); //alert($('.red').is('li'));
//alert($('.red').is('div'));
//alert($('.red').is($('li')));
//alert($('.red').is($('div')));
//alert($('.red').is($('li').get(2)));
//alert($('.red').is($('li').eq(2))); //alert($('.red').is(function () {
// return $(this).attr('title') == '列表3';
//})); //注意,必须使用$(this)来表示要判断的元素,否则,不管function里面是否返回true或false都和调用的元素无关了 //alert($('li').eq(2).hasClass('red')); //$('li').slice(5,7).css('background', '#ccc');
//$('li').slice(2).css('background', '#ccc');
//$('li').slice(0, -2).css('background', '#ccc');
//$('li').slice(2, -2).css('background', '#ccc'); //alert($('#box').find('li').end().get(0));
//alert($('#box').find('li').parent().get(0)); //$('#box').next('ul').end().css('background', '#ccc'); //alert($('div:first').children().size());
//alert($('div:first').contents().size()); //$('li').filter('.red, :first-child, :last-child').css('background', '#ccc'); $('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表3';
}).css('background', '#ccc'); });
js code2:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>过滤选择器</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div>我们的新域名为:<span>ycku.com</span></div>
<div style="display:none;">我们的新域名为:ycku.com</div>
<div>我们的旧域名为:yc60.com</div>
<div></div>
<div></div> <ul>
<li>列表1</li>
<li>列表2</li>
<li class="red">列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul> <ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul> <input type="text" /> <h3>我是标题</h3> </body>
</html>
html code:
JQuery 1.*速成版之二的更多相关文章
- jQuery Mobile (整合版)
jQuery Mobile (整合版) 前言 为了方便大家看的方便,我这里将这几天的东西整合一下发出. 里面的例子请使用手机浏览器查看. 什么是jQuery Mobile? jquery mobile ...
- Java正则速成秘籍(二)之心法篇
导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...
- [Unity+Android]横版扫描二维码
原地址:http://blog.csdn.net/dingxiaowei2013/article/details/25086835 终于解决了一个忧伤好久的问题,严重拖了项目进度,深感惭愧!一直被一系 ...
- 一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217)
一句代码美化你的下框之jquery.selectMM修复版(jquery.selectMM v0.9 beta 20141217) 浏览效果: http://www.beyond630.com/jqu ...
- NewLife.XCode 上手指南2018版(二)增
目录 NewLife.XCode 上手指南2018版(一)代码生成 NewLife.XCode 上手指南2018版(二)增 NewLife.XCode 上手指南2018版(三)查 NewLife.XC ...
- 图片人脸检测——OpenCV版(二)
图片人脸检测 人脸检测使用到的技术是OpenCV,上一节已经介绍了OpenCV的环境安装,点击查看. 往期目录 视频人脸检测——Dlib版(六)OpenCV添加中文(五)图片人脸检测——Dlib版(四 ...
- 锋利的jQuery(第二版)学习总结
通过对<锋利的jQuery>(第二版)一书的学习,发现此书讲解通俗易懂,是学习jQuery的一本很好的指导书,特作如下总结. 此书主要讲解了jQuery的常用操作,包括认识jQuery,j ...
- c++ primer plus 第6版 部分二 5- 8章
---恢复内容开始--- c++ primer plus 第6版 部分二 5- 章 第五章 计算机除了存储外 还可以对数据进行分析.合并.重组.抽取.修改.推断.合成.以及其他操作 1.for ...
- jquery实现一些小动画二
jquery实现一些小动画二 jquery实现拖拽功能 <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- JAVA 语法基础综合练习——学生成绩管理系统
代码如下:package com.lovo.manager; import java.util.Scanner; /** * 学生管理 * * @author Administrator * */ p ...
- EM界面 ORA-12505: TNS: 监听程序当前无法识别连接描述符中所给出的 SID (DBD ERROR: OCIServerAttach)
我的是10g,打开EM,另外都正常,就有这个问题到实例的代理连接 状态 失败 详细资料 ORA-12505: TNS: 监听程序当前无法识别连接描述符中所给出的 SID (DBD ERROR: OCI ...
- 用python+selenium抓取豆瓣读书中最受关注图书并按评分排序
抓取豆瓣读书中的(http://book.douban.com/)最受关注图书,按照评分排序,并保存至txt文件中,需要抓取书籍的名称,作者,评分,体裁和一句话评 方法一: #coding=utf-8 ...
- javascript onblur事件阻塞选中input框
先上问题实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- C++继承,多重继承,虚继承的构造函数以及析构函数的调用顺序问题
#include <iostream> using namespace std; class A{ int data_a; public: A(){ data_a = ; cout < ...
- encode和decode的区别
$octets = encode("iso-8859-1", $string);把一个串从perl内部格式转为iso-8859-1格式$string = decode(" ...
- php-长文章分页函数
<?php function ff_page($content,$page) { global $expert_id; $PageLength = 2000; //每页字数 $CLength = ...
- Linux下高cpu解决方案(转载)
昨天搞定了一个十万火急的issue,客户抱怨产品升级后系统会变慢和CPU使用率相当高,客户脾气很大,声称不尽快解决这个问题就退货,弄得我们 R&D压力很大,解决这个issue的任务分给了我,客 ...
- [BCB] C++ BUILDER 绘图 随机生成图形
由于老师要求要实现一个填充算法,而每次填充都需要一个源图形[不规则],用mspaint自己画太麻烦,于是打算自己动手随机生成. 这里用的是 Polygen()函数,但是注意首尾相接,另外,为了保证规则 ...
- windows 下 webstorm 使用SVN
1.安装了webstorm之后,用了很久都没有配置SVN 现在想配置svn,结果发现一般的svn程序不好用. 经指导,发现需要安装一个专用于webstorm的SVN 2.在file->setti ...