顯示具有 jQuery-Selector 標籤的文章。 顯示所有文章
顯示具有 jQuery-Selector 標籤的文章。 顯示所有文章

2015年4月13日 星期一

jQuery Selector 多對象 Selector

jQuery  Selector 多對象 Selector


需求設明：
當你想要設定指定多個元素，
就可以使用這個用法。

本篇文章使用版本：jquery-1.6.1

用法：
$("selector1,selector2,selectorN")
selector1 : 一個Selector
selector2 : 第二個Selector
selectorN : 可以多個Selector 的意思

程式內容1：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 多對象 Selector selector1,selector2,selectorN</title>
<script src="../js/jquery-1.6.1.min.js" type="text/javascript"> </script>
<script>

 $(document).ready(function(){
  $("#main1,#main3,#main4").css('background-color','red');
 });
</script>
</head>
<body>
 <div id="main1">11</div>
 <div id="main2">22</div>
 <div id="main3">23</div>
 <div id="main4">44</div>
</body>
</html>


測試結果1：


程式內容2：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 多對象 Selector selector1,selector2,selectorN</title>
<script src="../js/jquery-1.6.1.min.js" type="text/javascript">
 
</script>
<script>
 $(document).ready(function() {
  $("tr:eq(1),div:contains('John'),.close,input").css('background-color', 'red');
 });
</script>
</head>
<body>
 <table>
  <tr>
   <td>Value 0</td>
  </tr>
  <tr>
   <td>Value 1</td>
  </tr>
  <tr>
   <td>Value 2</td>
  </tr>
 </table>
 <div>John Resig</div>
 <div>George Martin</div>
 <div>Malcom John Sinclair</div>
 <div>J. Ohn</div>
 <div id="foo">
  <p>我喜歡的車子：</p>
 </div>
 <div id="audi">
  <p>奧迪</p>
 </div>
 <button class="close">close</button>
 <br>
 <input type="submit" value="Input submit" />
 <p>奧迪 R8</p>
</body>
</html>


測試結果2：



其它參考：
 jQuery-Selector






















其它文章
閱讀更多 »
張貼者： 於 星期一, 4月 13, 2015 0 意見
標籤： ,

2013年4月2日 星期二

[jQuery]jQuery Selector 之表單對象屬性類



jQuery Selector 之表單對象屬性類
:enabled
:disabled
:checked
:selected


1、
:enabled
匹配所有可用元素


程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:enabled 匹配所有可用元素
//查找所有可用的input元素
var str=' ';//此變數顯示訊息用的
$("input:enabled").val(function() {
str += '-- name: ' + this.name;
});
alert(str);
});
</script>
</head>
<body>
<form>
 <input name="email" disabled="disabled" />
 <input name="id" />
</form>
</body>
</html>


顯示結果：



2、
:disabled
匹配所有不可用元素


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:disabled 匹配所有不可用元素
//查找所有不可用的input元素
var str=' ';//此變數顯示訊息用的
$("input:disabled").val(function() {
str += '-- name: ' + this.name;
});
alert(str);
});
</script>
</head>
<body>
<form>
 <input name="email" disabled="disabled" />
 <input name="id" />
</form>
</body>
</html>



顯示結果：



3、
:checked
匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:checked 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option)
//查找所有選中的複選框元素
var str=' ';//此變數顯示訊息用的
$("input:checked").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
 <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
 <input type="checkbox" name="newsletter" value="Weekly" />
 <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>
</body>
</html>



顯示結果：



4、
:selected
匹配所有選中的option元素


程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單對象屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:selected 匹配所有選中的option元素
//查找所有選中的選項元素
var str=' ';//此變數顯示訊息用的
$("select option:selected").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<select>
 <option value="1">Flowers</option>
 <option value="2" selected="selected">Gardens</option>
 <option value="3">Trees</option>
</select>
</body>
</html>


顯示結果：




張貼者： 於 星期二, 4月 02, 2013 0 意見
標籤： , ,

[jQuery]jQuery Selector 之表單類


jQuery Selector 之表單類
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden


1、
:input
匹配所有input, textarea, select 和button 元素


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:input 匹配所有input, textarea, select 和button 元素
//查找所有的input元素
var str=' ';//此變數顯示訊息用的
$(":input").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<!-- 下面這些元素都會被匹配到。 -->
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



2、
:text
匹配所有的單行文本框


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:text 匹配所有的單行文本框
//查找所有的text元素
var str=' ';//此變數顯示訊息用的
$(":text").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



3、
:password
匹配所有密碼框


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:password 匹配所有密碼框
//查找所有密碼框
var str=' ';//此變數顯示訊息用的
$(":password").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



4、
:radio
匹配所有單選按鈕


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:radio 匹配所有單選按鈕
//查找所有單選按鈕
var str=' ';//此變數顯示訊息用的
$(":radio").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



5、
:checkbox
匹配所有復選框


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:checkbox 匹配所有復選框
//查找所有復選框
var str=' ';//此變數顯示訊息用的
$(":checkbox").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



6、
:submit
匹配所有提交按鈕


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:submit 匹配所有提交按鈕
//查找所有提交按鈕
var str=' ';//此變數顯示訊息用的
$("input:submit").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



7、
:image
匹配所有圖像域


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:image 匹配所有圖像域
//查找所有圖像域
var str=' ';//此變數顯示訊息用的
$(":image").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



8、
:reset
匹配所有重置按鈕


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:reset 匹配所有重置按鈕
//查找所有重置按鈕
var str=' ';//此變數顯示訊息用的
$(":reset").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>


顯示結果：



9、
:button
匹配所有按鈕


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:button 匹配所有按鈕
//查找所有按鈕
var str=' ';//此變數顯示訊息用的
$(":button").val(function() {
str += '-- value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button value="Button">Button</button>

</form>
</body>
</html>



顯示結果：



10、
:file
匹配所有文件域


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:file 匹配所有文件域
//查找所有文件域
$(":file").css("background-color","red");
});
</script>
</head>
<body>
<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" value="Input checkbox"/>

    <input type="file" value="Input file"/>
    <input type="hidden" value="Input hidden"/>
    <input type="image" value="Input image"/>

    <input type="password" value="Input password"/>
    <input type="radio" value="Input radio"/>
    <input type="reset" value="Input reset"/>

    <input type="submit" value="Input submit"/>
    <input type="text" value="Input text"/>
    <select><option>Option</option></select>

    <textarea></textarea>
    <button>Button</button>

</form>
</body>
</html>



顯示結果：



11、
:hidden
匹配所有不可見元素，或者type為hidden的元素


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之表單類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:hidden 匹配所有不可見元素，或者type為hidden的元素
//查找所有tr不可見元素
var str=' ';//此變數顯示訊息用的
$("tr:hidden").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<form>
<table>
 <tr style="display:none"><td>Value 1</td></tr>
 <tr><td>Value 2</td></tr>
</table>
</form>
</body>
</html>



顯示結果：




張貼者： 於 星期二, 4月 02, 2013 0 意見
標籤： , ,

[jQuery]jQuery Selector 之子元素類


[jQuery]jQuery Selector 之子元素類

:nth-child
:first-child
:last-child
:only-child


1、
:nth-child
匹配其父元素下的第N個子或奇偶元素

':eq(index)' 只匹配一個元素，而這個將為每一個父元素匹配子元素。

:nth-child 從1開始的，而:eq()是從0算起的！
可以使用:
<br>nth-child(even)
<br>:nth-child(odd)
<br>:nth-child(3n)
<br>:nth-child(2)
<br>:nth-child(3n+1)
<br>:nth-child(3n+2)


程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:nth-child 匹配其父元素下的第N個子或奇偶元素
//在每個 ul 查找第 2個li
var str=' ';//此變數顯示訊息用的
$("ul li:nth-child(2)").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>
</body>
</html>


顯示結果：






2、
:first-child
匹配第一個子元素
':first'
只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素

程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:first-child 匹配第一個子元素
//在每個 ul 中查找第一個 li
var str=' ';//此變數顯示訊息用的
$("ul li:first-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
//':first' 只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
var str=' ';//此變數顯示訊息用的
$("ul li:first").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>
</body>
</html>


顯示結果：








3、
:last-child
匹配最後一個子元素

':last'
只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素

程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:last-child 匹配最後一個子元素
//在每個 ul 中查找最后一個 li
var str=' ';//此變數顯示訊息用的
$("ul li:last-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
//':last'只匹配一個元素，而此選擇符將為每個父元素匹配一個子元素
var str=' ';//此變數顯示訊息用的
$("ul li:last").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
 <li>Tane</li>
 <li>Ralph</li>
</ul>
</body>
</html>



顯示結果：









4、
:only-child
如果某個元素是父元素中唯一的子元素，那將會被匹配

如果父元素中含有其他元素，那將不會被匹配。



程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之子元素類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//:only-child 如果某個元素是父元素中唯一的子元素，那將會被匹配
//在 ul 中查找是唯一子元素的 li
var str=' ';//此變數顯示訊息用的
$("ul li:only-child").html(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<ul>
 <li>John</li>
 <li>Karl</li>
 <li>Brandon</li>
</ul>
<ul>
 <li>Glen</li>
</ul>
</body>
</html>



顯示結果：







張貼者： 於 星期二, 4月 02, 2013 0 意見
標籤： , ,

[jQuery]jQuery Selector 之屬性類


jQuery Selector 之屬性類

[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]



1、
[attribute]
匹配包含給定屬性的元素。
注意，在jQuery 1.3中，前導的@符號已經被廢除！
如果想要兼容最新版本，只需要簡單去掉@符號即可。


程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute] 匹配包含給定屬性的元素。
//查找所有含有 id 属性的 div 元素
var str=' ';//此變數顯示訊息用的
$("div[id]").text(
function(n,value) {
str += ' value: ' + value;
});
alert(str);
});
</script>
</head>
<body>
<div>
 <p>Hello!</p>
</div>
<div id="test2">123</div>
</body>
</html>


顯示結果：




2、
[attribute=value]
匹配給定的屬性是某個特定值的元素



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute=value] 匹配給定的屬性是某個特定值的元素
//查找所有 name 属性是 audi 的 input 元素
//將所有 name 属性是 audi 的 input checked元素設為true
$("input[name='audi']").attr("checked", true);
//將所有 name 属性是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name='audi']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audi" value="A1" />奧迪  A1
<input type="checkbox" name="audi" value="R8" />奧迪   R8
<input type="checkbox" name="lexus" value="GT200h" />LEXUS GT 200h
</body>
</html>


顯示結果：




3、
[attribute!=value]
匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。

此選擇器等價於:not([attr=value])<br>要匹配含有特定屬性但不等於特定值的元素，
請使用[attr]:not([attr=value])


程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素。
//查找所有 name 属性不是 audi 的 input 元素
//將所有 name 属性不是 audi 的 input checked元素設為true
$("input[name!='audi']").attr("checked", true);
//將所有 name 属性不是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name!='audi']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audi" value="A1" />奧迪  A1
<input type="checkbox" name="audi" value="R8" />奧迪   R8
<input type="checkbox" name="lexus" value="GT200h" />LEXUS GT 200h
</body>
</html>



顯示結果：






4、
[attribute^=value]
匹配給定的屬性是以某些值開始的元素



程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute^=value] 匹配給定的屬性是以某些值開始的元素
//查找所有 name 属性是 audi開頭 的 input 元素
//將所有 name 属性是 audi開頭 的 input checked元素設為true
$("input[name^='audi']").attr("checked", true);
//將所有 name 属性是 audi開頭 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name^='audi']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="audiA1" value="A1" />奧迪  A1
<input type="checkbox" name="audiR8" value="R8" />奧迪   R8
<input type="checkbox" name="lexusGT" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="lexusES" value="ES300h" />LEXUS ES 300h
</body>
</html>



顯示結果：





5、
[attribute$=value]
匹配給定的屬性是以某些值結尾的元素



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute$=value] 匹配給定的屬性是以某些值結尾的元素
//查找所有 name 属性是 audi結尾的 input 元素
//將所有 name 属性是 audi結尾 的 input checked元素設為true
$("input[name$='audi']").attr("checked", true);
//將所有 name 属性不是 audi 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[name$='audi']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>


顯示結果：





6、
[attribute*=value]
匹配給定的屬性是以包含某些值的元素



程式範例：
<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attribute*=value] 匹配給定的屬性是以包含某些值的元素
//查找所有 name 属性包含 u 的 input 元素
//將所有 name 属性包含 u 的 input checked元素設為true
$("input[name*='u']").attr("checked", true);
//將所有 name 属性包含 u 的 input
var str=' ';//此變數顯示訊息用的
$("input[name*='u']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>



顯示結果：






7、
[attrSel1][attrSel2][attrSelN]
複合屬性選擇器，需要同時滿足多個條件時使用。



程式範例：

<!DOCTYPE html>
<html>
<head>
<title>[jQuery]jQuery Selector 之屬性類</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script>

<script>
$(document).ready(function(){
//[attrSel1][attrSel2][attrSelN] 複合屬性選擇器，需要同時滿足多個條件時使用。
//查找所有 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 元素
//將 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 元素 checked元素設為true
$("input[id][name$='i']").attr("checked", true);
//將 含有 id 属性 , 並且它的 name 属性是以  i 结尾 的 input 提示出來
var str=' ';//此變數顯示訊息用的
$("input[id][name$='i']").val(function() {
str +=  ' name: ' + this.name + ' -- ' +
  ' value: ' + this.value;
});
alert(str);
});
</script>
</head>
<body>
我喜歡的車子：
<input type="checkbox" id="audi_r8" name="A1_audi" value="A1" />奧迪  A1
<input type="checkbox" name="R8_audi" value="R8" />奧迪   R8
<input type="checkbox" id="lexus_gt" name="GT_lexus" value="GT200h" />LEXUS GT 200h
<input type="checkbox" name="ES_lexus" value="ES300h" />LEXUS ES 300h
</body>
</html>


顯示結果：




張貼者： 於 星期二, 4月 02, 2013 0 意見
標籤： , ,
訂閱： 文章 (Atom)

標籤

Oracle (150) Oracle DB (144) Oracle_DB (143) Oracle SQL (135) JAVA (84) css-基本類 (65) MySQL (59) CSS Selector (58) jQuery (49) JavaScript-基本類 (39) Spring Boot (38) JavaScript (37) JavaScript HTML DOM (37) JavaScript-HTML_DOM (36) CSS3 (30) JAVA-基本類 (28) jQuery UI (27) Apache (23) Oracle GROUP BY (20) datepicker (20) Android (18) Oracle Date (17) c (17) JAVA-lang套件 (16) Linux (16) Oracle Sub Query (16) Spring-基本類 (16) jQuery-基本類 (16) MySQL-進階系列教學 (15) Android基本類 (14) Grails (14) Oracle join (14) SQLite (13) Spring (13) WIN7-基本類 (13) grails-基本類 (13) linux cent os (13) CKEditor (12) JAVA-流程控制類 (12) JAVA_Spring (12) PHP (11) Spring MVC (11) MySQL-基本系列教學 (10) Notepad (10) Notepad++ (10) SQLite for java (10) Windows (10) c/c++ (10) eclipse (9) jQuery-Selector (9) sqldeveloper (9) DB_Toad (8) JAVA_IDE_Eclipse (8) JavaScript-String類 (8) MySQL DB Toad (8) MySQL-DATE相關 (8) MySQL-函式相關 (8) Spring Bean (8) Android Studio (7) HTML5 (7) Hibernate (7) JAVA-OCWCD (7) JavaScript-陣列類 (7) Docker (6) JAVA-程式分享 (6) JAVA.util套件 (6) JavaScript-數學類 (6) MinGw (6) MySQL-其它類 (6) Servlet (6) centos (6) Apache_Tomcat (5) Apache套件_POI (5) CSS (5) JavaScript-Date物件 (5) JavaScript-其它類 (5) PostgreSQL (5) httpd (5) log4j (5) 基本資訊 (5) 開發工具 (5) CSS Properties (4) Dev-C++ (4) IntelliJ IDEA (4) Oracle DDL (4) Sublime (4) TortoiseSVN (4) apache_Maven (4) Android NDK (3) Eclipse IDE for C/C++ (3) Hibernate-基本類 (3) JAVA-問題 (3) JAVA-綀習分享 (3) JVM (3) Linux 指令 (3) Proxy Server (3) Spring Mobile (3) Spring web (3) Squid (3) VirtualBox (3) maven (3) zk (3) 生活其它 (3) Bootstrap (2) Filter (2) JAVA_IO (2) JAVA_其它_itext套件 (2) JBoss-問題 (2) JSP (2) Jboss (2) Listener (2) MySQL-語法快速查詢 (2) Spring AOP (2) Spring Batch (2) Spring Boot Actuator (2) Spring i18n (2) Subversive (2) Tomcat 8 (2) UML (2) WebJars (2) WinMerge (2) c++ (2) c語言綀習題 (2) jQuery Mobile (2) jQuery-事件處理 (2) jQuery-套件類 (2) putty (2) svn (2) weblogic (2) Apache_JMeter (1) Apache套件_BeanUtils (1) Apache套件_StringUtils (1) Base64 (1) Google API (1) HTML5-基本類 (1) Heap (1) JAVA 7 (1) JAVA SE 、JAVA EE、JAVA ME (1) JAVA 日期 (1) JAVA-OCJP (1) JAVA-WEB (1) JAVA_IDE (1) JAVA其它 (1) JBoss Server (1) JDK (1) JMX (1) JRE (1) Java RMI (1) Java String (1) Joda Time (1) Linux_其它 (1) MySQL教學 (1) Oracle_VirtualBox (1) SQL Server (1) SWT (1) Session (1) Stack (1) Struts 2 (1) Tool (1) ZK Studio (1) csv (1) grails-其它類 (1) jQuery-進階 (1) java mail (1) java web (1) java8 (1) jsoup (1) mockmvc (1) modules (1) tomcat (1) win10 (1) 其它類 (1) 圖片工具 (1) 模擬器 (1) 讀書分享 (1) 開發資訊 (1)

精選文章

初學 Java 的 HelloWorld 程式

撰寫一個JAVA程式 public class HelloWorld{ public static void main(String[ ] args){ System.out.println("我第一支Java程式!!"); } } ...