jQuery入门[2]－选择器[转]
生活随笔
收集整理的這篇文章主要介紹了
jQuery入门[2]－选择器[转]
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
jQuery之所以令人愛不釋手，在于其強大的選擇器表達式令DOM操作優雅而藝術。
jQuery的選擇符支持id,tagName,css1-3 expressions,XPath，參見：http://docs.jquery.com/Selectors
DEMO:
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title>Selector</title>
????<script?src="../scripts/jquery-1.2.3.intellisense.js"?type="text/javascript"></script>
</head>
<body>
????<input?value="1"?/>?+?
????<input?value="2"?/>
????<input?type="button"?value="="?/>
????<label> </label>
????<script?type="text/javascript">
????????$("input[type='button']").click(function(){
????????????var?i?=?0;
????????????$("input[type='text']").each(function(){
????????????????i?+=?parseInt($(this).val());
????????????});
????????????$('label').text(i);
????????});
????????$('input:lt(2)')
????????????.add('label')
????????????.css('border','none')
????????????.css('borderBottom','solid?1px?navy')
????????????.css({'width':'30px'});
????</script>
</body>
</html>運行效果如下：
代碼分解：
$("input[type='button']")用于找到type屬性為button的input元素（此為CSS表達式，IE7才開始支持，所以在IE6中通常用jQuery的這種表達式代替CSS代碼設置樣式）。click()函數為button添加click事件處理函數。
在button_click時，$("input[type='text']")找出所有輸入框，each()函數遍歷找出來的數組中的對象的值，相加后設到label中。
??????? $('input:lt(2)')
??????????? .add('label')
兩行代碼意為：所有input中的前面兩個（lt表示序號小于）再加上label對象合并成一個jQuery對象。
??????????? .css('border','none')
??????????? .css('borderBottom','solid 1px navy')
??????????? .css({'width':'30px'});
以上三行代碼都是針對之前的jQuery對象設置CSS樣式，如果一次需要設置多個CSS值，可用另一種形式，如：
??? ??? ??? .css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
css()函數如果只傳一個字符串參數，則為取樣式值，比如css('color')為取得當前jQuery對象的樣式屬性color的值。jQuery對象有多種這樣的函數，比如，val('')為設value，val()為取value，text('text')為設innerText,text()為取得innerText，此外還有html(),用于操作innerHTML,而click(fn)/click(),change(fn)/change()……系統函數則為事件的設置處理函數與觸發事件。
由于多數jQuery對象的方法仍返回當前jQuery，所以jQuery代碼通常寫成一串串的，如上面的
??????????? .css('border','none')
??????????? .css('borderBottom','solid 1px navy')
??????????? .css({'width':'30px'});
，而不需要不斷重復定位對象，這是jQuery的鏈式特點，后面文章還會有補充。
referrence:http://docs.jquery.com/Selectors
jQuery的選擇符支持id,tagName,css1-3 expressions,XPath，參見：http://docs.jquery.com/Selectors
DEMO:
<!DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html?xmlns="http://www.w3.org/1999/xhtml">
<head>
????<title>Selector</title>
????<script?src="../scripts/jquery-1.2.3.intellisense.js"?type="text/javascript"></script>
</head>
<body>
????<input?value="1"?/>?+?
????<input?value="2"?/>
????<input?type="button"?value="="?/>
????<label> </label>
????<script?type="text/javascript">
????????$("input[type='button']").click(function(){
????????????var?i?=?0;
????????????$("input[type='text']").each(function(){
????????????????i?+=?parseInt($(this).val());
????????????});
????????????$('label').text(i);
????????});
????????$('input:lt(2)')
????????????.add('label')
????????????.css('border','none')
????????????.css('borderBottom','solid?1px?navy')
????????????.css({'width':'30px'});
????</script>
</body>
</html>運行效果如下：
代碼分解：
$("input[type='button']")用于找到type屬性為button的input元素（此為CSS表達式，IE7才開始支持，所以在IE6中通常用jQuery的這種表達式代替CSS代碼設置樣式）。click()函數為button添加click事件處理函數。
在button_click時，$("input[type='text']")找出所有輸入框，each()函數遍歷找出來的數組中的對象的值，相加后設到label中。
??????? $('input:lt(2)')
??????????? .add('label')
兩行代碼意為：所有input中的前面兩個（lt表示序號小于）再加上label對象合并成一個jQuery對象。
??????????? .css('border','none')
??????????? .css('borderBottom','solid 1px navy')
??????????? .css({'width':'30px'});
以上三行代碼都是針對之前的jQuery對象設置CSS樣式，如果一次需要設置多個CSS值，可用另一種形式，如：
??? ??? ??? .css({'border':'none','borderBottom':'solid 1px navy','width':'30px'});
css()函數如果只傳一個字符串參數，則為取樣式值，比如css('color')為取得當前jQuery對象的樣式屬性color的值。jQuery對象有多種這樣的函數，比如，val('')為設value，val()為取value，text('text')為設innerText,text()為取得innerText，此外還有html(),用于操作innerHTML,而click(fn)/click(),change(fn)/change()……系統函數則為事件的設置處理函數與觸發事件。
由于多數jQuery對象的方法仍返回當前jQuery，所以jQuery代碼通常寫成一串串的，如上面的
??????????? .css('border','none')
??????????? .css('borderBottom','solid 1px navy')
??????????? .css({'width':'30px'});
，而不需要不斷重復定位對象，這是jQuery的鏈式特點，后面文章還會有補充。
referrence:http://docs.jquery.com/Selectors
轉載于:https://www.cnblogs.com/muou/archive/2009/09/02/1558761.html
總結
以上是生活随笔為你收集整理的jQuery入门[2]－选择器[转]的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 实现 VC 最小化到 托盘
- 下一篇： [转载MSDN]IIS 7.0中的Liv