jQuery的选择器范例

来源：互联网发布：linux 安装php ssh2 编辑：程序博客网时间：2024/05/29 08:38
标签选择器

==代码如下==<!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>2-4</title><style>    div,span,p {    width:140px;    height:140px;    margin:5px;    background:#aaa;    border:#000 1px solid;    float:left;    font-size:17px;    font-family:Verdana;}div.mini {     width:55px;    height:55px;    background-color: #aaa;    font-size:12px;}div.hide {     display:none;}</style> <!--   引入jQuery -->  <script src="js/jquery-3.2.1.js" type="text/javascript"></script><script>    $(document).ready(function(){    $("#reset").click(function(){        $("*").removeAttr("style");        $("div[class=none]").css({"display":"none"});     });    $("input[type=button]").click(function(){        if($("#isreset").is(":checked")){            $("#reset").click();        }    });    function animateIt() {        $("#mover").slideToggle("slow", animateIt);    }    animateIt();    $('#btn1').click(function(){        //alert('test');        $('#one').css("background","aqua")    });    $('#btn2').click(function(){        $('.mini').css("background","bisque");    });    $('#btn3').click(function(){        $('div').css('background','#bbaaff');    });    $('#btn4').click(function(){        $('*').css('background','#bbaacc');    });    $('#btn5').click(function(){        $('span,#two').css('background','#ccaabb');    });    //后代选择器    $('#btn6').click(function(){        $('body div').css('background','#AABBDD')    });    //字选择器    $('#btn7').click(function(){        $('body>div').css('background','#FFAABB')    });    //相邻元素选择器    $('#btn8').click(function(){        $('.one+div').css('background','#CCAAFF');    });    //同辈元素选择器    $('#btn9').click(function(){        $('.one~div').css('background','#BBBBAA')    });})</script> <script type="text/javascript">  </script></head><body><button id="reset">手动重置页面元素</button><input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br /><h3>基本选择器.</h3><!-- 控制按钮 --><input type="button" value="选择 id为 one 的元素." id="btn1"/>  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/><input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/><input type="button" value="选择 所有的元素." id="btn4"/><input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/><input type="button" name="btn6" id="btn6" value="选择BODY下面的DIV" /><input type="button" name="btn7" id="btn7" value="选择Body的下一个div" /><input type="button" name="btn8" id="btn8" value="相邻元素选择器" /><input type="button" name="btn9" id="btn9" value="同辈元素选择器" /><br /><br /><!-- 测试的元素 --><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 class="one">    <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"的div<input type="hidden" size="8"/></div><span id="mover">正在执行动画的span元素.</span></body></html>
阅读全文
0 0