jQuery选择器

来源：互联网发布：python不打印空格编辑：程序博客网时间：2024/06/15 11:07
<html><head><title></title><meta name="lucheng" content="text/html;charset=UTF-8"/> <!--引入jQuery文件--><script src="H:/jQuery/jquery-3.1.0.js"></script><style>div{width:100px;height:100px;}div div{width:47px;height:47px;}div span{width:47px;height:47px;display:inline-block;}</style></head><body><script>//CSS基本选择器/*1.id选择器*/$(function(){$('#id').css('background','Red');})</script><div id="id"></div><script>/*2.class选择器*/$(function(){$('.class').css('background','black');})</script><div class="class"></div><script>/*3.element选择器*/$(function(){$('div').eq(2).css('background','BlueViolet');})</script><div></div><script>/*4.*选择器*/$(function(){$('div *').css('background','OrangeRed');$('div *').css('display','inline-block');})</script><div><div></div><div></div><div></div><div></div></div><script>//过渡选择器/*1. :first、:last 第一、最后的标签元素*/$(function(){$('#a div').css('background','White');$('#a div:first').css('background','Purple');$('#a div:last').css('background','Purple');})</script><div id="a"><div></div><div></div><div></div><div></div></div><script>/*2. :not 非选取的元素*/$(function(){$('#b *').css('background','White');$('#b *:not(span)').css('background','SaddleBrown');})</script><div id="b"><span></span><div></div><div></div><span></span></div><script>/*3. :even、odd 取偶数或奇数索引的元素*/$(function (){/*$('tbody tr:even').css('color','white').css('backgroundColor','black');$('tbody tr:odd').css('color','black').css('backgroundColor','white');*/$('tbody tr:even td:even').css('color','white').css('backgroundColor','black');$('tbody tr:odd td:odd').css('color','white').css('backgroundColor','black');})</script><table border="2"><thead><tr><th>掩饰</th><th>掩饰</th><th>掩饰</th><th>掩饰</th></tr></thead><tbody><tr><td>演示</td><td>演示</td><td>演示</td><td>演示</td></tr><tr><td>装饰</td><td>装饰</td><td>演示</td><td>演示</td></tr><tr><td>演示</td><td>演示</td><td>演示</td><td>演示</td></tr><tr><td>装饰</td><td>装饰</td><td>演示</td><td>演示</td></tr></tbody><table><script>/*4.eq 取指定索引的元素*/$(function(){$('button:eq(2)').css('backgroundColor','red').css('color','white');})</script><button>A</button><button>B</button><button>C</button><button>D</button><script>/*5.gt(x)、lt(x) 取大于或下于指定索引的元素*/$(function(){$('[type="button"]:eq(2)').css('backgroundColor','red').css('color','white');$('[type="button"]:gt(2)').css('backgroundColor','blue').css('color','white');$('[type="button"]:lt(2)').css('backgroundColor','SlateBlue').css('color','white');})</script><br/><input type="button" value="0"></input><input type="button" value="1"></input><input type="button" value="2"></input><input type="button" value="3"></input><input type="button" value="4"></input><script>/*6. :header 取h1~h6之间的标题元素*/$(function(){$(':header').css('backgroundColor','red').css('color','white');})</script><br/><h4>4号标题</h4><h5>5号标题</h5><h6>6号标题</h6><script>/*7. :contains 取text文本的标签元素*/$(function(){$('b:contains(JavaScript)').css('backgroundColor','black').css('color','white');$('b:contains(jQuery)').css('backgroundColor','black').css('color','red');})</script><b>JavaScript</b><br/><b>JavaScript框架</b><br/><b>jQuery</b><br/><script>/*8. :empty 取不包含子元素且文本为空的标签元素， :parent 取包含子元素或文本不为空的标签元素*/$(function(){$('p').css('height','200px').css('width','200px');$('p:not(:empty)').css('backgroundColor','red').css('color','white');$('p:empty').css('backgroundColor','black').css('color','red');})</script><p>哈迪斯</p><p width="200px"></p><script>/*9. :has(selector) 取含某元素标签元素（不是直系子元素也行）*/$(function(){$('div:has(em)').css('backgroundColor','Silver');})</script><div>博大精深<em></em></div><div>源远流长</div><script>/*10. :hidden 取不可见的标签元素:visible 取可见的标签元素*/$(function(){$('span div:hidden').css('display',"block");})</script><span><div style="display:none">隐藏显示</div></span><script>/*10. :enabled 取可用的表单对象:disabled 取不可用的表单对象:checked 选取选中单选或复选框元素:selected 取下拉列表被选中的元素*/$(function(){$('div input:enabled').css('color',"white").css('backgroundColor','black');$('div input:disabled').css('color',"red").css('backgroundColor','black');})</script><form action="#"><div>        <input type="text" value="可用的文本框" />    </div>    <div>        <input type="text" disabled="disabled" value="不可用的文本框" />    </div></form><script>//表单选择器/*:input 取input textarea select button元素:text 取单行文本框元素:radio 取单选框元素:checkbox 取复选框元素:submit 取提交按钮元素:reset 取重置按钮元素:reset 选择器和属性选择器$('input[type=reset]')等同:button 取按钮元素:button 选择器和属性选择器$('input[type=button]')等同:file 取上传域元素:file 选择器和属性选择器$('input[type=file]')等同:hidden 取不可见元素*/$(function(){$(':radio').eq(0).attr('value','1');$(':radio').eq(1).attr('value','2');})</script><form><input type="radio" name="o"/><input type="radio" name="o"/></form></body></html>
阅读全文
0 0