选择器part3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
<script>
    //类似与window.οnlοad=fuunction(){};
    $(function(){
        //1.基本选择器
        //2.层次选择器
            //"+"表示选择下一个li.~选择后面全部
        console.log($("#gz+"));    
        //3过滤选择器
        //3.1基本过滤(****)
        console.log($("li:first"));//输出第一个li
        console.log($("li:even"));//输出偶数的li
        console.log($("li:gt(2)"));//下表大于2的li
        console.log($("li:not(#gz)"));//不选择广州
        console.log($("li:contains('京')"));
        //3.2内容过滤
        //3.3可见性过滤
        console.log($("li:visible"));
        //3.4属性过滤
        console.log($("li[id!='gz']"));
        //3.5状态过滤(**)
        console.log($("input:enabled"));//筛选可用的,disabled不可用
        console.log($("input:checked"));
    });
        //4.表单选择器
        console.log($("input:checkbox"));
</script>
</head>
<body>
    <ul>
        <li>北京</li>
        <li>上海</li>
        <li id="gz">广州</li>
        <li>深圳</li>
        <li>南京</li>
        <li style="display:none;">香港</li>
    </ul>
        
        <p>
        <input type="text" disabled/>
        <!-- 加disabled就不可用 不提交给服务器 -->
        </p>
        <p>
            <input type="password"/>
        </p>
        <p>
            羽毛球<input type="checkbox" checked/>
            蓝球<input type="checkbox" checked/>
            <input type="checkbox" />
        </p>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值