基本过滤器:

<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提供的相关方法的更多相关文章

  1. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  2. jQuery事件篇---过滤选择器 & 表单选择器

    内容提纲: 过滤选择器 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 表单选择器 6.常规选择器 7.表单选择器 8.表单过滤器 发文不易,转载请注明出处! 过滤选 ...

  3. JQuery -- 介绍,选择器及其示例, 基本选择器,层次选择器,过滤选择器,表单选择器

    1. 什么是jQuery对象 jQuery 对象就是通过jQuery包装DOM对象后产生的对象. jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的 ...

  4. 第一百六十五节,jQuery,过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  5. jQuery 简单过滤选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery基本过滤选择器 </title> <scr ...

  6. jquery :checked(过滤选择器) 和 空格:checked(后代选择器)

    jquery 过滤选择器 和 后代选择器 <%@ page language="java" contentType="text/html; charset=UTF- ...

  7. JQuery 可见性过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. JQuery 内容过滤选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  9. jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

随机推荐

  1. swift学习之数组

    首先数组的定义:以有序的方式存储同样类型的值 (1)数组的简写(shorthand)语法 你能够通过Array<Element>,在这里,Element时数组存储元素的值的类型.也能够通过 ...

  2. 面试基础_03实现strcpy、strcat、strcmp、strlen

    实现代码例如以下: /************************************************************************* > File Name: ...

  3. Android严苛模式StrictMode使用详解

    StrictMode类是Android 2.3 (API 9)引入的一个工具类,可以用来帮助开发者发现代码中的一些不规范的问题,以达到提升应用响应能力的目的.举个例子来说,如果开发者在UI线程中进行了 ...

  4. WebSocket 笔记

    WebSocket介绍 WebSocket+Flask开启一个WebSocket服务 群聊小Demo 私聊小Demo WebSocket介绍 - 菜鸟教程详解连接 - 下载:pip install g ...

  5. POJ 1966 求无向图点连通度

    思路: n^2枚举(必须要n^2枚举啊)+拆点 特此嘲讽网上诸多垃圾题解,你们许多都是错的 -yyh //By SiriusRen #include <queue> #include &l ...

  6. ES6学习笔记(五)函数的扩展

    1.函数参数的默认值 1.1基本用法 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

  7. python3 类、对象的基础概念

    类:具有相同特性和方法的抽象概念称为类 对象:从类中具体描述的一个事物称为对象 类和对象的关系:类是对象的抽象概念,对象是类的具体实例 class test001: #创建类 def __init__ ...

  8. 使用 HTML5 canvas制作拾色器

    自制的拾色器漂亮吧,哈哈 废话不多说直接上代码,希望可以帮到需要的朋友 <html><head>    <style>        .canvas_color{p ...

  9. ArcGIS Engine中添加点、线、面元素

    转自原文 ArcGIS Engine中添加点.线.面元素 此种方式为IElement的方式在axMapControl的GraphicsContainer中好绘制图形. //画点 IPoint pt = ...

  10. [Java开发之路](9)对象序列化与反序列化

    1. 对象序列化 当你创建对象时.仅仅要你须要.它会一直存在,可是程序终止时,不管何时它都不会继续存在.虽然这样做是很有意义的,可是在某些情况下.假设程序不执行时扔能存在而且保存其信息,那将对我们很实 ...