3 jquery的选择器2

作者: 流光已至 | 来源:发表于2018-08-03 21:33 被阅读0次

jQuery笔记
jQuery
jQuery基本操作
前端（十五）2
前端笔记（14）
jQuery篇
jQuery基本操作
jquery
JQuery 操作手册
jQuery基础知识

6 属性过滤选择器

自定义属性，用于正则表达式

<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
 <script type="text/javascript">
    //属性过滤选择器
    function myclick(){
        
        //自定义属性过滤
        $("input[reg]").each(function(){
            
            var val=$(this).val();
            var reg=$(this).attr("reg");
            var tip=$(this).attr("tip");
            var regExp = new RegExp(reg);
            
            if(!regExp.test(val)){
                
                alert(tip);
            }
            
            
        })
        
    }
 
 </script>
 
</head>
<body>
     
   用户名：<input id="username" name="usename" type="text" reg="^\d{6,8}$" tip="请输入6到8位用户名"> <br>    
    密码：<input name="password" type="password" reg="\w{6,8}$" tip="请输入6到8位单词字符的密码"><br>
    
    <input type="button" value="点击" onclick="myclick()">


</body>

效果如下：

7 子元素过滤选择器

$("ul li:nth-child(2)")    匹配其父元素下第N个子元素
  $("ul li:first-child")  ,           $("ul li:last-child"),           $("ul li:only-child")

8 小练习

给p标签，加onclick事件

<script type="text/javascript">
    //小练习
    $(function(){
        
        $("p").click(function(){
            alert($(this).html());
        })
        // 各行变色
        $("li:even").css({"background":"green"});   
        
    })
    //输出多选选中的个数
    function myclick(){
        
        var inputObj=$("input:checked");
        alert(inputObj.length);
    }
   
 </script>
 
</head>
<body>
   <p>段落1</p>
    <p>段落2</p>
     <p>段落3</p>
     <ul>
          <li>列表项1</li>
             <li>列表项2</li>
            <li>列表项3</li>
             <li>列表项4</li>
     </ul>
     <input type="checkbox">多选项1
      <input type="checkbox">多选项2
       <input type="checkbox">多选项3
        <input type="checkbox">多选项4
        
        <input type="button" value="点击" onclick="myclick()">
        
        
</body>

效果如下：