English | 正體中文 | 简体中文

jQuery 属性选择器


寻找所有元素的属性值是否"相等"或"不等于"某些值
$("input[value='good']") //equal 'good'
$("input[value!='bad']") //not equal 'bad'

范例

 

范例程式码Expand
<!-- HTML -->
<div id="example-section19">        
     <input value="good" />
     <input value="not good not bad" />
     <input value="bad" />
    
    <br>
    <button type="button" id="btn191">Finds input value equal to 'good' </button>
    &nbsp;<button type="button" id="btn192">Finds input value NOT equal to 'good' </button>
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn191").click(function(){            
        $("#example-section19 input").css("background-color", "");
        $("#example-section19 input[value='good']").css("background-color", "orange");
    });

    $("#btn192").click(function(){
        $("#example-section19 input").css("background-color", "");
        $("#example-section19 input[value!='good']").css("background-color", "orange");
    });
});
</script>



寻找所有元素的属性值中是否含有某些字串
$("input[value*='men']")

范例

   

范例程式码Expand
<!-- HTML -->
<div id="example-section15">        
     <input value="implement" />
     <input value="manchester" />
     <input value="mention" />
    
    <br><button type="button" id="btn151">Finds input value contains 'men' </button>&nbsp;
    <button type="button" id="btn152">Reset</button>&nbsp;
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn151").click(function(){
        $("#example-section15 input[value*='men']").css("background-color", "orange");
    });

    $("#btn152").click(function(){
        $("#example-section15 input").css("background-color", "");
    });
});
</script>



寻找输入值中是否有一样的字串
$("input[value~='man']")

范例

  

范例程式码Expand
<!-- HTML -->
<div id="example-section16">        
     <input value="implement" />
     <input value="manchester" />
     <input value="hey man" />
    
    <br>
    <button type="button" id="btn161">Finds input value contains exact word 'man' </button>
    &nbsp;<button type="button" id="btn162">Reset</button>&nbsp;
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn161").click(function(){
        $("#example-section16 input[value~='man']").css("background-color", "orange");
    });

    $("#btn162").click(function(){
        $("#example-section16 input").css("background-color", "");
    });
});
</script>



寻找元素中特定的属性里是否含有以'man'为字首的字串
$("input[value^='man']")

范例

  

范例程式码Expand
<!-- HTML -->
<div id="example-section17">        
     <input value="postman" />
     <input value="manchester" />
     <input value="spider man" />
    
    <br>
    <button type="button" id="btn171">Finds input value starts with 'man' </button>
    &nbsp;<button type="button" id="btn172">Reset</button>&nbsp;
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn171").click(function(){
        $("#example-section17 input[value^='man']").css("background-color", "orange");
    });

    $("#btn172").click(function(){
        $("#example-section17 input").css("background-color", "");
    });
});
</script>



寻找元素中特定的属性里是否有以 'man' 为字尾的字串
$("input[value$='man']")

范例

  

范例程式码Expand
<!-- HTML -->
<div id="example-section18">        
     <input value="postman" />
     <input value="manchester" />
     <input value="spider man" />
    
    <br>
    <button type="button" id="btn181">Finds input value ends with 'man' </button>
    &nbsp;<button type="button" id="btn182">Reset</button>&nbsp;
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn181").click(function(){
        $("#example-section18 input[value$='man']").css("background-color", "orange");
    });

    $("#btn182").click(function(){
        $("#example-section18 input").css("background-color", "");
    });
});
</script>



寻找元素中特定的属性里, 是否有字串相等于给定的值, 或是相等于给定的值后面再加上连字号(-)
$("input[value|='en']") //Finds input value equal to 'en' or 'en-')

范例

 

范例程式码Expand
<!-- HTML -->
<div id="example-section20">        
     <input value="en-us" />
     <input value="en" />
     <input value="enforcement" />
    
    <br>
    <button type="button" id="btn201">Finds input value equal to 'en' or 'en-' </button>
    &nbsp;<button type="button" id="btn202">Reset</button>    
</div>


<!-- Javascript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
    $("#btn201").click(function(){            
        $("#example-section20 input[value|='en']").css("background-color", "orange");
    });

    $("#btn202").click(function(){
        $("#example-section20 input").css("background-color", "");
    });
});
</script>


© 2012 PureExample.com contact