jQuery学习二

来源：互联网发布：淘宝免费转微信链接编辑：程序博客网时间：2024/06/05 22:50

3、过滤选择器

基本过滤器

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        <!--first 第一个元素-->        $('table tr:first').css('background-color','#cccccc');        <!--eq下标等于index的元素 -->        $('tbody tr:eq(0)').css('background-color','yellow');    }    function f2(){        <!--even 偶数行 0开始-->        $('tbody tr:even')        .css('background-color','#fff8dc');        <!--odd 奇数行 1开始-->        $('tbody tr:odd').css(        'background-color','yellow');    }    function f3(){        $('tbody tr:eq(1) td:eq(1)')        .css('background-color','yellow')        .css('font-size','80px');    }    function f4(){        $('tbody tr:not(#tr1)')        .css('background-color','yellow')    }</script></head><body style="font-size:30px;">        <table width="60%" border="1"         cellpadding="0" cellspacing="0">            <thead>                <tr><td>name</td><td>age</td></tr>            </thead>            <tbody>                <tr><td>sally</td><td>22</td></tr>                <tr id="tr1"><td>eric</td><td>13</td></tr>                <tr><td>kitty</td><td>22</td></tr>                <tr><td>kimi</td><td>23</td></tr>            </tbody>        </table>        <a href="javascript:;" onclick="f4();">ClickMe</a></body></html>

内容过滤器

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        <!-- contains匹配包含给定文本的元素-->        $('div:contains(s)').css('font-size',  '60px');    }    function f2(){        <!-- empty匹配所有不包含子元素-->        $('div:empty').html('add someting to c');    }    function f3(){        <!-- parent匹配含有子元素或文本的元素-->        $('div:parent').css('font-size',   '60px');    }    function f4(){        <!-- has 匹配还有选择器所匹配的元素-->        $('div:has(p)').css('font-size',   '60px');    }</script></head><body style="font-size:30px;">        <div>test</div>        <div></div>        <div>            <p>abc</p>        </div>        <a href="javascript:;"         onclick="f4();">ClickMe</a></body></html>

可见性过滤选择器

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        <!--显示-->        $('div:hidden').show('slow');    }    function f2(){        <!--隐藏-->        $('div:visible').hide(800);    }</script></head><body style="font-size:30px;">        <div>hello jQuery</div><div>hello jQuery</div><div>hello jQuery</div>        <div style="display:none;">hello java</div>        <a href="javascript:;" onclick="f1();">ClickMe</a></body></html>

属性过滤选择器

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        $('div[id]').css('font-size','80px');    }    function f2(){        $('div[id=d2]').css('font-size','80px');    }    function f3(){        $('div[id!=d2]').css('font-size','80px');    }</script></head><body style="font-size:30px;">        <div id="d1">hello jQuery</div>        <div id="d2">hello dojo</div>        <div>hello java</div>        <a href="javascript:;" onclick="f3();">ClickMe</a></body></html>

子元素过滤选择器

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        $('ul li:eq(1)').css('font-size','60px');    }    function f2(){        <!-- nth-child 从1开始-->        <!-- even偶数行从0开始这里没有0，从2开始-->        $('ul li:nth-child(even)').css('font-size','60px');    }</script></head><body style="font-size:30px;">        <ul>            <li>item1</li>            <li>item2</li>            <li>item3</li>        </ul>        <ul>            <li>item111</li>            <li>item222</li>            <li>item333</li>        </ul>        <a href="javascript:;" onclick="f2();">ClickMe</a></body></html>

表单对象属性过滤选择器

<html><head><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.4.3.js"></script><script type="text/javascript">    function f1(){        $('#form1 input:disabled').css('border','1px dotted red');    }    function f2(){        $('#form1 input:enabled').attr('disabled',true);    }    function f3(){        var length = $('#form2 input:checked').length;        alert(length);        <!-- 如果选中多个只显示一个怎么解决?-->        alert($('#form2 input:checked').val());    }    function f4(){        alert($('#form3 select option:selected').val());    }</script></head><body style="font-size:30px;">        <form id="form1">            username:<input name="username"/><br/>            name:<input name="name"            disabled="disabled"/><br/>        </form>        <form id="form2">            兴趣:钓鱼<input type="checkbox"             name="interest" value="fishing"             checked="checked">            做饭:<input type="checkbox"             name="interest" value="cooking">            台球:<input type="checkbox"             name="interest" value="snooker">        </form>        <form id="form3">            <select style="width:120px;">                <option value="math">数学</option>                <option value="english"                 selected="selected">英语</option>                <option value="computer">计算机</option>            </select>        </form>        <a href="javascript:;"         onclick="f3();">ClickMe</a></body></html>

0 0