jQuery学习笔记——jQuery选择器详解种类与方法

jQuery的选择器根据页面中元素的不同，可以分为基本选择器、层次选择器、表单选择器、过滤选择器，而过滤选择器又有简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器和表单对象属性选择器6种。(图片序号与文章序号不一致，以文章序号为准)

一、基本选择器：

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    .clsFrame{width:300px;height:100px}    .clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px;}    .clsOne{background-color:#EEE}</style><body><script type="text/javascript">    $(function(){        $('#divOne').css('display','block');//选择id为divOne的标签    });    $(function(){        $('div span').css('display','block');//选择div中的所有span标签    });    $(function(){        $('.clsFrame').css('display','block');//选择class为clsFrame的标签    });    $(function(){        $('*').css('display','block');//选择所有的内容

    });    $(function(){        $('#divOne,span').css('display','block');//选择id为divOne和标签为span的所有标签    });</script><div class="clsFrame"><div id="divOne">ID</div><div class="clsOne">CLASS</div><span>SPAN</span></div>

</body></html>

二、层次选择器：

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div,span{float:left;border:solid 1px #ccc;margin:8px;display:none}    .clsFraA{width:65px;height:65px}    .clsFraP{width:45px;height:45px;background-color:#eee}    .clsFraC{width:25px;height:25px;background-color:#ddd}    .a{width:15px;height:15px;background-color:#bbb}</style><body><script type="text/javascript">    $(function(){        $('#divMid').css('display','block');        $('div span').css('display','block');//选择div中的所有span标签    });    $(function(){        $('#divMid').css('display','block');        $('div>span').css('display','block');//选择div中的子标签（div中第一层span标签）    });    $(function(){        $('#divMid+div').css('display','block');//选择id为divMid的下一个div标签(这里的div必须与该ID标签相邻)        $('#divMid').next().css('display','block');//选择该ID后的一个标签（任意）    });    $(function(){        $('#divMid~div').css('display','block');//选择id 为divMid后边所有的div标签        $('#divMid').nextAll().css('display','block');//选择该ID后的所有标签    });    $(function(){        $('#divMid').siblings('div').css('display','block');//选择该ID相邻的所有标签    });</script><div class="clsFraA">Left</div><div class="clsFraA" id="divMid"><span class="clsFraP" id="Span1">Span1<span class="clsFraC" id="Span2">Span2</span></span></div><span class="a">Test</span><div class="clsFraA">Right_1</div><div class="clsFraA">Right_2</div></body></html>

三、表单选择器:

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    form{width:241px}    textarea,select,button,input,span{display:none}    .btn{border:#666 solid 1px;padding:2px;width:60px;filter:progid:DXImageTransform.Mircrosoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#ECE9D0);}    .txt{border:#666 1px solid;padding:3px}    .img{padding:2px;border:#ccc 1px solid}    .div{border:solid 1px solid;background-color:#eee;padding:5px}</style><body><script type="text/javascript">    $(function(){        $('#form1 div').html('表单共找出Input类型元素。。。'+$('#form1 :input').length);//选择子标签        $('#form1 div').addClass('div');    });    $(function(){        $('#form1 :text').show(3000);//选择form中的类型为text的标签    });    $(function(){        $('#form1 :password').show(3000);    });    $(function(){        $('#form1 :radio').show(3000);        $('#form1 #Span1').show(3000);    });    $(function(){        $('#form1 :image').show(3000);    });</script><form method="post" action="" id="form1"><textarea name="" rows="" cols="" class="txt">TextArea</textarea><select name=""><option value="0">Item 0</option></select><input type="text" name="" value="Text" class="txt" /><input type="password" name="" value="Password" class="txt" /><input type="radio" name=""/><span id="Span1">Radio</span><input type="checkbox" name="" /><span id="Span2">CheckBox</span><input type="submit" name="" value="submit" class="btn" /><input type="image" name="" title="Image" src="http://img.baidu.com/img/logo-news.gif" class="img" /><input type="reset" value="Reset" class="btn"/><input type="button" value="Button" onclick="" class="btn" /><input type="file" name="" title="File" class="txt" /><div id="divShow"></div></form></body></html>

四、过滤器选择器：

　　1、简单过滤选择器：

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div{width:241px;height:83px;border:solid 1px #eee}    h1{font-size:13px;}    ul{list-style-type:none;padding:0px}    .DefClass,.NotClass{height:23px;width:60px;line-height:23px;float:left;border-top:solid 1px #eee;border-bottom:solid 1px #eee}    .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}    #spanMove{width:238px;height:23px;line-height:23px}</style><body><script type="text/javascript">    $(function(){        $('li:first').addClass('GetFocus');//第一个    });    $(function(){        $('li:last').addClass('GetFocus');//最后一个    });    $(function(){        $('li:not(.NotClass)').addClass('GetFocus');//非    });    $(function(){        $('li:even').addClass('GetFocus');//取偶数，从0开始    });    $(function(){        $('li:odd').addClass('GetFocus');//取奇数，从0开始    });    $(function(){        $('li:eq(2)').addClass('GetFocus');//等于2,从0开始    });    $(function(){        $('li:gt(1)').addClass('GetFocus');//大于1    });    $(function(){        $('li:lt(2)').addClass('GetFocus');//小于2    });    $(function(){        $('div h1').css('width','238');        $(':header').addClass('GetFocus');//标题类元素    });    $(function(){        animateIt();        $('#spnMove:animated').addClass('GetFocus');//增加动画效果元素    });function animateIt(){//动画函数        $('#spnMove').slideToggle('slow',animateIt);    }</script><div><h1>基本过滤选择器</h1><ul><li class="DefClass">Item 0</li><li class="DefClass">Item 1</li><li class="NotClass">Item 2</li><li class="DefClass">Item 3</li></ul><span id="spnMove">Span Move</span></div>

</body></html>

　　2、内容过滤选择器

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}    span{float:left;border:solid 1px #ccc;margin:8px;width:45px;height:45px;background-color:#eee}</style><body><script type="text/javascript">    $(function(){        $('div:contains("a")').css('display','block');//给定文本中有“A”    });    $(function(){        $('div:empty').css('display','block');//空div的    });    $(function(){        $('div:has(span)').css('display','block');//div中有子标签是span的    });    $(function(){        $('div:parent').css('display','block');//含有子标签或文本的    });</script><div>ABCD</div><div><span></span></div><div>EFaH</div><div></div>

</body></html>

　　3、可见性过滤选择器

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.4.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div,span{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px}    .GetFocus{border:solid 1px #666;background-color:#eee}</style><body><script type="text/javascript">    $(function(){        $('span:hidden').show();        $('div:visible').addClass('GetFocus');    });    $(function(){        $('span:hidden').show().addClass('GetFocus');    });</script><span style="display:none">Hidden</span><div>Visible</div></body></html>

　　4、属性过滤选择器：

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div{float:left;border:solid 1px #ccc;margin:8px;width:65px;height:65px;display:none}</style><body><script type="text/javascript">    $(function(){        $('div[id]').show(3000);//选出div中包含ID的标签    });    $(function(){        $('div[title="A"]').show(3000);//选出div中title是A的标签    });    $(function(){        $('div[title!="A"]').show(3000);//选出div中title不是A的标签    });    $(function(){        $('div[title^="A"]').show(3000);//选出div中的title是以A开头的    });    $(function(){        $('div[title$="C"]').show(3000);//选出id中title是以C为结尾的    });    $(function(){        $('div[title*="B"]').show(3000);//选出div中title中有B的    });    $(function(){        $('div[id="divAB"][title*="B"]').show(3000);//选出div中ID为divAB并且title中含有B    });</script><div id="divID">ID</div><div title="A">Title A</div><div id="divAB" title="AB">ID <br />Title AB</div><div title="ABC">Title ABC</div></body></html>

　　5、子元素过滤选择器：

<!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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    ul{width:250px;list-style-type:none;padding:0px}    ul li{height:23px;width:60px;line-height:23px;float:left;border:solid 1px #eee;border-bottom:solid 1px #eee;margin-bottom:5px}    .GetFocus{width:58px;border:solid 1px #666;background-color:#eee}</style><body><script type="text/javascript">    $(function(){        $('li:nth-child(2)').addClass('GetFocus');//li中第二个字子元素　　:nth-child(eq/even/odd/index)    });    $(function(){        $('li:first-child').addClass('GetFocus');//li中第一个子元素    });    $(function(){        $('li:last-child').addClass('GetFocus');//li中最后一个子元素    });    $(function(){        $('li:only-child').addClass('GetFocus');//li中有唯一一个元素    });</script><ul><li>Item 1-0</li><li>Item 1-1</li><li>Item 1-2</li><li>Item 1-3</li></ul><ul><li>Item 2-0</li><li>Item 2-1</li><li>Item 2-2</li><li>Item 2-3</li></ul><ul><li>Item 3-0</li></ul></body></html>

　　6、表单对象属性过滤选择器：

<!DOCTaYPE 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><meta name="keywords" content=" keywords" /><meta name="description" content="description" /></head><script type="text/javascript" src="jquery-1.7.2.min.js"></script><style type="text/css">    body{font-size:12px;text-align:center}    div{display:none}    select{height:65px}    .clsIpt{width:100px;padding:3px}    .GetFocus{border:solid 1px #666 ;background-color:#eee}</style><body><script type="text/javascript">    $(function(){        $('#divA').show(3000);        $('#form1 input:enabled').addClass('GetFocus');//input标签中enabled    });    $(function(){        $('#divA').show(3000);        $('#form1 input:disabled').addClass('GetFocus');    });    $(function(){        $('#divB').show(3000);        $('#divB input:checked').addClass('GetFocus');//input中的checked    });    $(function(){        $('#divC').show(3000);        $('#Span2').html('选中项是'+$('select option:selected').text());//select中option的selected项    });</script><form method="post" action="" id="form1" style="width:241px"><div id="divA"><input type="text" name="" class="clsIpt" value="可用文本" /><input type="text" name="" class="clsIpt" disabled="disabled" value="不可用文本框" /></div><div id="divB"><input type="checkbox" name="" value="1" checked="checked" />选中<input type="checkbox" name="" value="0" />未选中</div><div id="divC"><select name=""><option value="0">Item 0</option><option value="1" selected="selected">Item 1</option><option value="2">Item 2</option><option value="3" selected="selected">Item 3</option></select><span id="Span2"></span></div></form></body></html>

From:Picaso博客~~~http://www.cnblogs.com/picaso/

转载于:https://www.cnblogs.com/picaso/archive/2012/04/04/2432098.html

jQuery学习笔记——jQuery选择器详解种类与方法相关推荐

ELK学习笔记之Logstash详解
0x00 Logstash概述官方介绍:Logstash is an open source data collection engine with real-time pipelining cap ...
expect学习笔记及实例详解【转】
1. expect是基于tcl演变而来的,所以很多语法和tcl类似,基本的语法如下所示: 1.1 首行加上/usr/bin/expect 1.2 spawn: 后面加上需要执行的shell命令,比如说 ...
Java中大数据数组,Java基础学习笔记之数组详解
摘要:这篇Java开发技术栏目下的"Java基础学习笔记之数组详解",介绍的技术点是"java基础学习笔记.基础学习笔记.Java基础.数组详解.学习笔记.Java&qu ...
oracle scn 重置,学习笔记:Oracle SCN详解 SCN与Oracle数据库恢复的关系
天萃荷净分享一篇关于Oracle SCN的详解,介绍SCN与Oracle数据库恢复的关系和SCN在数据库中的作用一.为什么需要System checkpoint SCN号与Datafile Che ...
PyQt5学习笔记——一文详解QObject
QObject详解笔记1 一.简介 QObject是所有Qt对象的基类二.功能作用 2.1 对象名称.属性 2.1.1 API setObjectName("唯一名称") 给QT ...
shell入门学习笔记-12-命令详解: echo与printf
系列目录与参考文献传送门: shell入门学习笔记-序章命令详解 admindeMacBook-Pro:myshell admin$ type cd cd is a shell builtin ad ...
CoAP学习笔记——CoAP格式详解
0 前言 CoAP是受限制的应用协议(Constrained Application Protocol)的代名词.在当前由PC机组成的世界,信息交换是通过TCP和应用层协议HTTP实现的.但是对于小型 ...
学习笔记-Flutter 动画详解（一）
Flutter 动画详解(一) 本文主要介绍了动画的原理相关概念,对其他平台的动画做了一个简要的梳理,并简要的介绍了Flutter动画的一些知识. 1. 动画介绍动画对于App来说,非常的重要.很多 ...
Docker技术入门与实战第二版-学习笔记-3-Dockerfile 指令详解
前面已经讲解了FROM.RUN指令,还提及了COPY.ADD,接下来学习其他的指令 5.Dockerfile 指令详解 1> COPY 复制文件格式: COPY <源路径> .. ...