过滤选择器及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选择器完全继承了 ...

随机推荐

C#文件拖放至窗口的ListView控件获取文件类型
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
Scala具体解释---------Scala是什么？可伸展的语言！
Scala是什么 Scala语言的名称来自于"可伸展的语言". 之所以这样命名,是由于他被设计成随着使用者的需求而成长.你能够把Scala应用在非常大范围的编程任务上.从写个小脚本 ...
json.js
由于json官网被强,现保存源码一份以备不时之需,直接保存成js文件即可. /* json.js 2007-08-05 Public Domain This file adds these metho ...
tensorflow学习之路---简单的代码
import numpyimport tensorflow as tf #自己创建的数据x_data = numpy.random.rand(100).astype(numpy.float32)#创建 ...
Xcode Git 客户端 + GitBucket 服务器使用整合归纳
1.使用前说明: 不知道XCode,Git的请自行度娘,不知道GitBucket的,可参考文章:git 私服搭建-gitbucket 初试牛刀 2.创建Git步骤 1>在gitbucket创建账 ...
qt hex to dec
QString s = "32FE12AD"; quint8 u8vlaue = 0; sscanf(s.toStdString().c_str(), ...
List与array的相互转换
1.List->Array 调用List的toArray方法 List<String> list = new ArrayList<String>(); list.add( ...
Codeforces Beta Round #2 C. Commentator problem
模拟退火果然是一个非常高端的东西,思路神马的全然搞不懂啊~ 题目大意: 给出三个圆,求一点到这三个圆的两切线的夹角相等. 解题思路: 对于这个题来说还是有多种思路的 .只是都搞不明确~~ /害羞脸 ...
SAP学习之路
此贴记录学习SAP过程~如有错误请指出~ 6.看着网上学习SAP的貌似比較花精力.学习好的话发展前景还是不错的 5.尽管还不是非常懂.可是还是充满期待,期待着java转型abap. 能够在虚拟机上安装 ...
QT就是别人好心帮你做一些枯燥，并且很重复的代码编写工作，让你更好的把精力投入到你界面的逻辑和功能的实现的功能库（否则写了上万行代码了，才写出个BUG一大堆的毛坯）
好了,现在开始记录我学习QT的学习历程 . 本人也不是计算机专业出来的,自学了一点,但还是不好找工作,于是参加了培训,虽然感觉没多学到什么编程的学习生涯就是不断的看别人的源码,然后自己参考着写写自己 ...

过滤选择器及jQuery提供的相关方法

过滤选择器及jQuery提供的相关方法的更多相关文章

随机推荐

热门专题