<html> <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的not方法,not方法与add方法有些不一样的地方,not方法不支持直接选择条件,使用时需要将选择好的Object转递给not。
jQuery(‘#formID input’).add(‘#formID textarea’).not(jQuery(‘#formID input[type=button]‘)).method…
这里还有第三种方法,也用是选择器中加“,”来追加选择项。
jQuery(‘#formID input[type=text],#formID textarea’).method…
选择器中的逗号起到了一个或者的作用,和add()方法的效果一模一样的
:eq(index) | $(“ul li:eq(3)”) | 列表中的第四个元素(index 从 0 开始) |
:gt(no) | $(“ul li:gt(3)”) | 列出 index 大于 3 的元素 |
:lt(no) | $(“ul li:lt(3)”) | 列出 index 小于 3 的元素 |
:not(selector) | $(“input:not(:empty)”) | 所有不为空的 input 元素 |
.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的链式特点。