过滤选择器及jQuery提供的相关方法
基本过滤器：
<body>
<ul>
<li>列表1</li>
<li class="red">列表2</li>
<li>列表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>
<h1>我是标题</h1>
<div>
<h2>副标题</h2>
</div>
<input type="text" />
</body>
$(function(){
$('li:first').css('color','red');
$('ul:first li:last').css('color','blue');
$('li:not(.red)').css('color','red');
$('li:even').css('color','red');
$('li:odd').css('color','blue');
$('li:eq(2)').css('color','red');
$('li:eq(-2)').css('color','blue');
$('li:gt(2)').css('color','red');
$('li:gt(-2)').css('color','red');
$('li:lt(2)').css('color','red');
$('li:lt(-2)').css('color','blue');
$('div :header').css('color','red');
//组合
$('input').get(0).focus();
$(':focus').css('background','red');
});
几个jQuery替代方法：
$('li').first().css('color','red');
$('li').last().css('color','red');
$('li').not('.red').css('color','red');
$('li').eq(2).css('color','red');
内容过滤器：
<body>
<div>百度的地址：www.baidu.com</div>
<div>淘宝的地址：www.taobao.com</div>
<div></div>
<ul>
<li>列表1</li>
<li class="red">列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
</body>
$(function(){
$('div:contains(www.baidu.com)').css('color','red');
$('div:empty').css('background','red').css('height','20px');
$('ul:has(.red)').css('color','red');
$('div:parent').css('color','blue');
//jQuery方法
$('ul').has('.red').css('color','red');
//jQuery提供了一个名称和parent相似的方法，但功能并不是选取含有子元素的的元素，二十获取当前元素的父元素，返回的元素集合
$('li').parent().css('color','blue');//当前元素的父节点
$('li').parents().css('color','red');//祖先节点
$('li').parentsUntil('body').css('color','red');//祖先节点，遇到body为止
});
可见性过滤器：
<body>
<div style="display: none;">百度的地址：www.baidu.com</div>
<div>淘宝的地址：www.taobao.com</div>
<div>fasdfs</div>
</body>
$(function(){
//将隐藏的元素颜色设为红色，并在一秒内慢慢显示出来
$('div:hidden').css('color','red').show(1000);
$('div:visible').css('color','blue');
});
子元素过滤器：
<body>
<ul>
<li>列表1</li>
<li class="red">列表2</li>
<li><span>列表3</span></li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>列表1</li>
<li class="red">列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>aaa</li>
</ul>
</body>
$(function(){
$('li:first-child').css('color','red');//两个ul的第一个li都是红色
$('li:last-child').css('color','blue');
$('li:only-child').css('color','red');
$('li:nth-child(even)').css('color','blue');
$('li:nth-child(odd)').css('color','blue');
$('li:nth-child(1)').css('color','blue');
$('li:nth-child(3n)').css('color','blue');//3,6,9 ...显示
$('li:nth-child(3n+1)').css('color','red');//1,4,7,10 ...显示
});
jQuery提供的其他方法：
<body>
<div>我的名字是：<strong>党兴明</strong>，谢谢</div>
<ul id="box">
<li>列表1</li>
<li class="red" title="列表2">列表2</li>
<li><span>列表3</span></li>
<li class="red">列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>列表1</li>
<li class="red">列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
<li>列表6</li>
</ul>
<ul>
<li>aaa</li>
</ul>
</body>
$(function(){
alert($('.red').is('li'));//true
alert($('.red').is($('li')));//true
alert($('.red').is(function(){
return $(this).attr('title') == '列表2';//必须使用this来表示要判断的元素
}));
alert($('li').eq(1).hasClass('red')); //看第二个li有没有red这个class属性
$('li').slice(2,4).css('color','red'); //选择3,4
$('li').slice(2).css('color','red');//从2向下
$('li').slice(2,-2).css('color','red');//前后两个不被选定
alert($('#box').find('li').end().get(0));//找到前一个状态，不一定是父
alert($('#box').find('li').parent().get(0));
$('#box').next().end().css('color','red');
alert($('div:first').children().size()); //
alert($('div:first').contents().size()); //3所有节点，包括文本节点
$('li').filter('.red, :first, :last').css('color','blue');//.red和首尾都选中
$('li').filter(function(){
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表2';
}).css('color','red');
});
过滤选择器及jQuery提供的相关方法的更多相关文章
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jQuery事件篇---过滤选择器 & 表单选择器
内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...
- JQuery -- 介绍，选择器及其示例， 基本选择器，层次选择器，过滤选择器，表单选择器
1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...
- 第一百六十五节，jQuery，过滤选择器
jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...
- jQuery 简单过滤选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...
- jquery :checked(过滤选择器) 和 空格:checked(后代选择器)
jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...
- JQuery 可见性过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JQuery 内容过滤选择器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery选择器介绍：基本选择器、层次选择器、过滤选择器、表单选择器
选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...
随机推荐
- ArcGIS api for javascript——显示地图属性
描述 本例展示了如哦读取地图和图层的属性和返回信息给用户.本例中的四个按钮允许用户接收地图属性.每个按钮调用不同的函数. ·Get All Map Layers - 这个按钮调用getMapLayer ...
- uva 104 Arbitrage （DP + floyd）
uva 104 Arbitrage Description Download as PDF Background The use of computers in the finance industr ...
- session和cookie详解
摘要:虽然session机制在web应用程序中被采用已经很长时间了,但是仍然有很多人不清楚session机制的本质,以至不能正确的应用这一 技术.本文将详细讨论session的工作机制并且对在Java ...
- C#中如何获得两个日期之间的天数差
DateTime d1; DateTime d2; //自己去赋值吧 int days = (d1 - d2).Days;//天数差 label1.Text = "2012-1-1 15:3 ...
- 路径+DataRow+SqlPara防止sql注入
绝对路径:是从盘符开始的路径,形如C:\windows\system32\cmd.exe相对路径:是从当前路径开始的路径,假如当前路径为C:\windows要描述上述路径,只需输入system32\c ...
- jquery基本Dom操作
1 html()获取所有的html内容 2 html(value) 设置html内容,有html自动解析 3 text() 获取文本内容 4 text(value) 设置文本内容,有html自动转义 ...
- 参考学习《Python学习手册(第4版)》高清中文PDF+高清英文PDF+源代码
看到第38章了,整体感觉解释详细,例子丰富:关于Python语言本身的讲解全面详尽而又循序渐进不断重复,同时详述语言现象背后的机制和原理:除语言本身,还包含编程实践和设计以及高级主题.边看边写代码.不 ...
- Centos7.6下安装Python3.7
前言 话说不会开发的运维不是一个好的DBA,所以我要开始学习python了,写博客记录一下我的学习过程,另外别欺负我新来的,那个每天更博的技术流ken是我哥. 不说了,时间宝贵,开整. 1.首先来看一 ...
- MFC- OnIdle空闲处理
CWinApp::OnIdlevirtual BOOL OnIdle( LONG lCount );返回值: 如果要接收更多的空闲处理时间,则返回非零值:如果不需要更多的空闲时间则返回0.参数: lC ...
- from disk cache 与 from memory cache
webkit资源的分类 webkit的资源分类主要分为两大类:主资源和派生资 http状态码 200 from memory cache 不访问服务器,直接读缓存,从内存中读取缓存.此时的数据时缓存到 ...