jQuery的选择器

来源：互联网发布：数据加密不属于计算编辑：程序博客网时间：2024/05/22 13:16

HTML模块如下：

 <!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="jquery1.12.3.js"></script><script type="text/javascript" src="stromae.js"></script><link rel="stylesheet" href="style.css" /></head><body><div class="one" id="one">id为one，class为one的div<div class="mini">class为mini</div></div><div class="one" id="two" title="test">id为two，class为one，title为test的div<div class="mini" title="other">class为mini,title为other</div><div class="mini" title="test">class为mini,title为test</div></div><div class="one"><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini"></div></div><div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini">class为mini</div><div class="mini" title="tesst">class为mini,title为tesst</div></div><div style="display:none;" class="none">style的display为“none”的div</div><div class="hide">class为hide的div</div><div><input type="hidden" size="8" />包含input的type为"hidden"的div</div><button id="mover">正在执行动画的span元素</button><div id='box'></div><h1>基本过滤选择器</h1></body></html>

CSS模块如下：

/*全局样式设置*/          body,h4,ul,li{              margin:0px;              padding:0px;              }  /*具体设置*/        div,span,p {            width: 180px;            height: 150px;            margin: 5px;            background: #aaa;            border: #000 1px solid;            float: left;            font-size: 18px;            font-family: verdana;            word-break: break-all;        }        div.mini {            overflow: auto;            width: 55px;            height: 55px;            background-color: #AAAAAA;            font-size: 12px;        }        div.hide {            display: none;        }#box {    background: #98bf21;    height: 100px;    width: 100px;    margin: 6px;}

jQuer选择器：

$(function()//基本选择器：通过元素id、class和标签名来等来查找DOM元素。$('#one').css('background','red');//改变id为one 的元素的背景色$('.mini').css('background','blue');//改变class为mini 的所有元素的背景色$('div').css('background','green');//改变元素名是<div>的所有元素的背景色$('*').css('background','yellowgreen');//改变所欲元素的背景色$('span,#two').css('background',"red");//改变所有<span>元素和id为two的元素的背景色//层次选择器：通过DOM元素之间的层次关系来获取特定元素$('body div').css('background','cornflowerblue');//改变<body>内所有<div>的背景色$('body >div').css('background','darkgoldenrod');//改变<body>内子元素<div>的背景色$('.one +div').css('background','cadetblue');   //改变class为one的下一个<div>同辈元素的背景色$('#two ~div').css('background','darkgreen');//改变id为two的元素后面的所有<div>同辈元素的背景色<strong>//过滤选择器——基本过滤选择器：通过特定的过滤规则来筛选所需的DOM元素，其语法规则与CSS中的伪类选择器语法相同。</strong>$('div:first').css('background',"#0000A2");//改变第一个<div>元素的背景色$('div:last').css('background','#316BA5');//改变最后一个<div>元素的背景色$('div:not(.one)').css('background','#468847');//改变class不为one的<div>元素的背景色$('div:even').css('background','#990000');//改变索引值为偶数的<div>元素的背景色$('div:odd').css('background','brown');//改变索引值为奇数的<div>元素的背景色$('div:eq(4)').css('background','goldenrod');//改变索引值为4的<div>元素的背景色$('div:gt(4)').css('background','chartreuse');//改变索引值大于4的<div>元素的背景色$('div:lt(4)').css('background','darkgreen');//改变索引值小于4的<div>元素的背景色$(':header').css('background','yellowgreen');//改变所有的标题元素，例如<h1>,<h2>,<h3>....这些元素的背景色$(':animated').css('color','red');//改变当前正在执行动画的元素的背景色$(':focus').css('color','darkred');//改变当前获取焦点的元素的背景色//内容过滤选择器：过滤规则主要体现在它所包含的子元素或文本内容上。$("div:contains('di')").css({'color':'red','background':'blue'});       //改变含有文本“di”的<div>元素的背景色和文本颜色$('div:empty').css('background','darkgoldenrod');//改变不包含子元素（包括文本元素）的<div>空元素的背景色$('div:has(".mini")').css('background',"#000099");//改变class为mini元素的<div>元素的背景色$('div:parent').css('background','green');//可见性过滤选择器：根据元素的可见和不可见状态来选择相应的元素$('div:visible').css({'background':'red','color':'blue'}); //改变所有可见的<div>元素的背景色$('div:hidden').show(5000);//显示隐藏的<div>元素（show(5000)是显示元素，5000是指元素从隐藏到显示完成的时间，单位是毫秒）//属性过滤选择器：通过元素的属性来获取相应的元素$('div[title]').css('background','darkgreen');//改变还有title属性的<div>元素的背景色  $('div[title=test]').css('background','royalblue');        //改变title值等于"test"的<div>元素的背景色$('div[title!=test]').css('background','red');//改变title值不等于'test'的<div>元素的背景色$('div[title^="en"]').css('background','burlywood');        //改变title值以'en'开始的<div>元素的背景色$('div[title$="en"]').css('background','red');//改变title值以'en'结束的<div>元素的背景色$('div[class*=one]').css('background','greenyellow');//改变class值为'one'的<div>元素的背景色$('div[title|="en"]').css('background','red');//改变class值为'en'或以'en'为前缀的<div>元素的背景色（前缀是指类似于mi-ni这样的属性）$('div[title~=en]').css('background','red');//改变属性class用空格分隔的值中包含'en'的<div>元素的背景色（类似于mi ni这样的属性）$('div[id][title^=t]').css('background','goldenrod');//改变含有属性id且title值以t开头的<div>元素的背景色//子元素过滤选择器：根据元素之间的父辈与子辈的关系来获取相应的元素$('div.one :nth-child(1)').css('background','darkgoldenrod');//改变每个class为one的<div>父元素下的第2个子元素的背景色$('div.one :first-child').css('background','royalblue');//改变每个class为one的<div>父元素下的第1个子元素的背景色$('div.one :last-child').css('background','darkgoldenrod');//改变每个class为one的<div>父元素下的最后1个子元素的背景色$('div.one :only-child').css('background','mediumvioletred');//如果class为one的<div>父元素下只有一个子元素，那么则改变这个子元素的背景色});

0 0