欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery 过滤选择器 与属性修改的方法演示比较

程序员文章站 2022-03-13 11:16:42
文本匹配 在表单输入项里面输入值,根据输入值,点击判断按钮,让对应的复选框选中 获取复选框状态 点击按钮,获取复选框状态为选中的个数,并将结果弹出在页面 基础页面效果如下: 属性更改 当复选框被选中时,复选框对应的文本颜色为红色; 当复选框未被选中时,复选框对应的文本颜色为黑色; 基础页面效果如下: ......

文本匹配

在表单输入项里面输入值,根据输入值,点击判断按钮,让对应的复选框选中

 JQuery 过滤选择器 与属性修改的方法演示比较

<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.11.0.min.js"></script>
</head>
<body>
请输入城市:<input type="text" id="id"/> 
<br/><br/>
城市复选框:
<div style="width:200px;background:red;">
    <input type="checkbox" name="love" value="北京"/>北京
    <input type="checkbox" name="love" value="南京"/>南京
    <input type="checkbox" name="love" value="上海"/>上海
</div>
    
    <br/><br/>
    <input type="button" value="判断" onclick="checkCity()"/>
<!--    思路一-->
    <script type="text/javascript">
        function checkCity(){
            var city= $("#id").val();
            alert(city);
            $("input[name=love]").each(function(index,element){
                if(element.value==city){
                    alert("just it");
//                    以下四种方法都行
//                    $(element).prop("checked",true);
                    $(element).attr("checked",true);
//                    $(element).prop("checked","checked");
//                    $(element).attr("checked","checked");
                }
            })
        }
    </script>
<!--    思路二-->
    <script type="text/javascript">
        function checkCity(){
            $("input[name=love").prop("checked",false);
            var city= $("#id").val();
            $("input[value="+city+"]").prop("checked",true);
            
        }
    </script>
</body>

</html>

 

获取复选框状态

点击按钮,获取复选框状态为选中的个数,并将结果弹出在页面

基础页面效果如下:

 JQuery 过滤选择器 与属性修改的方法演示比较

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.11.0.min.js" ></script>
        
    </head>

      <body>
        <input type="checkbox" name="ck"   />
          <input type="checkbox" name="ck" />
          <input type="checkbox" name="ck"  />
          <input type="button" value="提交"/>

    </body>
    <script type="text/javascript">
//        方法一
//        $(function(){
//            var i=0;
//            $("input[type=button]").click(function(){
//                $("input[type=checkbox]").each(function(index,element){
//                    //这里使用attr就不行
//                    alert($(element).prop("checked"));
//                    if($(element).prop("checked")==true){
//                        i++;
//                    }
//                });
//                alert(i);
//            });
//        });
//        方法二
//        $(function(){
//            var i=0;
//            $("input[type=button]").click(function(){
//                $("input[type=checkbox]:checked").each(function(index,element){
//                        i++;
//                });
//                alert(i);
//            });
//        });
//        方法三
        $(function(){
            var i=0;
            $("input[type=button]").click(function(){
                alert($("input[type=checkbox]:checked").length);
            });
        });
    </script>
</html>

 

 

属性更改

当复选框被选中时,复选框对应的文本颜色为红色;

当复选框未被选中时,复选框对应的文本颜色为黑色;

基础页面效果如下:

JQuery 过滤选择器 与属性修改的方法演示比较

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.11.0.min.js"></script>
        
    </head>

    <body>
        <table border="1">
            <tr>
                <td><input type="checkbox" class="ck" /> <font >Data1</font></td>
                
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" /><font >Data2</font></td>
            
            </tr>
            <tr>
                <td><input type="checkbox" class="ck" /><font >Data3</font></td>
                
            </tr>
        </table>
        <script type="text/javascript">
            $(function(){
                for(var i=0;i<$(".ck").length;i++){
//                    这里注意取数组元素后不是JQuery对象了,要在穿上马甲才能使用click()属于JQuery方法
                    $($(".ck")[i]).click(function(){
                        alert();
                    if($(this).prop("checked")==true){
                        $(this).next().css("color","red");
                    }else{
                        $(this).next().css("color","black");
                    }
                });
                }
                
//                for(var i = 0; i < ck.length; i++) {
//                        $(ck[i]).click(function() {
//                            
//                            //获取复选框的选中状态
//                            var cked = $(this).prop("checked");
//                        
//                            //如果选中
//                            if(cked == true) {
//
//                                //将第二个单元格内的文本字体变红色
//                                $(this).next().prop("color", "red");
//                            } else {
//                                //将第二个单元格内字体变黑色
//                                $(this).next().prop("color", "black")
//                            }
//                        })
//                $("input[type=checkbox]:eq(2)").click(function(){
//                    if($("input[type=checkbox]:eq(2)").prop("checked")==true){
//                        $("font:eq(2)").css("color","red");
//                    }else{
//                        $("font:eq(2)").css("color","black");
//                    }
//                });
            })
        </script>
        
    </body>
    

</html>

 

 

 

 

div显示&隐藏

JQuery 过滤选择器 与属性修改的方法演示比较

获取所有隐藏div,让隐藏div显示,并且改变背景颜色,点击关闭按钮,所有div恢复到初始状态

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.11.0.min.js"></script>
<style type="text/css">
    .diveven { background:#bbffaa;}
</style>
</head>
<body>
<div style="width:100px;height:100px;border:1px solid;display:none">中国万岁</div>
<div style="width:100px;height:100px;border:1px solid;display:none">世界万岁</div>
<div style="width:100px;height:100px;border:1px solid;">宇宙万岁</div>
    
    <input type="button" value="显示并且变颜色" onclick="showContent();"/>
    <input type="button" value="关闭" onclick="closeContent();"/>
    
    <script type="text/javascript">
//        方法一
//        function showContent(){
//            $("div[style*=none]").each(function(index,element){
//                $(element).css("display","block").css("background-color","red");
//            });
//        }
//        function closeContent(){
//                $("div[style*=disp]").each(function(index,element){
//                $(element).css("display","none");
//            });
//        }
//        方法二
        function showContent(){
            $("div:hidden").show(2000).addClass("diveven");
        }
        function closeContent(){
                $("div:lt(2)").hide().removeClass("diveven");
        }
    </script>
</body>
</html>