jQuery学习二

于 2015-08-18 09:56:33 发布
阅读量298 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_15114467/article/details/47747441
版权

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>
sinat_15114467
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值